mockjs 的使用

最近前后端有点不协调，用了一下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原理是直接拦截你的请求，然后返回数据。