html网页中使用mock,Jquery/js单元测试中实现Mock(js实现mock接口)

场景

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

例子

Title

$(function () {

$.ajax({

url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',

type: 'GET',

error: function (xhr) {

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

},

success: function (response) {

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

}

});

});

var isAjaxMocked = true;

if (isAjaxMocked) {

$.mockjax({

url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',

status: 200,

responseTime: 750,

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

});

}

User Data

参考:

说明: 当后端接口开发完成后,直接将

var isAjaxMocked = false即可。

mockJson

当需要mock的返回数据很多时(

光是拚好Json数据就会花费掉许多的时间),使用mockjson。

mockJSON, 它可以根据我们所制定的规则, 来产生JSON数据,

我们修改mockjax的responseText部分使用mockJSON来产生数据

例子:

Title

$(function () {

$.ajax({

url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',

type: 'GET',

error: function (xhr) {

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

},

success: function (response) {

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

}

});

});

var isAjaxMocked = true;

if (isAjaxMocked) {

$.mockjax({

url: 'http://localhost:8080/springmvc0006/WebApi/GetUserData.svc',

status: 200,

responseTime: 750,

responseText:$.mockJSON.data.LOREM

});

}

User Data

修改部分:

responseText:$.mockJSON.data.LOREM

responseText:$.mockJSON.data

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值