mockjs

谢振 · 发表于 2023-5-13 22:41:11

开始

mock一个用于拦截ajax请求，并返回模拟数据的库。主要让前端独立于后端进行开发，通过 pnpm add mockjs 来进行安装

基础

初窥门径

var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
/*
解释一下输出一个对象，有一个list属性，属性值是一个数组，随机1-10个，数组里面存在一个对象，对象有一个属性
值id，值是1，往后的id值都自增1
大概是这样的
{
list: [
{
id: 1
},
{
id: 2
}
]
}
*/
复制代码

在项目中引入

创建一个文件夹存放mock文件，比如我们后面的例子是放在 /src/mock/index.js 文件中的，然后在main文件中导入即可，示例如下
// /src/main.js
import './mock/index' // 直接导入(其实就是执行里面的代码，挂载mock)，这样就可以劫持ajax请求了
复制代码

Mock方法

Mock.mock

根据数据模板生成模拟数据
// Mock.mock( rurl?, rtype?, template|function( options ) )
// 根据数据模板生成模拟数据
Mock.mock( template )
// 记录数据模板,当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回
Mock.mock( rurl, template )
// 当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回
Mock.mock( rurl, function( options ) )
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, template )
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )
/*
rurl 可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype 可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template 可选。表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options) 可选。表示用于生成响应数据的函数。
options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
*/
复制代码

Mock.setup

配置拦截 Ajax 请求时的行为
Mock.setup( settings )
// 只有一个配置自定义响应时间，如200-600毫秒
Mock.setup({
timeout: '200-600' // '300'
})
复制代码

Mock.Random

是一个工具类，用于生成各种随机数据
// Mock.Random 的方法在数据模板中称为占位符，书写格式为 @占位符示例如下
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }
复制代码
扩展(自定义占位符)
// Mock.Random 中的方法与数据模板的 @占位符一一对应，在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法引用。例如
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
复制代码

语法规范

Mock.mock() 可以根据数据模板和占位符，生成数据的一个方法，下面我们会用到

数据模板定义规范

语法如下
// 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
/*
重点！！！
属性名和生成规则之间用竖线 | 分隔
生成规则是可选的
生成规则有 7 种格式
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则的含义需要依赖属性值的类型才能确定。
属性值中可以含有 @占位符。
属性值还指定了最终值的初始值和类型。
*/
复制代码

String属性值

// 'name|min-max': string 重复(min-max)次，范围包含min，max
// 输入
{
'name|2-5': '哈'
}
//输出
{
'name': '哈哈哈'
}
// 'name|count': string
// 输入
{
'name|3': '哈'
}
// 输出
{
'name|5': '哈哈哈哈哈'
}
// 重复count次

复制代码

Number属性值

// 'name|+1': number 属性值自动加 1，初始值为 number
// name|min-max': number 生成一个随机数，min-max范围
//'name|min-max.dmin-dmax': number 除了min-max的整数，还有保留小数的位数，也能限制范围(dmin,dmax)

复制代码

Boolean属性值

// 'name|1': boolean true与false的概率是1/2
// 'name|min-max': value true的概率为: min/(min+max)，false的概率max/(min+max)
// 比如，十分之一的可能为true
// 'name|1-9': true

复制代码

Object属性值

// 'name|count': object 随机从object中取count个属性
// 输入
{
'name|2': {
a:'a',
b:'b',
c:'c'
}
}
// 输出
{
'name': {
b:'b',
c:'c'
}
}
// 'name|min-max': object 范围选取

复制代码

Array属性值

// 'name|1': array 数组随机选一个为最终值
// 输入
{
'name|1': [1,2,3]
}
// 输出
{
'name': 2
}
// 'name|+1': array 从数组中按顺序取一个为最终值
// 'name|min-max': array 根据范围来重复n次数组的数据
// 'name|count': array 重复n次数组的数据
// 输入
{
'name|2': [1,2,3]
}
// 输出
{
'name|2': [1,2,3,1,2,3]
}

复制代码

Function属性值

// 'name': function
// 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
// 输入
{
'name': function(){
return this.txt+"嘿"
},
txt: '哟'
}
// 输出
{
name: '哟嘿',
txt: '哟'
}

复制代码

RegExp

// 'name': regexp 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
// 输入
{
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
}
// 输出
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}

复制代码

数据占位符定义规范

用 @ 来标识其后的字符串是 占位符。

