首页 > 代码库 > mockjax & mockjson

mockjax & mockjson

2024-07-24 05:10:28   218人阅读

准备工作：

　　首先你需要两个库：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 =http://www.mamicode.com/ $.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节点，我们传递的参数就能找到了。

mockjax & mockjson


联系
我们