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()
// => "[email protected]"
Mock.mock('@email')
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }
① 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: "射手座" }
6. Mock.valid(template,data)
检验真实数据
data是否与数据模板匹配
