本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
介绍
本期给大家介绍一个可以随机模拟数据的库——mock.js，它是一个模拟数据生成器，帮助前端开发和原型与后端进程分离，减少一些开发时联调测试成本。它支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据的模拟。而且不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
看就是这么简单，我们实现可以与后端协定好接口格式和字段，然后可以在前端开发中拦截ajax请求把模拟数据直接传过去，也可以通过在线平台或搭建中端做接口模拟。后面，等后端完成接口开发，就可以直接替换接口就行了，非常提高效率。
他的API有非常丰富，我们今天先来学习一下他常用的API有哪些，看懂后绝大部分数据就直接用了。
正文
1.指定数量
A.固定数量
'name|num': any
Mock.mock({
"star|3": "★",
"num|3": 1,
"arr|3": [{"level":1}],
"obj|3":{"a":1,"b":2,"c":3,"d":4,"e":5},
"bool|3":false
})
例如，输入固定值3则：
- star：连续返回3个★
- num：固定返回数值3
- arr：返回数组内3个对象，如果不够固定值则从第一个值开始重复下去直到填满
- obj：随机选择3个对象里的属性返回出来，如果不够固定值则有多少返回多少
- bool：随机true和false
B. 生成随机数量
'name|min-max': any
Mock.mock({
"star|1-5": "★",
"num|1-5": 1,
"arr|1-5": [{"level":1}],
"obj|1-5":{"a":1,"b":2,"c":3,"d":4,"e":5},
"bool|1-5":false
})
例如，star随机生成1到5个★，如图其后皆为随机1到5个
2.数值自加
适用场景：ID值等唯一值在列表中的模拟。
'name|+number': number|array
Mock.mock({
"id|+1": 1,
"code|+1": ["a","b","c","d","e"]
})
例如，在模拟下列数据，中将每隔一个数据，id值都会在上一个值得基础上自加5。
3.随机颜色
mock内置随机颜色的函数 —— @color | @hsl | @rgba | @rgb | @hex
Mock.mock({
"status": 1,
"msg": "success",
"data": {
"list|10": [{
"id|+1": 1,
"color": "@color"
}]
}
})
4.生成图片
mock内置了生成随机图片的函数 —— @image
Random.image( size?, background?, foreground?, format?, text? )
- size：尺寸，如100x100
- background：背景色，如#FFFFFF
- foreground：前景色，也就是图片中文字颜色，如#333333
- format：图片类型，如png
- text：图片中文字
Mock.mock({
"status": 1,
"msg": "success",
"data": {
"list|10": [{
"id|+1": 1,
"icon": "@image(240x160, @color, #FFFFFF, png, icon)"
}]
}
})
5.内置常用函数
mock出了随机颜色和图片之外，还内置了很内置函数，接下来我们介绍几个使用最频繁的几个：
Mock.mock({
"status": 1,
"msg": "success",
"data": {
"list|5": [{
"id": "@id",
"name": "@cname",
"title":"@ctitle(3,10)",
"date":"@datetime",
"email":"@email",
"des": "@cparagraph(1,3)",
"province":"@province",
"city":"@city(true)",
"address":"@county(true)",
"link": "@url"
}]
}
})
- @id：随机生成唯一值
- @cname：随机生成中文名字
- @ctitle(min?,max?)：随机生成中文标题
- @date("yyyy-MM-dd HH:mm:ss")：随机生成时间
- @email：随机生成邮箱地址
- @cparagraph(min?,max?)：随机生成中文段落
- @province：随机生成省
- @city(boolean?)：随机生成市，默认为false，不传则只显示市，不显示省，传入true，则省市全显示
- @county(boolean?)：随机生成区，默认为false，不传则只显示区，不显示省市，传入true，则省市区全显示
- @url：随机生成链接
结语
相信看完以上五条规则，你已经完全可以自由模拟想要的数据了，此时，我们可以通过用node搭建一个中端做个测试地址去处理要模拟的数据。或者用fastmock，这类线上平台去实现，他们同样支持mock API，如果自己开发或团队比较小也可以做请求拦截用再用mock模拟。总之，不管那种方案，都会对团队开发的效率有极大的提升。
