Question

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

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

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

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

他们应该在前端应用程序中创建灯具（例如“sample-user.json”）并在开发时使用它吗？这种情况的最佳做法是什么，因此开发前端不依赖于后端可用和提供数据？

Answer 1

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

如果由于某种原因没有长时间获得所需的端点，这可能会有点棘手。我们曾经历过这样的情况，一个月内没有完整的微服务，但我们仍然需要在我们的前端开发一个丰富的功能。在这种情况下，我们使用wiremock来模拟该特征的微服务中的各种端点。虽然它有很多开销，但只有当你知道自己处于一个漫长的开发周期时才真正有用。其他我是建议只使用静态文件。

Answer 2

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

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

这是一个（简化的）示例：

vue.config.js：

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

在env变量中添加静态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前端开发：如何编写固定装置？

2 个答案: