在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的。应该有人通过编写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 的用法 -- 脱离后端独立开发,实现增删改查功能的更多相关文章

  1. Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能,无需写任何代码)

    JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式                      (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...

  2. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  3. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  4. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  5. Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  6. HBuilder webApp开发 Websql增删改查操作

    来源:http://blog.csdn.net/zhuming3834/article/details/51471434 这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBu ...

  7. Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能

    本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用):     ,并使用m ...

  8. 基于SpringBoot开发一个Restful服务,实现增删改查功能

    前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...

  9. vue.js带复选框表单的增删改查

    近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...

随机推荐

  1. jq相关操作

    1事件: <div class="ele">123</div> box.onclick = function(ev){ ev:系统传入的事件对象 ele.i ...

  2. [转]ARM平台下独占访问指令LDREX和STREX

    参考:ARM平台下独占访问指令LDREX和STREX的原理与使用详解 全文转载如下: 为了实现线程间同步,一般都要在执行关键代码段之前加互斥(Mutex)锁,且在执行完关键代码段之后解锁.为了实现所谓 ...

  3. addEvenListener('DOMContentLoaded',function(){})

  4. HDU 2829 斜率优化DP Lawrence

    题意:n个数之间放m个障碍,分隔成m+1段.对于每段两两数相乘再求和,然后把这m+1个值加起来,让这个值最小. 设: d(i, j)表示前i个数之间放j个炸弹能得到的最小值 sum(i)为前缀和,co ...

  5. grunt与requirejs结合使用

    // 多个js压缩成一个js // Project configuration. module.exports = function(grunt) { // 使用严格模式 'use strict'; ...

  6. Leetcode 365.水壶问题

    水壶问题 有两个容量分别为 x升和 y升的水壶以及无限多的水.请判断能否通过使用这两个水壶,从而可以得到恰好 z升的水? 如果可以,最后请用以上水壶中的一或两个来盛放取得的 z升 水. 你允许: 装满 ...

  7. 用ajax异步请求一个块

    使用用户控件,作为一个块,生成一段独立的html. 请求一个一般应用程序,在一般应用程序中加载读取用户控件,并给用户控件传值.     Page page = new Page();          ...

  8. 九度oj 题目1367:二叉搜索树的后序遍历序列

    题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 输入: 每个测试案例包括2行: 第一行为1个整数 ...

  9. 九度oj 题目1090:路径打印

    题目描述: 给你一串路径,譬如:a\b\c a\d\e b\cst d\你把这些路径中蕴含的目录结构给画出来,子目录直接列在父目录下面,并比父目录向右缩一格,就像这样:a   b     c   d  ...

  10. 给localhost加一个域名

    在C:\Windows\System32\drivers\etc目录下有个文件: hosts 打开后如此加上: localhost name resolution is handled within ...