在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费了很多时间,  现在有个利器可以解决这个问题, 即使不用后台,只要提前制定好接口的报文,那么前端就可以自己模拟接口来进行接口测试了, 今天要讲的东西就是mockjax和mockJSON

mockjax和mockJSON是两套不同的Javascript Library, 它们都是基于JQuery来开发的,
mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,
mockJSON则有点像是Json资料的Data Generater, 根据我们指定的格式随机数生成回传的Json资料.

首先我们来看个范例,
假设我们目前需要开发一个网站, 它会使用Ajax呼叫/WebApi/GetUserData.svc, 取得User资料,
并将所取得的数据显示在画面上, 我们可以很快速地完成这部分的程序代码.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>Mocking JQuery Ajax</title>

     <script src="Scripts/jquery.1.7.2.js" type="text/javascript"></script>

     <script src="Scripts/jquery.mockjax.js" type="text/javascript"></script>

     <script src="Scripts/jquery.mockjson.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $.ajax({

                     url: '/WebApi/GetUserData.svc',

             type: 'GET',

             error: function (xhr) {

                 alert('無法取得資料!');

             },

             success: function (response) {

                 $("div#result").append(response);

             }

         });

         });

     </script>

 </head>

 <body>

     <h1>User Data</h1>

     <div id="result">

     </div>

 </body>

 </html>

执行网页, 我们可以发现这段程序是无法成功执行的,

因为/WebApi/GetUserData.svc并不存在, 所以会跳出错误讯息.

这时候mockjax就派上用场了, 我们在呼叫ajax之前加上这段程序代码

 var isAjaxMocked = true;

 if (isAjaxMocked) {

     $.mockjax({

             url: '/WebApi/GetUserData.svc',

     status: 200,

     responseTime: 750,

     responseText: 'User Information'

     });

 }

这代表我们mock了JQuery的Ajax,
当使用Ajax呼叫/WebApi/GetUserData.svc这个网址时,
将会花费750ms的时间, 回传status code 200, 以及'User Information'这个字符串
重新执行一次网页, 可以看到执行成功了

当然, 实际上在呼叫WebService时并不会只回传一个字符串,
那能不能支持Json格式的数据呢? 答案是可以的, 我们可以改写我们的程序代码

 $(function () {

     var isAjaxMocked = true;

     if (isAjaxMocked) {

         $.mockjax({

             url: '/WebApi/GetUserData.svc',

             status: 200,

             responseTime: 750,

             responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }

         });

     }

     $.ajax({

         url: '/WebApi/GetUserData.svc',

         type: 'GET',

         error: function (xhr) {

             alert('無法取得資料!');

         },

         success: function (response) {

             var data = response.user;

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

                 $("div#result").append(

                     "<ul>" +

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

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

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

                 "</ul>" +

                 "<hr />"

                 );

             }

         }

     });

 });

执行之后, 可以看到成功接收Json数据, 并且显示在画面上

一切看起来很完美, 但现在问题来了, 如果我们需要的是大量的数据,
我们光是拚好Json数据就会花费掉许多的时间, 该怎么办呢?
这时候我们就需要mockJSON, 它可以根据我们所制定的规则, 来产生JSON数据,
我们修改mockjax的responseText部分使用mockJSON来产生数据

var isAjaxMocked = true;

if (isAjaxMocked) {

    $.mockjax({

        url: '/WebApi/GetUserData.svc',

        status: 200,

        responseTime: 750,

        responseText: $.mockJSON.generateFromTemplate({

            "user|3-6": [{

                "id|+1": 1,

                "name": "@MALE_FIRST_NAME",

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

            }]

        })

    });

}

在这边我使用了$.mockJSON.generateFromTemplate方法, 并设定了user数据产生的规则如下,
产生 3-6个user, 每个user之中有以下字段,
id从1开始依序增加, 每次+1,
name产生男生的名字,
birthday产生随机的日期.
重新执行网页, 我们可以发现每次重整网页结果都不同, 这可以用来模拟查询出不同的数据

是不是很轻松就可以产生大量的Json数据呢?
而一旦WebService开发完成, 我们只要将isAjaxMocked改成false, 就可以马上实际呼叫WebService啰!

在这两套Library帮忙之下, 就算Web Service完全还没开发好, 也并不会影响到我们前端页面的开发,
而这两套Library在使用上也十分的简单, 更进阶的使用可以参考我所做的心智图或是官方网站.
mockjax 设定:

mockJSON设定:

