前端之Mockjs

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

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

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

使用語法為：

"name|rule": value

值得注意的有：

1. 屬性名和生成規則之間使用 | 分割。

1. 生成規則是可選引數。

1. 生成規則有 7 種形式。

1. 生成規則含義需要依賴於屬性值的型別。

1. 屬性值可以指定初始值和型別。

生成規則的格式分別有：

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

'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

生成不斷累加的數字。

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

'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

生成一個指定屬性個數的物件。

'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"}

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

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

'name':function 
function 返回值作為最終的屬性值。 
 
//使用 
'name': ()=>{ 
 return 'web learn' 
} 
執行結果為 web learn

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

'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", 
 生成中文名

注意：

1. 用@來標識後邊的字串是識別符號。

1. 佔位符引用的都是 mock.Random 中的方法。

1. 如果需要擴充套件自定義佔位符，可使用 Mock.Random.extend()。

1. 佔位符也可以引用 “資料模板” 中的內容。

1. 佔位符優先引用資料模板中的屬性。

1. 支援相對和絕對路徑。

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

原文來自：