模拟数据测试的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