Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的。应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作。
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
1.'name|min-max': string 通过重复string
生成一个字符串,重复次数大于等于min
,小于等于max
例子:'lastName|2-5':'jiang', 重复jiang这个字符串 2-5 次 2.'name|count': string 通过重复string
生成一个字符串,重复次数等于count
例子:'firstName|3':'fei', 重复fei这个字符串 3 次,打印出来就是'feifeifei'。 3.'name|min-max': number 生成一个大于等于min
、小于等于max
的整数,属性值number
只是用来确定类型。
例子:'age|20-30':25, 生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型 4.'name|+1': number 属性值自动加 1,初始值为number
例子:'big|+1':0, 属性值自动加 1,初始值为 0,以后每次请求在前面的基础上+1 5.'name|min-max.dmin-dmax': number 生成一个浮点数,整数部分大于等于min
、小于等于max
,小数部分保留dmin
到dmax
位。
例子:'weight|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位 6.'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简单易学,可以便于前端的快速开发,也可以自己定义好需要的格式,让后端配合你,按照你的格式编写他的后端代码。
Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)的更多相关文章
- mock.js 的用法 -- 脱离后端独立开发,实现增删改查功能
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能,无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- 基于SpringBoot开发一个Restful服务,实现增删改查功能
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- HBuilder webApp开发 Websql增删改查操作
来源:http://blog.csdn.net/zhuming3834/article/details/51471434 这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBu ...
- Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能
本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用): ,并使用m ...
- vue.js带复选框表单的增删改查
近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...
随机推荐
- 手动安装Package Control
手动下载一个package control的包:https://github.com/wbond/package_control 然后Download ZIP后,解压,将解压后的文件夹重命名为 Pac ...
- PS 怎么去掉图片上的文字
第一步:打开需要去掉文字的图片. 第二步:在左侧工具栏中选择“吸管工具”. 第三步:在文字附近选取颜色. 第四步:在左侧工具栏中选择“矩形选框工具”,并选中要消除的文字. 第五步:在菜单栏“编辑”中选 ...
- IFE第一天
我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...
- 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
- [LOJ3084][GXOI/GZOI2019]宝牌一大堆——DP
题目链接: [GXOI/GZOI2019]宝牌一大堆 求最大值容易想到$DP$,但如果将$7$种和牌都考虑进来的话,$DP$状态不好设,我们将比较特殊的七小对和国士无双单独求,其他的进行$DP$. 观 ...
- python学习日记(面向对象——继承)
什么是继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 python中类的继承分为:单继承和多继承 class Par ...
- 微信公众、QQ群、知识星球(附比特币链接)
文章一般都会在公众号抢先预览,一个系列出差不多的时候一般博客园汇总一下(文章很长) 微信公众号:逸鹏说道(dotnetcrazy) 群友刚创建的Python中级群,有一定Python基础的可以共同探讨 ...
- Java基础 -- 嵌套类(非静态嵌套类、静态嵌套类)
可以将一个类的定义放在另一个类的内部定义,这样的类就被称为嵌套类,包含嵌套类的类被称为外部类(outer class),也可以叫做封闭类. 嵌套类可以分为两种: 静态嵌套类(Static Nested ...
- 20175221 《Java程序设计》迭代和JDB(课下作业,选做):
20175221 <Java程序设计> 迭代和JDB(课下作业,选做): 任务详情 1 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功 ...
- 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例
#用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...