Vue筆記——項目中設置mock數據

1、情景設定

咱們在使用Vue寫前端項目的時候，可能會須要後端傳回來的數據來進行測試。可是有的時候咱們沒有後端的環境，不能獲取到咱們想要的數據。這個時候咱們就須要在Vue項目中設置一些假數據，即mock數據。

配置完成以後，咱們就能夠像請求後臺數據同樣，經過一個特定的url來獲取到咱們須要的mock數據，好比:/api/goods、/api/ratings 等。

今天就跟你們分享如何在本身的Vue項目中設置mock數據。須要注意的是，我如今使用的是Vue2.x版本，不過我想Vue3.x版本應該也是大同小異。

2、準備工做

首先咱們應該在本地準備咱們須要的mock數據，通常狀況下是一些json數據，咱們將這些json數據放在一個 data.json 文件中，而後將這個文件放在項目主目錄下便可。若是你沒有準備，能夠直接點擊 進行下載。

除此以外咱們就不須要額外準備其餘的數據了，咱們設置mock數據，主要是依靠webpack給咱們自動安裝的express組件，並且設置這些數據的時候，只須要在 build 文件夾下的 webpack.dev.conf.js 文件中。

3、具體配置

咱們首先應該引入 express組件 和 data.json 數據文件，具體代碼以下：

const express = require('express')
const app = express()
const apiRoutes = express.Router()

let appDate = require('../data.json')
let seller = appDate.seller
let goods = appDate.goods
let ratings = appDate.ratings

app.use('api', apiRoutes)
複製代碼

完成上面的工做以後，咱們找到 devServer 這個對象

給這個對象新增一個方法，具體的代碼以下：

before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      errno: 0,
      data: ratings
    })
  })
}
複製代碼

這裏對上面的代碼作一些解釋：咱們新建了三條mock數據，分別經過 /api/seller 、 /api/goods 、 /api/ratings 來獲取，返回的結果是包含errno和datajson對象，若是若是你還想讓這些mock數據返回更多的東西，能夠在errno和data以後添加新的屬性。

例如你想經過 /api/seller 返回message："這些是商家數據"這條信息，能夠這樣改寫：

before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
      message: "這些是商家數據"
    })
  })
複製代碼

4、獲取數據

如此一來，使用npm run dev來重啓咱們的Vue項目（注意這裏必定要從新啓動，修改這些配置不會觸發熱加載），而後經過咱們配置的api來獲取mock數據。