Mock.js 是一款前端开辟中阻拦Ajax
要求再天生随机数据相应的东西.能够用来模仿服务器相应. 长处是异常简朴轻易, 无侵入性, 基础掩盖经常运用的接口数据范例.
也许记录下运用历程, 细致运用能够拜见Mock文档 Mock Wiki
装置
运用npm装置: npm install mockjs
;
或直接<script src="http://mockjs.com/dist/mock.js"></script>
;
数据模板花样:
'name|rule': value
属性名|天生划定规矩: 属性值
GET要求
提议get要求:
$.ajax({
url: 'http://test.com',
type: 'get',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js相应:
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
// Mock相应模板
Mock.mock('http://test.com', {
"user|1-3": [{ // 随机天生1到3个数组元素
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1,初始值为88
'age|18-28': 0, // 18至28之内随机整数, 0只是用来肯定范例
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国都市
'color': '@color', // 16进制色彩
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的几率是1/3
'fromObj|2': obj, // 从obj对象中随机猎取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机猎取1至3个属性
'brother|1': ['jack', 'jim'], // 随机拔取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中递次拔取元素作为效果
'friends|2': ['jack', 'jim'] // 反复2次属性值天生一个新数组
},{
'gf': '@cname'
}]
});
能够看到效果:
{
"user": [
{
"name": "董静",
"id": 88,
"age": 25,
"birthday": "2015-04-01",
"city": "湖南省 怀化市",
"color": "#c0f279",
"isMale": false,
"isFat": false,
"fromObj": {
"dd": "44",
"aa": "11"
},
"fromObj2": {
"bb": "22",
"cc": "33"
},
"brother": "jack",
"sister": "jack",
"friends": [
"jack",
"jim",
"jack",
"jim"
]
},
{
"gf": "田杰"
}
]
}
相应时也能够是运用function
, 如:
Mock.mock('http://test.com', 'get', function() {
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id': 88
}
]
});
});
效果:
{
"user": [
{
"name": "许超",
"id": 88
}
]
}
POST要求
提议post要求:
$.ajax({
url: 'http://test.com',
type: 'post',
dataType: 'json',
data: {
account: 888,
pwd: 'abc123'
}
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js相应:
Mock.mock('http://test.com', function(options) {
console.log(options);
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id|+1': 88
}
]
});
});
能够看到效果:
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
{
"user": [
{
"name": "曾明",
"id": 88
}
]
}
自定义相应时候
能够自定义设置相应时候, 能够是绝对值, 也能够是区间.
// 设置4秒后再相应
Mock.setup({ timeout: 4000 });
// 设置1秒至4秒间相应
Mock.setup({ timeout: '1000-4000' });
数据集
Mock.Random
是一个东西类,用于天生种种花样随机数据. 有两种写法:
第一种:
// 天生一个email花样的字符串
console.log(Mock.mock('@email')); // 效果: s.uorjeqdou@crqfpdypt.gw
第二种:
var Random = Mock.Random;
console.log(Random.email()); // 效果: r.quyppn@yit.cv
供应的品种有:
Type | Method |
---|---|
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 |
假如上面没有你须要的品种, 还能够自定义扩大, 以下:
Random.extend({
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);
}
});
console.log(Random.weekday()); // 效果: Saturday
console.log(Mock.mock('@weekday')); // 效果: 112Tuesday
console.log(Random.sex()); // 效果: 男
console.log(Mock.mock('@sex')); // 效果: 未知
校验
Mock.valid(template, data)
: 用来校验实在数据data
是不是与数据模板template
婚配
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
var realData = { "user": [{ 'name': '张三', 'id': 90 } ]};
console.log(Mock.valid(tempObj, realData));
JSON Schema
Mock.toJSONSchema(template)
: 用来把Mock.js
作风的数据模板template
转换成JSON Schema
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));