Mock —— 生成随机数据，拦截ajax请求-蒲公英云

1. 使用Mock.js步骤

安装：npm install mockjs --save-dev
新建单独文件夹进行数据模拟
在新建的文件夹里使用Mock(以带有匹配类型的Ajax请求为例)：
a. import Mock from "mockjs"
b. Mock.mock(url,method,{})
在main.js引入Mock：require("mock所在文件目录") / import 'mock所在文件目录'

若想直接得到随机生成的数据，则直接在所需要随机数据的文件中：
a. import Mock from "mockjs"
b. Mock.mock(template)（返回的值为根据模板随机生成的数据）

2. 语法规范

下面所有的name都是请求返回值中的键名，可随意起名称

① 属性值是字符串String

a. 'name|min-max':string：通过重复string生成一个字符串，重复次数小于等于max大于等于min
b. 'name|count':string：通过重复string生成一个字符串，重复次数为count

② 属性值是数字Number

a. 'name|+1'：number：属性值自动加1，初始值为number。注意：① 每请求一次，返回的值为上次返回值+1，从number开始自增。② 若将该式子放到随机数组中，可以不多次请求，就可直接自增。

//随机属性值1-10次（在1-10中随机选取count值），最终返回一个数组（将随机重复的结果放到数组中），若count>1，则每次得到的num都比上一次的num值大1
 "arr|1-10":[{ 
     "num|+1":3
}],

b. 'name|min-max':number：生成一个大于等于min小于等于max的值。属性值 number 只是用来确定类型。
c. 'name|min-max.dmin-dmax':number：生成一个浮点数，整数部分大于等于min，小于等于max，小数部分随机生成dmin-dmax位

Mock.mock({ 
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{ 
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

③ 属性值为`Boolean`

a. 'name|1':boolean：随机生成一个布尔值，值为true的概率为1/2，值为false的概率为1/2
b.'name|min-max'：value：随机生成一个布尔值，值为value的概率为min/(max+min)，值为!value的概率为max/(max+min)

④ 属性值为`Array`

a. 'name|1':array：从array数组中随机选取1个属性值，作为最终值。
b：'name|+1':array：从array数组中顺序选取1个属性值，作为最终值（注意：array数组第一个元素作为默认值。当多次请求时，每次请求都选取上一次选取的元素的下一个元素。当非多次请求时，按照顺序选取数组中的元素）
c. 'name|min-max':array：通过重复array数组的属性值生成一个新数组，随机次数大于等于min小于等于max
d. 'name|count":array'：通过重复array数组的属性值随机生成一个新数组，重复次数为count次

⑤ 属性值是函数`Function`

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

⑥ 属性值时正则表达式`RegExp`

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

3. `Mock.mock`几种不同的格式

① `Mock.mock(template)`

根据数据模板生成模拟数据(不需要请求，可以直接用)

② `Mock.mock(url,template)`

记录数据模板。当拦截到匹配的url的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。该方式任何请求方式都可以接收到（post/get/put/delete…）

③ `Mock.mock(url,type,template)`

记录数据模板。当拦截到url和type的Ajax请求时，将根据数据模板template生成模拟数据，并作为相应数据返回

④ `Mock.mock(url,function(options))`

记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

⑤ `Mock.mock(url,type,function(options))`：

记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。options指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

4. `Mock.setup(settings)`

配置拦截Ajax请求时的行为，支持的配置项有timeout
支持的配置项为timeout。
timeout指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒后才会返回响应内容；也可以是横杠 ‘-’ 风格的字符串，例如 ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。若不配置，默认值是’10-100’。

Mock.setup({ 
    timeout: 400//400ms后返回响应内容
})
Mock.setup({ 
    timeout: '200-600'//在该范围内随机生成响应时间，经过该响应时间后返回相应内容
})

5. `Mock.Random`

Mock.Random的方法在数据模板中称为占位符。在下例中，Mock.mock(’@email’)相当于Random.email()

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( {  email: '@email' } )
// => { email: "v.lewis@hall.gov" }

① `Mock.Random`的常见方法：

在这里插入图片描述

② 可以为`Mock.Random`扩展方法，然后在数据模板中通过`@扩展方法`引用。

Random.extend({ 
    constellation: function(date) { 
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({ 
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }