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. 暑期培训7日游解题思路(day1~day3)

    暑期培训7日游解题思路(day1~day3) day1 第一天,王聿中老师出的题目比较简单,T1很水,T2是个简单的DP,T3还是有一点意思的.在网格图中删掉若干条边,使得所有格子都联通,求删掉的边的 ...

  2. (Review cs231n) Spatial Localization and Detection(classification and localization)

     重在图像的定位和检测的内容. 一张图片中只有一种给定类别标签的对象,定位则是图像中有对象框:再这些类中,每一个训练目标都有一个类和许多的图像内部对应类的位置选框. 猜想的仅是类标签,不如说它们是位置 ...

  3. 高校表白APP-冲刺第一天

    今天我们开了第一次会议, 一.任务: 今日任务布局登录页面,注册页面,修改密码界面 明日任务完成基本的登录页面框架 二.遇到的困难: 布局文件里的一些标签,用法不清楚,页面跳转都得学习.

  4. 通过本质看现象:关于Integer受内部初始化赋值范围限制而出现的有趣现象

    左手代码,右手文章.——朱季谦 这是我的第一篇技术博客,作为一名技术小菜鸟,总体而言显得很拙见,但也算是成长路上的一个小脚印,希望能在以后的日子里,可以对JAVA技术有一个更加深入的思考与认识. 前几 ...

  5. concurrent.futures进行并发编程

    Python中进行并发编程一般使用threading和multiprocessing模块,不过大部分的并发编程任务都是派生一系列线程,从队列中收集资源,然后用队列收集结果.在这些任务中,往往需要生成线 ...

  6. spring整合dubbo[单机版]

    Spring整合Dubbo,这个是用xml配置的 (方式一) 来梳理下步骤: 1. 安装zookeeper,在进行简单配置[这里使用单机模式,不用集群] 2. 创建maven项目,构建项目结构 3. ...

  7. 使用QPlainText代替QText

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

  8. macOS在使用音视频通话时会降低其他音频声音的解决方法

    在使用QQ进行通话时,背景无法播放音乐(声音过小),并且在QQ for mac中也没有进行调整的设置选项. Solution: printf "p *(char*)(void(*)())Au ...

  9. Python初次实现MapReduce——WordCount

    前言 Hadoop 本身是用 Java 开发的,所以之前的MapReduce代码小练都是由Java代码编写,但是通过Hadoop Streaming,我们可以使用任意语言来编写程序,让Hadoop 运 ...

  10. vim 翻页命令

    整页翻页 ctrl-f:向下翻一页    f含义:forword ctrl-b:向上翻一页    b含义:backward 翻半页 ctrl-d:向下翻半页  d含义:down ctlr-u:向上翻半 ...