占位符 引用的是 Mock.Random 中的方法。

通过 Mock.Random.extend() 来扩展自定义占位符。

占位符 也可以引用 数据模板 中的属性。

占位符 会优先引用 数据模板 中的属性。

占位符 支持 相对路径 和 绝对路径。

Basic

Random.boolean 返回一随机布尔值
Random.boolean() // 50% true
Random.boolean(min,max,current) // mim/(min+max) true min，max是可选的，默认1
Random.boolean(1,9,true) //10%为true
// => false
复制代码
Random.natural 返回一个随机的自然数（大于等于0的整数）
Random.natural()
Random.natural(min,max) // 返回一个区间数，min，max是可选的
Random.natural(10000)
// => 71529071126209
Random.natural(60, 100)
// => 77
复制代码
Random.integer 返回一个随机的整数
Random.integer()
Random.integer( min )
Random.integer( min, max )
复制代码
Random.float 返回一个随机的整数
Random.float()
Random.float( min )
Random.float( min, max )
Random.float( min, max, dmin )
Random.float( min, max, dmin, dmax )
复制代码
character 返回一个随机字符
Random.character()
Random.character( 'lower/upper/number/symbol' )
Random.character( pool )
// pool 字符串。表示字符池，将从中选择一个字符返回。
复制代码
string 返回一个随机字符串
Random.string()
Random.string( length )
Random.string( pool, length )
Random.string( min, max )
Random.string( pool, min, max )
//pool 字符串。表示字符池，将从中选择一个字符返回。
复制代码
Random.range 返回一个整型数组
Random.range( stop )
Random.range( start, stop )
Random.range( start, stop, step )
//start
//必选。
//数组中整数的起始值。
//stop
//可选。
//数组中整数的结束值（不包含在返回值中）。
//step
//可选。
//数组中整数之间的步长。默认值为 1。
Random.range(10)
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Random.range(3, 7)
// => [3, 4, 5, 6]
Random.range(1, 10, 2)
// => [1, 3, 5, 7, 9]
Random.range(1, 10, 3)
// => [1, 4, 7]
复制代码

Date

Random.date 返回一个随机的日期字符串
Random.date()
Random.date(format)
Random.date()
// => "2002-10-23"
Random.date('yyyy-MM-dd')
// => "1983-01-29"
Random.date('yy-MM-dd')
// => "79-02-14"
Random.date('y-MM-dd')
// => "81-05-17"
Random.date('y-M-d')
// => "84-6-5"
// 指示生成的日期字符串的格式。默认值为 yyyy-MM-dd
复制代码
FormatDescriptionExampleyyyy年份的完整数字表示，4 位数字1999 or 2003yy年份的两位数表示99 or 03y年份的两位数表示99 or 03MM月份的数字表示，带前面零01 to 12M月份的数字表示，没有前面零1 to 12dd一个月中的第几天，带前面零的 2 位数字01 to 31d一个月中没有前面零的日子1 to 31HH带前面零的小时的 24 小时格式00 to 23H不带前面零的小时的 24 小时格式0 to 23hh不带前面零的 12 小时格式1 to 12h带前面零的小时的 12 小时格式01 to 12mm分钟，带前面零00 to 59m分钟，不带前面零0 to 59ss秒，带前面零00 to 59s秒，无前面零0 to 59SS毫秒，带前面零000 to 999S毫秒，无前面零0 to 999A大写的 Ante meridiem 和 Post meridiemAM or PMa小写的 Ante meridiem 和 Post meridiemam or pmT毫秒，自 1970-1-1 00:00:00 UTC 以来759883437303

Random.time 返回一个随机的时间字符串
Random.time()
Random.time( format )
// 指示生成的时间字符串的格式。默认值为 HH:mm:ss
复制代码
Random.datetime 返回一个随机的日期和时间字符串
Random.datetime()
Random.datetime( format )
// 指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss
复制代码
Random.now 返回当前的日期和时间字符串
Ranndom.now( unit, format )
Ranndom.now()
Ranndom.now( format )
Ranndom.now( unit )
/*
表示时间单位，用于对当前日期和时间进行格式化。可选值有：year、month、week、day、hour、minute、second、week，默认不会格式化。
Random.now()
// => "2014-04-29 20:08:38 "
Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')
// => "2014-04-29 00:00:00 000"
Random.now('day')
// => "2014-04-29 00:00:00 "
Random.now('yyyy-MM-dd HH:mm:ss SS')
// => "2014-04-29 20:08:38 157"
Random.now('year')
// => "2014-01-01 00:00:00"
Random.now('month')
// => "2014-04-01 00:00:00"
Random.now('week')
// => "2014-04-27 00:00:00"
Random.now('day')
// => "2014-04-29 00:00:00"
Random.now('hour')
// => "2014-04-29 20:00:00"
Random.now('minute')
// => "2014-04-29 20:08:00"
Random.now('second')
// => "2014-04-29 20:08:38"
*/
复制代码

