Mock.js——数据模板定义
1. 安装
npm install mockjs --save-dev //安装开发依赖
2. 数据模板定义规则
Mock.mock({...})
String:
'string|num1-num2':str
eg:'name|1-5':'*'
//从num1和num2之间随机取值a,复制a个str并连接成一个字符串
'string|count':str
eg:'name|3':'*'
//一个由count个str拼成的字符串,count是定值
Number:
'number|num1-num2':num
eg:'age|10-20':100
//生成一个介于num1和num2之间的数字,num是初始值
'number|+1':num
eg:'age|+1':100
//num为初始值,每次被调用num都会+1。前提是在生成list时
Mock.mock({
'obj|3-5':[{
'age|+1':2
}]
})
'number|num1-num2.dnum1-dnum2':num
eg:'age|1-100.1-10':1
//生成一个整数部分是num1和num2之间的数字,小数部分的长度为dnum1和dnum2之间的长度;num为初始值
//整数部分只有一个时整数固定,小数部分只有一个时,小数长度固定
Boolean:
'boolean|1':res
eg:'boolean|1':true
//值为res的概率占了一半,res为true或false
'boolean|num1-num2':res
eg:'boolean|1-100':true
//值为res的概率为num1/(num1+num2)
Object:
'object|count':{
a:1,
b:'11',
...
}
//从下面的属性中随机选择count个属性作为object的属性。count大于属性个数时取属性个数
'object|num1-num2':{
...
}
//取num1-num2之间的一个数a,然后从对象属性中随机取a个属性
Array:
'array|1':[
...
]
//从数组中取一个值作为array的元素
'array|count':[
...
]
//将数组复制count份并连接成一个数组
'array|num1-num2':{
...
}
//从num1和num2中取一个值a,然后将数组复制a份并连接成一个数组
Function:
Mock.mock({
'foo': 'Syntax Demo',
'name': function() {
return this.foo
}
})
值:
{
"foo": "Syntax Demo",
"name": "Syntax Demo"
}
RegExp:
'regexp':/.../
eg:'regexp':/[a-z][0-9]/ 结果:'regexp':'b1'
//生成一个满足正则内容的字符串。数字、字符等随机选取
'regexp|count':/.../
eg:'regexp|3':/[a-z][0-9]-/ 结果:'regexp':'b1-b1-b1-'
//复制count份正则的结果并连成一个字符串
'regexp|num1-num2':/.../
eg:'regexp|1-5':/[a-z][0-9]/ 结果:'regexp':'b1b1b1b1'
//从num1和num2中随机选取一个数a,复制a份正则的结果并串成字符串
Path:
绝对路径:
Mock.mock({
"foo": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo @/nested/a/b/c"
})
值:
{
"foo": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "Hello Mock.js"
}
相对路径:
Mock.mock({
"foo": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"relativePath": {
"a": {
"b": {
"c": "@../../../foo @../../../nested/a/b/c"
}
}
}
})
值:
{
"foo": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"relativePath": {
"a": {
"b": {
"c": "Hello Mock.js"
}
}
}
}
//绝对路径是从对象的根路径开始算的,相对路径是从当前位置开始算的
PS:取的范围值都是可以取到两端的极限值的
Mock.js——数据模板定义的更多相关文章
- JS数据模板分离(告别字符串拼接)-template
刚开始在写第一个动态网页的demo时,由于html不多,便使用字符串拼接的方法添加到dom来渲染,可是在后来写某外卖app时也需要如此添加,打开代码一看几千行,突然感觉累觉不爱 一行行的拼接有这功夫别 ...
- ajax+js数据模板+后台
.net 后台,ajax+js模板引擎的数据填充,制作无刷新分页 js模板用laytpl 待续...
- mock.js 使用教程
mock.js 数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...
- MOCK.JS 生成随机数据,拦截 Ajax 请求
mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...
- vue-cli+mock.js+axios模拟前后台数据交互
最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...
- 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)
摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...
- Mock.js:前后端分离开发工具
概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...
- 使用RAP2和Mock.JS实现Web API接口的数据模拟和测试
最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微 ...
- RAP Mock.js语法规范
Mock.js 的语法规范包括两部分: 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD ...
随机推荐
- webstorm编辑器使用
1.自动生成vue文件模板,如图
- ACM-ICPC 2018 南京赛区网络预赛(A, J)
A 签到题 Alice, a student of grade 666, is thinking about an Olympian Math problem, but she feels so d ...
- STM32F103引脚功能定义
- office全系列激活脚本-改良版.cmd
@ECHO OFFTITLE office 全版本系统激活@echo offfor /l %%a in (8,1,16) do (for /f "tokens=*" %%i in ...
- 如何查看视图的sql语句
select text from syscomments s1 join sysobjects s2 on s1.id=s2.id where name='视图名称'前提条件是视图没有被加密,有权限
- spring mvc 配置之 context:annotation-config vs component-scan
<context:annotation-config/> spring的注解@Resource.@Autowire, @Required and @Qualifier 等注解只是一个提示, ...
- Navicat Premium 简体中文版 12.0.16 以上版本国外官网下载地址(非国内)
国内Navicat网址是:http://www.navicat.com.cn 国外Navicat网址是:http://www.navicat.com 国外的更新比国内的快,而且同一个版本,国内和国外下 ...
- QGraphicsItem的paint函数的一些相关问题
在QGraphicsItem中,一个成员函数paint(),其声明如下: void QGraphicsItem::paint ( QPainter * painter, const QStyleOpt ...
- 01: 腾讯云API-云服务器
1.1 云服务器 1.腾讯云SDK使用举例 网址:https://cloud.tencent.com/document/sdk/Python #! /usr/bin/env python # -*- ...
- speech
1.李开复:一个人的成功,15%靠专业知识,其余15%人际沟通,公众演讲,以及影响他人的能力 2.演讲是一门遗憾的艺术 3.没有准备就等于准备失败 4.追求完美,就是在追求完蛋 5.宁可千日无机会,不 ...