最近前後端有點不協調，用了一下mockjs，下面記錄一下

我的環境是webpack+npm+vue，首先就用npm安裝mockjs，安裝命令是 npm install mockjs --save-dev，使用淘寶映象也是可以的，就是使用cnpm替換npm，一樣的效果

安裝好mockjs後，在main.js裡引入mockjs

// 引入mockjs
require('./mock.js')
然後在src資料夾下新建一個js檔案，裡面寫mockjs的規則，詳細可以參照mockjs官網：http://mockjs.com/
// 引入mockjs
const Mock = require('mockjs');
// 獲取 mock.Random 物件
const Random = Mock.Random;
// mock一組資料
const productData = function() {
let Data = [];
for (let i = 0; i < 100; i++) {
let data = {
name: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
date: Random.date() // Random.date()指示生成的日期字串的格式,預設為yyyy-MM-dd
}
Data.push(data)
}

return {
Data: Data
}
}

// Mock.mock( url, post/get , 返回的資料)；
Mock.mock('/user/login', 'post', productData );
Mock.mock('/user/query', 'post', productData);
然後在需要請求資料的頁面上呼叫

look(){
axios.post("/user/query").then(res=>{
console.log(res);
}).catch(res=>{
console.log("err")
});
}
在控制檯裡就可以看到請求返回的資料了

如果是使用vue+vuex+axios做互動，需要返回相應的資料，如果從一開始的登入就做了許可權，那麼介面的baseURI就寫成空（“”），api裡寫請求的地址，介面要從登入開始一路做下去，通過判斷返回碼來寫的攔截器最好停掉，想想還是挺麻煩的，不如還是等後端寫介面吧。或者只是想測個別的介面，可以用上面的axios方式進行互動，需要在當前頁面引入axiosjs，在後端寫好後再進行相應的修改，修改量較小。總體來說，mockjs適合做資料的互動（這個資料包括基本資料，圖片，日期，地址等），不適合做有許可權的，畢竟造一遍這樣的許可權資料也是挺麻煩的，若後端的介面與你造的不一樣，後面要做的修改就多了。因為mockjs原理是直接攔截你的請求，然後返回資料。
---------------------
作者：lx_1024
來源：CSDN
原文：https://blog.csdn.net/lx_1024/article/details/79083715
版權宣告：本文為博主原創文章，轉載請附上博文連結！