在咱們的生產實際中，後端的接口每每是較晚纔會出來，而且還要寫接口文檔，因而咱們的前端的許多開發都要等到接口給咱們才能進行，這樣對於咱們前端來講顯得十分的被動，因而有沒有能夠製造假數據來模擬後端接口呢，答案是確定的。應該有人經過編寫json文件來模擬後臺數據，可是很侷限，好比增刪改查這些接口怎麼實現呢，因而今天咱們來介紹一款很是強大的插件Mock.js，能夠很是方便的模擬後端的數據，也能夠輕鬆的實現增刪改查這些操做。前端
1.一個簡單的例子：node
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定義的數據，返回的數據格式以下：ajax
{
name:'feifeifei',
age:26,
}
至於上面的定義模板數據的格式是什麼意思，下面就給你們介紹。正則表達式
2.介紹如何定義數據json
數據模板中的每一個屬性由 3 部分構成：屬性名、生成規則、屬性值：後端
// 屬性名 name // 生成規則 rule // 屬性值 value 'name|rule': value
1.'name|min-max': string 經過重複 生成一個字符串，重複次數大於等於 ，小於等於 例子：'lastName|2-5':'jiang', 重複jiang這個字符串 2-5 次
2.'name|count': string 經過重複 生成一個字符串，重複次數等於
例子：'firstName|3':'fei', 重複fei這個字符串 3 次，打印出來就是'feifeifei'。
3.'name|min-max': number 生成一個大於等於 、小於等於 的整數，屬性值 只是用來肯定類型。
例子：'age|20-30':25, 生成一個大於等於 20、小於等於 30 的整數，屬性值 25 只是用來肯定類型
4.'name|+1': number 屬性值自動加 1，初始值爲
例子：'big|+1':0, 屬性值自動加 1，初始值爲 0，之後每次請求在前面的基礎上+1
5.'name|min-max.dmin-dmax': number 生成一個浮點數，整數部分大於等於 、小於等於 ，小數部分保留 到 位。
例子：'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 從屬性值 中隨機選取 個屬性。stringminmax
stringcountminmaxnumbernumberminmaxdmindmaxobjectcount
例子：'life1|2':obj, 從屬性值 obj 中隨機選取 2 個屬性
7-2.'name|min-max': object 從屬性值 中隨機選取 到 個屬性
例子：'life1|1-2':obj, 從屬性值 obj 中隨機選取 1 到 2 個屬性。
8.屬性值是數組：var arr=['momo','yanzi','ziwei']
8-1.'name|1': array 從屬性值 中隨機選取 1 個元素，做爲最終值
例子：'friend1|1':arr, 從數組 arr 中隨機選取 1 個元素，做爲最終值。
8-2.'name|+1': array 從屬性值 中順序選取 1 個元素，做爲最終值。
例子：'friend2|+1':arr, 從屬性值 arr 中順序選取 1 個元素，做爲最終值，第一次就是'momo',第二次請求就是'yanzi'
8-3.'name|count': array 經過重複屬性值 生成一個新數組，重複次數爲 。
例子：'friend3|2':arr, 重複arr這個數字2次做爲這個屬性值，獲得數據應該是['momo','yanzi','ziwei','momo','yanzi','ziwei']
8-4.'name|min-max': array 經過重複屬性值 生成一個新數組，重複次數大於等於 ，小於等於 objectminmaxarrayarrayarraycountarrayminmax
例子：'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)
}
})
4.如何實現數據 增 刪 改 查 的模擬數據接口數組
下面我就模擬後端刪除功能的接口實現post
/*模擬刪除數據的方式*/
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)
}
})
至於更多的詳細文檔能夠去官方網站查看，http://mockjs.com/，Mock.js簡單易學，能夠便於前端的快速開發，也能夠本身定義好須要的格式，讓後端配合你，按照你的格式編寫他的後端代碼。網站