玩轉 Mockjs，前端也能跑的很溜

2021 年 12 月 13 日
筆記
vue3

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()
 } 
}]

好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦！

Tags: vue3