Mock.js——强大的后端数据模拟工具
在我们日常开发中，虽然大多都是前后端分离的开发模式，但是还是会遇到一些前后端协调的问题。比如有时候前端页面已经开发好，后端接口却还在开发中，而我们有些样式又必须要有数据才能看效果，这时候该怎么办呢？
通常情况下，我们的做法是自己手动造一些假数据，但是当数据量大且需要考虑到各种极端情况时，这种自造假数据的方式显然不是最好的解决方法。那么，我们能不能让程序自己来随机产生一些符合一定规则的数据呢？
答案当然是肯定的。今天介绍的一款JS插件就是专门用来实现这个功能的，那就是 Mock.js，它可以用来批量模拟后端数据，并且可以按照我们自己设定的规则来随机产生，非常强大和实用！
一、用法
Mock.js 有两种定义规范，一种是数据模板定义，另一种是数据占位符定义。
1. 数据模板定义
'name|rule': value
其中，name为 属性名，rule为 生成规则（可选），value为 属性值。属性名和生成规则之间用符号|隔开。
关于生成规则rule，我们可以结合 属性值的数据类型 来看。
① 字符串
1）'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。例如：
// JS代码
Mock.mock({
"string|1-10": "" // 重复n次，n为1~10
})
// 生成结果
{
"string": "" // 这个的个数是1-10之间（包括1和10）随机的
}
2）'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count。例如：
// JS代码
Mock.mock({
"string|3": "" // 重复3次
})
// 生成结果
{
"string": ""
}
② 数字
1）'name|+1': number
属性值自动加 1，初始值为 number。例如：
// JS代码
Mock.mock({
"number|+1": 202 // 初始值为202
})
// 生成结果
{
"number": 202
}
上面这样的单个对象是看不出来自增效果的，但如果换成数组项的话就很清楚了，我们再看看这个例子：
// JS代码
Mock.mock({
"list|6": [ // list为属性名，因为属性值为数组（后面会讲到），所以6代表数组项个数
{
"number|+1": 1 // +1代表自增步长为1，属性值1代表从1开始自增
}
]
})
// 生成结果
{
list: [
{"number": 1},
{"number": 2},
{"number": 3},
{"number": 4},
{"number": 5},
{"number": 6}
]
}
2）'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 仅用于确定类型。例如：
// JS代码
Mock.mock({
"number|1-100": 100 // 生成1~100之间的随机数（包含1和100），属性值100仅用于确定值类型为数字
})
// 生成结果
{
"number": 66 // 随机数
}
3）'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位，属性值 number 同样仅用于确定类型。例如：
// JS代码
Mock.mock({
"number|1-100.1-10": 1 // 属性值1仅用于确定值为数字类型
})
// 生成结果
{
"number": 4.315285424 // 整数部分为1~100之间随机数，小数部分位数为1~10之间随机数
}
当然还可能有另外两种情况：
'name|count.dmin-dmax': number
'name|min-max.dcount': number
其实情况大同小异，一个是整数部分固定而小数部分位数随机，另一个则是整数部分大小随机而小数部分位数固定。
我们只需牢记：
整数部分为固定值 → 整数部分就是该固定值
整数部分为范围（带符号-） → 整数部分就是该范围内的随机值
小数部分为固定值 → 小数部分的 位数 就是该固定值
小数部分为范围（带符号-） → 小数部分的 位数 就是该范围内的随机值
③ 布尔型
1）'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。例如：
// JS代码
Mock.mock({
"boolean|1": true
})
// 生成结果
{
"boolean": true // 随机产生
}
2）'name|min-max': boolean
随机生成一个布尔值，值为 boolean 的概率是 min / (min + max)，值为 !boolean 的概率是 max / (min + max)。例如：
// JS代码
Mock.mock({
"boolean|1-2": true // 值为true的概率为1/3
})
// 生成结果
{
"boolean": false
}
④ 对象
1）'name|count': object
从属性值 object 中随机选取 count 个属性。例如：
// JS代码
Mock.mock({
"object|2": { // 随机选取2个属性
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})
// 生成结果
{
"object": {
"320000": "江苏省",
"340000": "安徽省"
}
}
2）'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。例如：
// JS代码
Mock.mock({
"object|2-4": { // 随机选取n个属性（n为2~4之间随机数）
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
// 生成结果
{
"object": {
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
}
⑤ 数组
1）'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。例如：
// JS代码
Mock.mock({
"array|1": [ // 随机选 1 个
"AMD",
"CMD",
"UMD"
]
})
// 生成结果
{
"array": "CMD"
}
2）'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。例如：
// JS代码
Mock.mock({
"array|+1": [ // 顺序选 1 个
"AMD",
"CMD",
"UMD"
]
})
// 生成结果
{
"array": "AMD"
}
这个和上面例子中的自增情况一样，只有在数组中才能体现顺序选择的效果。例如：
// JS代码
Mock.mock({
"list|6": [
{
"array|+1": [
"AMD",
"CMD",
"UMD"
]
}
]
})
// 生成结果
{
list: [
{"array": "AMD"},
{"array": "CMD"},
{"array": "UMD"},
{"array": "AMD"},
{"array": "CMD"},
{"array": "UMD"}
]
}
3）'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。例如：
// JS代码
Mock.mock({
"array|1-10": [ // 生成的数组项个数在1~10之间随机
"Mock.js"
]
})
// 生成结果
{
"array": [
"Mock.js",
"Mock.js",
"Mock.js",
"Mock.js",
"Mock.js"
]
}
4）'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。例如：
// JS代码
Mock.mock({
"array|3": [ // 生成的数组项个数固定为3
"Mock.js"
]
})
// 生成结果
{
"array": [
"Mock.js",
"Mock.js",
"Mock.js"
]
}
⑥ 函数
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。例如：
// JS代码
Mock.mock({
'foo': 'Syntax Demo',
'name': function() {
return this.foo
}
})
// 生成结果
{
"foo": "Syntax Demo",
"name": "Syntax Demo"
}
⑦ 正则表达式
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。例如：
// JS代码
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// 生成结果
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
2. 数据占位符定义
@占位符
@占位符(参数 [, 参数])
数据占位符的种类有很多，可用于随机生成各种类型的数据。例如：
Mock.mock('@boolean') // 随机生成布尔值
Mock.mock('@natural(60, 100)') // 随机60~100之间的自然数
Mock.mock('@integer') // 随机生成整数
Mock.mock('@date') // 随机生成日期
还有很多很多，这里限于篇幅就不详细罗列了，具体详见→Mock官网。
二、两种规范的综合运用
在实际项目中通常两种规范我们都会用到，下面我们来使用Mock.js生成一个用户信息列表。
1. HTML部分
首先先创建表格，目前只包含表头部分
<table class="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>生日</th>
<th width="300">简介</th>
<th>Email</th>
<th>博客</th>
<th>住址</th>
</tr>
</table>
2. 引入Mock.js
<script src="scripts/mock-min.js"></script>
3. 生成用户列表数据
let people = Mock.mock({
'data|20': [ // 生成20组数据
{
'name': '@cname', // 中文姓名
'age|0-120': 1, // 年龄，范围为0~120岁
'sex': '@cword("男女")', // 性别，从字符串“男女”中随机选一个字
'birthday': '@date', // 生日，默认格式为“yyyy-MM-dd”
'description': '@csentence(10,100)', // 简介，字数在10~100之间的中文句子
'email': '@email', // Email地址
'blog': '@url', // 个人博客链接
'address': '@county(true)' // 住址，格式为“省 市 区县”
}
]
});
4. 将数据添加至表格中
let trs = people.data.map(person => {
let tr = '<tr>';
for(let item in person){
tr += '<td>' + person[item] + '</td>';
}
tr += '</tr>';
return tr;
}).join('');
document.querySelector('.table').innerHTML += trs;
当然，由于是虚拟数据，所以并没有把年龄和生日联系在一起，这都是次要的，关键是我们已经把这样一个数据结构成功模拟出来了。
重点总结
① 数据模板定义规范生成的数据均为对象类型，而数据占位符定义规范生成的数据可以是单纯的字符串、数字和布尔型等基本数据类型。
② 字符串玩的是重复；数字玩的是自增和随机，整数随机的是值，小数随机的是位数；布尔型再随机也就真假俩值；对象随机的是属性个数；数组玩的是随机、顺序和重复；函数返回啥就是啥；正则反向匹配生成字符串。
