vue-cli项目使用mock数据的方法（借助express）

以下是详细讲解“vue-cli项目使用mock数据的方法（借助express）”的完整攻略。

前置知识

在讲解具体的实现方法之前，需要先了解一些前置知识：

vue-cli：Vue.js 的官方脚手架，可用于快速搭建 Vue.js 项目
mock.js：一个用于生成随机数据的库，可生成各种类型的数据
express.js：一个用于搭建 web 服务器的库，可用于处理 HTTP 请求和响应
axios：一个用于发送 HTTP 请求的库，可用于获取来自服务器端的数据

实现步骤

下面是使用 express.js 实现 vue-cli 项目中使用 mock.js 的具体步骤。

步骤一：安装依赖

在 vue-cli 项目的根目录下打开终端，输入以下命令安装依赖：

npm install --save-dev express body-parser
npm install --save-dev mockjs

express：用于搭建 web 服务器
body-parser：用于解析 HTTP 请求体中的 JSON 数据
mockjs：用于生成随机数据

步骤二：创建 mock 数据

在项目的根目录下创建一个名为 “mock” 的目录，并在该目录下创建一个名为 “index.js” 的文件。在该文件中编写 mock 数据，示例如下：

// mock/index.js

const Mock = require('mockjs');

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20
  }]
});

module.exports = data;

以上代码中，我们使用 mockjs 生成了一个包含 10 个元素的数组，每个元素包含 id、name 和 age 三个属性，其中 name 属性使用了 @cname 表示生成中文名字，age 属性使用了 18-30 表示生成 18 到 30 岁之间的随机数。

步骤三：创建 express 服务器

在项目的根目录下创建一个名为 “server.js” 的文件，并在该文件中编写如下代码：

// server.js

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

const data = require('./mock');

app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  console.log('GET /api/data');
  res.json(data);
});

const server = app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

module.exports = server;

以上代码中，我们使用 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

步骤四：在 Vue 组件中使用 axios 获取数据

在我们已经可以响应 GET 请求的服务器的基础上，我们需要在 Vue 组件中使用 axios 发送 GET 请求，示例如下：

// MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.list = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以上代码中，我们使用了 axios 发送了一个 GET 请求，请求的 URL 是 “/api/data”，并在请求成功后将返回的数据赋值给 Vue 组件实例的 list 属性。

示例

以下是两个示例，分别针对使用 vue-cli 2.x 和 vue-cli 3.x 创建的项目。

示例一：Vue-cli 2.x

在使用 vue-cli 2.x 创建的项目中，我们需要在 webpack 配置文件中配置开发服务器，并使其支持代理功能。

安装依赖

进入项目根目录，打开命令行窗口，执行以下命令安装依赖：

npm i express body-parser -D
npm i mockjs -S

创建 mock 数据

在项目根目录下创建一个名为 “mock.js” 的文件，并输入以下代码：

// mock.js

const Mock = require('mockjs');

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20
  }]
});

module.exports = data;

以上代码中，我们使用了 mockjs 生成了一个包含 10 个元素的数组，每个元素包含 id、name 和 age 三个属性，其中 name 属性使用了 @cname 表示生成中文名字，age 属性使用了 18-30 表示生成 18 到 30 岁之间的随机数。

创建服务器

在项目根目录下创建一个名为 “server.js” 的文件，并输入以下代码：

// server.js

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

const data = require('./mock');

app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  console.log('GET /api/data');
  res.json(data);
});

const server = app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

module.exports = server;

以上代码中，我们使用了 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

修改 webpack 配置

打开 webpack.dev.conf.js 文件，找到 devServer.proxy 属性，并在该属性中添加以下代码：

// webpack.dev.conf.js

module.exports = {
  // ... 省略其余配置
  devServer: {
    // ... 省略其余配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
  // ... 省略其余配置
}

以上配置中，我们使用了 devServer.proxy 属性，并将所有以 “/api” 开头的请求转发到之前启动的 web 服务器。

在组件中使用 axios 获取数据

在需要使用 mock 数据的 Vue 组件中，我们可以使用以下代码获取数据：

// MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.list = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以上代码中，我们使用了 axios 发送了一个 GET 请求，并将其 URL 设置为 “/api/data”，在请求成功后将返回的数据赋值给 Vue 组件实例的 list 属性。

示例二：Vue-cli 3.x

在使用 vue-cli 3.x 创建的项目中，我们可以使用 vue.config.js 文件来配置 webpack。

安装依赖