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. Spring Cloud Gateway Ribbon 自定义负载均衡

    在微服务开发中,使用Spring Cloud Gateway做为服务的网关,网关后面启动N个业务服务.但是有这样一个需求,同一个用户的操作,有时候需要保证顺序性,如果使用默认负载均衡策略,同一个用户的 ...

  2. vue中样式的典型操作(:class,:style)

    <template> <div class="home-wrapper"> <div class="home-top">th ...

  3. localStorage,sessionStorage和cookie的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  4. Log4j2 HelloWorld

    Log4j2 使用教程 Log4j2 的好处就不在这里一一列举了,如果你搜了2,说明你对它一定有兴趣,并且想了解它,使用它. 一.下载log4j2 ,基本上你只需要导入下面两个jar包即可: log4 ...

  5. Java面试题整理---Redis篇

    1.redis支持五种数据结构类型?   2.redis内部结构?   3.redis持久化机制?   4.redis集群方案与实现?   5.redis为什么是单线程的?   6.redis常见回收 ...

  6. zigbee 中ZDO的理解

    ---恢复内容开始--- ZigBee     物理层:主要进行无线数据的收发,同时定义了无线传输的信道以及频率.      MAC层:使用CSMA-CA机制接入到无线信道,负责传输信标帧,保持同步和 ...

  7. MYSQL数据库常用操作命令

    1.连接MYSQL: mysql -h 主机地址 -u 用户名 -p 2.修改密码: 安装后第一次登录使用: mysqladmin (因为没有初始密码) 修改原密码: mysqladmin -u ro ...

  8. CH 6201 走廊泼水节题解

    题目链接:CH6201 当时在海亮考试的第一题: 心得:其实一个算法是要真正理解这个思路和过程,而并不是单单知道它是用来写什么题的: 思路:n个节点有n-1条边,把这n-1条边按照权值从小到大排序,有 ...

  9. 你不知道的JS(3)来聊聊this

    为什么要使用this?什么是this? 来看一段代码 function identify() { return this.name.toUpperCase(); } function speak() ...

  10. SpringMVC,SpringBoot使用ajax传递对象集合/数组到后台

    假设有一个bean名叫TestPOJO. 1.使用ajax从前台传递一个对象数组/集合到后台. 前台ajax写法: var testPOJO=new Array(); //这里组装testPOJO数组 ...