没有后端的 vuejs 前端开发：如何编写夹具？

Posted 2023-02-22

【中文标题】没有后端的 vuejs 前端开发：如何编写夹具？

【英文标题】：vuejs frontend development without backend: how to write fixtures?

【发布时间】：2018-11-20 19:55:45

【问题描述】：

我们正在构建一个后端与前端完全分离的应用程序。通信将通过 rest-api、特定端点、json 等进行。

前端是使用 vue-cli 作为 SPA vue.js 应用程序开发的（带有 vuex 和 vue-router），后端是 Rails 5 API-only 应用程序。

前端和后端的开发将由不同的团队并行完成，两者都遵循相同的 API。

我的问题是：前端团队如何在没有后端数据的情况下开发前端？例如，要显示用户配置文件，他们需要来自后端的该用户的相应 JSON。但是由于后端没有完成，请求数据的端点还没有工作。

他们是否应该在前端应用程序中创建固定装置（例如“sample-user.json”）并在开发时使用它？这种情况下的最佳实践是什么，以便开发前端不依赖于后端可用和交付数据？

【问题讨论】：

用静态文件模拟后端是我在我们一直在前端/后端同时开发的项目中所做的。只需确保当您说“尊重相同的 API”时，他们是认真的。在整个项目中，这是一个巨大的争论点。

也许让后端开发团队只在 API 端点中返回一个模拟的最终结果。这样，您的前端团队甚至可以执行他们的XHR 调用，并且只要后端准备好，就可以简单地将模拟数据换成真正的交易。不过，最终这里没有黄金法则。

Stephan-v：后端不工作，前端和后端的开发会异步进行（至少在一定程度上），所以后端甚至不能返回一些假数据。 zero298：是的，似乎是最简单的解决方案，而且“尊重 api”肯定是最难的部分。

【参考方案1】：

根据我对过去项目的经验，对于小型开发周期，仅使用静态 json 文件来模拟请求的结果非常方便。我基本上已经在我的 vuex 模块中导入了所需的文件，并将它们用作我的操作中的假结果，提交与普通端点相同的突变，但使用模拟而不是 http 结果作为突变的参数。这很方便，一旦端点准备就绪，您只需更改一行。这在 scrum 中运行良好，例如，当您的开发周期很短并且您知道在 sprint 结束时，您的端点无论如何都准备好了。

无论出于何种原因，如果您长时间没有获得所需的端点，这可能会有点棘手。我们曾经经历过一次，整个微服务一个月都无法使用，但我们仍然需要在前端开发一个丰富的功能。在这个场景中，我们使用wiremock 来模拟来自该微服务的各种端点以实现该功能。不过，这会产生很多开销，并且只有在您知道自己处于较长的开发周期中时才真正可行。否则我建议只使用静态文件。

【讨论】：

感谢您的回答。 wiremock 锁定了我想要的东西，但是在快速锁定之后它似乎是一个 java 应用程序。无论如何，它让我进入了正确的方向，我找到了json-server，结合faker.js，这可能是我正在寻找的组合。不像静态 json 文件那么轻量级，但我会说也不难设置。

【参考方案2】：

在我们的一个项目中，我们只是使用静态 json 文件来独立于后端开发前端。

我们使用了vue-cli-service，因此只需在vue.config.js 中指定contentBase 选项即可使其为静态json 文件提供服务。

这是一个（简化）示例：

vue.config.js：

module.exports = 
  devServer: 
    contentBase: path.join(__dirname, 'src', 'api')
  

在环境变量中添加静态 json 路径，例如在 .env 文件中：

VUE_APP_API_USERS = 'users.json'

那么在访问API时：

import axios from 'axios';
axios.get(process.env.VUE_APP_API_USERS)
  .then(response => this.users = response.data)
  .catch(error => console.log(error));

users.json在目录结构中：

├── package.json
├── src
│   ├── api
│   │   └── users.json
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
├── vue.config.js
└── yarn.lock

运行vue-cli-service serve。它现在将为 API 调用提供 users.json。

使用的 vue-cli-service 版本：3.6.0