Image

Random.image 生成一个随机的图片地址
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )
// size 可选 '宽x高' 比如 300*400,400*500
// background 可选指示图片的背景色。默认值为 '#000000'
// foreground 可选指示图片的前景色（文字）。默认值为 '#FFFFFF'
// format 可选指示图片的格式。默认值为 'png'，可选值包括：'png'、'gif'、'jpg'
// text 可选指示图片上的文字。默认值为参数 size
Random.image()
// => "http://dummyimage.com/125x125"
Random.image('200x100')
// => "http://dummyimage.com/200x100"
Random.image('200x100', '#fb0a2a')
// => "http://dummyimage.com/200x100/fb0a2a"
Random.image('200x100', '#02adea', 'Hello')
// => "http://dummyimage.com/200x100/02adea&text=Hello"
Random.image('200x100', '#00405d', '#FFF', 'Mock.js')
// => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
Random.image('200x100', '#ffcc33', '#FFF', 'png', '!')
// => "http://dummyimage.com/200x100/ffcc33/FFF.png&text=!"
复制代码
Random.dataImage 生成一段随机的 Base64 图片编码
Random.dataImage()
Random.dataImage( size )
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
复制代码

Color

Random.color 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'

Random.hex 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'

Random.rgb 随机生成一个有吸引力的颜色，格式为 'rgb(r, g, b)'

Random.rgba 随机生成一个有吸引力的颜色，格式为 'rgba(r, g, b, a)'

Random.hsl 随机生成一个有吸引力的颜色，格式为 'hsl(h, s, l)'

Text

Random.paragraph 随机生成一段文本
Random.paragraph()
Random.paragraph( len )
Random.paragraph( min, max )
/*
len 可选。指示文本中句子的个数。默认值为 3 到 7 之间的随机数。
min 可选。指示文本中句子的最小个数。默认值为 3。
max 可选。指示文本中句子的最大个数。默认值为 7。
*/
复制代码
Random.cparagraph 随机生成一段中文文本
Random.cparagraph()
Random.cparagraph( len )
Random.cparagraph( min, max )
复制代码
Random.sentence 随机生成一个句子，第一个单词的首字母大写
Random.sentence()
Random.sentence( len )
Random.sentence( min, max )
/*
len 可选。指示句子中单词的个数。默认值为 12 到 18 之间的随机数。
min 可选。指示句子中单词的最小个数。默认值为 12。
max 可选。指示句子中单词的最大个数。默认值为 18。
*/
复制代码
Random.csentence 随机生成一段中文文本
Random.csentence()
Random.csentence( len )
Random.csentence( min, max )
复制代码
Random.word 随机生成一个单词
Random.word()
Random.word( len )
Random.word( min, max )
/*
len 可选。指示单词中字符的个数。默认值为 3 到 10 之间的随机数。
min 可选。指示单词中字符的最小个数。默认值为 3。
max 可选。指示单词中字符的最大个数。默认值为 10。
*/
复制代码
Random.cword 随机生成一个汉字
Random.cword()
Random.cword( pool )
Random.cword( length )
Random.cword( pool, length )
Random.cword( min, max )
Random.cword( pool, min, max )
/*
pool 可选。汉字字符串。表示汉字字符池，将从中选择一个汉字字符返回。
min 可选。随机汉字字符串的最小长度。默认值为 1。
max 可选。随机汉字字符串的最大长度。默认值为 1。
*/
复制代码
Random.title 随机生成一句标题，其中每个单词的首字母大写
Random.title()
Random.title( len )
Random.title( min, max )
/*
len 可选。指示单词中字符的个数。默认值为 3 到 7 之间的随机数。
min 可选。指示单词中字符的最小个数。默认值为 3。
max 可选。指示单词中字符的最大个数。默认值为 7。
*/
复制代码
Random.ctitle 随机生成一句中文标题
Random.ctitle()
Random.ctitle( len )
Random.ctitle( min, max )
/*
len 可选。指示单词中字符的个数。默认值为 3 到 7 之间的随机数。
min 可选。指示单词中字符的最小个数。默认值为 3。
max 可选。指示单词中字符的最大个数。默认值为 7。
*/
复制代码

