Mock.js簡易教程，脫離後端獨立開發，實現增刪改查功能

標籤：字元   reg   定義   last   json   name   表達   val   意思   

　　在我們的生產實際中，後端的介面往往是較晚才會出來，並且還要寫介面文檔，於是我們的前端的許多開發都要等到介面給我們才能進行，這樣對於我們前端來說顯得十分的被動，於是有沒有可以製造假資料來類比後端介面呢，答案是肯定的。應該有人通過編寫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]$/,//產生的符合Regex的字串                    })        $.ajax({            url:‘http://www.bai.com‘,            dataType:‘json‘,            success:function(e){                console.log(e)            }        })

4.如何?資料 增 刪 改 查 的類比資料介面

下面我就類比後端刪除功能的介面實現

/*類比刪除資料的方式*/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簡單易學，可以便於前端的快速開發，也可以自己定義好需要的格式，讓後端配合你，按照你的格式編寫他的後端代碼。

Mock.js簡易教程，脫離後端獨立開發，實現增刪改查功能