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