Mockjs详细使用说明
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的。应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作。
大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki
安装
使用npm安装:
npm install mockjs;
或直接
<script src="http://mockjs.com/dist/mock.js"></script>;
数据模板格式:
'name|rule': value
属性名|生成规则: 属性值
GET请求
发起get请求:
$.ajax({
url: 'http://test.com',
type: 'get',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js响应:
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
// Mock响应模板
Mock.mock('http://test.com', {
"user|1-3": [{ // 随机生成1到3个数组元素
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1,初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'fromObj|2': obj, // 从obj对象中随机获取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
},{
'gf': '@cname'
}]
});
可以看到结果:
{
"user": [
{
"name": "董静",
"id": 88,
"age": 25,
"birthday": "2015-04-01",
"city": "湖南省 怀化市",
"color": "#c0f279",
"isMale": false,
"isFat": false,
"fromObj": {
"dd": "44",
"aa": "11"
},
"fromObj2": {
"bb": "22",
"cc": "33"
},
"brother": "jack",
"sister": "jack",
"friends": [
"jack",
"jim",
"jack",
"jim"
]
},
{
"gf": "田杰"
}
]
}
响应时也可以是使用function, 如:
Mock.mock('http://test.com', 'get', function() {
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id': 88
}
]
});
});
结果:
{
"user": [
{
"name": "许超",
"id": 88
}
]
}
POST请求
发起post请求:
$.ajax({
url: 'http://test.com',
type: 'post',
dataType: 'json',
data: {
account: 888,
pwd: 'abc123'
}
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
Mock.js响应:
Mock.mock('http://test.com', function(options) {
console.log(options);
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id|+1': 88
}
]
});
});
可以看到结果:
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
{
"user": [
{
"name": "曾明",
"id": 88
}
]
}
自定义响应时间
可以自定义设置响应时间, 可以是绝对值, 也可以是区间.
// 设置4秒后再响应
Mock.setup({ timeout: 4000 });
// 设置1秒至4秒间响应
Mock.setup({ timeout: '1000-4000' });
数据集
Mock.Random是一个工具类,用于生成各种格式随机数据. 有两种写法:
第一种:
// 生成一个email格式的字符串
console.log(Mock.mock('@email')); // 结果: s.uorjeqdou@crqfpdypt.gw
第二种:
var Random = Mock.Random;
console.log(Random.email()); // 结果: r.quyppn@yit.cv
提供的种类有:
Type Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id
如果上面没有你需要的种类, 还可以自定义扩展, 如下:
Random.extend({
weekday: function(date) {
var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return this.pick(weekdays);
},
sex: function(date) {
var sexes = ['男', '女', '中性', '未知'];
return this.pick(sexes);
}
});
console.log(Random.weekday()); // 结果: Saturday
console.log(Mock.mock('@weekday')); // 结果: 112Tuesday
console.log(Random.sex()); // 结果: 男
console.log(Mock.mock('@sex')); // 结果: 未知
校验
Mock.valid(template, data): 用来校验真实数据data是否与数据模板template匹配
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
var realData = { "user": [{ 'name': '张三', 'id': 90 } ]};
console.log(Mock.valid(tempObj, realData));
JSON Schema
Mock.toJSONSchema(template): 用来把Mock.js风格的数据模板template转换成JSON Schema
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));
增删改查这些操作
1.一个简单的例子:
Mock.mock('http://123.com',{
'name|3':'fei',//这个定义数据的模板形式下面会介绍
'age|20-30':25,
})
$.ajax({
url:'http://123.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
在这个例子中我们截获地址为http://123.com返回的数据是一个拥有name和age的对象,那么ajax返回的数据就是Mock定义的数据,返回的数据格式如下:
{
name:'feifeifei',
age:26,
}
至于上面的定义模板数据的格式是什么意思,下面就给大家介绍。
2.介绍如何定义数据
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
- 'name|min-max': string 通过重复
string
生成一个字符串,重复次数大于等于
min
,小于等于
max
例子:'lastName|2-5':'jiang', 重复jiang这个字符串 2-5 次
- 'name|count': string 通过重复
string
生成一个字符串,重复次数等于
count
例子:'firstName|3':'fei', 重复fei这个字符串 3 次,打印出来就是'feifeifei'。
- 'name|min-max': number 生成一个大于等于
min
、小于等于
max
的整数,属性值
number
只是用来确定类型。
例子:'age|20-30':25, 生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型
- 'name|+1': number 属性值自动加 1,初始值为
number
例子:'big|+1':0, 属性值自动加 1,初始值为 0,以后每次请求在前面的基础上+1
- 'name|min-max.dmin-dmax': number 生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin到 dmax位。
例子:'weight|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位
- 'name|1': boolean 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
例子:'likeMovie|1':Boolean, 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
7.属性值是对象:var obj={'host':'www.baidu','port':'12345','node':'selector'}
7.1. 'name|count': object 从属性值 object中随机选取 count个属性。
例子:'life1|2':obj, 从属性值 obj 中随机选取 2 个属性
7.2. 'name|min-max': object 从属性值 object中随机选取 min到 max个属性
例子:'life1|1-2':obj, 从属性值 obj 中随机选取 1 到 2 个属性。
8.属性值是数组:var arr=['momo','yanzi','ziwei']
8.1. 'name|1': array 从属性值 array中随机选取 1 个元素,作为最终值
例子:'friend1|1':arr, 从数组 arr 中随机选取 1 个元素,作为最终值。
8-2. 'name|+1': array 从属性值 array中顺序选取 1 个元素,作为最终值。
例子:'friend2|+1':arr, 从属性值 arr 中顺序选取 1 个元素,作为最终值,第一次就是'momo',第二次请求就是'yanzi'
8-3. 'name|count': array 通过重复属性值 array 生成一个新数组,重复次数为 count。
例子:'friend3|2':arr, 重复arr这个数字2次作为这个属性值,得到数据应该是['momo','yanzi','ziwei','momo','yanzi','ziwei']
8-4.'name|min-max': array 通过重复属性值 array生成一个新数组,重复次数大于等于 min,小于等于 max
例子:'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组,重复次数大于等于 2,小于等于 3
3.实际的ajax请求例子:
var arr=['momo','yanzi','ziwei']
var obj={
'host':'www.baidu',
'port':'12345',
'node':'selector'
}
Mock.mock('http://www.bai.com',{
'firstName|3':'fei',//重复fei这个字符串 3 次,打印出来就是'feifeifei'。
'lastName|2-5':'jiang',//重复jiang这个字符串 2-5 次。
'big|+1':0, //属性值自动加 1,初始值为 0
'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型
'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位。
'likeMovie|1':Boolean,//随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
'friend1|1':arr,//从数组 arr 中随机选取 1 个元素,作为最终值。
'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素,作为最终值
'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组,重复次数大于等于 2,小于等于 3。
'life1|2':obj,//从属性值 obj 中随机选取 2 个属性
'life1|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
})
$.ajax({
url:'http://www.bai.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
4.如何实现数据 增 删 改 查 的模拟数据接口
下面我就模拟后端删除功能的接口实现
/*模拟删除数据的方式*/
var arr=[
{name:'fei',age:20,id:1},
{name:'liang',age:30,id:2},
{name:'jun',age:40,id:3},
{name:'ming',age:50,id:4}
]
Mock.mock('http://www.bai.com','delete',function(options){
var id = parseInt(options.body.split("=")[1])//获取删除的id
var index;
for(var i in arr){
if(arr[i].id===id){//在数组arr里找到这个id
index=i
break;
}
}
arr.splice(index,1)//把这个id对应的对象从数组里删除
return arr;//返回这个数组,也就是返回处理后的假数据
})
$.ajax({
url:'http://www.bai.com',
type:"DELETE",
data:{
id:1//假设需要删除id=1的数据
},
dataType:'json',
success:function(e){
console.log(e)
}
})
至于更多的详细文档可以去官方网站查看,http://mockjs.com/,Mock.js简单易学,可以便于前端的快速开发,也可以自己定义好需要的格式,让后端配合你,按照你的格式编写他的后端代码。
参考:https://www.cnblogs.com/zhenfei-jiang/p/7235339.html
https://segmentfault.com/a/1190000008839142
Mockjs详细使用说明的更多相关文章
- python的urllib2库详细使用说明
一直以来技术群里会有新入行的同学提问关于urllib和urllib2以及cookielib相关的问题.所以我打算在这里总结一下,避免大家反复回答同样的问题浪费资源. 这篇属于教程类的文字,如果你已经非 ...
- R语言-Knitr包的详细使用说明
R语言-Knitr包的详细使用说明 by 扬眉剑 来自数盟[总舵] 群:321311420 1.相关资料 1:自动化报告-谢益辉 https://github.com/yihui/r-ninja/bl ...
- STM32-USB详细使用说明(转)
源:STM32-USB详细使用说明 附件HID的双向通信 亮点STM32开发板充实了USBHID数据发送和接收例程(STM32固件库3.5 USB库3.4)
- linux backtrace()详细使用说明,分析Segmentation fault
linux backtrace()详细使用说明,分析Segmentation fault 在此之前,开发eCos应用程序时,经常碰到程序挂掉后,串口打印输出一大串让人看不懂的数据.今天才明白,原来这些 ...
- IDea 工具debug模式详细使用说明
IDea 工具debug模式详细使用说明 IDEA中如何使用debug调试项目 一步一步详细教程 Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生 ...
- python_docx制作word文档详细使用说明【转】
目前网上对这一个库的介绍得很少,很零散,所以很多功能我是尽量参考其官网,但是官网上面很多功能目前只有说明文档,而代码并还没有及时更新,以至于按照官网上面做了,python却报错.比如:自定义表格的 ...
- PCIE_DMA实例一:xapp1052详细使用说明
一:前言 很多和我一样初学pcie的硬件工程师都会遇到这样一个问题,看了不少pcie相关的资料,还是搞不清这玩意儿到底该怎么用.于是我们打开ISE的core_generator工具,生成了一个pcie ...
- CocoaPods | iOS详细使用说明
一:介绍 在iOS开发中,经常会使用到第三方库,[CocoaPods](https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 下面就和大家 ...
- [原创]iFPGA-Cable FT2232H Xilinx / Altera / Lattice 三合一JTAG & UART调试器-详细使用说明
iFPGA-Cable调试器使用说明 全文分为6部分: 第0部分:实物.连线及其驱动安装说明 第1部分:Xilinx JTAG 第2部分:UART 第3部分:Altera JTAG 第4部分:Latt ...
随机推荐
- HTML5应用程序缓存Application Cache详解.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 数据结构 nxd(顺序对)
数据结构 nxd(顺序对) 问题描述 给定 n 个数 a1,a2,...,an,求满足条件的(i,j)数量: i<j 且 a[i]<a[j] ★数据输入输入第一行为一个正整数 n.第二行为 ...
- jQuery AJAX 函数
jQuery 拥有供 AJAX 开发的丰富函数(方法)库. 什么是 AJAX? AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. ...
- 具有增删改查功能的表格Demo--【BootStrap】
http://blog.csdn.net/wangmei4968/article/details/48437175
- JavaScript面向切面编程入门
来源极客网学习视频 关键词Javascript AOP编程 例子1: function test() { alert(2); } //理解,所谓的传入一个"回调",该怎样设计bef ...
- Windows 安装 mysql-5.7.12-winx64(CommunityServer) 备忘
下载后文件名 mysql-5.7.12-winx64.msi 以为还是会和以往一样,一路next傻瓜式安装并完成设置,然后启动运行,但实际情况不是,感觉就是一解压过程,然后点击The MySQL Co ...
- 几款Web服务器性能压力测试工具
一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载. 但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般 ...
- Android6的Logger日志系统
版权声明:本文为博主原创文章,未经博主允许不得转载. Android2.x中Logger日志系统采用了字符设备驱动来支持,到了Android6.0已经找不到kernel/goldfish/driver ...
- Android为 ContentProvider 提供了那些服务内容?
ContentProvider 可以调用系统想要共享的内容,安卓为我们提供了哪些和大家共享的东西呢? 官方文档: https://developer.android.com/reference/and ...
- Spring IOC机制使用SpEL
一.SpEL 1.1 简介 Spring Expression Language,Spring表达式语言,简称SpEL.支持运行时查询并可以操作对象图. 和JSP页面上的EL表达式.Str ...