在前后端分离开发过程中，后端先给出API接口文档，由于前后端开发进度的问题，后台可能不能及时作出接口，那么就需要我们前端自己模拟数据，使用mockjs可以进行模拟数据。
1.安装
npm install mockjs
使用步骤如下：
1.在src文件夹下创建 mock文件夹
2.准备json数据(mock文件夹中创建相应的JSON文件)–格式化一下，别留有空格
3.开始mock（虚拟的数据) ，通过mockjs 模块实现，
2.准备mock 数据及接口
我们以登录为例，返回token
src/mock/mockServer.js
//通过mockjs模块实现模拟数据
//对外暴露的是一个对象
import Mock from 'mockjs';
//模拟的数据需要引入进来
//对于一些模块：图片、json文件默认对外暴露【虽然你没有书写但是它已经暴露了】
import loginData from './login.json';
//通过Mock对象模拟出虚拟数据
//Mock依赖包对外暴露的是一个Mock对象，这个对象提供的一个mock方法可以模拟数据
//参数:第一个参数 模块数据将来axios请求的地址 第二个参数:获取到的数据
//注意:项目当中发请求的接口
//第一种:真实服务器接口 http://39.98.123.211/api/list/xx
//第二种:mock出来数据接口 xxx/mock/banner
//路径当中出现/api 真实接口 /mock 模拟数据
Mock.mock("/mock/login",{
code:200,data:loginData});
login.json
{
"token": "12333"
}
3.创建API接口统一调度
在src/api/mockRequest.js 文件
//axios进行二次封装
import axios from 'axios';
//创建axios实例[创建出来的实例即为axios，只不过可以配置一些东西]
let instance = axios.create({
//可以给请求路径中添加一些参数
baseURL: "/mock",
//设置请求时间（5S）
timeout: 5000
});
//请求拦截器:在发请求之前可以检测到，可以干一些事情
instance.interceptors.request.use((config) => {
//config配置对象，这里面有请求头
//config，请求拦截器的一个配置对象
return config;
});
//响应拦截器：服务器的数据已经返回了，可以干一些事情
instance.interceptors.response.use((res) => {
//简化服务器返回的数据格式
//服务器数据返回进度条结束
return res.data;
}, (error) => {
//终止promise链
return Promise.reject(error);
});
//对外暴露二次封装的axios
export default instance;
src/api/index.js
//统一管理项目全部接口的文件
//如果获取mock接口的数据，利用底下axios
import mockRequest from './mockRequest';
//登录
//api/user/passport/register post phone code password
export const reqLogin = (username,password)=> mockRequest({
url:`/login`,method:'post',data:{
username,password}});
4.使用
import {
reqLogin} from "@/api";
//当前的这个action，向服务器发起登录请求
let result = await reqLogin(username, password);
//切记:当用户登录成功以后，服务器会返回相应数据信息，数据信息当中包含token
//登录成功一定是有token，登录没有成功【没有token】
//用户登录成功，一般只是返回token，很少返回用户名
//将来需要在发请求（获取用户名字的）携带token给服务器【用户信息】
if (result.code == 200) {
//如果仓库,已经存储token,用户一定是登陆了
commit("SETTOKEN", result.data.token);
//持久化存储token
setToken(result.data.token);
return 'ok';
} else {
//登录失败
return Promise.reject(result.message);
}