mockjax & mockjson

准备工作:

  首先你需要两个库: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

mockjax & mockjson的相关文章

Ajax模拟插件 - Mockjax介绍

在前后台共同进行一个项目的时候常会遇到一种情景,大家统一定义好接口数据格式后,前后端各自按照接口进行开发,当前端开发完成后台接口却还没有开发完成,这个时候要进行接口测试,只能等后台开发完成才能测试,在这中间会浪费了很多时间. 现在有个利器可以解决这个问题,即使不用后台,只要提前制定好接口的数据格式,那么前端就可以自己模拟接口来进行接口测试了,那就是Mockjax和mockJSON插件. Mockjax(https://github.com/jakerella/jquery-mockjax)主要是

jQuery Mockjax插件使用心得

最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码,第一个版本是让他直接创建一个data.json静态数据,然后再ajax调用,缺点非常明显,首先需要localhost的支持,其次是能测的功能太单一,如果遥测是不同的url,或不同的参数是就力不从心了. 后来在网上找寻能够模拟客户端请求服务器的工具时意外发现了mockjax这个工具,瞬间被征服了,只要在引入一个预定好的要拦截的url和要返回的数据,就可以轻松实现不同url,同url不同数据的拦截.处理.返回.从此之后前端轻松的撇开后端的束

mockjax MOCK.js的拦截ajax请求

今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置支持 jQuery.Zepto.KISSY 拦截请求的前提是基于各类库的 内置方法来进行拦截. 比如jquery. 在$.ajax() 之前 会有一个前置过滤器$.ajaxPrefilter() 先进行处理,然后根据参数的不同来分发请求(模拟或者直接发送请求). 在模拟的时候 可以根据给出的参数 返

工具集

好用的工具集 转:http://www.yimingzhi.com/2015/03/lao-yi-de-kai-fa-gong-ju-he-lei-ku-ji-2014-ban Visual Studio 2013 扩展 Visual Studio 2013 Update 4:是目前微软发布的最新版开发工具升级包,高效而且强大.下面的扩展都是该版本的Visual Studio下的,老版本可以根据名字自行查找安装. CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实

C# 常用工具合集

Visual Studio 2013 扩展 Visual Studio 2013 Update 4:是目前微软发布的最新版开发工具升级包,高效而且强大.下面的扩展都是该版本的Visual Studio下的,老版本可以根据名字自行查找安装. CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实时提供代码复杂度的报告,以便帮助开发人员降低代码复杂度.提高代码质量. CssCop:可以帮助开发者检查和编写优秀的css代码,提高css对浏览器的兼容性.编码质量和渲染性能.

Mock, 让你的开发脱离接口

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

专业上的常用的工具和类库集 By 老衣

Visual Studio 2013 扩展 CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实时提供代码复杂度的报告,以便帮助开发人员降低代码复杂度.提高代码质量. CssCop:可以帮助开发者检查和编写优秀的css代码,提高css对浏览器的兼容性.编码质量和渲染性能. NuGet Package Manager for Visual Studio 2013: 一组用于自动执行从VS项目中安装.升级.配置和删除依赖包的过程的工具.本文档中的前后端技术选型中的绝大部

老衣的开发工具和类库集之2014版

转载自:http://www.yimingzhi.com/2015/03/lao-yi-de-kai-fa-gong-ju-he-lei-ku-ji-2014-ban 今天是2015年的元宵节了,14年承诺朋友们公开自己常用的工具和类库集,一直没能及时兑现.今天忙里偷个闲,整理了一下清单,在此公布出来,希望能够对大家在.NET.App.Web等开发方面有所帮助.也当是给.NET开发者一个元宵礼物吧,哈哈.不废话直接上菜啦~ [注:最下方有补充更新] Visual Studio 2013 扩展Vi

JS实现-页面数据无限加载

在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: 当滚动条滚动到页面底部时,提示“正在加载…”. 当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”: 实现数据无限加载的过程大致如下: 1.滚动条滚动到页面底部. 2.触发ajax加载,把请求返回的数据加载到列表后面. 如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:当滚