mockjs语法详解
mockjs官网
mock.mock()
Mock.mock( url?, type?, template|function( options ) )
根据数据模板生成模拟数据。参数说明:
- url:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则表达式。例如
/\/domain\/list.json/、'/domian/list.json'
。 - type:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
- template:可选。表示数据模板,可以是对象或字符串。例如
{ 'data|1-10':[{}] }、'@EMAIL'
。 - function(options):可选。表示用于生成响应数据的函数。
- options:指向本次请求的 Ajax 选项集。
示例:
- Mock.mock( template )
根据数据模板生成模拟数据 - Mock.mock(url, template )
当拦截到匹配 url 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。 - Mock.mock(url, function( options ) )
当拦截到匹配 url 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。 - Mock.mock(url, type, template )
当拦截到匹配 url 和 type 的 Ajax 请求时,根据数据模板 template 生成模拟数据,并作为响应数据返回。 - Mock.mock(url, type, function( options ) )
当拦截到匹配 url 和 type 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.toJSONSchema( template )
把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
Mock.setup()
Mock.setup( settings )
配置拦截 Ajax 请求时的行为。参数的含义和默认值:
- settings 必选。配置项集合。
- timeout 可选。指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒后才会返回响应内容;也可以是横杠 ‘-’ 风格的字符串,例如 ‘200-600’,表示响应时间介于 200 和 600 毫秒之间。默认值是’10-100’。
示例:
Mock.setup({timeout: 400
})
Mock.setup({timeout: '200-600'
})
目前,接口 Mock.setup( settings ) 仅用于配置 Ajax 请求,将来可能用于配置 Mock 的其他行为。
常用方法
Type | Method |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
方法 | 说明 |
---|---|
Mock.Random.boolean() | 返回一个随机的布尔值 |
Random.natural() | 返回一个随机的自然数(大于等于 0 的整数) |
Random.integer() | 返回一个随机的整数 |
Random.float() | 返回一个随机的浮点数 |
Random.character() | 返回一个随机字符 |
Random.string() | 返回一个随机字符串 |
Random.range( start?, stop, step? ) | 返回一个整型数组 |
示例
//日期
Random.date() // "2012-10-23"
Random.date('yyyy-MM-dd') // "2275-04-27"
Random.date('yy-MM-dd') // "20-01-08"//时间
Random.time() // "05:06:06"//日期和时间
Random.datetime('yyyy-MM-dd HH:mm:ss') //当前的日期和时间
Ranndom.now()// 生成随机域名
Random.domain() // "nurou.org.cn"//生成随机URL
Random.url() // "news://wrmt.na/rbcgbws"//生成随机IP
Random.ip() // "74.97.41.159"//生成随机省份:
Random.province() //"海南省"//生成随机城市:
Random.city() // "澳门半岛"//生成在某个省份的某个城市:
Random.city(true) // "广东省 广州市"//随机生成颜色,格式为 '#RRGGBB'
Random.color()
Random.hex()//随机生成颜色,格式为'rgb(r, g, b)'
Random.rgb()//随机生成颜色,格式为 ‘rgba(r, g, b, a)’
Random.rgba()//随机生成颜色,格式为 ‘hsl(h, s, l)’
Random.hsl()//生成一条随机的中文句子:
Random.csentence() // "会候句子解包党心要按总场火义字个片精。"
Random.csentence(5) // "文斗领拉米。"
Random.csentence(3, 5) // "住验住"
注意:
1、默认一条句子里的汉字个数在12和18之间
2、通过Random.csentence( length )指定句子的汉字个数:
3.通过Random.csentence( min, max)指定句子汉字个数的范围: //模拟姓氏:
Random.cfirst() // "龙"
//模拟名字
Random.clast() // "秀英"
//模拟全名:
Random.cname() // "黄秀英"//随机生成一段文本
Random.paragraph()
Random.paragraph( len )
Random.paragraph( min, max )
说明:
cparagraph可以看作是多条csentence以句号连接后的字符串,默认条数为 3 到 7条
len(可选),文本中句子的个数。默认值为 3 到 7 之间的随机数。
min(可选),文本中句子的最小个数。默认值为 3。
max(可选),文本中句子的最大个数。默认值为 7。
随机图片地址的返回
Random.image( size?, background?, foreground?, format?, text? )
说明:
- size(可选),图片的宽高,格式为 ‘宽x高’。默认从下面的数组中随机读取一个:
[
‘300x250’, ‘250x250’, ‘240x400’, ‘336x280’,
‘180x150’, ‘720x300’, ‘468x60’, ‘234x60’,
‘88x31’, ‘120x90’, ‘120x60’, ‘120x240’,
‘125x125’, ‘728x90’, ‘160x600’, ‘120x600’,
‘300x600’
] - background(可选),图片的背景色。默认值为 ‘#000000’。
- foreground(可选),图片的前景色(文字)。默认值为 ‘#FFFFFF’。
- format(可选),图片的格式。默认值为 ‘png’,可选值包括:‘png’、‘gif’、‘jpg’。
- text(可选),图片上的文字。默认值为参数 size。
一段随机Base64图片编码的返回
Random.dataImage( size?, text? )
说明:
- size(可选),图片的宽高,格式为 ‘宽x高’。默认从下面的数组中随机读取一个:
[
‘300x250’, ‘250x250’, ‘240x400’, ‘336x280’,
‘180x150’, ‘720x300’, ‘468x60’, ‘234x60’,
‘88x31’, ‘120x90’, ‘120x60’, ‘120x240’,
‘125x125’, ‘728x90’, ‘160x600’, ‘120x600’,
‘300x600’
] - text(可选),图片上的文字。默认值为参数 size。
Mock.valid( template, data )
校验真实数据 data 与数据模板 template 是否匹配。
- template 必选。 表示数据模板,可以是对象或字符串。例如
{ 'list|1-10':[{}] }、'@EMAIL'
。 - data 必选。 表示真实数据。
示例:
var template = {name: 'value1'
}
var data = {name: 'value2'
}
Mock.valid(template, data)
// =>
[{"path": ["data","name"],"type": "value","actual": "value2","expected": "value1","action": "equal to","message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"}
]
数据模板
数据模板中的每个属性由 属性名、规则、属性值三部分组成。格式:'name|rule':value
说明:
- name:属性名
- rule:生成规则:(可选)
- value:属性值
其中: - 属性名和规则之间用 “|” 进行分割
- 规则是可选的,一共有七种规则
规则的含义具体要根据属性值来进行确定,不同的属性值对应的规则含义是不同的;
示例:
1. 'name|min-max': value
2. 'name|count': value
3. 'name|min-max.dmin-dmax': value
4. 'name|min-max.dcount': value
5. 'name|count.dmin-dmax': value
6. 'name|count.dcount': value 7. 'name|+step': value
属性值的类型其实就是s 中数据的类型:string、number、boolean、object、array、function以及正则reg:
- string
’ name| min-max’ : string ; //通过重复string生成一个字符串,string的重复次数 大于等于min,小于等于max ;
’ name| count’ : string; //通过重复string生成一个字符串,重复次数为 count ; - number
’ name| min-max’ : number ; //生成一个大于等于min 小于等于 max 的整数;
’ name| +1’ : number ; //属性值自动加1,初始值为 number ;
‘ name| min-max.dmin-dmax’ : number ; //生成一个浮点数,整数部分大于等于min,小于等于max; 小数部分保留 dmin 到 dmax 位; - boolean
’ name| 1’ : boolean ; //随机生成一个布尔值,值为 true 和 false 的概率均为 50%;
’ name| min-max’ : boolean ; //随机生成一个布尔值,值为 true 的概率为 min/( min + max) ; 值为 false 的概率为 max/( min + max); - object
’ name| count’ : object ; //从object中随机抽取count 个属性;
’ name| min-max’ : object; //从object中随机抽取 min 到 max 个属性; - array
’ name| 1’: array ; //从array中随机选取一个值最为最终值;
’ name| +1’ : array; //从array 中顺序选择一个元素,最为最终值;
’ name| min-max’ : array ; //通过重复array 生成一个新数组,重复的次数大于等于min, 小于等于max ;
’ name| count’ : array; //通过重复array 生成一个新数组,重复的次数为 count ; - function
’ name’ : function ; // 执行function,使其最终的返回值最为 最终的属性值;函数的上下文为 name 所在的对象; - RegExp
’ name’ : reg ; //根据正则去生成一个符合这个正则表达式规则的属性值;
属性值中可以包含 @占位符,并且属性值可指定最终值的初始值以及类型;
数据占位符只是在属性值字符串中占据一个位置,最终并不出现在属性值中,占位符的格式为 @占位符 || @占位符(参数 [,参数])
;
使用数据占位符的时候需要注意的是:
- 用@来标识的其后的是占位符;
- 占位符应用的是Mock.random的方法;
- 通过Mock.random.extend()来扩展自定义占位符;
- 占位符也可以引用数据模板中的数据而且会优先引用;
- 占位符支持相对路径也支持绝对的路径;
示例
//生成指定次数字符串
const data = Mock.mock({"string|4": "yx!"
})
console.log(data)//生成指定范围长度字符串
const data = Mock.mock({"string|1-8": "yx"
})
console.log(data)//生成一个随机字符串
const data = Mock.mock({"string": "@cword"
})
console.log(data)//生成指定长度和范围
const data = Mock.mock({string: "@cword(1)",str: '@cword(10,15)'
})
console.log(data)//生成标题和句子
const data = Mock.mock({title: "@ctitle",sentence: '@csentence'
})
console.log(data)//生成指定长度的标题和句子
const data = Mock.mock({title: "@ctitle(8)",sentence: '@csentence(50)'
})//生成指定范围的
const data = Mock.mock({title: "@ctitle(5,8)",sentence: '@csentence(50,100)'
})
console.log(data)//随机生成段落
const data = Mock.mock({content: '@cparagraph()'
})
console.log(data)//生成指定数字
const data = Mock.mock({"number|80": 1
})
console.log(data)//生成范围数字
const data = Mock.mock({"number|1-999": 1
})
console.log(data)//随机生成标识
const data = Mock.mock({id: '@increment()'
})
console.log(data)//随机生成姓名-地址-身份证号
const data = Mock.mock({name: '@cname()',idCard: '@id()',address: '@city(true)' // 如果@city(),只会生成市,如果@city(true)会生成省和市
})
console.log(data)const data = Mock.mock({'list|50-99':[{name: '@cname()',address: '@city(true)',id: '@increment(1)' // 每次都增加1}]
})
综合示例
假设已经安装了axios、mockjs
- api接口
export const findPage = (data: any) => {return postJson('user/list', data)
}
- mock接口
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据Mock.setup({//设置请求延时时间timeout: 1000
})let userList = []
for (let i = 0; i < 10; i++) {const o = {title: Mock.mock("@ctitle"),idCard: Mock.mock('@id()'),addr: Mock.mock('@city(true)'),name: Mock.mock({"string|1-8": "yx"})}userList.push(o)
}
Mock.mock(constant.test_baseUrl + '/user/list', 'post', (config: any) => {//获取前端传递过来的数据console.info(config.body)return userList
})
- vue页面
<template><el-button type="danger" @click="fun">危险按钮</el-button>
</template><script lang="ts">
import $api from '../apis/api'
import '../mock/mock.ts'
export default {setup(): any {let fun = () => {$api.findPage("{\"name\":\"zhangsan\",\"gender\",1}").then(res => {console.info(res)})}return {fun}}
}
</script>
4 结果
mockjs语法详解相关推荐
- Python的Xpath介绍和语法详解
1.简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chrome浏览器 ...
- FreeMarker基本语法详解及模板文件的组成(二)
海浪上次给大家分享了FreeMarker基本语法详解及模板文件的组成(一)海浪今天继续分享FreeMarker基本语法详解及模板文件的组成(二) 3.2 输出变量值<?xml:namespace ...
- Velocity魔法堂系列二:VTL语法详解
一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...
- Java8初体验(二)Stream语法详解(转)
本文转自http://ifeve.com/stream/ Java8初体验(二)Stream语法详解 感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com 上篇文章Java8初体验( ...
- python编程语法大全-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 关于怎么快速学python,可以加下小编的python学习群:611+530+101,不管你是小白还是大牛,小编我都欢迎,不定期分享干货 每天 ...
- python编程语法-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_num ...
- python编程if语法-Python编程入门基础语法详解经典
原标题:Python编程入门基础语法详解经典 一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_number = ...
- python编程语法-Python编程入门——基础语法详解(经典)
今天小编给大家带来Python编程入门--基础语法详解.温馨提示: 亮点在最后! 在这里还是要推荐下我自己建的Python开发学习群:301056051,群里都是学Python开发的,如果你正在学习P ...
- js 正则中冒号代表什么_javascript中正则表达式语法详解
好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要 ...
最新文章
- 怎么用PHP语句做出增改删查功能,PHP、MYSQLI实现简单的增、删、改、查功能(初学者)...
- JavaGUI中的JComboBox的处理
- 分布式模式之Broker模式
- Apache会比路虎的应急效果更好
- flex布局 详细开发教程
- c语言实验赵欣版答案,赵欣-计算机科学与技术学院
- FAST_ICA MTALAB工具包下载/ICA分析/独立成分分析MATLAB安装包/ICA toolbox
- 【集合论】集合概念与关系 ( 真子集 | 空集 | 全集 | 幂集 | 集合元素个数 | 求幂集步骤 )
- 微信小程序官方示例文档免费下载文档
- Win10不相邻的磁盘怎么合并,一学就会
- golang隐藏window系统下自身cmd窗口
- Android打造通用标题栏——让你的App统一标题栏风格
- PS 滤镜——(扭曲)逆球面化 (凹陷效果)
- ps如何设置滚动鼠标放大和缩小图像
- OpenFlow学习笔记(一)——OpenFlow概要和OpenFlow1.0
- 那些年,在Fragment中犯的错
- 分类器评估指标——混淆矩阵 ROC AUC KS AR PSI Lift Gain
- C51---13 DS18B20温度传感器
- 启动马达接线实物图_起动马达和电瓶怎么接线图片
- 中国储物篮市场运营状况及投资经营分析报告 2022-2027年版