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

前端人發表於2021-12-13
MockJS前端

​

mockjs作用就是，生成隨機模擬資料，攔截 ajax 請求，可以對資料進行增刪改查。在生成資料時，我們就需要能夠熟練使用 mock.js 的語法。

Mockjs 的語法規範包括兩部分：資料模板定義規範和資料佔位符定義規範。

一、資料模板定義規範

資料模板中的每個屬性組成有：屬性名、生成規則、屬性值。

使用語法為：

"name|rule": value
玩轉 Mockjs，前端也能跑的很溜

值得注意的有：

  • 屬性名和生成規則之間使用 | 分割。
  • 生成規則是可選引數。
  • 生成規則有 7 種形式。
  • 生成規則含義需要依賴於屬性值的型別。
  • 屬性值可以指定初始值和型別。

生成規則的格式分別有：

1.1、屬性值是型別 String

變數的重複次數是一個隨機值。

'name|min-max':string
通過生成一個 string 重複 min 到 max 之間的一個字串。。

//使用
'name|1-3':'a'
執行結果：生成一個 a 的個數為 1-3 之間的字串變數。可能的結果有：a、aa 、aaa
玩轉 Mockjs，前端也能跑的很溜

直接指定重複次數。

'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

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

生成帶有小數點的數字。

'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 等

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

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"}
玩轉 Mockjs，前端也能跑的很溜

1.5、屬性值是陣列 Array

取陣列中某個元素作為結果。

'arr|1':array
從屬性值 array 中隨機選取 1 個元素作為結果返回

//使用
'arr|1':[1,2,3]
執行結果為：1、2、3 三種結果

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

生成新陣列。

'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 ]

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

1.6、屬性值是函式 Function

'name':function
function 返回值作為最終的屬性值。

//使用
'name': ()=>{
 return 'web learn'
}
執行結果為 web learn

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

在資料佔位符中，屬性值是函式有重要的意義。待會會重點解釋。

1.7、屬性值是正則 RegExp

'name': regexp
根據正規表示式 regexp 反向生成可以匹配的字串。用於生成自定義格式的字串

//使用
'reg': /[a-zA-Z0-9]2/
生成大小寫字母和數字任意組成的長度為 2 的字串

'reg':/\d{5,10}/
生成任意的 5 到 10 位的數字字串

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

二、資料佔位符定義規範

資料佔位符只是在屬性字串中佔個位置，並不會出現在最終的屬性值中。

使用格式：

@佔位符
@佔位符(引數 [, 引數])

//使用
'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' //生成中文名
    }]
   };
  }
 }
]

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

佔位符引用的都是 Mock.random 內的方法，所以我們可以把上述程式碼更改為：

'list|10-20': [{
 name:Random.cname() //生成中文名
}]

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

此時我們再查閱的時候，就發現生成的陣列內，名字都是一模一樣的。如果我們想生成不一樣的姓名，該如何解決呢？

解決辦法：把屬性值更改為函式，將函式的返回值作為最終結果。

'list|10-20': [{
 name:()=>{
  Random.cname()
 } 
}]

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

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

​

相關文章