用处

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

简介

mockjax和mockJSON是两套不同的Javascript Library, 它们都是基于JQuery来开发的,

mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,

mockJSON则有点像是Json资料的Data Generater, 根据我们指定的格式随机数生成回传的Json资料.

mockjax官方地址：https://github.com/appendto/jquery-mockjax/

mockJSON官方地址：http://experiments.mennovanslooten.nl/2010/mockjson/

例子

<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'>

<title>Mocking JQuery Ajax</title>

</head>

<body>

        <h1>User Data1</h1><div id="result1"></div>

	<h1>User Data2</h1><div id="result2"></div>

	<h1>User Data3</h1><div id="result3"></div>

</body>

<script src="jquery-1.7.2.js" type="text/javascript"></script>

    <script src="jquery.mockjax.js" type="text/javascript"></script>

    <script src="jquery.mockjson.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

			var isAjaxMocked = true;

			if (isAjaxMocked) {

				$.mockjax({

					url: '/WebApi/GetUserData1.svc'+'*',//匹配任意参数

					status: 200,

					responseTime: 750,

					responseText: 'User Information'

				});

				$.mockjax({

					url: '/WebApi/GetUserData2.svc',

					status: 200,

					responseTime: 750,

					responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }

				});

				$.mockJSON.data.KEY = ['关键词1', '关键词2', '关键词3', '关键词4', '关键词5', '关键词6', '关键词7', '关键词8', '关键词9', '关键词10'];

				$.mockjax({

					url: '/WebApi/GetUserData3.svc',

					status: 200,

					responseTime: 750,

					responseText: $.mockJSON.generateFromTemplate({//使用mockJSON返回json数据

						"user|20-30": [{//user

							"id|+1": 1,//id递增

							"title": "@KEY ",//从KEY中随机选择

							"group|0-1": true,

							"park|0-1": 0,

							"address": "海南",

							"price|100-500": 100//100-500间的随机数

						}]

					})

				});

			}

            $.ajax({

                url: '/WebApi/GetUserData1.svc?ip=null&date=1439827200000',

				type: 'GET',

				error: function (xhr) {

					alert('無法取得資料!');

				},

				success: function (response) {

					$("#result1").append(response);

				}

			});

	    $.ajax({

                url: '/WebApi/GetUserData2.svc',

				type: 'GET',

				error: function (xhr) {

					alert('無法取得資料!');

				},

				success: function (response) {

					var data = response.user;

					for (var i = 0; i < data.length; i++) {

						$("#result2").append(

							"<ul>" +

							"<li>ID: " + data[i].id + "</li>" +

							"<li>Name: " + data[i].name + "</li>" +

							"<li>Birthday: " + data[i].birthday + "</li>" +

							"</ul>" +

							"<hr/>"

						);

					}

				}

			});

	    $.ajax({

                url: '/WebApi/GetUserData3.svc',

				type: 'GET',

				error: function (xhr) {

					alert('無法取得資料!');

				},

				success: function (response) {

					var data = response.user;

					for (var i = 0; i < data.length; i++) {

						$("#result3").append(

							"<ul>" +

							"<li>ID: " + data[i].id + "</li>" +

							"<li>title: " + data[i].title + "</li>" +

							"<li>group: " + data[i].group + "</li>" +

							"<li>park: " + data[i].park + "</li>" +

							"<li>address: " + data[i].address + "</li>" +

							"<li>price: " + data[i].price + "</li>" +

							"</ul>" +

							"<hr/>"

						);

					}

				}

			});

        });

    </script>

</html>

前端mock数据之mockjax和mockjson的更多相关文章

  1. 前端mock数据的几种方式

    方式 备注 本地php服务架设 直接输出json 使用在线mock服务 如easyMock.apizza.Rap1\2 , 可以远程协作  本地node服务:koa+mongodb    本地node ...

  2. 前端开发数据mock神器 -- xl_mock

    1.为什么要实现数据 mock 要理解为什么要实现数据 mock,我们可以提供几个场景来解释, 1.现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟 ...

  3. 前端通信：ajax设计方案（十）--- 完善Promise A+规范，增加mock数据功能

    半年不迭代,迭代搞半年,说的就是我,这里有点尴尬了,直接进入主题吧 我记得在这篇博客的时候集成了Promise的,不过那个时候就简简单单的写了一点最基础,在一些特殊的case上,还是有点问题的,所以才 ...

  4. 前端使用express mock数据

    项目中使用的是RESTFUL接口规范,项目框架用的是vue,项目开始时,调研了几个比较有名的mock数据的插件:比如webpack的中间件api-mock,json-server,mockjs,还有e ...

  5. 构建前端Mock Server

    写在前面 最开始只是在做活动页面时苦于效率太低制定了这样一个自动化的工作环境, 所以Github上项目名是Rapid-Dev-Activity-Page(快速开发活动页...). 活动页这类比较简单的 ...

  6. 前后端分离--构建前端Mock Server--windows部署rap

    mock:模拟的,虚假的 mock server:模拟服务,模拟请求,模拟虚假数据 为了前后端更好的分工,接口文档是必须的,前后端都根据接口文档写代码,然后对接接口就行了. 但是,后端跟不上前端节奏, ...

  7. json-server mock数据

    前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...

  8. 微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  9. vue-cli项目使用mock数据的方法（借助express）

    前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...

随机推荐

  1. Web控件文本框Reset的功能

    在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...

  2. visual studio 局域网远程调试web项目

    1.进入项目根目录,找到.vs/config/applicationhost.config文件(可能是隐藏的) 2.搜索sites节点,找到当前项目,并添加一个binding配置节,将ip地址设置为本 ...

  3. C#学习笔记(1) --简叙.net体系结构

    1 C#与.NET的关系 (1) C#是专门为与Microsoft的.Net Framework一起使用而设计的. (2) C#是一种基于面向对象设计方法的的语言. (3) 需要注意的是,C#就其本身 ...

  4. Netty学习之服务器端创建

    一.服务器端开发时序图 图片来源:Netty权威指南(第2版) 二.Netty服务器端开发步骤 使用Netty进行服务器端开发主要有以下几个步骤: 1.创建ServerBootstrap实例 Serv ...

  5. WebApi传参总动员(五)

    上回说到涉及多个实体的传参,用常规的方法已经不能解决了.这回我们用终极大招搞定她. WebApi:注意要引用JSON.Net [HttpPost] public string GetData(stri ...

  6. coffeescript 1.8.0 documents

    CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque ...

  7. PHP学习笔记：伪静态规则的书写

    这里以阿帕奇为服务器软件,直接上案例: 1.把index.html重定向到index.php RewriteEngine On Options -Indexes ReWriteRule ^index. ...

  8. android.widget.RadioButton 单选按钮（转）

    大家好,我们今天这一节要介绍的是RadioGroup 的组事件.RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只 ...

  9. [ html canvas getImageData Object.data.length ] canvas绘图属性 getImageData Object.data.length 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  10. 由于无法在数据库 'TestNonContainedDB' 上放置锁 ALTER DATABASE 失败

    Error: 消息5601,级别16,状态1,第1行,由于无法在数据库 'TestNonContainedDB' 上放置锁,ALTER DATABASE 失败.请稍后再试.消息5069,级别16,状态 ...