在vue中使用mock模擬數據（前後端分離）
最近前後端有點不協調，用了一下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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
在vue中使用mock模擬數據（前後端分離）