Mock.js的簡單使用

Mock.js的簡單使用

簡述

Mock.js 是一款 模擬數據生成器，旨在幫助前端攻城師獨立於后端進行開發，幫助編寫單元測試。

功能

1. 根據數據模板生成模擬數據。
2. 模擬 Ajax 請求，生成並返回模擬數據。
3. 基於 HTML 模板生成模擬數據。

使用場景

1. 開發期間前端非常依賴后端的接口，總會苦苦等待后端接口出來才能繼續開發。
2. 開發純前端並具備CURD功能的demo項目。
3. ...

好處

1. 只要前后端約定好數據結構，前端便可不受后端開發進度影響。
2. 可攔截ajax請求，模擬返回數據，后期無須再修改ajax請求參數。
3. 配置簡單，拿來即用。
4. ...

演示

Mockjs 模擬數據 demo

---

Vue項目中使用

安裝

npm install --save-dev mockjs

引入

為了方便后期維護，建議將Mock.js單獨配置

// main.js

... 省略Vue的引用
import './mock/mock.js'

配置

方式一：直接使用

// helloWorld.vue

import Mock from 'mockjs'
...

let data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1
  }]
})
console.log(JSON.stringify(data))

方式二：攔截ajax請求

文件路徑: /src/mock/mock.js

// mock.js

// 引入mockjs
import Mock from 'mockjs'

//延時200-600毫秒請求到數據
Mock.setup({
  // timeout: '300', // 延時300ms
  timeout: '200-600'
})

// 配置請求路徑
const url = {
  tableDataOne: 'mock/mode1/tableDataOne'
}

// 配置請求攔截
Mock.mock(url.tableDataOne, {
  "data": {
    "mtime": "@datetime", // 隨機生成日期時間
    "score|1-800": 800, // 隨機生成1-800的數字
    "rank|1-100": 100, // 隨機生成1-100的數字
    "stars|1-5": 5, // 隨機生成1-5的數字
    "nickname": "@cname" // 隨機生成中文名字
  }
})

// 攔截URL可以使用正則
Mock.mock(/\/mock\/mode1/, { ... })

/* Mock獲取請求參數 */

// GET url傳參，必須使用正則，否則無法匹配
// axios.get(`/mock/mode1/get?name=123`)
Mock.mock(/\/mock\/mode1\/get/, option => {
  console.log(option)  // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null }
  ...
})

// POST body傳參
// axios.post('/mock/model/post', { name: 11 })
Mock.mock(/\/mock\/mode1\/post/, option => {
  console.log(option)  // { "url": "/mock/mode1/post", "type": "POST", "body": "{name: 11}" }
  
  // 這里返回模擬數據時需要返回Mock對象，直接返回會原封不動輸出，不會觸發Mock語法
  return Mock.mock({
    msg: 'successful',
    outData: {
      "name": "@cname" // 隨機生成中文名字
    }
  })
}

語法規范

網上很多，很詳細，我就不重復贅述了

Mock.js官方文檔

mock.js語法規范 | 清湯餃子-簡書