前端之Mockjs
導讀 | mockjs作用就是,生成隨機模擬資料,攔截 ajax 請求,可以對資料進行增刪改查。在生成資料時,我們就需要能夠熟練使用 mock.js 的語法。 |
Mockjs 的語法規範包括兩部分:資料模板定義規範和資料佔位符定義規範。
一、資料模板定義規範
資料模板中的每個屬性組成有:屬性名、生成規則、屬性值。
使用語法為:
"name|rule": value
值得注意的有:
- 屬性名和生成規則之間使用 | 分割。
- 生成規則是可選引數。
- 生成規則有 7 種形式。
- 生成規則含義需要依賴於屬性值的型別。
- 屬性值可以指定初始值和型別。
生成規則的格式分別有:
1.1、屬性值是型別 String
變數的重複次數是一個隨機值。
'name|min-max':string 透過生成一個 string 重複 min 到 max 之間的一個字串。。 //使用 'name|1-3':'a' 執行結果:生成一個 a 的個數為 1-3 之間的字串變數。可能的結果有:a、aa 、aaa
直接指定重複次數。
'name|count':string 透過生成一個 string 重複 count 次的一個字串。。 //使用 'name|3':'a' 執行結果:aaa
1.2、屬性值是 Number
生成不斷累加的數字。
'name|+1':num 初始值為 num ,生成的屬性值自動加 1
生成一個區間數值。
'name|min-max':num 生成一個 min 到 max 之間的數值,num 用來指定型別 //使用 'name|1-3': 1 執行結果:生成一個 1-3 之間的數字。可能的結果有:1、2、3
生成帶有小數點的數字。
'name|min-max.dmin-dmax': num 生成一個浮點數,整數部分介於 min 和 max 之間,小數保留 dmin 到 dmax 位。num 用來指定型別。 //使用 'num1|1-10.1-2': 1 執行結果:生成 1-10 之間的帶有 1到 2 位小數的浮點數。如:2.1、3.12 等 'num2|5.1-2': 1 生成一個整數部分為 5 ,保留 1 到 2 位小數的浮點數。如:5.1、5.33、5.09 等 'num3|5.2': 1 生成整數為 5 ,保留兩位小數的浮點數。如:5.11、5.67 等
1.3、屬性值是 Boolean
'name|1': boolean 生成一個隨機值,真 假 機率都是一半。 //使用 'isLike|1': true 生成 isLike 的值可能為 true 、false。機率是一樣的。
'name|min-max': value 隨機生成一個布林值, 值為 value 的機率是 min / (min + max), 值為 !value 的機率是 max / (min + max)。 //使用 'like|1-5': true 生成 true 的 機率為 1/6 。生成 false 的機率為 5/6
1.4、屬性值是物件 Object
生成一個指定屬性個數的物件。
'obj|num': object 從屬性值 object 中,隨機選取 num 個屬性。 //使用 'obj|2': { a: '1', b: '2', c: '3' } 執行結果可能為: {a: "3", b: "2"} {c: "3", b: "2"} {a: "3", c: "2"}
生成一個屬性個數隨機的物件。
'obj|min-max': object 從 object 中 隨機選取 min 到 max 個屬性,生成一個物件。 //使用 'obj|1-2': { a: '1', b: '2', c: '3' } 執行結果可能為: {a: "3"} {b: "3"} {c: "3"} {a: "3", b: "2"} {c: "3", b: "2"} {a: "3", c: "2"}
1.5、屬性值是陣列 Array
取陣列中某個元素作為結果。
'arr|1':array 從屬性值 array 中隨機選取 1 個元素作為結果返回 //使用 'arr|1':[1,2,3] 執行結果為:1、2、3 三種結果
生成新陣列。
'arr|min-max': array 透過重複 array 的元素生成新陣列,重複次數 min 到 max 。 //使用 'arr|1-2': [ 1,2,3 ] 執行結果為:[ 1,2,3 ] 或 [ 1,2,3,1,2,3 ]
'arr|num': array 透過重複 array 的元素生成新陣列,重複次數 num 次 。 //使用 'arr|2': [ 1,2,3 ] 執行結果為: [ 1,2,3,1,2,3 ]
1.6、屬性值是函式 Function
'name':function function 返回值作為最終的屬性值。 //使用 'name': ()=>{ return 'web learn' } 執行結果為 web learn
在資料佔位符中,屬性值是函式有重要的意義。待會會重點解釋。
1.7、屬性值是正則 RegExp
'name': regexp 根據正規表示式 regexp 反向生成可以匹配的字串。用於生成自定義格式的字串 //使用 'reg': /[a-zA-Z0-9]2/ 生成大小寫字母和數字任意組成的長度為 2 的字串 'reg':/\d{5,10}/ 生成任意的 5 到 10 位的數字字串
二、資料佔位符定義規範
資料佔位符只是在屬性字串中佔個位置,並不會出現在最終的屬性值中。
使用格式:
@佔位符 @佔位符(引數 [, 引數]) //使用 'name': "@name", 生成英文名,如:Edward Rodriguez //帶有引數 'first':"@name(middle)", 生成帶有中間名的英文名 。如:Ruth Paul Robinson 'name': "@cname", 生成中文名
注意:
- 用@來標識後邊的字串是識別符號。
- 佔位符引用的都是 mock.Random 中的方法。
- 如果需要擴充套件自定義佔位符,可使用 Mock.Random.extend()。
- 佔位符也可以引用 “資料模板” 中的內容。
- 佔位符優先引用資料模板中的屬性。
- 支援相對和絕對路徑。
Mock.mock('@string("number", 5)') 生成一個五位數的字串 Mock.mock('@color') 生成隨機的顏色 //等同於 Random.color()
三、使用舉例
建立一個 api 介面,返回一個隨機生成的陣列:
export default [ { url: "/api/list", method: "post", response: ({ url, body }) => { // body 是post方法時傳入的資料 // url 是請求介面,get方法時,也包含傳遞的引數 return { code: 200, message: "ok", //生成一個陣列 // 長度介於 10 到 20 之間 'list|10-20': [{ name:'@cname' //生成中文名 }] }; } } ]
佔位符引用的都是 Mock.random 內的方法,所以我們可以把上述程式碼更改為:
'list|10-20': [{ name:Random.cname() //生成中文名 }]
此時我們再查閱的時候,就發現生成的陣列內,名字都是一模一樣的。如果我們想生成不一樣的姓名,該如何解決呢?
解決辦法:把屬性值更改為函式,將函式的返回值作為最終結果。
'list|10-20': [{ name:()=>{ Random.cname() } }]
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2852732/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Mockjs 前端介面資料模擬MockJS前端
- 玩轉 Mockjs,前端也能跑的很溜MockJS前端
- mockjs讓前端開發獨立於後端MockJS前端後端
- mockjsMockJS
- mockjs 實現前端非侵入式 mock 解決方案MockJS前端
- Vue mockjs mock.jsVueMockJS
- 前端資料與後臺分離,使用mockjs模擬後臺返回json資料前端MockJSON
- 改造vue-cli,使用mockjs搭建mock serverVueMockJSServer
- dva + antd + mockjs 實現使用者管理MockJS
- 前端之HTML前端HTML
- 前端之jQuery前端jQuery
- 前端之JavaScript前端JavaScript
- 前端之AJAX前端
- react實戰系列 —— 起步(mockjs、第一個模組、docusaurus)ReactMockJS
- 手把手教你mockjs實際專案快速搭建MockJS
- React、Axios、MockJs實現Ajax的請求攔截ReactiOSMockJS
- 前端面試之BFC前端面試
- 前端面試之HTML前端面試HTML
- 前端筆記之HTML前端筆記HTML
- 前端面試之JS前端面試JS
- 前端筆記之Canvas前端筆記Canvas
- ## 前端面試之websocket前端面試Web
- Web前端之圖表Web前端
- 深入前端之replaced element前端
- 前端好用API之Fullscreen前端API
- 06 前端之Bootstrap框架前端boot框架
- 前端學HTTP之URL前端HTTP
- 前端進階之困前端
- Python前端之HTMLPython前端HTML
- vue中如何使用mockjs摸擬介面的各種資料VueMockJS
- Mockjs,再也不用追著後端小夥伴要介面了MockJS後端
- 前端面試之盒模型前端面試模型
- 前端筆記之CSS(上)前端筆記CSS
- 前端三劍客之HTML前端HTML
- 前端筆記之跨域前端筆記跨域
- 前端面試之JavaScript(一)前端面試JavaScript
- 前端css佈局之BFC前端CSS
- 前端模組化之ES Module前端