【前言】 在前后台共同进行一个项目的时候常会遇到一种情景，大家统一定义好接口数据格式后，前后端各自按照接口进行开发，当前端开发完成后台接口却还没有开发完成，这个时候要进行接口测试，只能等后台开发完成才能测试，在这中间会浪费了很多时间。 现在有个利器可以解决这个问题，即使不用后台，只要提前制定好接口的数据格式，那么前端就可以自己模拟接口来进行接口测试了，那就是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并不存在，所以会跳出错误信息 2. 用了mockjax之后的效果，我们在请求ajax之前加上这段代码
代码如下： [JavaScript] 纯文本查看 复制代码 $.mockjax({
url: '/ItcastApi/GetUserData',
// 返回的HTTP状态码
status: 200,
// 返回的内容
responseText:'Here you are!'
});效果图如下 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 />"
);
}
}
});
});效果如下： 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"
}]
})
}); 效果如下 首先我们先在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产生随机的日期.
|
|
收藏
淘帖
踩
