前端之資料模擬之Mock.js

樑青竹發表於2019-03-03
前端MockJS

在我們實際開發過程中，後端的介面往往是較晚才會出來，並且還要寫介面文件，於是我們的前端的許多開發都要等到介面給我們才能進行，這樣對於我們前端非常被動，於是前端需要編寫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)
            }
        })
複製程式碼

相關文章