前端之數據模擬之Mock.js

在咱們實際開發過程當中，後端的接口每每是較晚纔會出來，而且還要寫接口文檔，因而咱們的前端的許多開發都要等到接口給咱們才能進行，這樣對於咱們前端很是被動，因而前端須要編寫json造假數據，可是比較侷限，好比增刪改查這些接口怎麼實現呢，因而今天咱們來介紹一款很是強大的插件Mock.js，能夠很是方便的模擬後端的數據，也能夠輕鬆的實現增刪改查這些操做。

Mock.js做用

生成隨機數據，攔截 Ajax 請求-> Mock.js

如何定義數據

數據模板中的每一個屬性由 3 部分構成：屬性名、生成規則、屬性值：
// 屬性名 name
// 生成規則 rule
// 屬性值 value
'name|rule': value

• 'name|min-max': string 經過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max

例子：'lastName|2-5':'jiang', 重複jiang這個字符串 2-5 次

• 'name|count': string 經過重複 string 生成一個字符串，重複次數等於 count

例子：'firstName|3':'fei', 重複fei這個字符串 3 次，打印出來就是'feifeifei

• 'name|min-max': number 生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來肯定類型。

'age|20-30':25, 生成一個大於等於 20、小於等於 30 的整數，屬性值 25 只是用來肯定類型

• 'name|+1': number 屬性值自動加 1，初始值爲 number

例子：'big|+1':0, 屬性值自動加 1，初始值爲 0，之後每次請求在前面的基礎上+1

• 'name|min-max.dmin-dmax': number 生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dmin 到 dmax 位。

例子：'weight|100-120.2-5':110.24, 生成一個浮點數,整數部分大於等於 100、小於等於 120，小數部分保留 2 到 5 位

• 'name|1': boolean 隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率一樣是 1/2

例子：'likeMovie|1':Boolean, 隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率一樣是 1/2。

• 屬性值是對象：var obj={'host':'www.baidu','port':'12345','node':'selector'}

'name|count': object 從屬性值 object 中隨機選取 count 個屬性。

例子：'life1|2':obj, 從屬性值 obj 中隨機選取 2 個屬性

'name|min-max': object 從屬性值 object 中隨機選取 min 到 max 個屬性

例子：'life1|1-2':obj, 從屬性值 obj 中隨機選取 1 到 2 個屬性。   

• 屬性值是數組：var arr=['momo','yanzi','ziwei']

'name|1': array 從屬性值 array 中隨機選取 1 個元素，做爲最終值

例子：'friend1|1':arr, 從數組 arr 中隨機選取 1 個元素，做爲最終值。

'name|+1': array 從屬性值 array 中順序選取 1 個元素，做爲最終值。

例子：'friend2|+1':arr, 從屬性值 arr 中順序選取 1 個元素，做爲最終值，第一次就是'momo',第二次請求就是'yanzi'

'name|count': array 經過重複屬性值 array 生成一個新數組，重複次數爲 count。

例子：'friend3|2':arr, 重複arr這個數字2次做爲這個屬性值，獲得數據應該是['momo','yanzi','ziwei','momo','yanzi','ziwei']

'name|min-max': array 經過重複屬性值 array 生成一個新數組，重複次數大於等於 min，小於等於 max

例子：'friend3|2-3':arr,//經過重複屬性值 arr 生成一個新數組，重複次數大於等於 2，小於等於 3

實際的ajax請求例子

var arr=['momo','yanzi','ziwei']
        var obj={
            'host':'www.***',
            'port':'12345',
            'node':'selector'
        }
        Mock.mock('http://www.***.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.***.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })
複製代碼