Mock
安裝
生成隨機數據，模擬ajax請求
# 安裝
npm install mockjs
# 引用
import Mock from 'mockjs' //或者 let Mock = require('mockjs')
let mock = Mock.mock()
語法規范
Mock.js 的語法規范包括兩部分：
數據模板定義規范（Data Template Definition，DTD）
數據占位符定義規范（Data Placeholder Definition，DPD）
數據模板定義規范 DTD
// 屬性名name，生成規則 rule，屬性值 value
'name|rule': value
注意：
1.屬性名 和 生成規則 之間用豎線 | 分隔。
2.生成規則 是可選的。
3.生成規則 有 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
4.生成規則 的 含義 需要依賴 屬性值的類型 才能確定。
5.屬性值 中可以含有 @占位符。
6.屬性值 還指定了最終值的初始值和類型。
生成規則和示例：
1. 屬性值是字符串String
(1) 'name|min-max': string
通過重復 string 生成一個字符串，重復次數大於等於 min，小於等於 max。
(2) 'name|count': string
通過重復 string 生成一個字符串，重復次數等於 count。
let strData = Mock.mock({
'name1|3-6':'a', // 隨機生成重復a3-6次的字符串
'name2|2':'b', // 生成重復b2次的字符串
})
2. 屬性值是數字Number
(1)'name|+1': number
屬性值自動加 1，初始值為 number
(2)'name|min-max': number
生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來確定類型。
(3) 'name|min-max.dmin-dmax': number
生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dmin 到 dmax 位。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
=>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 屬性值是布爾型 Boolean
(1) 'name|1': boolean
隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
(2) 'name|min-max': value
隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。
let booleanData = Mock.mock({
'name1|1':true, // 生成一個布爾值,出現次數各一半
'name2|1-3':true // 1/4是true，3/4是false
})
4. 屬性值是對象Object
(1)'name|count': object
從屬性值 object 中隨機選取 count 個屬性。
(2)'name|min-max': object
從屬性值 object 中隨機選取 min 到 max 個屬性。
5. 屬性值是數組 Array
(1) 'name|1': array
從屬性值 array 中隨機選取 1 個元素，作為最終值。
(2) 'name|+1': array
從屬性值 array 中順序選取 1 個元素，作為最終值。
(3) 'name|min-max': array
通過重復屬性值 array 生成一個新數組，重復次數大於等於 min，小於等於 max。
(4) 'name|count': array
通過重復屬性值 array 生成一個新數組，重復次數為 count。
6. 屬性值是函數Function
(1) 'name': function
執行函數 function，取其返回值作為最終的屬性值，函數的上下文為屬性 'name' 所在的對象。
7. 屬性值是正則表達式 RegExp
(1) 'name': regexp
根據正則表達式 regexp 反向生成可以匹配它的字符串。用於生成自定義格式的字符串。
Mock.mock({
'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"
}
數據占位符定義規范 DPD
占位符 只是在屬性值字符串中占個位置，並不出現在最終的屬性值中。
占位符 的格式為：
@占位符
@占位符(參數 [, 參數])
注意：
1.用 @ 來標識其后的字符串是 占位符。
2.占位符 引用的是 Mock.Random 中的方法。
3.通過 Mock.Random.extend() 來擴展自定義占位符。
4.占位符 也可以引用 數據模板 中的屬性。
5.占位符 會優先引用 數據模板 中的屬性。
6.占位符 支持 相對路徑 和 絕對路徑。
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
=>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
Mock.mock(template)
根據數據模板生成模擬數據。
Mock.mock(rurl,template|function( options ) )
當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作為響應數據返回，或函數 function(options) 將被執行，並把執行結果作為響應數據返回。
Mock.mock(rurl,rtype,template|function(options))
當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作為響應數據返回，或函數 function(options) 將被執行，並把執行結果作為響應數據返回。
let data = Mock.mock('/demo','get',{
'list|5':[{
'id|+1':1, //從1開始循環按順序增加step
name:'@cname',
email:'@email',
flag:'@boolean',
date:'@datetime',
age:'@natural(1,100)',
info:'@csentence',
address:'@county(true)',
'xingzuo|+1':arr //從arr數組里按順序拿
}]
})
this.$axios.get('/demo').then(res=>{
console.log(res)
})
Mock.setup()
Mock.setup(settings)
配置攔截 Ajax 請求時的行為。支持的配置項有：timeout
指定被攔截的 Ajax 請求的響應時間，單位是毫秒。默認值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600' //響應事件介於200和600毫秒之間
})
Mock.Random
Mock.Random 是一個工具類，用於生成各種隨機數據。
Mock.Random 的方法在數據模板中稱為『占位符』，書寫格式為 @占位符(參數 [, 參數]) 。
let data = Mock.mock('/demo','get',{
name:'@cname',
email:'@email',
flag:'@boolean',
date:'@datetime',
age:'@natural(1,100)',
info:'@csentence',
address:'@county(true)'
})
Basic
(1)Mock.Random.boolean(min?,max?,current?)
隨機生成布爾值
flag1:Mock.Random.boolean(), // true,false各一半
falg2:Mock.Random.boolean(1,2,false), // 1/3的可能性false
(2)Mock.Random.natural(min?,max?)
隨機生成自然數min-max之間,默認值最大為 900719925474099
(3)Mock.Random.integer(min?,max?)
隨機生成整數min-max之間
(4)Mock.Random.float(min?,max?,dmin?,dmax?)
隨機生成小數浮點數
(5)Mock.Random.character(pool?)
隨機生成一個字符，參數可以不填，可以是'upper'(26個大寫字母)、'lower'(26個小寫字母)、'number'(0-9十個數字)、'!@#$%^&*()[]'
(6)Mock.Random.string(pool?,min?,max?)
隨機生成一個字符串，pool如上,字符串長度min-max
(7)Mock.Random.range(start?,stop,strp?)
返回一個整數數組,start數組起始值(閉區間),stop數組結束值(開區間),step為數據每一項間隔值
Date
(1)date日期
(2)time時間
(3)datetime日期時間
data:Mock.Random.date(format?) //隨機生成日期字符串,參數默認'yyyy-MM-dd'
time:Mock.Random.time(format?) //隨機生成時間字符串,參數默認'HH-mm-ss'
datetime:Mock.Random.datetime(format?) //隨機生成日期時間字符串,參數默認'yyyy-MM-dd HH-mm-ss'
Image
(1) image
(2) dateImage
//一般情況下，使用dataImage更好,因為更簡單，但是如果要生成高度自定義的圖片，則最好用image。另外，dataImage生成的是base64編碼
image:Mock.Random.image(size?,background?,foreground?,format?text?)
// 返回一段base64編碼,兩個參數同上
dataImage:Mock.Random.dataImage(size?,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
Color
color:Mock.Random.color() //格式格式'#rrggbb'
Mock.Random.hex() //好像和color沒什么不同
Mock.Random.rgb() //生成格式如rgb(133,233,244)
Mock.Random.rgba() //生成格式如rgba(111,222,233,0.5)
Mock.Random.hsl() //生成格式如(345,82,71)
Text
(1)paragraph文本
paragraph=Mock.Random.paragraph(min?,mix?,len?) // 隨機生成長度[min,max)的文本
(2)sentence句子
sen:Mock.Random.sentence(min?,max?,len?) // 隨機生成一個有[min,max)單詞個數的句子，首字母大寫
sen1:Random.sentence() //默認長度12到18
sen2:Random.sentence(10) //隨機生成一個單詞個數為10的句子
sen3:Random.sentence(5,10) //隨機生成一個5到9單詞個數的句子
(3)word單詞
word:Mock.Random.word(min?,max?,len?) //隨機生成一個單詞
word1:Mock.Random.word() //默認長度3到10
word2:Mock.Random.word(7) //隨機生成長度是7的單詞
word3:Mock.Random.word(2,12) //隨機生成2到11位長度的單詞
(4)title標題
title:Mock.Random.title(min?,max?,len?) //隨機生成一段標題，每個單詞的首字母大寫
(5)cparagraph、csentence、cword、ctitle中文文本句子單詞標題
Random.cparagraph, 返回中文文本
Random.csentence, 返回中文句子
Random.cword, 返回中文文字
Random.ctitle. 返回中文標題
Name
(1) first
(2) last
(3) name
(4) cfirst
(5) clast
(6) cname
let first = Random.first() 隨機生成常見英文名
let last = Random.last() 隨機生成常見英文姓
let name = Random.name() 隨機生成常見英文姓名
let cfirst = Random.cfirst() 隨機生成常見中文姓
let clast = Random.clast() 隨機生成常見中文名
let cname = Random.cname() 隨機生成一個常見中文姓名
Web
Random.url(protocol?,host?) //隨機生成一個url,var url3 = Random.url('http','58.com')
Random.protocol() //隨機生成一個協議
protocol可以選的值'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
Random.domin() //隨機生成一個域名
Random.ip() // 隨機生成一個ip地址
Random.tld() //隨機生成一個頂級域名
Random.email(domain?) //隨機生成一個email地址，domain表示域名
let email2 = Random.email('58.com') //生成xxxx@58.com
Address
Random.region() //隨機生成一個中國的大區，如華北，西南
Random.province() //隨機生成一個中國省直轄市自治區特別行政區
Random.city(prefix?) //隨機生成一個中國城市，prefix布爾值，表示是否標注所在省
Random.county(prefix?) //隨機生成一個中國縣，prefix布爾值，表示是否顯示所屬的省市
Random.zip() //隨機生成一個六位數郵政編碼
Helper
Random.capitlize(word) //把第一個字母轉成大寫,var capitalize = Random.capitalize('hello')
Random.upper(str) //轉成大寫,var upper = Random.upper('zhang')
Random.lower(str) //轉成小寫,var lower = Random.lower('JINGWEI');
Random.pick(arr) //從數組中隨機選取一個元素,var pick = Random.pick(arr);
Random.shuffle(arr); //打亂數組的順序並返回
Miscellaneous
Random.guid() // 隨機生成一個GUID,var guid = Random.guid()
Random.id() // 隨機生成一個18位身份證id,var id = Random.id()
擴展Mock.Random.extend()
Mock.Random.extend({
constellation:function(date){
let arr=['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蠍座', '射手座', '摩羯座', '水瓶座', '雙魚座']
return this.pick(arr)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蠍座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Mock.valid(template,date)
校驗真實數據 data 是否與數據模板 template 匹配。
Mock.toJSONSchema( template )
把 Mock.js 風格的數據模板 template 轉換成 JSON Schema。