在我们日常开发中，虽然大多都是前后端分离的开发模式，但是还是会遇到一些前后端协调的问题。比如有时候前端页面已经开发好，后端接口却还在开发中，而我们有些样式又必须要有数据才能看效果，这时候该怎么办呢？

通常情况下，我们的做法是自己手动造一些假数据，但是当数据量大且需要考虑到各种极端情况时，这种自造假数据的方式显然不是最好的解决方法。那么，我们能不能让程序自己来随机产生一些符合一定规则的数据呢？

答案当然是肯定的。今天介绍的一款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