mock.js 使用教程
mock.js
数据模板
#查看模板生成的数据
var data = Mock.mock({
//list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围
// test|3.2-5 3.xx-3.xxxxx 整数位3,小数位位数范围为2-5
//'yourname|2-4': 'alice-' 重复字符串的次数范围2-4
//常规真实数据格式,@name @color @url @first @last
'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
'name': '@name',
'color': '@color',
'url': '@url',
'email': '@email',
'friends|3': [{name: '@name'}],
'price|10-20.2-5': 11,
'cost|10-20.3': 11,
'test|3.2-5': 52,
'yourname|2-4': 'alice-'
});
JSON.stringify(data, null, 2);
var data = Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
});
JSON.stringify(data, null, 2);
#拦截请求,返回模拟数据
var Mock.mock('http://g.cn', {
'list|3-8': [{'id|+3': 1}]
});
数据模板定义
'name|rule': value
name 为属性名, rule 为规则, value 为值,属性名和生成规则之间用|
分隔,生成规则的格式有7种:- 'name|min-max': value
- 'name|count': value
- 'name|min-max.dmin-dmax': value //.dmin-dmax 小数点后保留的位数范围
- 'name|min-max.dcount': value //小数点后保留dcount位
- 'name|count.dmin-dmax': value //貌似用处不大
- 'name|+step': value //从value递增/减
**属性值可以包含占位符(如@name),属性值指定了最终值的初始值和数据类型. **
属性值是字符串 String
'name|min-max': 'value' 通过重复 'value' 生成一个字符串,重复次数大于等于 min,小于等于 max。
'name|count': 'value' 通过重复 'value' 生成一个字符串,重复次数等于 count。
属性值是数字 Number
- 'name|+1': 100 属性值自动加 1,初始值为 100
- 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
- 'name|1-100.1-10': 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
属性值是布尔型 Boolean
- 'name|1': value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
- 'name|min-max': value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
属性值是对象 Object
- 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
- 'name|count': {} 从属性值 {} 中随机选取 count 个属性。
属性值是数组 Array
- 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
- 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
- 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
属性值是数组 Function
- 'name': function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 'name' 所在的对象。
数据占位符定义
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:@占位符
@占位符(参数 [, 参数])
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性
{
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
}
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
常用方法
Mock.mock( rurl?, rtype?, template|function(options) )
根据数据模板生成模拟数据。
参数的含义和默认值如下所示:
参数 rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
参数 rtype:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
参数 template:可选。表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
参数 function(options):可选。表示用于生成响应数据的函数。
参数 options:指向本次请求的 Ajax 选项集。
Mock.mockjax(library)
覆盖(拦截) Ajax 请求,目前内置支持 jQuery、Zepto、KISSY。
Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”,引用格式为 @占位符(参数 [, 参数]) 。
Mock.tpl(input, options, helpers, partials)
基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。
mock.js 使用教程的更多相关文章
- Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...
- mock.js使用教程
转载自:https://blog.csdn.net/qq_42205731/article/details/81705350 cdn引入文件 :<script src="http:// ...
- mock.js 模拟数据
1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- mock.js
mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...
- Google Analytics统计代码GA.JS中文教程
2010-12-06 11:07:08| 分类: java编程 | 标签:google analytics ga js 代码 |举报|字号 订阅 Google Analytics ...
- 使用 mock.js 让前端开发与后端独立
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 前后端分离开发——模拟数据mock.js
mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...
随机推荐
- jsp文件中的路径问题
最近在写一个OA系统,在资源的路径问题上面出现了一点问题,使用相对路径的话不利于文件的改动,所以使用了绝对路径来写. 在jsp文件中 <%= String path = request.ge ...
- mysql集群安装配置
看网上很多人说mysql集群不是很稳定,因此这2天做了下mysql的集群,打算配置没有什么问题了,过2天做下相关的性能测试,我的配置环境如下: 操作系统: Centos5.2 软件 ...
- OC语法7——内存管理之@property参数
@property的参数: 我们已经知道为了给开发者提供便捷,OC提供了@porperty关键字,它可以自动生成属性的set和get方法. 但是我们又知道,在OC中还面临者对象内存管理的问题,而且我们 ...
- PHP中cURL错误号对照[转]
PHP cURL curl_errno 在php程序编写中,使用curl函数库的几率还是挺高的,如curl_init().curl_setopt().curl_exec().curl_errno()等 ...
- vs2013 MVC 无法确定要使用哪一版本的 ASP.NET Web Pages错误
在web.config文件<configuration>节点下添加 <appSettings> <add key="webPages:Version&q ...
- 1.9 需求订单导入MDS
1.9 需求订单导入MDS 1.9.1 业务方案描述 将”需求订单维护表”中完成调整维护的需求订单导入系统标准MDS中,使之驱动对应的物料需求计划(MRP)的运行. 1.9.2 ...
- TFS Build Definition
1. TFS Build 简介 在团队项目开发中,编译常常是一个很困难的事情! 可能你会反问编译有什么难的?不就是右键,然后点击 Build/Rebuild, 或者直接按 F5 么?这都不会,真不知 ...
- git操作标签
操作标签 如果标签打错了,也可以删除: $ git tag -d v0.1 Deleted tag 'v0.1' (was e078af9) 因为创建的标签都只存储在本地,不会自动推送到远程.所以,打 ...
- 详解Spring中的CharacterEncodingFilter--forceEncoding为true在java代码中设置失效--html设置编码无效
在项目中有很多让人头疼的问题,其中,编码问题位列其一,那么在Spring框架中是如何解决从页面传来的字符串的编码问题的呢?下面我们来看看Spring框架给我们提供过滤器CharacterEncodin ...
- 雕爷牛腩这样判断零售未来-搜狐IT
雕爷牛腩这样判断零售未来-搜狐IT 雕爷牛腩这样判断零售未来