從多個方面詳細闡述Mock數據

一、Mock數據是什麼意思

Mock數據是指用於模擬真實數據以測試軟件功能的一種數據類型。Mock數據是假數據，與真實數據並不相同，但與真實數據有一定的相似程度。Mock數據可以用於模擬各種數據類型，如數字、字符串、日期、布爾值、數組等。

二、Mock數據的應用場景

1、前端開發

前端開發過程中需要訪問後端接口獲取數據，但是後端開發還沒有完成對應接口或者接口還在開發階段，此時使用Mock數據可以完成前端頁面的開發和測試。

// Vue中使用Mock數據示例
import Mock from 'mockjs'
Mock.mock('/api/data', 'get', () => {
  return {
    code: 200,
    data: {
      name: 'Mock數據',
      age: 25
    }
  }
})

2、測試用例編寫

Mock數據用於編寫測試用例，測試用例可針對Mock數據和真實數據進行測試，以檢測軟件是否有錯誤。

// 單元測試使用Mock數據示例
import {sum} from './math.js'
import Mock from 'mockjs'
it('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})
it('adds 1 + 2 (mock data) to equal 3', () => {
  Mock.mock('/api/mockdata', 'get', () => {
    return {
      code: 200,
      data: {
        num1: 1,
        num2: 2
      }
    }
  })
  expect(sum(Mock.mock('/api/mockdata').num1, Mock.mock('/api/mockdata').num2)).toBe(3)
})

三、Mock數據格式

Mock數據格式為JSON格式，通過定義JSON規則生成Mock數據。Mock.js是一個生成Mock數據的js庫，可以使用Mock.js來生成符合規則的Mock數據。

// Mock數據格式示例
{
  'string|1-10': '★', // 生成隨機長度在1-10之間的星號字符串
  'number|+1': 0, // 每次調用值+1
  'boolean|1-2': true, // 隨機返回true或false
  'list|1-10': [{ // 生成1-10個對象
    'id|+1': 1, // 每個對象的id自增
    'name': '@cname', // 隨機生成中文名字
    'age|18-60': 18 // 生成18-60歲之間的整數
  }]
}

四、Mock數據中啥意思

Mock數據中各字段含義如下：

• 字符串類型：’name|min-max’: string，生成長度在min-max之間的字符串
• 數字類型：’name|+n’: number，每次調用值+n
• 布爾類型：’name|1-2′: boolean，隨機返回true或false
• 數組類型：’name|min-max’: array，生成長度在min-max之間的數組
• 對象類型：’name’: object，生成一個空對象
• 函數類型：’name’: function，生成一個函數

五、Mock數據報431 too large

在使用NodeJS的Express框架時，當前端請求返回的數據過大時會報431 too large的錯誤。此時需要在服務器端添加limit屬性解決問題。

// 服務器端解決431 too large示例
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json({limit: '50mb'})) // 設置50mb的限制

六、Mock數據中標紅

在開發過程中，需要對Mock數據中某些字段進行標紅，以便於快速識別。在Vue項目中，可以使用自定義指令來實現。

// 帶標紅Mock數據示例
@{{message}}
// 自定義標紅指令
Vue.directive('red', {
  bind: function (el, binding, vnode) {
    el.style.color = 'red'
    el.innerHTML = binding.value
  }
})

七、前端模擬數據Mock

前端模擬數據Mock是指前端在不依賴後端數據的情況下，使用本地數據進行頁面開發和測試。在Vue項目中，可以使用VueCLI提供的Mock數據功能。

// VueCLI中 Mock 數據示例
// 創建 vue.config.js 文件
module.exports = {
  devServer: {
    before(app) {
      app.get('/api/mock', (req, res) => {
        res.json({
          code: 200,
          data: {
            name: 'VueCLI Mock 數據',
            age: 30
          }
        })
      })
    }
  }
}

八、Mock數據怎麼轉成數組

Mock數據可以通過Object.values()將其轉換成數組形式，方便其在前端的應用。在Vue項目中，可以使用computed屬性將Mock數據轉化成可用的數組。

// Mock轉數組示例
const data = {
  'name': 'Mock數據',
  'age': 25
}
const arrData = Object.values(data) // ["Mock數據", 25]

// Vue項目中computed使用示例
export default {
  data() {
    return {
      mockData: {
        name: 'Vue',
        score: 90
      }
    }
  },
  computed: {
    mockArray() {
      return Object.values(this.mockData)
    }
  }
}