最近前后端有点不协调，用了一下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
版权声明：本文为博主原创文章，转载请附上博文链接！