mock.js的运用
一:概念
Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求,生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
二:安装
cnpm install mockjs
三:数据模板定义规范DTD
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
属性名 和 生成规则 之间用竖线 | 分隔。生成规则 是可选的。生成规则 有 7 种格式:
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则的含义需要依赖属性值的类型才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型.
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
'list|5‐10': [{
'id|+1': 1,
'name|2‐3':'测试',
'phone|11':'1',
'point|122‐500':0,
'money|3000‐8000.2':0,
'status|1':true,
'default|1‐3':true,
'detail|2‐3':{'id':1,'date':'2005‐01‐01','content':'记录'}
}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
1.属性值是string
'name|count': string
: 'phone|11':'1'
通过重复 string 生成一个字符串,重复次数等于 count
'name|min-max': string
: 'name|2‐4':'测试'
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
2.属性值是number
'name|+1': number
: 'id|+1': 1
属性值自动加 1,初始值为 number
'name|min-max': number
: 'point|122‐500':0
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型
'name|min-max.dcount': value
: 'money|3000‐8000.2':0
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分为dcount位
'name|min-max.dmin-dmax': number
: 'money2|1000‐5000.2‐4':0
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到dmax 位
3.属性值是boolean
'name|1': boolean
: 'status|1':true
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
'name|min-max': value
: 'default|1‐3':true
随机生成一个布尔值,值为 value 的概率是 min / (min + max)
4.属性值是Object
'name|count': object
: 'detail|2':{'id':1,'date':'2005‐01‐01','content':'记录'}
从属性值 object 中随机选取 count 个属性
'name|min-max': object
: 'detail|2‐3':{'id':1,'date':'2005‐01‐01','content':'记录'}
从属性值 object 中随机选取 min 到 max 个属性
5.属性值是array
'name|count': array
通过重复属性值 array 生成一个新数组,重复次数为 count
'name|min-max': array
: 'list|5‐10': [{...}]
通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max
四:数据占位符定义规范DPD
Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。内置方法列表:
Basic
: boolean,natural,integer,float,character,string,range,date,time,datetime,now
Image
: image, dataImage
Color
: color
Text
: paragraph, sentence, word, title, cparagraph, csentence,cword, ctitle
Name
: first, last, name, cfirst, clast, cname
Web
: url, domain, email, ip, tld
Address
: area, region,county
Helper
: capitalize, upper, lower, pick, shuffle
Miscellaneous
: guid, id
示例:
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
'list|10': [{
'id|+1': 1,
'name':'@cname',
'ename':'@last',
'cfirst':'@cfirst',
'point':'@integer',
'birthday':'@date',
'pic':'@image',
'title':'@title',
'content':'@cword(100)',
'url':"@url",
'ip':"@ip",
'email':"@email",
'area':'@region',
'address':'@county(true)'
}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
1.基本方法
string 字符串
: 'name':'@string'
integer 整数
: 'point':'@integer'
date 日期
: 'birthday':'@date'
可以生成随机的基本数据类型
2.图像方法
'pic':'@image'
image 随机生成图片地址
3.文本方法
@title: 标题
: 'title':'@title'
@cword(100) :文本内容 参数为字数
: 'content':'@cword(100)'
4.名称方法
cname :中文名称
: 'name':'@cname'
cfirst:中文姓氏
: 'cfirst':'@cfirst'
Last:英文姓氏
: 'ename':'@last'
5.网络方法
可以生成url ip email等网络相关信息
'url':"@url"
'ip':"@ip"
'email':"@email"
5.地址方法
@region 区域
: 'area':'@region'
@county 省市县
: 'address':'@county(true)'
mock.js的运用的更多相关文章
- mock.js
mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...
- 使用 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/ ...
- Mock.js:前后端分离开发工具
概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...
- mockjax MOCK.js的拦截ajax请求
今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...
- Mock.js 与 fiddler 前端模拟数据与拦截请求
最近 工作需要 接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...
- mock.js 使用教程
mock.js 数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...
- MOCK.JS 生成随机数据,拦截 Ajax 请求
mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...
- dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- 【mock.js】后端不来过夜半,闲敲mock落灯花 ——南宋·赵师秀
mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了, 赵师秀非常生气 ...
随机推荐
- 第二章 psql客户端工具
第二章 psql客户端工具 pgAdmin是一款功能丰富.开源免费的PostgreSQL图形化工具.psql是PostgreSQL自带的命令行工具,功能全面,是PostgreSQL数据库工程师必须熟练 ...
- ansible-乱
工作机制:ssh 无客户端 工作方式: 1,CMDB 2,公有云私有云API 3,使用ad-hoc 4,ansible-playbook ansible 执行命令,底层调用传输连接模块,将命令或文件传 ...
- jquery odd选择器 语法
jquery odd选择器 语法 作用::odd 选择器选取每个带有奇数 index 值的元素(比如 1.3.5).index 值从 0 开始,所有第一个元素是偶数 (0).最常见的用法:与其他元素/ ...
- CDOJ 1057 秋实大哥与花 线段树 区间更新+区间查询
链接: I - 秋实大哥与花 Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Submit ...
- 【BZOJ3811/UOJ36】 玛里苟斯
Description 魔法之龙玛里苟斯最近在为加基森拍卖师的削弱而感到伤心,于是他想了一道数学题. S 是一个可重集合,S={a1,a2,…,an}. 等概率随机取 S 的一个子集 A={ai1,… ...
- 举例子说明ubuntu中remove,autoremove,purge区别
转自:慎用 apt-get autoremove ! apt-get 提供了一个用于下载和安装软件包的简易命令行界面.卸载软件包主要有这3个命令 remove – 卸载软件包autoremove ...
- mpv播放器键盘快捷键
作为个人认为最好用的播放器之一的MPV播放器,其开源,体积小,支持的格式多样等等非常优秀的功能.但其中也有部分麻烦的地方,因为功能太过强大,导致不知道某些功能的快捷键是什么,这就非常需要一个可以查阅的 ...
- springboot(四).配置FastJson自定义消息转化器
配置FastJson自定义消息转化器 一.fastJson简介 fastJson是阿里巴巴旗下的一个开源项目之一,顾名思义它专门用来做快速操作Json的序列化与反序列化的组件.它是目前json解析最快 ...
- maven工程项目与项目之间的依赖方式
首先看一下项目结构: 1.需要在父工程中把子工程为坐标引进来,同时标注父工程为pom工程: 2.同时在父工程中把子工程当作一个模块引进来 3.需要在每一个子项目中通过parent标签,标注 ...
- java 用redisTemplate 的 Operations存取list集合
一 .存取为list类型 @RestController @RequestMapping("/test") @Slf4j public class TestController { ...