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 中随机选取 minmax 个属性。例如:

// 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;

当然,由于是虚拟数据,所以并没有把年龄和生日联系在一起,这都是次要的,关键是我们已经把这样一个数据结构成功模拟出来了。


重点总结

① 数据模板定义规范生成的数据均为对象类型,而数据占位符定义规范生成的数据可以是单纯的字符串、数字和布尔型等基本数据类型。
② 字符串玩的是重复;数字玩的是自增和随机,整数随机的是值,小数随机的是位数;布尔型再随机也就真假俩值;对象随机的是属性个数;数组玩的是随机、顺序和重复;函数返回啥就是啥;正则反向匹配生成字符串。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 3,933评论 4 7
  • Mock.js简介 Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。...
    MrWelson阅读 254评论 0 0
  • 学习目的 ①开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据牵制与后端,前端页面无法很好的展示,...
    _1633_阅读 1,601评论 0 20
  • 语法规范 包含两部分:1)数据模板定义规范(Data Template Definition,DTD)2)数据占位...
    大头他妈阅读 57评论 0 0
  • 基础篇NumPy的主要对象是同种元素的多维数组。这是一个所有的元素都是一种类型、通过一个正整数元组索引的元素表格(...
    oyan99阅读 3,170评论 0 17