A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© AMay 中级黑马   /  2018-10-15 17:30  /  963 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文



【前言】
       在前后台共同进行一个项目的时候常会遇到一种情景,大家统一定义好接口数据格式后,前后端各自按照接口进行开发,当前端开发完成后台接口却还没有开发完成,这个时候要进行接口测试,只能等后台开发完成才能测试,在这中间会浪费了很多时间。
       现在有个利器可以解决这个问题,即使不用后台,只要提前制定好接口的数据格式,那么前端就可以自己模拟接口来进行接口测试了,那就是MockjaxmockJSON插件。
Mockjax简介】
       Mockjaxhttps://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.png
                              
2.    用了mockjax之后的效果,我们在请求ajax之前加上这段代码
代码如下:
[JavaScript] 纯文本查看 复制代码
$.mockjax({

         url: '/ItcastApi/GetUserData',

        // 返回的HTTP状态码

        status: 200,

        // 返回的内容

        responseText:'Here you are!'

      });
效果图如下
2.png
3.    实际上在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 />"

                    );

                }

            }

        });

});
效果如下:
3.png
4.    如果我们需要的是大量的数据,这时候我们就需要mockJSON, 它可以根据我们所制定的规则, 来产生JSON数据,我们修改Mockjax的responseText部分使用mockJSON来产生数据:
需要引入
[HTML] 纯文本查看 复制代码
<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"

        }]

    })
});   
效果如下
4.png
首先我们先在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产生随机的日期.

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马