0.首先需要会在vue项目中安装mockjs以及简单的mockjs语法
1.目录分为api和mock：
在api.js中封装代理函数
在mock/data/user.js中进行mock，这里模拟的是一组用户数据
在mock/mock.js中配置请求模拟调试器
两个不同的index.js都只是为了在main.js中引入时好看一点？（打扰了，我也不知道其他原因）
2. 先以 载入页面时获取模拟的用户数据 这个场景为例：
api.js：
import axios from ‘axios‘;
let base = ‘‘;
export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };
（页面载入时会调用getUserList()方法）
（base类似于axios.defaults.baseURL，即发起请求时的主端口，这里base是空字符）
在调用getUserList()方法时，会向 /user/list 这个url 发起GET请求，并传递params作为本次axios请求的配置
那么是如何使得向这个地址发起的GET请求得到想要的回应嘞？那就要看下面两个文件了
先来看数据模拟的格式：语法啥的就不说了
import Mock from ‘mockjs‘;
const Users = [];
for (let i = 0; i < 86; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock(‘@county(true)‘),
‘age|18-60‘: 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}));
}
export { Users };
这个文件会export出一组模拟的数据
mock.js
import axios from ‘axios‘;
import MockAdapter from ‘axios-mock-adapter‘;
import { Users } from ‘./data/user‘;
let _Users = Users;
从data/user.js中取得已经模拟好的数据，在被调用时将这组数据作为回应发送出去
export default {
/**
* mock bootstrap
*/
bootstrap() {
//引导?
let mock = new MockAdapter(axios);
mock.onGet(‘/user/list‘).reply(config => {
let { name } = config.params;//调用getUserList()方法时传递的参数，这里是null
let mockUsers = _Users.filter(user => {//filter方法进行过滤
if (name && user.name.indexOf(name) == -1) {
//去掉不符要求的或已经存在的
return false;
}
return true;
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
200,
{
users: mockUsers //返回数据
}
]);
}, 1000);
});
});
}
关于reply()函数返回promise对象的问题，请参阅这里
关于Promise对象的复习，请看这里（超好懂）
在user.vue中调用并利用返回的请求渲染页面
更加详细的教程