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中調用並利用返回的請求渲染頁面
更加詳細的教程