怎么在 vue cli 搭建的项目中增加后台 mock 接口

在Vue CLI搭建的项目中增加后台Mock接口，能够帮助前端开发者在后端接口尚未完成时，模拟数据接口进行开发和测试。核心方法包括使用Mock.js库、配置Vue CLI的代理、利用axios拦截器、手动编写Mock数据。其中，使用Mock.js库是一种非常流行且高效的模拟数据方式。Mock.js能够根据数据模板生成模拟数据，从而在前端独立于后端进行开发和测试。

一、安装和配置Mock.js

首先，需要在项目中安装Mock.js。在终端中运行如下命令：

npm install mockjs --save-dev

完成安装后，可以在项目中创建一个mock文件夹，并在其中创建相关的模拟接口文件，比如mock/index.js。在该文件中，通过Mock.js提供的API来定义数据模板和拦截请求。

// mock/index.js

import Mock from 'mockjs'
Mock.mock('/api/user', 'get', {
  code: 200,
  'data|1-10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20,
  }]
})

上述代码定义了一个模拟的用户信息接口，它能返回1到10个用户的随机数据，其中包括用户的ID、姓名和年龄。

二、配置Vue CLI的代理

在开发环境中，为了解决跨域问题，可以通过配置Vue CLI内置的Webpack代理来实现跨域请求。打开vue.config.js文件（如果没有则创建一个），添加如下配置：

module.exports = {

  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 模拟的目标地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样，所有带有/api前缀的请求都会被代理到指定的目标地址，而实际上这些请求将由Mock.js拦截并返回模拟数据。

三、利用axios拦截器

在项目中使用axios进行HTTP请求时，可以通过设置拦截器来启用Mock数据。首先，需要确保在项目中安装并启用了axios。

npm install axios --save

在项目中创建src/utils/http.js，配置axios拦截器：

import axios from 'axios'

import Mock from '../mock/index' // 引入Mock配置
// 设置请求拦截器
axios.interceptors.request.use(config => {
  Mock.mock()
  return config
}, error => {
  return Promise.reject(error)
})
export default axios

这样，每次发起请求时都会通过Mock.js拦截并返回模拟数据，方便在开发阶段进行调试。

四、手动编写Mock数据

对于不想使用Mock.js等库的情况，也可以手动编写Mock数据。在src/api目录下创建对应的js文件，通过导出函数返回Promise对象来模拟异步请求的数据。

export function getUserInfo() {

  return new Promise((resolve) => {
    resolve({
      code: 200,
      data: {
        id: 1,
        name: '张三',
        age: 25
      }
    })
  })
}

在开发过程中，通过调用这些函数来获取模拟的数据，实现了前后端分离的开发模式。

使用上述方法，在Vue CLI搭建的项目中增加后台Mock接口，不仅能够有效提高前端开发效率，同时也为后端接口实现前的测试提供了便利。通过模拟数据接口，开发者可以更专注于功能实现和性能优化，从而保证了项目的开发质量和进度。

相关问答FAQs：

1. 如何在 vue cli 搭建的项目中添加后台 mock 接口？

要在 vue cli 搭建的项目中添加后台 mock 接口，您可以按照以下步骤进行操作：

• 第一步，安装并配置 json-server：json-server 是一个轻量级的后台模拟工具，可以帮助您快速搭建后台 mock 接口。使用 npm 或 yarn 安装 json-server，并在项目根目录下创建一个 mock 数据文件（如 db.json）。
• 第二步，创建 mock 接口：在 db.json 文件中定义您需要的数据结构和接口。您可以添加各种类型的数据，如字符串、数字、数组等，来模拟真实的后台接口。
• 第三步，启动 json-server：在终端中运行 json-server db.json 命令，启动 json-server 并将 mock 接口在 localhost:3000 上提供出来。
• 第四步，配置 vue cli 代理：打开项目中的 vue.config.js 文件，在 devServer 配置中添加一个 proxy 对象，将接口请求代理到 json-server 提供的 mock 接口。

2. 在 vue cli 搭建的项目中，如何模拟后台接口数据？

如果您想要在 vue cli 搭建的项目中模拟后台接口数据，您可以使用 json-server 这样的工具来实现。json-server 可以快速搭建一个本地服务器，在该服务器上提供模拟的后台接口。

您可以使用 npm 或 yarn 安装 json-server，并在项目根目录下创建一个 mock 数据文件（如 db.json）。在 db.json 文件中，您可以定义您需要的数据结构和接口。可以添加各种类型的数据，如字符串、数字、数组等，来模拟真实的后台接口。

通过启动 json-server，并将 mock 接口在 localhost:3000 上提供出来，您就可以在 vue cli 搭建的项目中通过发送 AJAX 请求来获取模拟的后台接口数据。

3. vue cli 搭建的项目中如何使用 mock 接口进行前后端分离开发？

要在 vue cli 搭建的项目中实现前后端分离开发，您可以使用 mock 接口进行前端开发，并与后端独立进行开发。以下是实现前后端分离开发的基本步骤：

• 第一步，设置代理：在 vue.config.js 配置文件的 devServer 中配置一个 proxy 对象，将前端的请求转发到后端的接口服务器，实现与后端的通信。
• 第二步，编写 mock 接口：在前端项目中使用 json-server 或其他 mock 工具，编写模拟的后台接口数据，并启动 mock 服务器。这样前端在开发过程中可以通过 mock 接口来获取数据，无需等待后端接口的完成。
• 第三步，前端开发：前端开发人员可以基于模拟的后台接口数据进行页面和功能的开发，开发完成后可使用真实的后台接口进行联调。
• 第四步，后端开发：后端开发人员可以独立开发后台接口，提供真实的数据给前端进行联调，确保前后端的数据交互正常。

通过使用 mock 接口进行前后端分离开发，可以提高开发效率，并确保前后端之间的开发进度能够独立进行。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。