html网页中使用mock,关于Mock.js使用
目前在做一個個人網站，寫了一半沒有數據填充，也不知道寫啥了，就順帶學習下mockjs這個東西，官網上主要介紹它是一個可以隨機生成各種類型數據，攔截ajax請求等優點。接下來就近距離結束下mockjs吧！
1.安裝
通過npm為自己的項目安裝mockjs。
npm install mockjs
安裝完成后對mockjs進行使用：
const Mock \= require('mockjs')
let data \= Mock.mock({
'list|10': \[{'id|+1': 1}\]
})
先不要管里面的語法，這上面生成的是一個對象數組，里面每個元素是一個對象，每個對象的key是從0-9，value是一個對象，對象中的key是id，value是1-10.
這里只介紹commonjs中的用法，其實用es6的模塊引入方法也可以，但是最終被babel轉義的也是通過require引入的。關于import，require這些區別建議看下這篇文章
2. 語法規范
mockjs的語法規范包括兩部分：
1\. 數據模板定義規范
2\. 數據占位符定義規范
數據模板定義規范
數據模板中的屬性由三個部分組成：屬性名，生成規則，屬性值
// 屬性名 ? name
// 生成規則 rule
// 屬性值 ? value
'name|rule': value
Notice:
1\. 屬性名和生成規則之間用 | 分割。
2\. 生成規則是可選
3\. 生成規則有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\. 生成規則的含義需要依賴屬性值得類型才能確定。
5\. 屬性值中可以含有'@占位符'
6\. 屬性值還指定了最終值得初始值和類型。
(1) 屬性值是字符串String
1\. name|min-max: string
通過重復string生成一個字符串，重復次數大于等于min，小于等于max。這里的重復是指對初始化string的重復次數。
?
2\. name|count: string
通過重復string生成一個字符串，重復次數等于count。
(2) 屬性值是數字Number
1. name|+1 : number
屬性值自動加1， 初始值為number
?
2. name|min\-max: number
生成一個大于等于min，小于等于max的整數。
?
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)。
(4)屬性值是對象Object
1. name|count: object
從屬性值object中隨機選取count個屬性
?
2. name|min\-max: object
從屬性值object中隨機選取min到max個屬性
(5) 屬性值是數組Array
1. name|1: array
從屬性值array中隨機選取一個元素，作為最終值
?
2. name|+1: array
從屬性值array中順序選取一個元素，作為最終值
?
3. name|min\-max: array
通過重復屬性值array生成一個新數組，重復次數大于等于min，小于等于max。
?
4. name|count: array
通過重復屬性值array生成一個新數組，重復次數為count。
(6) 屬性值是函數Function
'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
占位符只是在屬性值字符串中占個位置，并不出現在最終的屬性值中。占位符格式：
@占位符
@占位符(參數 \[, 參數\])
Notice：
1\. 用@來標識其后的字符串是占位符。
2\. 占位符引用的是Mock.Random中的方法。
3\. 通過Mock.Random.extend()來擴展自定義占位符。
4\. 占位符也可以引用數據模板中的屬性。
5\. 占位符會有限引用數據模板中的屬性。
6\. 占位符支持相對路徑和絕對路徑。
3. Mock.mock()
Mock.mock(rurl?, rtype?, template|function(options)) 根據數據模板生成模擬數據
Mock.mock(template) 根據數據模板生成模擬數據。
Mock.mock(rurl, template) 記錄數據模板，當攔截到匹配rurl的ajax請求時，根據數據模板生成模擬數據，并作為響應數據返回。
Mock.mock(rurl, function(options)) 記錄用于生成響應數據的函數。當攔截到匹配rurl的ajax請求時，函數function執行，并把執行結果作為響應數據返回。
Mock.mock(rurl, rtype, template) 記錄數據模板，當攔截到匹配rurl和rtype的ajax請求時，將根據數據模板生成模擬數據，并作為響應數據返回。
Mock.mock(rurl, rtype, function(options)) 記錄用于生成響應數據的函數。當攔截到匹配rurl和rtype的ajax請求時，函數function(options)將被執行，并把執行結果作為響應數據返回。
rurl 標識需要攔截的url，可以是url字符串或者url正則：
/\\/domain\\/list\\.json/、'/domian/list.json'。
rtype 可選，標識需要攔截的ajax請求類型。例如GET, POST, PUT, DELETE等。
template 可選，標識數據模板，可以是對象或字符串。
function(options) 可選，表示用于生成響應數據的函數。
options 指向本次請求的ajax選項集，含有url， type和body三個屬性。
4. Mock.setup()
Mock.setup(setting) 配置攔截ajax請求時的行為。支持的配置項有：timeout。
setting 必選，配置項集合
timeout 可選，執行攔截的ajax請求的響應時間，單位是毫秒，值可以是正整數。例如400標識400ms后才會返回響應的內容；也可以是200-600這樣表示響應時間介于200和600毫秒之間，默認是10-100.
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
目前，接口 Mock.setup( settings ) 僅用于配置 Ajax 請求，將來可能用于配置 Mock 的其他行為。
5. Mock.Random
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: "射手座"
還有一些其他的生成隨機數據的方法，大家可以直接去官網看下，這里就不一一的描述了。地址：https://github.com/nuysoft/Mo...
6. Mock.valid()
Mock.valid(template, data) 校驗真實數據data是否與數據模板template匹配。
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"
}
\]
7. Mock.toJSONSchema()
Mock.toJSONSchema( template ) 把Mock.js風格的數據模板template轉換成JSON Schema
template 必選，表示數據模板，可以是對象或者字符串。
關于mock.js的介紹也這么多，這些基本上是根據官文摘抄，但是基本上夠我們日常使用。
關于找一找教程網
本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。
本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。
[關于Mock.js使用]http://www.zyiz.net/tech/detail-119093.html
總結
以上是生活随笔為你收集整理的html网页中使用mock,关于Mock.js使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云炬金融每日一题20211008
- 下一篇： 第十节（补课）：函数的扩展 — 箭头函数