mock.js教程之数据模板定义规范

什么是Mock.js

打开Mock.js的官网首页，我们可以看到这几个字：生成随机数据，拦截 Ajax 请求。这句话告诉了我们Mock.js作用。

通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。

优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

安装Mock.js

方法一：通过 npm 包管理工具下载

npm install mockjs

方法二：通过GitHut 下载，下载地址：https://github.com/nuysoft/Mock

Mock.js的使用

Mock.mock()

这个方法主要用于拦截 Ajax 请求，根据模板生成数据，然后作为响应数据返回。具体的语法格式如下：

1. Mock.mock( template )：只是单纯的根据模板生成数据
2. Mock.mock( rurl, template )：当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板生成模拟数据，并作为响应数据返回。
3. Mock.mock( rurl, function( options ) )：当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
4. Mock.mock( rurl, rtype, template )：当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
5. Mock.mock( rurl, rtype, function( options ) )：当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

在上述方式中，rurl表示需要拦截的地址，rtype表示Ajax请求的方式，template表示数据模板，function( options )表示用于生成响应数据的函数，options表示接收到的Ajax的数据，含有 url、type 和 body 三个属性。

Mock.Random()

Mock.Random 是一个工具类，用于生成各种随机数据。

随机数据

在Mock.js中有两种随机数据的方式，一种是通过 Mock.mock() 的，另外一种是通过 Mock.Random() 。Mock.mock() 这种方式需要根据数据定义规范去生成数据，具体的规范有：数据模板定义规范和数据占位符定义规范。Mock.Random() 这种方式需要通过调用方法的方式去生成数据。

数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。属性名 和 生成规则 之间用竖线 | 分隔，生成规则 有 7 种格式。当属性值不同时，所能使用的生成规则不同。具体的生成规则：

属性值是字符串 String

'name|min-max': string

//通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

'name|count': string

//通过重复 string 生成一个字符串，重复次数等于 count。

属性值是数字 Number

'name|+1': number

//属性值自动加 1，初始值为 number。

'name|min-max': number

//生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number

//生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

属性值是布尔型 Boolean

'name|1': boolean

//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

'name|min-max': value

//随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

属性值是对象 Object

'name|count': object

//从属性值 object 中随机选取 count 个属性。

'name|min-max': object

//从属性值 object 中随机选取 min 到 max 个属性。

属性值是数组 Array

'name|1': array

//从属性值 array 中随机选取 1 个元素，作为最终值。

'name|+1': array

//从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|min-max': array

//通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|count': array

//通过重复属性值 array 生成一个新数组，重复次数为 count。

属性值是函数 Function

'name': function

//执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

属性值是正则表达式 RegExp

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

数据占位符定义规范比较复杂，而数据占位符定义规范就比较简单，只需要调用写好的方法就行，而这写方法就是引用的是 Mock.Random 中的方法

数据模板的实例

const Mock = require('mockjs');
let mock = Mock.mock({
    //这是将属性值随机循环随机次数，最小为1次，最大为10次
    "string|1-10": "这是字符串",
    // 属性值自动加 1，初始值为 202
    "number|+1": 202,
    // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位
    "number2|1-100.1-10": 1,
    // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
    "boolean|1": true,
    //随机生成一个布尔值， 值为 value 的概率是 1 / (1 + 9)， 值为!value 的概率是 9 / (1 + 9)。
    "boolean|9-1": true,
    //从属性值 object 中随机选取 2 到 4 个属性。
    "object|2-4": {
        "110000": "北京市",
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
    },
    // 通过重复属性值 array 生成一个新数组，重复次数大于等于 1，小于等于 10
    "array|1-10": [
        "Mock.js"
    ],
    //按照正则表达式生成数据
    'regexp': /[a-z][A-Z][0-9]/,
    //将上面属性 number 和 regexp 的值获取并赋值给 absolutePath
    "absolutePath": "@/number @/regexp"
})
console.log(mock);