模擬數據測試的mockjax插件

【前言】

在先後臺共同進行一個項目的時候常會遇到一種情景，你們統必定義好接口數據格式後，先後端各自按照接口進行開發，當前端開發完成後臺接口卻尚未開發完成，這個時候要進行接口測試，只能等後臺開發完成才能測試，在這中間會浪費了不少時間。
   如今有個利器能夠解決這個問題，即便不用後臺，只要提早制定好接口的數據格式，那麼前端就能夠本身模擬接口來進行接口測試了，那就是Mockjax和mockJSON插件。

【Mockjax簡介】

Mockjax（https://github.com/jakerella/jquery-mockjax）主要是能夠針對指定的url進行mock，當Ajax請求網址時攔截並回傳假的數據，簡單來講，能夠用來作前端人員的假數據。

【引入文件】
[HTML] 純文本查看 複製代碼
?

<script src="./js/jquery-1.9.1.js"></script>

<script src="./js/jquery.mockjax.js"></script>
【代碼介紹】

1. Ajax請求/ItcastApi/GetUserData，取得User數據，並將所取得的數據顯示在頁面上，以下面代碼

[JavaScript] 純文本查看 複製代碼
?

$.ajax({

type:"get",

    url:"/ItcastApi/GetUserData",

    error: function(xhr) {

        alert('沒法獲取資料!');

    },

    success:function(res){

        alert(res);

    }

  })

執行代碼，咱們能夠發現這段程序是沒法成功執行的，由於/ItcastApi/GetUserData並不存在，因此會跳出錯誤信息

1. 用了mockjax以後的效果，咱們在請求ajax以前加上這段代碼

代碼以下：
[JavaScript] 純文本查看 複製代碼
?

$.mockjax({

url: '/ItcastApi/GetUserData',

    // 返回的HTTP狀態碼

    status: 200,

    // 返回的內容

    responseText:'Here you are!'

  });

效果圖以下

1. 實際上在Ajax請求時並不會只回傳一個字符串，咱們可能須要Json格式的數據。下面咱們改寫下程序代碼來請求Json數據

代碼以下：
[JavaScript] 純文本查看 複製代碼
?

$(function() {

$.mockjax({

        url: '/Itcast/GetUserData',

        // 返回的HTTP狀態碼

        status: 200,

        // 響應時間

        responseTime: 750,

        // 響應的HTTP內容類型

        contentType: 'application/json',

        // 返回的內容

        responseText: {

            "user": [{

                "id": 1,

                "name": "wucaimei",

                "birthday": "2018/01/17"

            }]

        }



    });

    $.ajax({

        url: '/Itcast/GetUserData',

        type: 'GET',

        dataType: 'json',

        error: function(xhr) {

            alert('沒法獲取資料!');

        },

        success: function(response) {

            var data = response.user;

            for (var i = 0; i < data.length; i++) {

                $("#result").append(

                    "<ul>" +

                    "<li>ID: " + data[i].id + "</li>" +

                    "<li>Name: " + data[i].name + "</li>" +

                    "<li>Birthday: " + data[i].birthday + "</li>" +

                    "</ul>" +

                    "<hr />"

                );

            }

        }

    });

});
效果以下：

1. 若是咱們須要的是大量的數據，這時候咱們就須要mockJSON, 它能夠根據咱們所制定的規則, 來產生JSON數據,咱們修改Mockjax的responseText部分使用mockJSON來產生數據：

須要引入
[HTML] 純文本查看 複製代碼
?
1
<script src="./js/jquery-mockjson.js"></script>
代碼以下
[JavaScript] 純文本查看 複製代碼
?

$.mockJSON.data.USER_NAME = ['張三', '李四', '王五', '趙六', '孫七', '周八', '吳九', '鄭十'];

$.mockjax({

url: '/ItcastApi/GetUserData',

// 返回的HTTP狀態碼

status: 200,

// 響應時間

 responseTime: 750,

// 響應的HTTP內容類型

contentType: 'application/json',

// 返回的內容

responseText: $.mockJSON.generateFromTemplate({

    "user|3-6": [{

    "id|+1": 1,

    "name": "@USER_NAME",

         "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"

    }]

})

});
效果以下

首先咱們先在mockJSON中添加了自定義的USER_NAME變量。在設置responseText時我使用了$.mockJSON.generateFromTemplate方法, 並設定了user數據產生的規則以下,產生 3-6個user, 每一個user之中有如下字段,id從1開始依序增長, 每次+1,name產生咱們上面定義的USER_NAME中的名字,birthday使用mockJSON內置的DATE_YYYY、DATE_MM和DATE_DD產生隨機的日期.更多技術資訊可關注：gzitcast