- A+
所属分类：Web前端
开始
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() // => "[email protected]" Mock.mock('@email') // => "[email protected]" Mock.mock( { email: '@email' } ) // => { email: "[email protected]" }扩展(自定义占位符)
// 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': /wWsSdD/, '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 // => falseRandom.natural 返回一个随机的自然数（大于等于0的整数）
Random.natural() Random.natural(min,max) // 返回一个区间数，min，max是可选的 Random.natural(10000) // => 71529071126209 Random.natural(60, 100) // => 77Random.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
Format Description Example yyyy 年份的完整数字表示，4 位数字 1999 or 2003 yy 年份的两位数表示 99 or 03 y 年份的两位数表示 99 or 03 MM 月份的数字表示，带前面零 01 to 12 M 月份的数字表示，没有前面零 1 to 12 dd 一个月中的第几天，带前面零的 2 位数字 01 to 31 d 一个月中没有前面零的日子 1 to 31 HH 带前面零的小时的 24 小时格式 00 to 23 H 不带前面零的小时的 24 小时格式 0 to 23 hh 不带前面零的 12 小时格式 1 to 12 h 带前面零的小时的 12 小时格式 01 to 12 mm 分钟，带前面零 00 to 59 m 分钟，不带前面零 0 to 59 ss 秒，带前面零 00 to 59 s 秒，无前面零 0 to 59 SS 毫秒，带前面零 000 to 999 S 毫秒，无前面零 0 to 999 A 大写的 Ante meridiem 和 Post meridiem AM or PM a 小写的 Ante meridiem 和 Post meridiem am or pm T 毫秒，自 1970-1-1 00:00:00 UTC 以来 759883437303 Random.time 返回一个随机的时间字符串
Random.time() Random.time( format ) // 指示生成的时间字符串的格式。默认值为 HH:mm:ssRandom.datetime 返回一个随机的日期和时间字符串
Random.datetime() Random.datetime( format ) // 指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ssRandom.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.comRandom.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 SchemaMock.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": [] }] }] }
