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 ...
随机推荐
- Spring Cloud Gateway Ribbon 自定义负载均衡
在微服务开发中,使用Spring Cloud Gateway做为服务的网关,网关后面启动N个业务服务.但是有这样一个需求,同一个用户的操作,有时候需要保证顺序性,如果使用默认负载均衡策略,同一个用户的 ...
- vue中样式的典型操作(:class,:style)
<template> <div class="home-wrapper"> <div class="home-top">th ...
- localStorage,sessionStorage和cookie的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- Log4j2 HelloWorld
Log4j2 使用教程 Log4j2 的好处就不在这里一一列举了,如果你搜了2,说明你对它一定有兴趣,并且想了解它,使用它. 一.下载log4j2 ,基本上你只需要导入下面两个jar包即可: log4 ...
- Java面试题整理---Redis篇
1.redis支持五种数据结构类型? 2.redis内部结构? 3.redis持久化机制? 4.redis集群方案与实现? 5.redis为什么是单线程的? 6.redis常见回收 ...
- zigbee 中ZDO的理解
---恢复内容开始--- ZigBee 物理层:主要进行无线数据的收发,同时定义了无线传输的信道以及频率. MAC层:使用CSMA-CA机制接入到无线信道,负责传输信标帧,保持同步和 ...
- MYSQL数据库常用操作命令
1.连接MYSQL: mysql -h 主机地址 -u 用户名 -p 2.修改密码: 安装后第一次登录使用: mysqladmin (因为没有初始密码) 修改原密码: mysqladmin -u ro ...
- CH 6201 走廊泼水节题解
题目链接:CH6201 当时在海亮考试的第一题: 心得:其实一个算法是要真正理解这个思路和过程,而并不是单单知道它是用来写什么题的: 思路:n个节点有n-1条边,把这n-1条边按照权值从小到大排序,有 ...
- 你不知道的JS(3)来聊聊this
为什么要使用this?什么是this? 来看一段代码 function identify() { return this.name.toUpperCase(); } function speak() ...
- SpringMVC,SpringBoot使用ajax传递对象集合/数组到后台
假设有一个bean名叫TestPOJO. 1.使用ajax从前台传递一个对象数组/集合到后台. 前台ajax写法: var testPOJO=new Array(); //这里组装testPOJO数组 ...