没有后端的vuejs前端开发：如何编写固定装置？

Question

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

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

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

我的问题是：没有后端数据，前端团队如何开发前端？例如，要显示用户个人资料，他们需要从后端为该用户提供相应的 JSON。但是由于后端还没有完成，请求数据的端点还没有工作。

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

Answer 1

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

当您出于某种原因长时间未获得所需端点时，可能会有点棘手。我们曾经经历过这样的情况，整个微服务一个月都无法使用，但我们仍然需要在前端开发丰富的功能。在这种情况下，我们使用 wiremock 从该微服务中模拟该功能的各种端点。虽然这是一个很大的开销，而且只有当您知道自己处于一个漫长的开发周期中时才真正可行。否则我建议只使用静态文件。

Answer 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。它现在将为 users.json 调用 API。

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

没有后端的vuejs前端开发：如何编写固定装置？

vuejs frontend development without backend: how to write fixtures?

frontend

rails-api

vue.js

vue-cli