mockjs

mock.js

什么是mock.js

在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。

mock.js 下载

npm install mockjs --save
npm install axios --save

创建和引入

创建

require('./mock.js');

引入

import Mock from 'mockjs';

mock.js的使用

1.数据模板定义模拟接口返回值
数据模板的格式为 ‘属性名|生成规则’:‘属性值’ ,生成规则决定了生成的数据的属性值。

生成规则一共有7种，分别是：
1 ‘name|min-max’: value
2 ‘name|count’: value
3 ‘name|min-max.dmin-dmax’: value
4 ‘name|min-max.dcount’: value
5 ‘name|count.dmin-dmax’: value
6 ‘name|count.dcount’: value
7 ‘name|+step’: value

Mock.mock(/api\/users/,{
 msg:200,
 status:0,
 "list|10":[
  {
   "name":"@cname",  //名字
   "id|+1":996,  //编号
   "age|16-80":1,  //年龄
   "gender|1":[1,2,3],  //性别
   "salary|7000-20000.2":1,  //薪资
   "tel":/1\d{10}/, //电话
   "email":/[a-z]{2,10}@(126|163|qq|gmail)\.com/,  //邮箱
   "address":"@county(true)",  //地址
   "motto":"@csentence",  
   "qq":/\d{5,12}/  //qq
  }
 ]
})

请求出来的数据如下，数据都是随机请求的，并不是真实的

详情请看mock.js官网