使用Mock.js模擬數據請求

最近重構公司項目，爲了讓前端獨立於後端進行開發，王二嘗試使用了 Mock.js

1、有什麼用？

Mock.js 能夠生成隨機數據，攔截 Ajax 請求

2、如何安裝？

一、在前端工程中，咱們能夠經過以下命令安裝

npm install mockjs
複製代碼

二、若是想在瀏覽器中測試，能夠在本身的html中引用以下代碼：

<script src="http://mockjs.com/dist/mock.js"></script>
複製代碼

3、爲何能攔截 Ajax 請求

對這個問題感興趣的同窗能夠參考這個連接

4、生成隨機數據

Mock.js 的語法規範包括兩部分：

• 數據模板定義（Data Temaplte Definition，DTD）
• 數據佔位符定義（Data Placeholder Definition，DPD）

我們不玩這些虛的，先看一些簡單的例子：

說明：若是在本身的html中引用以下代碼：<script src="http://mockjs.com/dist/mock.js"></script>，如下測試代碼能夠直接運行

一、將一個字符串隨機重複1到10遍

Mock.mock({
  "string|1-10": "★"
})

// {
// "string": "★★★"
// }
複製代碼

二、將一個字符串隨機重複5遍

Mock.mock({
  "string|5": "★"
})

// {
// "string": "★★★★★"
// }
複製代碼

三、 隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率是 1/2

Mock.mock({
  "boolean|1": true
})

// {
// "boolean": true
// }
複製代碼

四、從屬性值 {} 中隨機選取 2 個屬性

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

// {
// "object": {
// "310000": "上海市",
// "330000": "浙江省"
// }
// }
複製代碼

五、從屬性值 {} 中隨機選取 2 到 4 個屬性

Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})

// {
// "object": {
// "110000": "北京市",
// "120000": "天津市",
// "130000": "河北省",
// "140000": "山西省"
// }
// }
複製代碼

六、從屬性值 [{}, {} ...] 中隨機選取 1 個元素，做爲最終值

Mock.mock({
  "array|1": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
// "array": {
// title:"CMD"
// }
// }
複製代碼

七、經過重複屬性值 [{}, {} ...] 生成一個新數組，重複次數大於等於 2，小於等於 3

Mock.mock({
  "array|2-3": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
// "array": [
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// },
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// }
// ]
// }
複製代碼

八、傳入一個正則，返回符合正則的字符串

Mock.mock({
  'regexp': /[a-z][A-Z][0-9]/
})

// {
// "regexp": "uD2"
// }
複製代碼

九、Mock對象中有一個 Random 方法，利用 Random 方法咱們能夠作不少事情：

var Random = Mock.Random
Random.integer(20,100)   //隨機返回20到100的數字
Random.float(60, 100, 3, 5) //隨機返回60到100的帶有3到5位小數的數字
Random.string() //隨機返回一個字符串
Random.string(5) //隨機返回一個長度爲5的字符串
Random.string(7, 10)//隨機返回一個長度爲5到7位的字符串
Random.date()//隨機返回一個日期
Random.date('yyyy-MM-dd')//隨機返回一個格式化日期
Random.image()//隨機返回一張圖片
Random.image('200x100')//隨機返回一張帶尺寸的圖片
Random.image('200x100', '#FF6600')//隨機返回一張帶尺寸和顏色的圖片
Random.paragraph()//隨機返回一段文字
Random.cparagraph()//隨機返回一段中文文字
Random.cparagraph(1, 3)//隨機返回1到3段中文文字
Random.csentence()//隨機返回一句中文
Random.ctitle()//隨機返回一箇中文標題
複製代碼

關於其更多的用法，感興趣的同窗能夠參考官方示例代碼；

5、攔截 ajax 請求的代碼細節

以jQuery爲例：

Mock.mock('http://test/api', {
    'name'	   : '[@name](/user/name)()',
    'age|1-100': 100,
    'color'	   : '[@color](/user/color)'
});

$.ajax({
    url: 'http://test/api',
    success: function(data){
        console.log(JSON.stringify(data, null, 4)
    )}
})

// {
// "name": "Elizabeth Hall",
// "age": 91,
// "color": "#0e64ea"
// }
複製代碼

語法以下：Mock.mock( rurl, template ),其中的參數 rurl 還能夠傳入正則表達式。

關於其更多的用法，感興趣的同窗能夠參考官方文檔；

6、王二遇到的問題

有了以上的各類方法，再加上嵌套，能夠知足絕大多數咱們想要的數據格式。可是由於使用姿式不正確，王二也遇到了一點小小的的問題，

例如以下代碼：

Mock.mock({
    'list|2-10': [{
        'id': Random.integer(20,100),
        'name':Random.ctitle(),
        'date':Random.date("yyyy-MM-dd")
    }]
});

// {
// "list": [
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// }
// ]
// }
複製代碼

王二本來的目的是想在 list 裏返回數據不一樣的數組,可是用以上的寫法數組裏每一個對象的數據都同樣。

通過查閱文檔，發如今 Mock 模板裏屬性的值能夠是 Function,因而修改以下：

Mock.mock({
    'list|2-10': [{
        'id': ()=>Random.integer(20,100),
        'name': ()=>Random.ctitle(),
        'date':()=>Random.date("yyyy-MM-dd")
    }]
});

// {
// "list": [
// {
// "id": 74,
// "name": "但稱青氣",
// "date": "2004-10-31"
// },
// {
// "id": 32,
// "name": "三六屬集",
// "date": "2008-06-28"
// },
// {
// "id": 28,
// "name": "裝造始",
// "date": "1975-04-29"
// }
// ]
// }
複製代碼

這樣就符合王二的預期了。

7、參考文章

Mock官方網站 Mock官方示例代碼 Mock官方文檔 'think2011'的博客

8、原文地址

王玉略的我的網站