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/ ...
随机推荐
- nodeJs入门笔记(一)
node将"HTTP服务器"这一层抽离,直接面向浏览器用户 如PHP运行之前先要配置一个功能强大而复杂的HTTP 服务器,譬如Apache.IIS 或Nginx,还需要将PHP 配 ...
- QT连接mysql中文显示问题
亲测OK! #vim /etc/mysql/my.cnf [mysqld]下面加入: default-character-set=utf8 重启mysql /etc/init.d/mysql rest ...
- Java定时器:Timer
项目中往往会遇到需要定时的任务,例如订单,当用户在某个规定时间内没有操作订单时,订单状态将会发生改变. 那么在这种情况下,我们会用到定时器. 举例: import java.util.Timer; / ...
- ubuntu 安装ruby rails
步骤0 - 安装系统需要的包 Mac 请安装 Xcode 开发工具,它将帮你安装好 Unix 环境需要的开发包 Ubuntu 请安装 $ sudo apt-get install -y build-e ...
- C# Socket SSL通讯笔记
一.x.509证书 1.制作证书 先进入到vs2005的命令行状态,即:开始-->程序-->Microsoft Visual Studio 2005-->Visual Studio ...
- 关于“#ifdef __cplusplus”
CC++语言在编译的时候为了解决函数的多态问题,会将函数名和参数联合起来生成一个中间的函数名称,而C语言则不会,因此会造成链接时找不到对应函数的情况,此时C函数就需要用extern “C”进行链接指定 ...
- Android系统Recovery工作原理之使用update.zip升级过程---updater-script脚本语法简介以及执行流程(转)
目前update-script脚本格式是edify,其与amend有何区别,暂不讨论,我们只分析其中主要的语法,以及脚本的流程控制. 一.update-script脚本语法简介: 我们顺着所生成的脚本 ...
- CC++初学者编程教程(3) 安装VS2010 boost标准库开发环境
1. BOOST编译过程非常复杂,目前为了学习BOOST,首先搭建基于VS2010的BOOST开发环境. Boost库 8 9. 10. 11 12 13 14 15. 16. 17. 18 ...
- C语言入门(4)——常量、变量与赋值
对于基本数据类型量,按其取值是否可改变又分为常量和变量两种.在程序执行过程中,其值不发生改变的量称为常量,其值可变的量称为变量.它们可与数据类型结合起来分类. 常量 常量有字符常量(Character ...
- cdoj 斐波那契进制
//昨天在姜神的提醒下发现这种方法可以解决升级版的 非升级版直接01背包就好 //这题脑洞开得真是够大 解:大概要先把数分解成斐波拉契进制,x=f1*(0或1)+f2*(0或1)+...+fn*(0或 ...