前言

關于mockjs，官網描述的是

1.前后端分離

2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。

3.數據類型豐富

4.通過隨機數據，模擬各種場景。

5 項目不背鍋（等后端給接口的話可能會背鍋）

等等優點，最后一條我加的。

第一步先安裝mock.js

npm install mockjs --save-dev

第二步使用 mock.js

import Mock from 'mockjs'

哪里用就在哪里引入。我是在項目src/mock/index.js里面使用mock.js

詳細請看官方文檔

關鍵點1：Mock.mock()

Mock.mock( rurl?, rtype?, template|function( options ) )

這里的參數都是可選：

關鍵點2：模板生成語法：

數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：

// 屬性名 name// 生成規則 rule// 屬性值 value'name|rule': value屬性名 和 生成規則 之間用豎線 | 分隔。生成規則 是可選的。生成規則 有 7 種格式：'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value`

生成規則 的 含義 需要依賴 屬性值的類型 才能確定。

屬性值 中可以含有 @占位符。

屬性值 還指定了最終值的初始值和類型。

舉個栗子：

栗子1：

//string表示屬性名//3表示后面屬性值重復次數 Mock.mock({ "string|3": "★"})

結果：

//星星數量為3
{
  "string": "★★★"
}

栗子2：

// num為屬性名// 生成一個大于等于1，小于等于100 的整數，屬性值100只是用來確定類型Mock.mock({ "num|1-100": 100})

結果

{
  "number": 8
}

其他設置

// 設置全局延時 沒有延時的話有時候會檢測不到數據變化 建議保留Mock.setup({ timeout: '300-600'})

模擬登錄

// 模擬登錄user/login接口，對應的函數是loginByUsernameMock.mock(///user//login/, 'post', loginByUsername)

當調用登錄接口user/loign時候會自動對應到loginByUsername這個函數執行這個函數，