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数据。