mockjs的下载使用官网可以参考这里，它的功能主要是前端开发者可以不用等待后台开发提供了现成的接口，才进行前端开发，而只需要后台开发人员提供接口统一格式，返回值的类型格式信息即可，mockjs就是为了解放前端开发者的依赖后台接口的局限的。

使用方法

mockjs的使用语法为： Mock.mock('url地址', 'url请求方法', {数据模版}|function (option) {响应数据函数})

其中 url地址 / url请求方法 都是可选的，模拟的数据可以使用 数据模版 方式也可以使用 响应数据函数 方式来模拟数据，下面分别来说明。

1. 根据数据模版生成模拟数据

通过设置数据模版可以快速生成模拟数据，例如如下的例子，生成一个字典，里面的name属性是随机生成的：

Mock.mock({
  'name': '@name'
})

2. 根据ajax请求生成模拟数据

通过设置ajax请求可以起到拦截请求，而直接返回数据的效果，例如如下拦截了一个GET请求地址 '/users/' 的目的，并且设置了该请求的返回数据：

Mock.mock('/users/', 'get', {
  'name': '@name',
  'age|1-10': 1  
})

如果是要模拟带有参数的get请求，那么mock中拦截的ulr就需要使用正则表达式，否则匹配不到，会出现跨域的错误，比如上面，我们想要匹配到 '/users/' 和 '/users/?name=xxx' 的url该如何设置呢？可以参考如下的设置

let users_url = new RegExp('^/users/' + '(\\?.*|)$') // 需要兼容后面是否带有参数的情况

Mock.mock(users_url, 'get', {
  'name': '@name',
  'age|1-10': 1  
})

注意：Mock中设置的url type必须要小写，否则会匹配失败，例如上面的例子中使用的 'get'

3. 根据响应数据函数方式生成模拟数据

通过设置响应函数的方式来模拟数据，可以传入参数来个性化设置模拟的数据

Mock.mock('/users/', 'get', function (option) {
  return Mock.mock({
    'name': '@name'  
  })  
})

模拟数据语法

在使用Mockjs中，需要模拟一些数据，那么模拟的数据模版中每一项数据都包括三个部分： "属性名" / "数据生成规则" / "属性值"，其中属姓名和数据生成规则之间用 "|" 分割，例如上面的 'age|1-10': 1 表示的含义是生成一个age，它的值在1-10之间的整数。

下面介绍一下mockjs模拟数据的几种规则：

• 'name|min-max': value
• 'name|count': value
• 'name|min-max.dmin-dmax': value
• 'name|min-max.dcount': value
• 'name|count.dmin-dmax': value
• 'name|count.dcount': value
• 'name|+step': value

注意：min / max 表示value中的元素个数最小值和最大值；count 表示value中的元素个数的数量；dmin / dmax 表示小数点后位数的最小值和最大值；dcount表示小数点后位数；+step 表示没次添加step个

另外在属性值中可以使用一些随机数，Mock.Random 来生成一些随机数据，可以是 name 等，具体的使用可以参考这里，还有一些样例

Mock属性设置

在使用mockjs中，可以针对请求做一些设置，例如响应耗时时间；扩展模版，即设计个性化的数据模版，然后方便使用等。下面将针对这些属性，简要说明一下，详细可以参考这里

1. 设置请求响应时间为

import Mock from 'mockjs'

Mock.setup({
  timeout: 30 // 设置响应时间 30ms, 或者设置为 '200-600' 表示响应时间介于 200ms~600ms
})

2. 扩展模版，设计个性化的数据模版
   Mock.Random中的方法与数据模板的‘@占位符’一一对应，在需要时还可以为Mock.Random扩展方法，然后在数据模板中通过'@扩展方法'引用：

Mock.Random.extend({
  alpha: function(option) {
    var arr = ['a', 'b', 'c']
    return this.pick(arr) // pick是Mock的函数，这里表示随机选取数组中的一个值
  }
})

// 使用方法：

Mock.Random.alpha()
// => "a"
Mock.mock('@ALPHA') // 或者使用 Mock.mock('@alpha')
// => "b"
Mock.mock({
    name: '@ALPHA'
})
// => { name: "c" }