开始&安装
# 安装
npm install mockjs
// 使用Mock
const Mock = require('mockjs')
let data = Mock.mock({
//属性list的值是一个数组，其中含有1到10个元素
'list|1-10': [{
//属性 id是一个自增数组，其中含有1-10个元素
'id|+1': 1
}]
})
//输出结果
console.log(JSON.stringify(data,null,4))
语法规则
Mock.js的语法规范包括两部分
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范DTD
数据模板中的每个属性由3部分构成： 属性名、生成规则、属性值：
//属性名 name
//生成规则 rule
//属性值 value
'name|rule': value
注意：
属性名和生成规则之间竖线
|分隔.生成规则是可选的。
生成规则有7种格式：
'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
生成规则的含义需要依赖属性值的类型才能确定
数值型含有
@占位符。属性值还制定了最终指的初始值和类型。
生成规则和示例
1.属性值是字符串String
'name|min-max': string
通过重复string 生成一个字符串，重复次数大于等于min,小于等于max。
'name|count': string
通过重复string生成一个字符串，重复次数等于count
-
'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
})
3.属性值是布尔值Boolean
-
'name|1': boolean
随机生成一个布尔值,值为true的概率是1/2,值为false的概率同样是1/2。 -
'name|min-max': value
随机生成一个布尔值，值为value的概率是min/(min+max)，值为!value的概率是max/(min+max)
随机生成一个布尔值，值为value的概率是min/(min+max),值为!value的概率max/(min+max)。
4.属性值是对象Object
-
'name|count': object
从属性值object中随机选取count个属性。 -
'name|min-max': object
从属性值object中随机选取min到max个属性。
5.属性值是数组Array
-
'name|1': array
从属性值array中随机选取1个元素，作为最终值。 -
'name|+1': array
从属性值array中顺序选取1个元素，作为最终值。 -
'name|min-max': array
通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max。 -
'name|count': array
通过重复属性值array生成一个新数组，重复次数为count。
6.属性值的函数Function
-
'name': function
执行函数function,取其返回值作为最终的属性值，函数的上下文为属性name所在的对象
7.属性值是正则表达式RegExp
1.'name': regexp
根据正则表达式regexp反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/, //pJ7
'regexp2': /\w\W\s\S\d\D/, //F)\fp1G
'regexp3': /\d{5.10}/ //5612324
})
数据占位符定义规范DPD
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为:
@ 占位符
@占位符(参数,[,参数])
注意：
- 用
@来标识其后的字符串是占位符。 - 占位符引用的是
Mock.Random中的方法 - 通过
Mock.Random.extend来扩展自定义占位符。 - 占位符也可以引用数组模板中的属性
- 占位符会优先引用数据模板中的属性
- 占位符支持相对路径和绝对路径。
Mock.mock({
name: {
first: '@FIRST', //"Charles"
middle: '@FIRST', //Brenda
last: '@LAST', //Lopez
full: '@first @middle @last' //Charles Brenda Lopez
}
})
Mock.mock()
Mock.mock(rurl?,rtype?,template|function(options))
根据数据模板生成模拟数据
Mock.mock(template)
根据数据模板生成模拟数据
Mock.mock(rurl,template)
记录数据模板。当拦截到匹配rurl的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回
Mock.mock(rurl,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回
Mock.mock(rurl,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function将被执行，并把执行结果作为响应数据返回
Mock.mock(rurl,rtype,template)
记录数据模板。当拦截到匹配rurl和rtype的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应式数据返回。
Mock.mock(rurl,rtype,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl和rtype的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回
rurl
可选。
表示需要拦截的URL,可以时URL字符串或URL正则。例如/\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的Ajax请求类型。例如GET,POST,PUT,DELETE等。
template
可选。
表示数据模板,可以是对象或字符串。例如{'data|1-10':[{}]} ,@EMAIL。
function(options)
可选。
表示用于生成响应式数据的函数。
options
指向本次请求的Ajax选项集，含url、type和body 三个属性，参见 XMLHttpRequest规范
总1.0开始，Mock.js通过覆盖和模拟原生XMLHttpRequest的行为来拦截Ajax请求，不再依赖于第三方Ajax工具库
Mock.setup()
Mock.setup(settings)
- Mock.setup(setting)
配置拦截Ajax请求时的行为。支持的配置相有:timeout. - settings
必选
配置项集合。
timeout
可选。
执行被拦截的Ajax请求的响应时间,单位是毫秒。值可以是正整数，例如400，表示400毫秒后才会响应内容;也可以是横杠-风格的字符串,例如'200-600'，表示响应时间介于200和600毫秒之间。默认值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
目前，接口Mock.setup(setting)仅用于配置Ajax请求，将来可能用于配置Mock的其他行为。
Mock.Random
Mock.Random是一个工具类，用于生成各种随机数据。
Mock.Random的方法在数据模板中称为【占位符】,书写格式为@占位符(参数[,参数])
const 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提供完整方法(占位符)如下:
| Type | Method |
|---|---|
| Basic | boolean,natural,integer,float,character,string,range,date,time,datetime,now |
| Image | image,dataImage |
| Color | color |
| Text | paragraph,sentence,word,title,cparagtaph,csentence,cword,ctitle |
| Name | first,last,name,cfirst,clast,cname |
| Web | url,domain,email,ip,tId |
| Address | area,region |
| Helper | capitalize,upper,lower,pick,shuffle |
| Miscellaneous | guid,id |
<script id="fixPlaceholderLink" type="text/javascript"> (td).contents().wrapAll(
(td).text()) ) }) .end() .find('td:nth-child(2)').each(function(index, td) { var methods =
()
('').attr('href', '#' + m).text(m)[0] ) if (mindex < methods.length - 1) { links.push(
(td).empty().append(links) }) .end() </script>
扩展
Mock.Random中的方法与数据模板的@占位符一一对应，在需要时还可以为Mock.Random扩展方法，然后在数据模板中通过@扩展方法引用，例如:
Random.extend({
constellation: function(date){
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
//=>'水瓶座'
Mock.mock('@CONSTELLATION')
//=>"天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
Mock.valid()
Mock.valid(template,data)
- Mock.valid(template,data)
校验真实数据data是否与数据模板template匹配。
template
必选。
表示数据模板，可以是对象或字符串。例如{'list|1-10':[{}]}、@EMAIL。
data
必选。
表示真实数据。
var template = {
name:'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template,data)
//=>
[
{
"path": [
"data",
"name"
],
"type": "value",
"actual": "value2",
"expected": "value1",
"action": "equal to",
"message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
}
]
Mock.toJSONSchema()
MocktoJSONSchema(template)
- Mock.toJSONSchema(template)
把Mock.js风格的数据模板template转换成JSONSchema
template
必选。
表示数据模板，可以是对象或字符串。例如{'list|1-10':[{}]}、@EMAIL。
var template = {
'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
"name": undefined,
"path": [
"ROOT"
],
"type": "object",
"template": {
"key|1-10": "★"
},
"rule": {},
"properties": [{
"name": "key",
"path": [
"ROOT",
"key"
],
"type": "string",
"template": "★",
"rule": {
"parameters": ["key|1-10", "key", null, "1-10", null],
"range": ["1-10", "1", "10"],
"min": 1,
"max": 10,
"count": 3,
"decimal": undefined,
"dmin": undefined,
"dmax": undefined,
"dcount": undefined
}
}]
}
var template = {
'list|1-10': [{}]
}
Mock.toJSONSchema(template)
// =>
{
"name": undefined,
"path": ["ROOT"],
"type": "object",
"template": {
"list|1-10": [{}]
},
"rule": {},
"properties": [{
"name": "list",
"path": ["ROOT", "list"],
"type": "array",
"template": [{}],
"rule": {
"parameters": ["list|1-10", "list", null, "1-10", null],
"range": ["1-10", "1", "10"],
"min": 1,
"max": 10,
"count": 6,
"decimal": undefined,
"dmin": undefined,
"dmax": undefined,
"dcount": undefined
},
"items": [{
"name": 0,
"path": ["data", "list", 0],
"type": "object",
"template": {},
"rule": {},
"properties": []
}]
}]
}