结语
透过这两套Library, 不仅仅是可以方便进行Ajax的本机端模拟测试,
还可以用在Javascript部分的单元测试, 让单元测试不会因为Ajax而难以进行,
这让我们在前端开发的进行上更加的方便!

Mock, 让你的开发脱离接口的更多相关文章

  1. 前后端分离之让前端开发脱离接口束缚（mock）

    情景:     领导:小吴啊,最近在忙什么啊?     前吴:(心想:我擦勒,难道划水被领导发现了?也不能怪我啊,后台的哥们接口还没给呢,但要是实话实说不就对不起后台哥们了吗?)           ...

  2. 那些年，我们开发的接口之：QQ登录（OAuth2.0）

    那些年,我们开发的接口之:QQ登录(OAuth2.0) 吴剑 2013-06-14 原创文章,转载必须注明出处:http://www.cnblogs.com/wu-jian 前言 开发这些年,做过很多 ...

  3. 【Mock平台】测试开发实战01-开篇PRD和需求详细

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 平台背景 从业务特性上,不少测试的服务很多是依赖第三方的接口的,比如其中的支付场景,就需要很多状态的返回进行验证,但大部分服务提供商没有很 ...

  4. 《PHP开发APP接口》笔记

    PHP开发APP接口 [TOC] 课程地址 imooc PHP开发APP接口 学习要点 APP接口简介 封装通信接口方法 核心技术 APP接口实例 服务器端 -> 数据库|缓存 -> 调用 ...

  5. PHP开发APP接口（二）

    这里将会调用前面博客的数据库连接单例.文件缓存类和开发APP接口(一) <?php // http://app.com/list.php?page-=1&pagesize=12 requ ...

  6. PHP开发APP接口

    第1章 APP接口简介 - 课程简介 (:) - APP接口介绍 (:) - 客户端APP通信 (:) 最近学习 - 客户端APP通信格式区别 (:) - APP接口做的哪些事儿 (:) 第2章 封装 ...

  7. 早期MyBatis开发与接口式Mybatis开发的简介

    早期MyBatis开发与接口式Mybatis开发的简介 一.早期版本的myBatis使用 导jar包            1.配置mybatis.xml的配置文件                1) ...

  8. 智表ZCELL产品V1.4.0开发API接口文档 与 产品功能清单

    为了方便大家使用ZCELL,应网友要求,整理编写了相关文档,现与产品一起同步发布,供大家下载使用,使用过程中如有疑问,请与我QQ联系. 智表(ZCELL)V1.4.0版本  功能清单文档下载地址: 功 ...

  9. Mock Server 实现post方法的接口（三）

    Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...

随机推荐

  1. c++优先级

    蒟蒻连c++的运算优先级都搞不清楚QAQ 转载自http://www.cnblogs.com/chenglei/archive/2009/08/03/1537822.html C++优先级列表 Pre ...

  2. hdu 1050 Moving Tables_贪心

    题意:你搬n个桌子,桌子从一个地方搬到另一个地方,走廊只允许同时一个桌子通过,教室分布在两边,奇数在一边,偶数在一边,当桌子不冲突时可以同时搬运,冲突时要等别的那个桌子搬完再搬. 思路:因为奇数桌子在 ...

  3. CSS 定位 (Positioning)学习

    最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...

  4. OC基础1：一些基本概念

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于类方法和实例方法: (1).类方法 ...

  5. android xml布局文件属性说明

    android xml布局文件属性说明 [摘]android xml布局文件属性说明 LinearLayout和RelativeLayout 共有属性:java代码中通过btn1关联次控件androi ...

  6. AS3: Socket 数据包 收 发

    AS3.0中使用Socket使用tcp服务器协议,它是一种流协议,不停的将分片传输给客户端,P作为流,发包是不会整包到达的,而是源源不断的. 它不同于UDP服务器协议,UDP作为数据包协议,整包到达. ...

  7. 从linux telnet到exchange邮件server来測试发送邮件

    我们在Linux下,能够通过telnet邮件server的25port(一般smtp邮件server都是这个),来測试是否能发送邮件. 前提是先得把DNS配好,或者/etc/hosts文件制定好邮件s ...

  8. DevExpress GridView使用技巧之列标题点击事件

    在这里使用GridView的MouseDown事件.这里同样使用的是GridHitInfo来获取点击位置的信息,来判断是否在列标题上.GridHitInfo根据鼠标点击的x.y坐标获取该点的相关信息, ...

  9. 在ASP.NET项目中使用CKEditor

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...

  10. css float笔记

    float 1.破坏性,让设置了float属性的元素脱离文档流 2.包裹性:div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器.如果没有包裹性,如何实现文字环绕(flo ...