在我們的生産實際中,後端的接口往往是較晚才會出來,并且還要寫接口文檔,于是我們的前端的許多開發都要等到接口給我們才能進行,這樣對于我們前端來說顯得十分的被動,于是有沒有可以制造假資料來模拟後端接口呢,答案是肯定的。應該有人通過編寫json檔案來模拟背景資料,但是很局限,比如增删改查這些接口怎麼實作呢,于是今天我們來介紹一款非常強大的插件Mock.js,可以非常友善的模拟後端的資料,也可以輕松的實作增删改查這些操作。
1.一個簡單的例子:
Mock.mock('http://123.com',{
'name|3':'fei',//這個定義資料的模闆形式下面會介紹
'age|20-30':25,
})
$.ajax({
url:'http://123.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
在這個例子中我們截獲位址為http://123.com傳回的資料是一個擁有name和age的對象,那麼ajax傳回的資料就是Mock定義的資料,傳回的資料格式如下:
{
name:'feifeifei',
age:26,
}
至于上面的定義模闆資料的格式是什麼意思,下面就給大家介紹。
2.介紹如何定義資料
資料模闆中的每個屬性由 3 部分構成:屬性名、生成規則、屬性值:
// 屬性名 name
// 生成規則 rule
// 屬性值 value
'name|rule': value
1.'name|min-max': string 通過重複 string 生成一個字元串,重複次數大于等于 min ,小于等于 max
例子:'lastName|2-5':'jiang', 重複jiang這個字元串 2-5 次
2.'name|count': string 通過重複 string 生成一個字元串,重複次數等于 count
例子:'firstName|3':'fei', 重複fei這個字元串 3 次,列印出來就是'feifeifei'。
3.'name|min-max': number 生成一個大于等于 min 、小于等于 max 的整數,屬性值 number 隻是用來确定類型。
例子:'age|20-30':25, 生成一個大于等于 20、小于等于 30 的整數,屬性值 25 隻是用來确定類型
4.'name|+1': number 屬性值自動加 1,初始值為 number
例子:'big|+1':0, 屬性值自動加 1,初始值為 0,以後每次請求在前面的基礎上+1
5.'name|min-max.dmin-dmax': number 生成一個浮點數,整數部分大于等于 min 、小于等于 max ,小數部分保留 dmin 到 dmax 位。
例子:'weight|100-120.2-5':110.24, 生成一個浮點數,整數部分大于等于 100、小于等于 120,小數部分保留 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.屬性值是數組:var arr=['momo','yanzi','ziwei']
8-1.'name|1': array 從屬性值 array 中随機選取 1 個元素,作為最終值
例子:'friend1|1':arr, 從數組 arr 中随機選取 1 個元素,作為最終值。
8-2.'name|+1': array 從屬性值 array 中順序選取 1 個元素,作為最終值。
例子:'friend2|+1':arr, 從屬性值 arr 中順序選取 1 個元素,作為最終值,第一次就是'momo',第二次請求就是'yanzi'
8-3.'name|count': array 通過重複屬性值 array 生成一個新數組,重複次數為 count 。
例子:'friend3|2':arr, 重複arr這個數字2次作為這個屬性值,得到資料應該是['momo','yanzi','ziwei','momo','yanzi','ziwei']
8-4.'name|min-max': array 通過重複屬性值 array 生成一個新數組,重複次數大于等于 min ,小于等于 max
例子:'friend3|2-3':arr,//通過重複屬性值 arr 生成一個新數組,重複次數大于等于 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',//重複fei這個字元串 3 次,列印出來就是'feifeifei'。
'lastName|2-5':'jiang',//重複jiang這個字元串 2-5 次。
'big|+1':0, //屬性值自動加 1,初始值為 0
'age|20-30':25,//生成一個大于等于 20、小于等于 30 的整數,屬性值 25 隻是用來确定類型
'weight|100-120.2-5':110.24,//生成一個浮點數,整數部分大于等于 100、小于等于 120,小數部分保留 2 到 5 位。
'likeMovie|1':Boolean,//随機生成一個布爾值,值為 true 的機率是 1/2,值為 false 的機率同樣是 1/2。
'friend1|1':arr,//從數組 arr 中随機選取 1 個元素,作為最終值。
'friend2|+1':arr,//從屬性值 arr 中順序選取 1 個元素,作為最終值
'friend3|2-3':arr,//通過重複屬性值 arr 生成一個新數組,重複次數大于等于 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)
}
})
/*模拟删除資料的方式*/
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){//在數組arr裡找到這個id
index=i
break;
}
}
arr.splice(index,1)//把這個id對應的對象從數組裡删除
return arr;//傳回這個數組,也就是傳回處理後的假資料
})
$.ajax({
url:'http://www.bai.com',
type:"DELETE",
data:{
id:1//假設需要删除id=1的資料
},
dataType:'json',
success:function(e){
console.log(e)
}
})