准备工作:
首先你需要两个库:mockjax: https://github.com/appendto/jquery-mockjax/
mockjson: https://github.com/mennovanslooten/mockJSON
为什么使用mock:
我们在开发的过程中,经常遇到一个项目在开发的时候,接口定义完成后,前后端分开去开发,前端在开发完成后,后端的接口还没有出来,那么前端就无法进行测试,使用mock,就可以模拟出接口中的json数据,也可以模拟ajax请求,这对于开发来说,无疑是一个大好消息。
怎么使用:
在程序中正常调用ajax
1 $.ajax({ 2 type: "POST", 3 url: ‘url‘, 4 data: {}, 5 dataType: ‘json‘, 6 success: function(data) { 7 8 }, 9 error: function(data) { 10 11 } 12 })
这个时候我们发出了一个请求,请求接口就是项目中定义好的接口 url,现在我们需要使用mockjax创建一个模拟请求,在mockjax中使用mockjson模拟json数据:
$.mockJSON.data.KEY = [‘关键词1‘, ‘关键词2‘, ‘关键词3‘, ‘关键词4‘, ‘关键词5‘, ‘关键词6‘, ‘关键词7‘, ‘关键词8‘, ‘关键词9‘, ‘关键词10‘]; $.mockjax({ url: ‘url‘, status: 200, responseTime: 750, response: function() { var data = $.mockJSON.generateFromTemplate({ "list|20-30": [{ "id|+1": 1, "img": "images/1.jpg", "title": "@KEY ", "level": "1", "group|0-1": true, "park|0-1": true, "address": "海南", "price|100-500": 100 }] }); this.responseText = data; } });
这样,我们在发出请求后,就会得到一个json数据,我们就可以用这个json进行页面的操作了。
当然,mockjax也是可以接收参数的,我们查看 response: function(settings){},我们输出settings消息:console.log(settings);在控制台找到data节点,我们传递的参数就能找到了。
时间: 2024-10-05 16:43:49