目前在做一個(gè)個(gè)人網(wǎng)站，寫了一半沒有數(shù)據(jù)填充，也不知道寫啥了，就順帶學(xué)習(xí)下mockjs這個(gè)東西，官網(wǎng)上主要介紹它是一個(gè)可以隨機(jī)生成各種類型數(shù)據(jù)，攔截ajax請(qǐng)求等優(yōu)點(diǎn)。接下來就近距離結(jié)束下mockjs吧！

1.安裝

通過npm為自己的項(xiàng)目安裝mockjs。

npm install mockjs

安裝完成后對(duì)mockjs進(jìn)行使用：

const Mock \= require('mockjs')

let data \= Mock.mock({

'list|10': \[{'id|+1': 1}\]

})

先不要管里面的語法，這上面生成的是一個(gè)對(duì)象數(shù)組，里面每個(gè)元素是一個(gè)對(duì)象，每個(gè)對(duì)象的key是從0-9，value是一個(gè)對(duì)象，對(duì)象中的key是id，value是1-10.

這里只介紹commonjs中的用法，其實(shí)用es6的模塊引入方法也可以，但是最終被babel轉(zhuǎn)義的也是通過require引入的。關(guān)于import，require這些區(qū)別建議看下這篇文章

2. 語法規(guī)范

mockjs的語法規(guī)范包括兩部分：

1\. 數(shù)據(jù)模板定義規(guī)范

2\. 數(shù)據(jù)占位符定義規(guī)范

數(shù)據(jù)模板定義規(guī)范

數(shù)據(jù)模板中的屬性由三個(gè)部分組成：屬性名，生成規(guī)則，屬性值

// 屬性名 ? name

// 生成規(guī)則 rule

// 屬性值 ? value

'name|rule': value

Notice:

1\. 屬性名和生成規(guī)則之間用 | 分割。

2\. 生成規(guī)則是可選

3\. 生成規(guī)則有7種格式：

(1)'name|min-max': value

(2)'name|count': value

(3)'name|min-max.dmin-dmax': value

(4)'name|min-max.dcount': value

(5)'name|count.dmin-dmax': value

(6)'name|count.dcount': value

(7)'name|+step': value

4\. 生成規(guī)則的含義需要依賴屬性值得類型才能確定。

5\. 屬性值中可以含有'@占位符'

6\. 屬性值還指定了最終值得初始值和類型。

(1) 屬性值是字符串String

1\. name|min-max: string

通過重復(fù)string生成一個(gè)字符串，重復(fù)次數(shù)大于等于min，小于等于max。這里的重復(fù)是指對(duì)初始化string的重復(fù)次數(shù)。

?

2\. name|count: string

通過重復(fù)string生成一個(gè)字符串，重復(fù)次數(shù)等于count。

(2) 屬性值是數(shù)字Number

1. name|+1 : number

屬性值自動(dòng)加1， 初始值為number

?

2. name|min\-max: number

生成一個(gè)大于等于min，小于等于max的整數(shù)。

?

3. name|min\-max.dmin\-dmax: number

生成一個(gè)浮點(diǎn)數(shù)，整數(shù)部分大于等于min，小于等于max，小數(shù)部分保留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

隨機(jī)生成一個(gè)布爾值，值為true的概率為1/2， 值為false的概率為1/2。

?

2. name|min\-max: value

隨機(jī)生成一個(gè)布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。

(4)屬性值是對(duì)象Object

1. name|count: object

從屬性值object中隨機(jī)選取count個(gè)屬性

?

2. name|min\-max: object

從屬性值object中隨機(jī)選取min到max個(gè)屬性

(5) 屬性值是數(shù)組Array

1. name|1: array

從屬性值array中隨機(jī)選取一個(gè)元素，作為最終值

?

2. name|+1: array

從屬性值array中順序選取一個(gè)元素，作為最終值

?

3. name|min\-max: array

通過重復(fù)屬性值array生成一個(gè)新數(shù)組，重復(fù)次數(shù)大于等于min，小于等于max。

?

4. name|count: array

通過重復(fù)屬性值array生成一個(gè)新數(shù)組，重復(fù)次數(shù)為count。

(6) 屬性值是函數(shù)Function

'name': function

?

執(zhí)行函數(shù) function，取其返回值作為最終的屬性值，函數(shù)的上下文為屬性 'name' 所在的對(duì)象。

(7) 屬性值是正則表達(dá)式RegExp

1\. name: regexp

根據(jù)正則表達(dá)式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"

}

數(shù)據(jù)占位符定義規(guī)范DPD

占位符只是在屬性值字符串中占個(gè)位置，并不出現(xiàn)在最終的屬性值中。占位符格式：

@占位符

@占位符(參數(shù) \[, 參數(shù)\])

Notice：

1\. 用@來標(biāo)識(shí)其后的字符串是占位符。

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

3\. 通過Mock.Random.extend()來擴(kuò)展自定義占位符。

