mockjs 模拟文件流（mockjs）
导读：开始 mock一个用于拦截ajax请求，并返回模拟数据的库。主要让前端独立于后端进行开发，通过 pnpm add mockjs 来进行安装...
开始
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() 来扩展自定义占位符 。 占位符 也可以引用 数据模板 中的属性 。 占位符 会优先引用 数据模板 中的属性 。 占位符 支持 相对路径 和 绝对路径 。 BasicRandom.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] DateRandom.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 以来 759883437303Random.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" */ ImageRandom.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() // => "https://cdn.yuucn.cn/wp-content/uploads/2023/05/1684269119-969d695973a7f23.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 ColorRandom.color 随机生成一个有吸引力的颜色 ，格式为 #RRGGBB
Random.hex 随机生成一个有吸引力的颜色 ，格式为 #RRGGBB
Random.rgb 随机生成一个有吸引力的颜色 ，格式为 rgb(r, g, b)
Random.rgba 随机生成一个有吸引力的颜色 ，格式为 rgba(r, g, b, a)
Random.hsl 随机生成一个有吸引力的颜色 ，格式为 hsl(h, s, l)
TextRandom.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 。 */ NameRandom.first 随机生成一个常见的英文名
Random.last 随机生成一个常见的英文姓
Random.name 随机生成一个常见的英文姓名
Random.name() // => "Larry Wilson" Random.name(true) // => "Helen Carol Martinez" // middle 可选 。布尔值 。指示是否生成中间名Random.cfirst 随机生成一个常见的中文名
Random.clast 随机生成一个常见的中文姓
Random.cname 随机生成一个常见的中文姓名
WebRandom.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 、waisRandom.domain 随机生成一个域名
Random.tld 随机生成一个顶级域名
Random.email 随机生成一个邮件地址
Random.email() Random.email( domain ) // domain 指定邮件地址的域名 。例如 nuysoft.comRandom.ip 随机生成一个 IP 地址
AddressRandom.region 随机生成一个（中国）大区
Random.province 随机生成一个（中国）省（或直辖市 、自治区 、特别行政区）
Random.city 随机生成一个（中国）市
Random.city() Random.city( prefix ) /* prefix 可选 。布尔值 。指示是否生成所属的省 */Random.county 随机生成一个（中国）县
Random.county() Random.county( prefix ) /* prefix 可选 。布尔值 。指示是否生成所属的省 、市 。 */Random.zip 随机生成一个邮政编码（六位数字）
HelperRandom.capitalize 把字符串的第一个字母转换为大写
Random.upper 把字符串转换为大写
Random.lower 把字符串转换为小写
Random.pick 从数组中随机选取一个元素 ，并返回
Random.shuffle 打乱数组中元素的顺序 ，并返回
MiscellaneousRandom.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.namevalue 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": [] }] }] }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！