Name

Random.first 随机生成一个常见的英文名

Random.last 随机生成一个常见的英文姓

Random.name 随机生成一个常见的英文姓名
Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"
// middle 可选。布尔值。指示是否生成中间名
复制代码
Random.cfirst 随机生成一个常见的中文名

Random.clast 随机生成一个常见的中文姓

Random.cname 随机生成一个常见的中文姓名

Web

Random.url 随机生成一个 URL
Random.url()
Random.url( protocol, host )
// protocol 指定 URL 协议。例如 http。
// host 指定 URL 域名和端口号。例如 nuysoft.com。
复制代码
Random.protocol 随机生成一个 URL 协议。返回以下值之一
'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'
复制代码
Random.domain 随机生成一个域名

Random.tld 随机生成一个顶级域名

Random.email 随机生成一个邮件地址
Random.email()
Random.email( domain )
// domain 指定邮件地址的域名。例如 nuysoft.com
复制代码
Random.ip 随机生成一个 IP 地址

Address

Random.region 随机生成一个（中国）大区

Random.province 随机生成一个（中国）省（或直辖市、自治区、特别行政区）

Random.city 随机生成一个（中国）市
Random.city()
Random.city( prefix )
/*
prefix 可选。布尔值。指示是否生成所属的省
*/
复制代码
Random.county 随机生成一个（中国）县
Random.county()
Random.county( prefix )
/*
prefix 可选。布尔值。指示是否生成所属的省、市。
*/
复制代码
Random.zip 随机生成一个邮政编码（六位数字）

Helper

Random.capitalize 把字符串的第一个字母转换为大写

Random.upper 把字符串转换为大写

Random.lower 把字符串转换为小写

Random.pick 从数组中随机选取一个元素，并返回

Random.shuffle 打乱数组中元素的顺序，并返回

Miscellaneous

Random.guid 随机生成一个 GUID

Random.id 随机生成一个 18 位身份证

Random.increment 生成一个全局的自增整数
Random.increment()
Random.increment( step )
/*
step 可选。整数自增的步长。默认值为 1
*/
复制代码

扩展

Mock.valid 校验真实数据 data 是否与数据模板 template 匹配
Mock.valid( template, data )
/*
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"
}
]
复制代码
Mock.toJSONSchema 把 Mock.js 风格的数据模板 template 转换成 JSON Schema
Mock.toJSONSchema( template )
/*
template 必选。表示数据模板，可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。
*/
var template = {
'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
"name": undefined,
"path": [
      "ROOT"
],
"type": "object",
"template": {
      "key|1-10": "★"
},
"rule": {},
"properties": [{
      "name": "key",
      "path": [
         "ROOT",
         "key"
      ],
      "type": "string",
      "template": "★",
      "rule": {
         "parameters": ["key|1-10", "key", null, "1-10", null],
         "range": ["1-10", "1", "10"],
         "min": 1,
         "max": 10,
         "count": 3,
         "decimal": undefined,
         "dmin": undefined,
         "dmax": undefined,
         "dcount": undefined
      }
}]
}
---------------------------------------------------------------------------------------------------------

var template = {
'list|1-10': [{}]
}
Mock.toJSONSchema(template)
// =>
{
"name": undefined,
"path": ["ROOT"],
"type": "object",
"template": {
      "list|1-10": [{}]
},
"rule": {},
"properties": [{
      "name": "list",
      "path": ["ROOT", "list"],
      "type": "array",
      "template": [{}],
      "rule": {
         "parameters": ["list|1-10", "list", null, "1-10", null],
         "range": ["1-10", "1", "10"],
         "min": 1,
         "max": 10,
         "count": 6,
         "decimal": undefined,
         "dmin": undefined,
         "dmax": undefined,
         "dcount": undefined
      },
      "items": [{
         "name": 0,
         "path": ["data", "list", 0],
         "type": "object",
         "template": {},
         "rule": {},
         "properties": []
      }]
}]
}
复制代码

来源:https://www.cnblogs.com/ProCheng/p/17397794.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！