4\. 占位符也可以引用數(shù)據(jù)模板中的屬性。

5\. 占位符會(huì)有限引用數(shù)據(jù)模板中的屬性。

6\. 占位符支持相對(duì)路徑和絕對(duì)路徑。

3. Mock.mock()

Mock.mock(rurl?, rtype?, template|function(options)) 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)

Mock.mock(template) 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。

Mock.mock(rurl, template) 記錄數(shù)據(jù)模板，當(dāng)攔截到匹配rurl的ajax請(qǐng)求時(shí)，根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。

Mock.mock(rurl, function(options)) 記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當(dāng)攔截到匹配rurl的ajax請(qǐng)求時(shí)，函數(shù)function執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。

Mock.mock(rurl, rtype, template) 記錄數(shù)據(jù)模板，當(dāng)攔截到匹配rurl和rtype的ajax請(qǐng)求時(shí)，將根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。

Mock.mock(rurl, rtype, function(options)) 記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當(dāng)攔截到匹配rurl和rtype的ajax請(qǐng)求時(shí)，函數(shù)function(options)將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。

rurl 標(biāo)識(shí)需要攔截的url，可以是url字符串或者url正則：

/\\/domain\\/list\\.json/、'/domian/list.json'。

rtype 可選，標(biāo)識(shí)需要攔截的ajax請(qǐng)求類型。例如GET, POST, PUT, DELETE等。

template 可選，標(biāo)識(shí)數(shù)據(jù)模板，可以是對(duì)象或字符串。

function(options) 可選，表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。

options 指向本次請(qǐng)求的ajax選項(xiàng)集，含有url， type和body三個(gè)屬性。

4. Mock.setup()

Mock.setup(setting) 配置攔截ajax請(qǐng)求時(shí)的行為。支持的配置項(xiàng)有：timeout。

setting 必選，配置項(xiàng)集合

timeout 可選，執(zhí)行攔截的ajax請(qǐng)求的響應(yīng)時(shí)間，單位是毫秒，值可以是正整數(shù)。例如400標(biāo)識(shí)400ms后才會(huì)返回響應(yīng)的內(nèi)容；也可以是200-600這樣表示響應(yīng)時(shí)間介于200和600毫秒之間，默認(rèn)是10-100.

Mock.setup({

timeout: 400

})

Mock.setup({

timeout: '200-600'

})

目前，接口 Mock.setup( settings ) 僅用于配置 Ajax 請(qǐng)求，將來可能用于配置 Mock 的其他行為。

5. Mock.Random

Mock.Random是一個(gè)工具類，用于生成各種隨機(jī)數(shù)據(jù)。 Mock.Random的方法在在數(shù)據(jù)模板中稱為占位符，書寫格式為'@占位符(參數(shù)，[,參數(shù)])'

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" }

擴(kuò)展 Mock.Random中的方法與數(shù)據(jù)模板的‘@占位符’一一對(duì)應(yīng)，在需要時(shí)還可以為Mock.Random擴(kuò)展方法，然后在數(shù)據(jù)模板中通過'@擴(kuò)展方法'引用：

Random.extend({

constellation: function(date) {

var constellations = \['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚座'\]

return this.pick(constellations)

}

})

Random.constellation()

// => "水瓶座"

Mock.mock('@CONSTELLATION')

// => "天蝎座"

Mock.mock({

constellation: '@CONSTELLATION'

})

// => { constellation: "射手座"

還有一些其他的生成隨機(jī)數(shù)據(jù)的方法，大家可以直接去官網(wǎng)看下，這里就不一一的描述了。地址：https://github.com/nuysoft/Mo...

6. Mock.valid()

Mock.valid(template, data) 校驗(yàn)真實(shí)數(shù)據(jù)data是否與數(shù)據(jù)模板template匹配。

template 必選，表示數(shù)據(jù)模板，可以是對(duì)象或者字符串“{ 'list|1-10':[{}] }、'@EMAIL'”

data 必選，表示真實(shí)數(shù)據(jù)。

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"

}

\]

7. Mock.toJSONSchema()

Mock.toJSONSchema( template ) 把Mock.js風(fēng)格的數(shù)據(jù)模板template轉(zhuǎn)換成JSON Schema

template 必選，表示數(shù)據(jù)模板，可以是對(duì)象或者字符串。

關(guān)于mock.js的介紹也這么多，這些基本上是根據(jù)官文摘抄，但是基本上夠我們?nèi)粘Ｊ褂谩?/p>

關(guān)于找一找教程網(wǎng)

本站文章僅代表作者觀點(diǎn)，不代表本站立場，所有文章非營利性免費(fèi)分享。

本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運(yùn)維、人工智能等等IT技術(shù)文章，希望廣大程序員努力學(xué)習(xí)，讓我們用科技改變世界。

[關(guān)于Mock.js使用]http://www.zyiz.net/tech/detail-119093.html

總結(jié)

以上是生活随笔為你收集整理的html网页中使用mock,关于Mock.js使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。