Vue Mock模擬數據的使用

一、虛擬數據介紹

虛擬數據是指在前端開發時，為了方便開發者在沒有後端數據時能夠進行開發和測試使用的一種數據。Vue.js中的Mock.js是一種非常好的虛擬數據生成工具，Mock.js可以幫助我們模擬數據，提高開發效率。

二、安裝Mock.js

安裝Mock.js，可以通過npm命令進行安裝：

npm install mockjs --save-dev

三、使用Mock.js

在Vue.js項目中使用Mock.js，可以選擇在main.js中進行全局引用，或是在需要使用模擬數據的組件中引入Mock.js。

1、在main.js中全局引用Mock.js

在main.js中引用Mock.js，並在Vue實例化前開啟Mock攔截器，這樣在開發中就可以通過訪問url獲取Mock模擬數據了。

import Mock from 'mockjs'

// 開啟Mock攔截，而非真實ajax請求，攔截請求並返回模擬數據
Mock.setup({
  timeout: '200-600' // 以200-600ms 為隨機範圍，模擬網絡延遲
});

2、在需要使用模擬數據的組件中引入Mock.js

在需要使用模擬數據的組件中，引入Mock.js，並利用Vue.js的$nextTick函數在Dom掛載完成後進行數據的渲染和更新。

import Mock from 'mockjs'

export default {
  name: 'Demo',

  created() {
    const that = this

    // 模擬獲取後台數據
    Mock.mock('/api/data', {
      'status': 200,
      'data|10-20': [{
        'id|+1': 1,
        'name': '@cname',
        'age|18-40': 1,
        'sex|1': [0, 1],
        'email': '@EMAIL'
      }]
    })

    // 獲取模擬數據
    axios.get('/api/data')
      .then((res) => {
        that.tableData = res.data.data
        // 使用Vue.js的$nextTick函數更新Dom
        that.$nextTick(() => {
          that.$refs.tableData.setCurrentRow(that.tableData[0])
        })
      })
  }
}

四、Mock.js對象的常用方法

1、Mock.mock()

Mock.mock()是Mock.js中最基礎的方法，用於攔截請求並返回模擬數據。其中的url參數表示要攔截的請求 URL，method參數表示要攔截的 HTTP 方法，mockData參數表示返回的模擬數據。

Mock.mock(url, method, mockData)

示例如下：

Mock.mock('/api/data', {
  'status': 200,
  'data|10-20': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-40': 1,
    'sex|1': [0, 1],
    'email': '@EMAIL'
  }]
})

2、Mock.Random

Mock.Random是Mock.js中用於生成隨機數據的對象，可以使用Mock.Random對象中的方法來生成具有隨機性質的模擬數據。以下是常用的幾個Mock.Random方法:

1) Mock.Random.boolean()

生成隨機的布爾值。

Mock.Random.boolean()
// 輸出示例：true

2) Mock.Random.natural()

生成大於等於 0 的整數值。

Mock.Random.natural(0)
// 輸出示例：2

3) Mock.Random.integer()

生成隨機的整數值。

Mock.Random.integer(1, 100)
// 輸出示例：37

4) Mock.Random.float()

生成隨機的浮點數值。

Mock.Random.float(1, 100, 2, 2)
// 輸出示例：37.16

5) Mock.Random.date()

生成隨機的日期值。

Mock.Random.date()
// 輸出示例：Mon Aug 30 2021 15:54:40 GMT+0800 (中國標準時間)

五、總結

本文介紹了使用Vue.js和Mock.js進行虛擬數據模擬的方法，以及Mock.js對象中的一些常用方法。Mock.js能夠幫助我們快速模擬數據，提高開發效率，非常值得我們在前端開發中使用。