Mock.js 是一款前端開發(fā)中攔截Ajax請求再生成隨機數(shù)據(jù)響應(yīng)的工具.可以用來模擬服務(wù)器響應(yīng). 優(yōu)點是非常簡單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型.
在我們的生產(chǎn)實際中渐白，后端的接口往往是較晚才會出來纱昧，并且還要寫接口文檔，于是我們的前端的許多開發(fā)都要等到接口給我們才能進行瞻润，這樣對于我們前端來說顯得十分的被動，于是有沒有可以制造假數(shù)據(jù)來模擬后端接口呢杰刽，答案是肯定的缀匕。應(yīng)該有人通過編寫json文件來模擬后臺數(shù)據(jù)强窖，但是很局限泪姨，比如增刪改查這些接口怎么實現(xiàn)呢游沿，于是今天我們來介紹一款非常強大的插件Mock.js，可以非常方便的模擬后端的數(shù)據(jù)肮砾，也可以輕松的實現(xiàn)增刪改查這些操作诀黍。
大概記錄下使用過程, 詳細(xì)使用可以參見Mock文檔 Mock Wiki
安裝
使用npm安裝: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;
數(shù)據(jù)模板格式:
'name|rule': value
屬性名|生成規(guī)則: 屬性值
GET請求
發(fā)起get請求:
$.ajax({
url: 'http://test.com',
type: 'get',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js響應(yīng):
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
// Mock響應(yīng)模板
Mock.mock('http://test.com', {
"user|1-3": [{ // 隨機生成1到3個數(shù)組元素
'name': '@cname', // 中文名稱
'id|+1': 88, // 屬性值自動加 1，初始值為88
'age|18-28': 0, // 18至28以內(nèi)隨機整數(shù), 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中順序選取元素作為結(jié)果
'friends|2': ['jack', 'jim'] // 重復(fù)2次屬性值生成一個新數(shù)組
},{
'gf': '@cname'
}]
});
可以看到結(jié)果:
{
"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": "田杰"
}
]
}
響應(yīng)時也可以是使用function, 如:
Mock.mock('http://test.com', 'get', function() {
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id': 88
}
]
});
});
結(jié)果:
{
"user": [
{
"name": "許超",
"id": 88
}
]
}
POST請求
發(fā)起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響應(yīng):
Mock.mock('http://test.com', function(options) {
console.log(options);
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id|+1': 88
}
]
});
});
可以看到結(jié)果:
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
{
"user": [
{
"name": "曾明",
"id": 88
}
]
}
自定義響應(yīng)時間
可以自定義設(shè)置響應(yīng)時間, 可以是絕對值, 也可以是區(qū)間.
// 設(shè)置4秒后再響應(yīng)
Mock.setup({ timeout: 4000 });
// 設(shè)置1秒至4秒間響應(yīng)
Mock.setup({ timeout: '1000-4000' });
數(shù)據(jù)集
Mock.Random是一個工具類仗处，用于生成各種格式隨機數(shù)據(jù). 有兩種寫法:
第一種:
// 生成一個email格式的字符串
console.log(Mock.mock('@email')); // 結(jié)果: s.uorjeqdou@crqfpdypt.gw
第二種:
var Random = Mock.Random;
console.log(Random.email()); // 結(jié)果: 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()); // 結(jié)果: Saturday
console.log(Mock.mock('@weekday')); // 結(jié)果: 112Tuesday
console.log(Random.sex()); // 結(jié)果: 男
console.log(Mock.mock('@sex')); // 結(jié)果: 未知
校驗
Mock.valid(template, data): 用來校驗真實數(shù)據(jù)data是否與數(shù)據(jù)模板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風(fēng)格的數(shù)據(jù)模板template轉(zhuǎn)換成JSON Schema
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));
增刪改查這些操作
1.一個簡單的例子：
Mock.mock('http://123.com',{
'name|3':'fei',//這個定義數(shù)據(jù)的模板形式下面會介紹
'age|20-30':25,
})
$.ajax({
url:'http://123.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
在這個例子中我們截獲地址為http://123.com返回的數(shù)據(jù)是一個擁有name和age的對象眯勾，那么ajax返回的數(shù)據(jù)就是Mock定義的數(shù)據(jù)，返回的數(shù)據(jù)格式如下：
{
name:'feifeifei',
age:26,
}
至于上面的定義模板數(shù)據(jù)的格式是什么意思婆誓，下面就給大家介紹吃环。
2.介紹如何定義數(shù)據(jù)
數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則洋幻、屬性值：
// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
1.'name|min-max': string 通過重復(fù) string 生成一個字符串郁轻，重復(fù)次數(shù)大于等于 min，小于等于 max 例子：'lastName|2-5':'jiang', 重復(fù)jiang這個字符串 2-5 次
2.'name|count': string 通過重復(fù) string 生成一個字符串鞋屈，重復(fù)次數(shù)等于 count
例子：'firstName|3':'fei', 重復(fù)fei這個字符串 3 次范咨，打印出來就是'feifeifei'故觅。
3.'name|min-max': number 生成一個大于等于 min厂庇、小于等于 max 的整數(shù)渠啊，屬性值 number 只是用來確定類型。
例子：'age|20-30':25, 生成一個大于等于 20权旷、小于等于 30 的整數(shù)替蛉，屬性值 25 只是用來確定類型
4.'name|+1': number 屬性值自動加 1，初始值為 number
例子：'big|+1':0, 屬性值自動加 1拄氯，初始值為 0躲查，以后每次請求在前面的基礎(chǔ)上+1
5.'name|min-max.dmin-dmax': number 生成一個浮點數(shù)，整數(shù)部分大于等于 min译柏、小于等于 max镣煮，小數(shù)部分保留 dmin 到 dmax 位。
例子：'weight|100-120.2-5':110.24, 生成一個浮點數(shù),整數(shù)部分大于等于 100鄙麦、小于等于 120典唇，小數(shù)部分保留 2 到 5 位
6.'name|1': boolean 隨機生成一個布爾值，值為 true 的概率是 1/2胯府，值為 false 的概率同樣是 1/2
例子：'likeMovie|1':Boolean, 隨機生成一個布爾值介衔，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2骂因。
7.屬性值是對象：var obj={'host':'www.baidu','port':'12345','node':'selector'}
7-1.'name|count': object 從屬性值 object 中隨機選取 count 個屬性炎咖。例子：'life1|2':obj, 從屬性值 obj 中隨機選取 2 個屬性
7-2.'name|min-max': object 從屬性值 object 中隨機選取 min 到 max個屬性
例子：'life1|1-2':obj, 從屬性值 obj 中隨機選取 1 到 2 個屬性。
8.屬性值是數(shù)組：var arr=['momo','yanzi','ziwei']
8-1.'name|1': array 從屬性值 array 中隨機選取 1 個元素寒波，作為最終值
例子：'friend1|1':arr, 從數(shù)組 arr 中隨機選取 1 個元素乘盼，作為最終值。
8-2.'name|+1': array 從屬性值 array 中順序選取 1 個元素俄烁，作為最終值蹦肴。
例子：'friend2|+1':arr, 從屬性值 arr 中順序選取 1 個元素，作為最終值猴娩，第一次就是'momo',第二次請求就是'yanzi'
8-3.'name|count': array 通過重復(fù)屬性值 array 生成一個新數(shù)組阴幌，重復(fù)次數(shù)為 count。
例子：'friend3|2':arr, 重復(fù)arr這個數(shù)字2次作為這個屬性值卷中，得到數(shù)據(jù)應(yīng)該是['momo','yanzi','ziwei','momo','yanzi','ziwei']
8-4.'name|min-max': array 通過重復(fù)屬性值 array 生成一個新數(shù)組矛双，重復(fù)次數(shù)大于等于 min，小于等于 `max
例子：'friend3|2-3':arr,//通過重復(fù)屬性值 arr 生成一個新數(shù)組蟆豫，重復(fù)次數(shù)大于等于 2议忽，小于等于 3
3.實際的ajax請求例子：
var arr=['momo','yanzi','ziwei']
var obj={
'host':'www.baidu',
'port':'12345',
'node':'selector'
}
Mock.mock('http://www.bai.com',{
'firstName|3':'fei',//重復(fù)fei這個字符串 3 次，打印出來就是'feifeifei'十减。
'lastName|2-5':'jiang',//重復(fù)jiang這個字符串 2-5 次栈幸。
'big|+1':0, //屬性值自動加 1愤估，初始值為 0
'age|20-30':25,//生成一個大于等于 20、小于等于 30 的整數(shù)速址，屬性值 25 只是用來確定類型
'weight|100-120.2-5':110.24,//生成一個浮點數(shù),整數(shù)部分大于等于 100玩焰、小于等于 120，小數(shù)部分保留 2 到 5 位芍锚。
'likeMovie|1':Boolean,//隨機生成一個布爾值昔园，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2并炮。
'friend1|1':arr,//從數(shù)組 arr 中隨機選取 1 個元素默刚，作為最終值。
'friend2|+1':arr,//從屬性值 arr 中順序選取 1 個元素逃魄，作為最終值
'friend3|2-3':arr,//通過重復(fù)屬性值 arr 生成一個新數(shù)組荤西，重復(fù)次數(shù)大于等于 2，小于等于 3伍俘。
'life1|2':obj,//從屬性值 obj 中隨機選取 2 個屬性
'life1|1-2':obj,//從屬性值 obj 中隨機選取 1 到 2 個屬性邪锌。
'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正則表達式的字符串
})
$.ajax({
url:'http://www.bai.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
4.如何實現(xiàn)數(shù)據(jù) 增 刪 改 查 的模擬數(shù)據(jù)接口
下面我就模擬后端刪除功能的接口實現(xiàn)
/*模擬刪除數(shù)據(jù)的方式*/
var arr=[
{name:'fei',age:20,id:1},
{name:'liang',age:30,id:2},
{name:'jun',age:40,id:3},
{name:'ming',age:50,id:4}
]
Mock.mock('http://www.bai.com','delete',function(options){
var id = parseInt(options.body.split("=")[1])//獲取刪除的id
var index;
for(var i in arr){
if(arr[i].id===id){//在數(shù)組arr里找到這個id
index=i
break;
}
}
arr.splice(index,1)//把這個id對應(yīng)的對象從數(shù)組里刪除
return arr;//返回這個數(shù)組,也就是返回處理后的假數(shù)據(jù)
})
$.ajax({
url:'http://www.bai.com',
type:"DELETE",
data:{
id:1//假設(shè)需要刪除id=1的數(shù)據(jù)
},
dataType:'json',
success:function(e){
console.log(e)
}
})
至于更多的詳細(xì)文檔可以去官方網(wǎng)站查看，http://mockjs.com/养篓，Mock.js簡單易學(xué)秃流，可以便于前端的快速開發(fā)，也可以自己定義好需要的格式柳弄，讓后端配合你舶胀，按照你的格式編寫他的后端代碼。
參考:https://www.cnblogs.com/zhenfei-jiang/p/7235339.html
https://segmentfault.com/a/1190000008839142
隨機數(shù)據(jù)例子：
http://mockjs.com/examples.html#Random.cparagraph(%20min?,%20max?%20)
