今天和各位一起学习一下mock,文章中若有出入之处,还望不吝指教…
生成随机数据,拦截 Ajax 请求(moockjs官网)
通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则。
众所周知Mock.js因为两个重要的特性风靡前端:
文章会用到的API(也是Mock经常使用的API):
参数名 | 参数需求 | 参数描述 | 例子 |
---|---|---|---|
url | 可选: URL 字符串或 URL 正则 | 拦截请求的地址 | /mock |
type | 可选 拦截Ajax类型 | GET、POST | |
template | 可选: 可以是对象或字符串 生成数据的模板 | {'data | 1-10’:[‘mock’] }、’@EMAIL’ |
template可能有点难理解,我们试几个例子就一目了然了!
//类型1: 名字|规则: 内容
Mock.mock({'data|1-4': '哑巴'})
//生成1-4个哑巴字符串
{
data: "哑巴哑巴哑巴"
}
//类型2: Mock自带模板
Mock.mock('@province')
//随机生成一个省份
"上海"
不同情况,使用mockjs的方式也可能不一样
两种方式使用如下
node:npm安装:npm install mockjs;
直接使用:
Mock.mock(‘地址’,{ “dataname|rule”:{“对应的值”} })
说明:地址就是我们通过ajax获取数据时候填写的地址,这里填写的地址可以自定义,第二个参数是我们要模拟的数据,以及相应的规则。
Mock.mock('https://www.test.com',{
"userInfo|4":[{ //生成|num个如下格式名字的数据
"id|+1":1, //数字从当前数开始后续依次加一
"name":"@cname", //名字为随机中文名字
"ago|18-28":25, //年龄为18-28之间的随机数字
"sex|1":["男","女"], //性别是数组中的一个,随机的
"job|1":["web","UI","python","php"] //工作是数组中的一个
}]
})
最后通过ajax接收数据,形式如下:
//ajax接收数据,通过jq
$.get('https://www.test.com',function(data){
console.log(JSON.parse(data));
})
注意:
对于通过Random属性而来的一些随机数据-比如随机生成图片,使用方式如下:
Mock.mock('http://www.test.com',{
"ListInfo|5":[{
"img":Mock.Random.image('200x100')//图片数据随机生成,大小指定为200X100
}]
});
官网实例
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
属性名 name
生成规则 rule
属性值 value
‘name|rule’: value
生成规则和示例:
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
//result =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3.属性值是布尔型 Boolean
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
//result =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
数据占位符定义规范
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:
@占位符
@占位符(参数 [, 参数])
Mock.mock({
'avatar':'@image(100x100)',
'name': {
'first': '@FIRST',
'middle': '@FIRST',
'last': '@LAST',
'full': '@first @middle @last',
'cname': '@cname',
},
'city': '@city(true)',
'birthday': '@date("yyyy-MM-dd") @time()'
'luckColor' : '@color',
'about':'@paragraph( 20, 50 )'
})
//result =>
{
"avatar":"http://dummyimage.com/100x100"
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez",
"cname": "郝刚",
},
"city": "香港特别行政区 九龙",
"birthday": "1996-10-14 20:38:38"
"luckColor" : "#87f279",
"about":"Esc jkcfm qykqdod ocskv vnnntrvdf gvjv ykrquyh gudefpbf bfx pduggbhpo drrmgb eulxjcxau xvzw."
}
Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。
方法:
类型 | 方法 |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
说明:Mock.Random 中的方法与数据模板的 @占位符 一一对应,在需要时还可以为 Mock.Random 扩展方法,然后在数据模板中通过 @扩展方法 引用。例如:
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
},
weekday: function(date) {
var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return this.pick(weekdays);
},
sex: function(date) {
var sexes = ['男', '女', '中性', '未知'];
return this.pick(sexes);
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@constellation')
//result => "天蝎座"
Mock.mock({
constellation: '@constellation'
})
//result => { constellation: "射手座" }
Random.weekday()
//result => "Saturday"
Mock.mock('@weekday')
//result => "Saturday"
Mock.mock({
weekday: '@weekday'
})
//result => { weekday: "Saturday" }
Random.sex()
//result => "男"
Mock.mock('@sex')
//result => "男"
Mock.mock({
sex: '@sex'
})
//result => { sex: "男" }
关于mockjs的入门就先说这些,如果有了解mockjs和vue(有时间在更新reactjs和angularjs的)的同胞们,请移步至楼主另外一篇文章:vue+mockjs 模拟数据,实现前后端分离