在vue中使用express-mock搭建mock服务的方法

下面我将为您详细讲解在vue中使用express-mock搭建mock服务的方法。

1. 什么是express-mock

express-mock是基于Express框架的模拟数据生成器，可以用来模拟API返回数据，支持对于RESTful API的请求方式，非常方便快捷。

2. 安装express-mock

在使用express-mock之前需要安装Node.js环境和npm包管理器，在此基础上，您需要运行以下命令来安装express-mock：

npm install -g express-mock-generator

安装完成之后，您可以通过以下命令生成一个Mock API的工程：

express-mock -p 3000

这将会在当前目录下生成一个名为"mockapi"的目录，里面包含了相关的配置文件和mock数据。

3. 集成express-mock到Vue项目中

在Vue项目中使用express-mock，需要先在Vue CLI中安装express和body-parser依赖库，命令如下：

npm install --save express body-parser

完成后，在Vue项目中新建一个mock目录，并新建一个app.js文件，该文件内容如下：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(cors());

const users = require('./mock/users.json'); // 引入mock数据

app.get('/users', (req, res) => {
  res.json(users);
});

// 其他接口省略

app.listen(port, () => {
  console.log(`Mock API server listening at http://localhost:${port}`)
})

以上代码启动了一个本地的服务器，监听 3000 端口，并且通过 GET 请求回传了一个/users接口，可返回一个mock数据文件users.json中的所有数据。当服务器启动后，你可以通过访问http://localhost:3000/users来访问该接口。

4. 访问Mock API接口

现在，我们需要在Vue项目中配置一个代理服务器，将对于特定接口的请求转发到我们上一步启动的express-mock服务器中。在Vue项目中，您可以在vue.config.js文件中配置代理，在创建完项目文件夹后创建vue.config.js，将以下代码添加到该文件中：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上代码指定了一个代理服务器，将以/api开头的接口请求转发到 http://localhost:3000上。在Vue项目中访问该接口时只需要使用/api作为前缀即可。

事实上，我们也可以对不同的接口进行不同的代理，只需要对于devServer.proxy进行分别配置即可。

5. 示例

下面我将演示一个简单的示例，模拟了一个用户列表的存取过程。我们需要使用到以下两个文件：

users.json

[
  { "id": 1, "name": "Tom", "age": 20 },
  { "id": 2, "name": "Jerry", "age": 18 },
  { "id": 3, "name": "Mickey", "age": 22 }
]

user.vue

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">{{user.id}}. {{user.name}}, {{user.age}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      this.$http.get('/api/users')
        .then(res => {
          this.users = res.data;
        })
    }
  }
}
</script>

在上述代码中，我们定义了一个名为user.vue的组件，在该组件内部通过调用fetchUsers方法向mock服务器发起了一次获取用户列表的请求，将mock服务器返回的数据渲染到了UI界面上。我们访问Vue项目时，如果需要获取时时更新的用户列表数据，我们需要确保mock服务器已经启动。

命令行进入mockapi目录后，执行如下命令启动mock服务器：

node app.js

然后，返回到Vue项目根目录，执行如下命令启动开发服务器：

npm run serve

在浏览器访问http://localhost:8080即可看到该页面的效果。

6. 总结

在Vue项目中使用express-mock进行mock数据的模拟，可以提高前端开发的效率。经过上述的步骤，我们可以很方便地编写Mock API，直接通过控制接口的返回数据，对于前端开发、调试提供帮助。同时，我们也可以对于不同的接口进行代理，从而将mock数据和实际的接口区别开来，确保我们能够更加细化地进行开发。