在我们日常开发中, 虽然大多都是前后端分离的开发模式, 但是还是会遇到一些前后端协调的问题. 比如有时候前端页面已经开发好, 后端接口却还在开发中, 而我们有些样式又必须要有数据才能看效果, 这时候该怎么办呢?
通常情况下, 我们的做法是自己手动造一些假数据, 但是当数据量大且需要考虑到各种极端情况时, 这种自造假数据的方式显然不是最好的解决方法. 那么, 我们能不能让程序自己来随机产生一些符合一定规则的数据呢?
答案当然是肯定的. 今天介绍的一款 JS 插件就是专门用来实现这个功能的, 那就是 Mock.JS, 它可以用来批量模拟后端数据, 并且可以按照我们自己设定的规则来随机产生, 非常强大和实用!
一, 用法
Mock.JS 有两种定义规范, 一种是数据模板定义, 另一种是数据占位符定义.
1. 数据模板定义
'name|rule': value
其中, name 为 属性名, rule 为 生成规则(可选),value 为 属性值. 属性名和生成规则之间用符号 | 隔开.
关于生成规则 rule, 我们可以结合 属性值的数据类型 来看.
1 字符串
- 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": ""
- }
2 数字
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
其实情况大同小异, 一个是整数部分固定而小数部分位数随机, 另一个则是整数部分大小随机而小数部分位数固定.
我们只需牢记:
整数部分为固定值 → 整数部分就是该固定值
整数部分为范围(带符号 -) → 整数部分就是该范围内的随机值
小数部分为固定值 → 小数部分的 位数 就是该固定值
小数部分为范围(带符号 -) → 小数部分的 位数 就是该范围内的随机值
3 布尔型
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
- }
4 对象
- 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": "山西省"
- }
- }
5 数组
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"
- ]
- }
6 函数
'name': function
执行函数 function, 取其返回值作为最终的属性值, 函数的上下文为属性'name' 所在的对象. 例如:
- // JS 代码
- Mock.mock({
- 'foo': 'Syntax Demo',
- 'name': function() {
- return this.foo
- }
- })
- // 生成结果
- {
- "foo": "Syntax Demo",
- "name": "Syntax Demo"
- }
7 正则表达式
'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;
当然, 由于是虚拟数据, 所以并没有把年龄和生日联系在一起, 这都是次要的, 关键是我们已经把这样一个数据结构成功模拟出来了.
重点总结
1 数据模板定义规范生成的数据均为对象类型, 而数据占位符定义规范生成的数据可以是单纯的字符串, 数字和布尔型等基本数据类型.
2 字符串玩的是重复; 数字玩的是自增和随机, 整数随机的是值, 小数随机的是位数; 布尔型再随机也就真假俩值; 对象随机的是属性个数; 数组玩的是随机, 顺序和重复; 函数返回啥就是啥; 正则反向匹配生成字符串.
来源: http://www.jianshu.com/p/a4fa9eee058d