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——数据模板定义的更多相关文章

  1. JS数据模板分离(告别字符串拼接)-template

    刚开始在写第一个动态网页的demo时,由于html不多,便使用字符串拼接的方法添加到dom来渲染,可是在后来写某外卖app时也需要如此添加,打开代码一看几千行,突然感觉累觉不爱 一行行的拼接有这功夫别 ...

  2. ajax+js数据模板+后台

    .net 后台,ajax+js模板引擎的数据填充,制作无刷新分页 js模板用laytpl 待续...

  3. mock.js 使用教程

    mock.js 数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...

  4. MOCK.JS 生成随机数据,拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  5. vue-cli+mock.js+axios模拟前后台数据交互

    最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...

  6. 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  7. Mock.js:前后端分离开发工具

    概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...

  8. 使用RAP2和Mock.JS实现Web API接口的数据模拟和测试

    最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微 ...

  9. RAP Mock.js语法规范

    Mock.js 的语法规范包括两部分: 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD ...

随机推荐

  1. C#-----集合List<T>的常用方法

        雇员实体类 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  2. Beautiful Soup 解析html表格

    from bs4 import BeautifulSoup import urllib.request doc = urllib.request.urlopen('http://www.bkzy.or ...

  3. 易爆物D305

    分析:典型的并查集,每一个物品合一看成一个独立的顶点,则一个简单化合物就是一条边,如果两个顶点x,y联通则说明有危险,所以可以用一个并查集来维护图的联通分量集合,并查集的详解有一篇写的很易懂的博客并查 ...

  4. tensorflow学习笔记1:导出和加载模型

    用一个非常简单的例子学习导出和加载模型: 导出 写一个y=a*x+b的运算,然后保存graph: import tensorflow as tf from tensorflow.python.fram ...

  5. Java8-对map过滤

    1.对map按值过滤返回值 public class TestMapFilter { public static void main(String[] args) { Map<Integer, ...

  6. js时间相关

    let date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位) date.getMonth( ...

  7. 如何对tcp流认证并加密

    一个场景:目前越来越多的业务需要远程读写Redis,而Redis 本身不提供 SSL/TLS 的支持,在需要安全访问的环境下. 这时候就需要额外的手段进行加密认证,这里有两种手段:spiped 和 n ...

  8. telnet客户端操作memcached增删改查

    一,通过telnet连接进入memcached(telnet 本地ip/服务器ip 端口) 进入后回车看效果: 二, 添加数据和取出数据 添加命令: add     key名    0(固定)    ...

  9. radhat6.6上安装oracle12c RAC (三)

    三.DB(database)安装 3.1 DB软件安装 orale用户登录,解压db安装包 [root@jydb1 tools]# su - oracle [oracle@jydb1 ~]$ cd / ...

  10. 使用QPlainText代替QText

    1.现象 在项目开发中,经常使用QText来显示解析的数据,比如从网络中获取到一个数据包,解析成中文加以显示,当时间过久或者字符串比较多的时候,就会产生一定的卡顿,所以需要限制QText的行数,或者清 ...