開始
mock一個用于攔截ajax請求，并回傳模擬資料的庫，主要讓前端獨立于后端進行開發，通過
pnpm add mockjs來進行安裝
基礎
初窺門徑
var data = https://www.cnblogs.com/ProCheng/p/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': /\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 // => 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 = https://www.cnblogs.com/ProCheng/p/{ 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": [] }] }] }
本文來自博客園，作者：Pro成，轉載請注明原文鏈接：https://www.cnblogs.com/ProCheng/p/17397794.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552389.html
標籤：JavaScript
下一篇：返回列表