前端mock数据之mockjax和mockjson
用处
在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费了很多时间, 现在有个利器可以解决这个问题, 即使不用后台,只要提前制定好接口的报文,那么前端就可以自己模拟接口来进行接口测试了, 今天要讲的东西就是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的更多相关文章
- 前端mock数据的几种方式
方式 备注 本地php服务架设 直接输出json 使用在线mock服务 如easyMock.apizza.Rap1\2 , 可以远程协作 本地node服务:koa+mongodb 本地node ...
- 前端开发数据mock神器 -- xl_mock
1.为什么要实现数据 mock 要理解为什么要实现数据 mock,我们可以提供几个场景来解释, 1.现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟 ...
- 前端通信：ajax设计方案（十）--- 完善Promise A+规范，增加mock数据功能
半年不迭代,迭代搞半年,说的就是我,这里有点尴尬了,直接进入主题吧 我记得在这篇博客的时候集成了Promise的,不过那个时候就简简单单的写了一点最基础,在一些特殊的case上,还是有点问题的,所以才 ...
- 前端使用express mock数据
项目中使用的是RESTFUL接口规范,项目框架用的是vue,项目开始时,调研了几个比较有名的mock数据的插件:比如webpack的中间件api-mock,json-server,mockjs,还有e ...
- 构建前端Mock Server
写在前面 最开始只是在做活动页面时苦于效率太低制定了这样一个自动化的工作环境, 所以Github上项目名是Rapid-Dev-Activity-Page(快速开发活动页...). 活动页这类比较简单的 ...
- 前后端分离--构建前端Mock Server--windows部署rap
mock:模拟的,虚假的 mock server:模拟服务,模拟请求,模拟虚假数据 为了前后端更好的分工,接口文档是必须的,前后端都根据接口文档写代码,然后对接接口就行了. 但是,后端跟不上前端节奏, ...
- json-server mock数据
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- 微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
§ 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...
- vue-cli项目使用mock数据的方法（借助express）
前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...
随机推荐
- PHP的加密解密字符串函数
程序中经常使用的PHP加密解密字符串函数 代码如下: /********************************************************************* 函数 ...
- ActiveReports 报表应用教程 (2)---清单类报表
在大多报表系统中都有清单类报表的身影,比如:客户清单.商品信息清单.设备清单.物品采购清单.记账凭证.货品发货清单.员工清单等等.清单类报表看视乎比较简单,但是,由清单类报表演变而来的报表类型却十分丰 ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- 205 Isomorphic Strings
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- Delphi的几个跨平台小游戏例子。
Embarcadero开源了几个FireMonkey的小游戏,支持Windows, Android,Ios, MacOS等. 源码地址: https://github.com/EmbarcaderoP ...
- Python基础（二）,Day2
常用的数据类型 int 整型 float 浮点 bool 布尔 string 字符串 列表的语法和用法 # 创建一个列表 list = [] #一个空列表 list = ['2323123','asd ...
- ruby on rails 2.3+的版本不再支持cgi
ruby on rails 2.3+的版本不再支持cgi了,恶心到了,换其他框架,看了款cramp,完全没资料,完全不让人入门 操蛋的厉害,ruby果然是小众的窝里乐,放弃使用
- ahjesus C# 4.0 Parallel 并行运算
Parallel.For - for 循环的并行运算 Parallel.ForEach - foreach 循环的并行运算 Parallel.Invoke - 并行调用多个任务 Task - 任务,基 ...
- Bootstrap-用ICheck插件给CheckBox换新装
直接来吧! 下面是添加上复选框以后的树形菜单效果: 这样看起来有种驴唇不对马嘴的感觉. 所以就要想办法给这些复选框添加1些样式,让全部界面看起来搭配1些. 通过查询得知,有个叫ICheck的第3方Bo ...
- DevExpress中透明玻璃效果
Aero玻璃效果 下图左是DevExpress无玻璃效果,图右是Windows自带玻璃效果. Windows Aero 是从 Windows Vista 开始使用的新型用户界面,透明玻璃感让用户一眼贯 ...