mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据
首先回顧vue-cli項目中使用mockjs步驟：
1、安裝mockjs、axios（http請求庫）；
cnpm install mockjs axios --save?
2、在項目中新建一個mock.js文件，用于定義接口返回的數(shù)據(jù)；
const Mock = require('mockjs') // 獲取mock對象 const Random = Mock.Random // 獲取random對象，隨機生成各種數(shù)據(jù)，具體請翻閱文檔 const domain = 'http://mockjs.com/api' // 定義默認域名，隨便寫 const code = 200 // 返回的狀態(tài)碼// 隨機生成文章數(shù)據(jù) const postData = req => {console.log(req) // 請求體，用于獲取參數(shù)let posts = [] // 用于存放文章數(shù)據(jù)的數(shù)組for (let i = 0; i < 10; i++) {let post = {title: Random.csentence(10, 25), // 隨機生成長度為10-25的標題icon: Random.dataImage('250x250', '文章icon'), // 隨機生成大小為250x250的圖片鏈接author: Random.cname(), // 隨機生成名字date: Random.date() + ' ' + Random.time() // 隨機生成年月日 + 時間}posts.push(post)}// 返回狀態(tài)碼和文章數(shù)據(jù)postsreturn {code,posts} }// 定義請求鏈接，類型，還有返回數(shù)據(jù) Mock.mock(`${domain}/posts`, 'get', postData);?
3、在main.js引入mock.js；
import Mock from './mock' // 剛剛手寫的mock.js文件 import axios from 'axios' // axios http請求庫axios.defaults.baseURL = 'http://mockjs.com/api' // 設置默認請求的url Vue.prototype.$http = axios4、組件內ajax請求
this.$http.get("/posts").then(res => {console.log(res); });?
?
一、語法規(guī)范
語法規(guī)范包括兩部分：
- 數(shù)據(jù)模板定義規(guī)范（Data Template Definition，DTD），可以根據(jù)屬性值的不同類型及規(guī)則生成數(shù)據(jù)。
- 數(shù)據(jù)占位符定義規(guī)范（Data Placeholder Definition，DPD），指使'@占位符' 引用Mock.Random()方法生成隨機數(shù)據(jù)。
?
數(shù)據(jù)模板定義規(guī)范 DTD
數(shù)據(jù)模板中的每個屬性由 3 部分構成：屬性名、生成規(guī)則、屬性值：
// 屬性名 name // 生成規(guī)則 rule // 屬性值 value 'name|rule': value注意：
- 屬性名?和?生成規(guī)則?之間用豎線?|?分隔。
- 生成規(guī)則?是可選的。
- 生成規(guī)則?有 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
- 生成規(guī)則?的 含義 需要依賴?屬性值的類型?才能確定。
- 屬性值?中可以含有?@占位符。
- 屬性值?還指定了最終值的初始值和類型。
生成規(guī)則和示例：
?
1. 屬性值是字符串?String
'name|min-max': string
通過重復?string?生成一個字符串，重復次數(shù)大于等于?min，小于等于?max。
'name|count': string
通過重復?string?生成一個字符串，重復次數(shù)等于?count。
?
2. 屬性值是數(shù)字?Number
'name|+1': number
屬性值自動加 1，初始值為?number。
'name|min-max': number
生成一個大于等于?min、小于等于?max?的整數(shù)，屬性值?number?只是用來確定類型。
'name|min-max.dmin-dmax': number
生成一個浮點數(shù)，整數(shù)部分大于等于?min、小于等于?max，小數(shù)部分保留?dmin?到?dmax?位。
?
3. 屬性值是布爾型?Boolean
'name|1': boolean
隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
'name|min-max': value
隨機生成一個布爾值，值為?value?的概率是?min / (min + max)，值為?!value?的概率是?max / (min + max)。
?
4. 屬性值是對象?Object
'name|count': object
從屬性值?object?中隨機選取?count?個屬性。
'name|min-max': object
從屬性值?object?中隨機選取?min?到?max?個屬性。
?
5. 屬性值是數(shù)組?Array
'name|1': array
從屬性值?array?中隨機選取 1 個元素，作為最終值。
'name|+1': array
從屬性值?array?中順序選取 1 個元素，作為最終值。
'name|min-max': array
通過重復屬性值?array?生成一個新數(shù)組，重復次數(shù)大于等于?min，小于等于?max。
'name|count': array
通過重復屬性值?array?生成一個新數(shù)組，重復次數(shù)為?count。
?
6. 屬性值是函數(shù)?Function
'name': function
執(zhí)行函數(shù)?function，取其返回值作為最終的屬性值，函數(shù)的上下文為屬性?'name'?所在的對象。
?
7. 屬性值是正則表達式?RegExp
'name': regexp
根據(jù)正則表達式?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
占位符?只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中。
占位符?的格式為：
@占位符 @占位符(參數(shù) [, 參數(shù)])注意：
?
二、Mock.mock( rurl?, rtype?, template|function( options ) )
方法解釋：當攔截到匹配?rurl?和?rtype?的 Ajax 請求時，函數(shù)?function(options)?將被執(zhí)行，并把執(zhí)行結果作為響應數(shù)據(jù)返回。
注意事項：從 1.0 開始，Mock.js 通過覆蓋和模擬原生 XMLHttpRequest 的行為來攔截 Ajax 請求，不再依賴于第三方 Ajax 工具庫（例如 jQuery、Zepto 等）。
?
rurl
可選。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如?/\/domain\/list\.json/、'/domian/list.json'。
rtype
可選。
表示需要攔截的 Ajax 請求類型。例如?GET、POST、PUT、DELETE?等。
template
可選。
表示數(shù)據(jù)模板，可以是對象或字符串。例如?{ 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可選。
表示用于生成響應數(shù)據(jù)的函數(shù)。
options
指向本次請求的 Ajax 選項集，含有?url、type?和?body?三個屬性
?
/*模擬刪除數(shù)據(jù)的方式*/ var arr=[{name:'fei',age:20,id:1},{name:'liang',age:30,id:2},{name:'jun',age:40,id:3},{name:'ming',age:50,id:4} ]Mock.mock('http://www.bai.com','delete',function(options){var id = parseInt(options.body.split("=")[1])//獲取body中刪除的idvar index;for(var i in arr){if(arr[i].id===id){//在數(shù)組arr里找到這個idindex=ibreak;}}arr.splice(index,1)//把這個id對應的對象從數(shù)組里刪除return arr;//返回這個數(shù)組,也就是返回處理后的假數(shù)據(jù) }) $.ajax({url:'http://www.bai.com',type:"DELETE",data:{id:1//假設需要刪除id=1的數(shù)據(jù)},dataType:'json',success:function(e){console.log(e)} })?
三、Mock.setup( settings )可以配置攔截 Ajax 請求時的響應時間
Mock.setup({ //表示 400 毫秒 后才會返回響應內容；timeout: 400 }) Mock.setup({timeout: '200-600' //表示響應時間介于 200 和 600 毫秒之間。默認值是'10-100'。 })?
四、Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)。
注意：Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為?@占位符(參數(shù) [, 參數(shù)])?。
var Random = Mock.Random //引入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 提供的完整方法（占位符）如下：
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |
方法與數(shù)據(jù)模板的?@占位符?一一對應，使用如下：
? ? ? ? //1. Random.boolean( min?, max?, current? )// Random.boolean( min?, max?, current? )'boolean1': Random.boolean(1,5,true), // 指示參數(shù) true 出現(xiàn)的概率。概率計算公式為 1 / (1 + 5)。該參數(shù)的默認值為 1，即有 50% 的概率返回參數(shù) true'boolean2': '@boolean(1,5,true)',//2. Random.natural( min?, max? )'natural': Random.natural(), // 返回一個大于0的自然數(shù)'natura2': Random.natural(0,500), // 返回一個0-500的自然數(shù)//3. Random.integer( min?, max? )'integer1': '@integer','integer1': Random.integer(-500,500), // 返回-500 - 500的隨機整數(shù)//4. Random.float( min?, max?, dmin?, dmax? )'float1': '@float(0,50,12,1000)', // 36.216873636235'float2': Random.float(), // -8349164373254657//5. Random.character( pool? )'character1': '@character', // H 如果未傳入該參數(shù)，則從 lower + upper + number + symbol 中隨機選取一個字符返回'character2': Random.character('lowercase,youknow!'), // a//6. Random.string( pool?, min?, max? )'string1': '@string', // Etns)d ?注：未傳入該參數(shù)，則從 lower + upper + number + symbol 中隨機選取73-個字符返回'string2': Random.string('upper',5,10), // ADLZQLPC 返回字符串長度為5-10?//7. Random.range( start?, stop, step? )'range1': '@range()', // []'range2': Random.range(3,7) // [3, 4, 5, 6]?
自定義擴展占位符：在需要時還可以為 Mock.Random 擴展方法，然后在數(shù)據(jù)模板中通過?@擴展方法?引用。例如：
Random.extend({constellation: function(date) {var constellations = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚座']return this.pick(constellations)} }) Random.constellation() // => "水瓶座" Mock.mock('@CONSTELLATION') // => "天蝎座" Mock.mock({constellation: '@CONSTELLATION' }) // => { constellation: "射手座" }?
?
五、Mock.valid( template, data ) 校驗真實數(shù)據(jù)?data?是否與數(shù)據(jù)模板?template?匹配。
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"} ]?
六、Mock.toJSONSchema( template ) 把 Mock.js 風格的數(shù)據(jù)模板?template?轉換成?JSON Schema。
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}}] }?
更多參考Mockjs官網(wǎng)?https://github.com/nuysoft/Mock/wiki/Syntax-Specification
https://www.jianshu.com/p/aea89b5e6d33
總結
以上是生活随笔為你收集整理的mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C指针原理（41)-递归(2)
- 下一篇： tensorflow-读写数据最佳代码组