背景 :

前后端开发依赖后端数据, 当前端页面开发完成 ,后端在没有提供前端数据的情况下 ,前端无法测试,

导致开发效率低 ,速度慢 ,为了解决这一问题 ,通过Mock模拟生成数据在不改变原有代码前提下拦截url返回数据。

开始实验

1、随机生成长度1~3的数组

// array数组
var data = Mock.mock({
'list|1-3': [{// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'id|+1': 1, // 属性 id 是一个自增数,起始值为 1,每次增 1
'name|1':"吴小明", //字符串
"city": {
'number|1':"03443",
'cityname|1':"北京"
}
}]
})

2、拦截url 返回生成数据

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

	Mock.mock( '/user_list', data )

3、创建一个ajax请求

	$.get('/user_list',function(response){
console.log("result->"+response);
})

4、输出结果

result->{
"list": [
{
"id": 1,
"name": "吴小明",
"city": {
"number": "03443",
"cityname": "北京"
}
},
{
"id": 2,
"name": "吴小明",
"city": {
"number": "03443",
"cityname": "北京"
}
}
]
}

其他格式

// object对象
var data = Mock.mock({
"city|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})

结果 :

result->{
"city": {
"310000": "上海市",
"320000": "江苏省"
}
}
// 生成多数组
var data = Mock.mock({
'code':0,
'result':{
'monthAmount|1-5': [{
'date': '2016-08',
'income|1000-100000':2289,
'expend|1000-100000':2000
}],
'billList|1-10': [{
'id|+1': 1,
'amount|1000-500000':500000,
'balance|1000-500000':500000,
'type|1-2':1,
'sourceId|1-5':2,
'orderNumber':'45678900443432',
'mchName':'大王杂货店',
'date':"2017-09-14 16:58:52"
}]
}
})

结果 :

result->{
"code": 0,
"result": {
"monthAmount": [
{
"date": "2016-08",
"income": 12645,
"expend": 56038
},
{
"date": "2016-08",
"income": 30689,
"expend": 46730
}
],
"billList": [
{
"id": 1,
"amount": 191426,
"balance": 197800,
"type": 2,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 2,
"amount": 340886,
"balance": 432764,
"type": 1,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 3,
"amount": 361772,
"balance": 306595,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 4,
"amount": 360725,
"balance": 35917,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 5,
"amount": 182107,
"balance": 413671,
"type": 1,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 6,
"amount": 351296,
"balance": 42905,
"type": 1,
"sourceId": 4,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 7,
"amount": 457212,
"balance": 43885,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
}
]
}
}

完整代码已提交到github ,使用的话可以直接从github上面下载运行

https://github.com/fozero/front-awesome/tree/master/mockjs

mock官方地址: http://mockjs.com/

总结 :

在前端开发中,学会使用一些工具,能极大的提高开发效率 , 减少重复劳动 ,意义重大。

作者:fozero

声明:原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/8083331.html

标签:mock

Mock拦截请求URL返回模板数据的更多相关文章

  1. asp.net core 使用中间件拦截请求和返回数据,并对数据进行加密解密。

    原文:asp.net core 使用中间件拦截请求和返回数据,并对数据进行加密解密. GitHub demo https://github.com/zhanglilong23/Asp.NetCore. ...

  2. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  3. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  4. http statusCode(状态码)请求URL返回状态值的含义

    http statusCode(状态码)请求URL返回状态值的含义 请求URL浏览器返回状态码的含义(http statusCode): 201-206都表示服务器成功处理了请求的状态代码,说明网页可 ...

  5. springboot拦截json后缀的请求,返回json数据

    需求:请求list.json返回以下数据 { "jsonResult": { "code": 200, "message": "查 ...

  6. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  7. MOOC(2)-Django开发get、post请求,返回json数据

    1.对get请求直接返回参数 如果请求多个参数,也只能返回一个参数,这里只返回了username参数 如果想要返回多个参数值,可以返回json格式数据 2.对get请求返回json数据 # views ...

  8. 【C#】WebService接受跨域请求及返回json数据

    问题概述 通过Web Service发布服务供客户端调用是一种非常简单.方便.快速的手段,并且服务发布后会有一个服务说明页面,直观明了,如图: 一般情况下,在web页面中的JavaScript中调用W ...

  9. 请求Url返回数据较大,使结果分页获取

    首先创建了一个单元测试,如下项目视图: 分页结果映射类PageResult的编写: using System; using System.Collections.Generic; using Syst ...

随机推荐

  1. Codeforces 817F MEX Queries

    题意:对一个维护三种操作:1.将[l..r]中的数全部加入集合中.2.将集合中[l..r]范围内的数删去.3.将集合中在[l..r]中的数删去,并将之前不在集合中的数加入集合 考虑到最近线段树总是写爆 ...

  2. Sagit.Framework For IOS 开发框架入门教程3:Start引导页及框架布局和隐藏事件的内幕

    前言: 框架依旧在快速更新着:在重构.简化代码,统一标准的过程中. 中间也遇到各种坑,不过好在一步一脚印的解决了. 虽然还有些功能还在思考,不过教程,还是得补上: 上篇文章:Sagit.Framewo ...

  3. 基于跳跃表的 ConcurrentSkipListMap 内部实现(Java 8)

    我们知道 HashMap 是一种键值对形式的数据存储容器,但是它有一个缺点是,元素内部无序.由于它内部根据键的 hash 值取模表容量来得到元素的存储位置,所以整体上说 HashMap 是无序的一种容 ...

  4. Android后台执行的定时器实现

    Android后台运行定时器,方便我们运行定位跟踪等任务需求. 以下简要说明实现Android后台定时器的要点, 文章末尾能够下载到project代码,可直接编译运行. AndroidManifest ...

  5. HBase源代码分析之HRegion上MemStore的flsuh流程(一)

    了解HBase架构的用户应该知道,HBase是一种基于LSM模型的分布式数据库.LSM的全称是Log-Structured Merge-Trees.即日志-结构化合并-树. 相比于Oracle普通索引 ...

  6. idea的快捷键

    idea的快捷键大全 Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+ ...

  7. Intellij IDEA 使用小结

    快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键.在这个主题中,您可以找到最不可缺少的列表,使 IntelliJ IDEA 轻松实现第一步 ...

  8. oracle如何连接别人的数据库,需要在本地添加一些配置

    2.oracle如何连接别人的数据库,需要在本地添加一些配置 1.找到 listener.ora 文件,打开(一般在 C 文件夹) ORCL = (DESCRIPTION = (ADDRESS = ( ...

  9. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路---Linux环境搭建

    最近朋友托我帮忙研究如何把一个DTCMS部署到Linux下,经过1天的研究,部署基本成功,可能有些细节还未注意到,现在把心得分享一下.过程比预期的要简单 身为.Net程序员,这个问题的第一步可能就是如 ...

  10. 配置SQL Server on Linux(2)

    1. 前言 前一篇配置SQL Server on Linux(1),地址:http://www.cnblogs.com/fishparadise/p/8125203.html ,是关于更改数据库排序规 ...