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()
- }
- }]
原文鏈接：https://www.toutiao.com/a7038875111243465227/
