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
是否与数据模板匹配