Mock.js的使用

0.前言

Mock.js用於生成隨機數據，下載Mock.js。導入項目後能夠生成動態本地數據。

使用https://easy-mock.com/能夠生成在線的動態隨機數據。

測試成熟後，能夠替換爲正式的數據。

做爲數據趨動的微信小程序開發，使用Mock.js能夠大大節省先後端交流的時間，能夠使前端工程師專一於邏輯的實現。

1.什麼是Mock.js?

生成隨機數據，攔截 Ajax 請求。

經過隨機數據，模擬各類場景；不須要修改既有代碼，就能夠攔截 Ajax 請求，返回模擬的響應數據；支持生成隨機的文本、數字、布爾值、日期、郵箱、連接、圖片、顏色等；支持支持擴展更多數據類型，支持自定義函數和正則。

優勢是很是簡單方便, 無侵入性, 基本覆蓋經常使用的接口數據類型.

2.安裝

使用npm安裝:npm install mockjs;

或直接<script src="http://mockjs.com/dist/mock.js"></script>;

3.使用方式

   0.官方示例 

       http://mockjs.com/examples.html

   1-基本語法

Mock.mock('地址',{ "dataname|rule":{"對應的值"} }) 

說明：地址就是咱們經過ajax獲取數據時候填寫的地址，這裏填寫的地址能夠是任意不存在的地址，第二個參數是咱們要模擬的數據，以及相應的規則。

    2-語法規則

    參照官網實例便可：

示例：

Mock.mock('https://www.test.com',{

      "userInfo|4":[{    //生成|num個以下格式名字的數據

          "id|+1":1,  //數字從當前數開始後續依次加一

          "name":"@cname",    //名字爲隨機中文名字

          "ago|18-28":25,    //年齡爲18-28之間的隨機數字

          "sex|1":["男","女"],    //性別是數組中的一個，隨機的

          "job|1":["web","UI","python","php"]    //工做是數組中的一個

      }]

    })

最後經過ajax接收數據，形式以下：

    //ajax接收數據，經過jq

    $.get('https://www.test.com',function(data){

        console.log(JSON.parse(data));

    })

最終生成的數據爲：

 

 

注意：

對於經過Random屬性而來的一些隨機數據-好比隨機生成圖片，使用方式以下：

Mock.mock('http://www.test.com',{

            "ListInfo|5":[{

              "img":Mock.Random.image('200x100')

            }]

        });

//這裏的圖片數據就是隨機生成的，只是大小被指定爲200X100了