什么是MockJS
在前后端分离只的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢? MockJS通过栏截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。
准备工作
首先安装MockJS，安装 axios只是为了发送AJAX请求测试模拟的接口，使用其他方式如原生AJAX请求或s.ajax都是可以的，使用其他方式发送AJAX请求无需安装axios。
npm install mockjs --save npm install axios --save
在main.js中加入使mock生效
正式开始
MockJS有两种方式定义模拟接口返回的数据，一种是使用数据模板定义，这种方式自由度大，可以自定义各种随机的数据类型，一种是使用MockJS的Random工具类的方法定义，这种方式自由度小只能随机出MockJS提供的数据类型。
数据模板的格式为“属性名生成规则·属性值”,生成规则决定了生成的数据的属性值。 生成规则一共有7种，分别是:
'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value 'name|+step': value
代码示例：
// 引入express, mockjs const express = require('express'); const Mock = require('mockjs'); // 创建一个express服务器的对象 const app = express(); // 设置跨域问题 app.all("*", (req, res, next)=>{ // 设置任何域名都可以请求我们的服务器 res.header("Access-Control-Allow-Origin", "*"); // 设置请求的的方式 res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE"); // 设置默认请求头和字符编码格式 res.header("Content-type", "application/json;charset=utf-8"); next() }) // 创建了一个 /test 的接口，get请求形式的接口 app.get("/test", (req, res) => { // 调用Mock对象的mock方法来生成随机数据 // const data = Mock.mock({ // "product_id|+2": 1 // }) Mock.Random.extend({ status: function(){ // 编写代码完成状态数据的设置并返回 const arr = ["已收货", "未收货", "已付款", "未付款", "已评价"] return this.pick(arr) } }) const data = Mock.mock({ "list|5":[ { // "product_id|+2": 1, // "name|1-3":"jack", // "money|1-100.2-6": 1, // "isPass|1":true, // "myDate": '@date()', // "name":"@cname", "myStatus": "@status()", } ] }) res.send(data); }) // 让我们的服务器在某个端口运行 app.listen(3000); console.log("服务器已经运行在 http://localhost:3000")
Mock.mock template 形式
Mock.mock function 形式
自定义宽展函数
