vue mockjs使用方法

大部分內容參照簡書文章：https://www.jianshu.com/p/1f6a3180051b

安裝開發依賴

npm install mockjs -D

安裝mockjs在你的開發依賴上，因爲你生產環境用的是正式的接口，安裝在開發依賴上可以減少你包的大小。

main.js：

import './mock'  //引用mock

建立mock目錄

在 src目錄 中，建立一個mock的文件夾:

index.js

樣例

index文件用於來合併mock攔截相應請求接口，並使用mock的方法模擬後端返回數據，示例：

// index.js
// 引入mockjs
import Mock from 'mockjs'

// 引入所寫的接口攔截操作方法文件
import rootAPI from './root'

// root相關
Mock.mock(/\/system\/root\/list/, 'get', rootAPI.getRootList)
Mock.mock(/\/system\/root/, 'get', rootAPI.getRoot)
Mock.mock(/\/system\/root/, 'post', rootAPI.addRoot)
Mock.mock(/\/system\/root/, 'put', rootAPI.updateRoot)
Mock.mock(/\/system\/root/, 'delete', rootAPI.delRoot)

// ***相關
Mock.mock(url, method, function)

參數

Mock.mock(url, method, function) 實現請求攔截，參數：

參數	描述
url	後端數據請求接口url
method	請求方法類型
function	攔截請求後的處理方法

其它文件

樣例

示例中以 root.js 爲例，用來存放相應的請求攔截處理方法：

// 引入mockjs
import Mock from 'mockjs'

// 公共方法
function fn1(x) {
    // ...
}
function fn2(x) {
    // ...
}

// 參數配置
let List = [] // 數據列表
const count = 50 // 數據數量

// 隨機生成數據
for (let i = 0; i < count; i++) {
  // Mock.mock()方法隨機生成數據
  List.push(Mock.mock({
    dataname: "data",
    // ...
  }))
}

// 請求攔截相應的執行方法，一下以獲取列表爲例
export default {
  /**
   * 獲取列表
   * @param owner, ipCode, status, pageNum, pageSize
   * @return {{code: number, ok: bool, data: array, total: number}}
   */
  getRootList: queryParams => {
    // 獲取搜索參數，param2Obj方法用於將param轉換爲對象格式
    const { owner, ipCode, status, pageNum = 1, pageSize = 10 } = param2Obj(queryParams.url)
    // 搜索方法
    const mockList = List.filter(item => {
      if (owner && item.owner.indexOf(owner) === -1) return false
      if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
      if (status && item.status.indexOf(status) === -1) return false
      return true
    })
    // 分頁
    const pageList = mockList.filter((item, index) => index < pageSize * pageNum && index >= pageSize * (pageNum - 1))
    // 返回數據，模擬後端
    return {
      code: 200,
      ok: true,
      data: pageList,
      total: mockList.length
    }
  },
  // 其他方法
  listFn: x => {
      // ...
  }
}

mockjs隨機生成數據相關方法

如上樣例所示，採用for循環，通過 push() 方法向 List 添加數據，示例：

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: Mock.Random.id(),
    code: Mock.Random.guid(),
    ipCode: Mock.Random.ip(),
    owner: Mock.Random.cname(),
    'status|1': ['0', '1'],
    createdTime: Mock.Random.datetime(),
    updatedTime: Mock.Random.datetime()
  }))
}

Mock.Random

本方法可以隨機生成相應種類參數， Mock.Random.{type}() 實現，常用種類：

type	示例
id	360000201910290362
guid	B7fa74Ac-2fDD-24dC-E8af-ff39dcbd6158
ip	139.232.165.220
cname	潘濤
name	Richard Walker
datetime	1974-02-03 12:36:46

其它類型請前往Mock文檔查看。

自定義隨機數據

以樣例中的隨機選擇數組中數據爲例：

// 'name|1': array
'status|1': ['a', 'b', 'c']

status就會隨機選擇數組中的一個數據。

更多示例請查看Mock文檔。

其它

常用公共方法

param轉對象

前端常用get請求通過param帶參數請求，以下方法可以將param轉換爲對象格式：

// param 轉 對象
function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

獲取url中“/”後的id等參數

通常修改刪除等操作會使用id參數，通常在url最後的"/"後面（例：api/user/1002003），並且如果有多個參數（例：api/user/1002003,1023503,2402806）會返回一個數組：

// 獲取最後一個“/”後參數
function getFinal(url) {
  const id = url.split('/').reverse()[0];
  if (id.indexOf(',') === -1) {
    return id
  }
  const ids = id.split(',')
  return ids
}

數據搜索方法

搜索使用filter方法搜索，生成搜索結果在mockList中：

// 搜索方法
const mockList = List.filter(item => {
  if (owner && item.owner.indexOf(owner) === -1) return false
  if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
  if (status && item.status.indexOf(status) === -1) return false
  return true
})