为什么要使用mock
前端开发的过程当中不仅仅要面对产品,测试，后端还有的用户大佬们，正因为前端要面向的人比较多，在开发的过程当中需要对接和考虑的因素也就比较多了。在敏捷开发小组当中，往往前端会以极快的速度码好页面然后开始催促后端提供接口，有能力的小组同样也会以极快的速度提供好接口文档和接口出来。但是速度较慢的后端当还停留在建表阶段时，我们就不能坐以待毙去苦苦等待了，所以就会出现本文要提及的mock了
mock的git文档
如何安装使用mock
# npm安装
npm install mockjs
# 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
这就是最简单的安装使用mock数据了，当然不引入mock我们同样可以在本地去写json文件引入作为自己的数据源。那为什么我们还要去多此一举去使用mock来模拟数据呢，我在本地写入json数据难道就不香吗。当然是很香了，但是mock之所以会出现是因为它提供的API能为我们提供大量的数据，让我们免于造数据的痛苦。我们可以把mock当成一个数据库，里面存放着不同的表，当你需要什么数据时通过api去拿就好了（当然mock其实也就是这样的）
mock的常用API
Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模拟数据。
Mock.mock()
Mock.mock( template ) 根据数据模板生成模拟数据。
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
rurl（可选）：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
rtype（可选）：表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template（可选）：表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)（可选）：表示用于生成响应数据的函数。
options指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。
Mock.setup()
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。
settings:必选
配置项集合。
timeout 可选
Mock.setup({
timeout: 400
}) // 延时400毫秒
Mock.setup({
timeout: '200-600'
}) // 延时200-600毫秒
Mock.Random（最常用）
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }
实例
// 模板定义
// mock/index.js
import Mock from "mockjs";
import "./extend_data"; //扩展数据
// mock数据模板
let template = {
"list|10-20": [
// 重复次数在10--20之间（数组中的每一项）,如果是单独一个数字表示重复n次
{
// 数组中的每一项数据模板
address: "@county()", // 生成随机的国家
name: "@name()", // 生成随机的名字
imgUrl: "@image()", //会随机生成一个图片url
id: "@id()", // 随机的id
"score|23-78.1-4": 1, // 是一个小数,整数部分在23-78之间,小数保留1-4位数
"isShow|1": true, // isShow的值一半可能是true，一半可能是false
"star|1-5": "nuc", // 重复字符串”nuc“,重复次数1-5次
"index|+1": 1, // 属性值自动加 1，初始值为 number。index:1,index:2,index:3...
"cities|5": ["@city()"], //属性值是一个数组,数组的每一项都是一个随机的城市，每一个数组的长度都是5
props: {
// 属性是一个对象
"population|100-1000": 1,
first: "@first()"
},
num: /\d{5,10}/, //属性值是正则，会生成符合正则表达式的数据,
funcTem: function (param) {
// 属性值是一个对象
// console.log(param.context.currentContext); // 返回当前属性funcTem所在的对象
return param.context.currentContext.id;
},
streetArr: "@streets" //每一项都是从模板数组中取的
}
]
};
// 启动mock
Mock.mock("/api/getAddress", "get", template);
// Mock.mock("/api/getPerson", "get", templatePerson);
export default Mock;
// mock的扩展方法
import Mock from "mockjs"; // 引入mock库
const random = Mock.Random;
random.extend({
streets: function () {
//这里的streets是将来要配合@使用的
var streetList = ["陈阳寨", "世纪大道", "渭阳西路", "天谷八路"];
return this.pick(streetList);
}
});
export default random;
mock数据接口调用
axios.get("/api/getAddress").then(res => {
console.log(res);
})
mock最强实例大全
小结
mock前端使用起来不难，只是Random类中的api比较多，需要使用的时候要去找对应的。标题有写过本节只针对前端本地使用mock，如果要真正的发起请求燃火获得mock数据的话就需要结合mock-sever来搭建了（纯手工打造前端后端分离项目中的 mock-server）。
