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

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

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

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

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

---

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

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

---

无论出于何种原因，当您在很长一段时间内没有获得所需的端点时，这可能有点棘手。我们曾经有过这样的经历，整个微服务在一个月内都不可用，但我们仍然需要在前端开发丰富的功能。在这个场景中，我们使用该功能模拟来自该微服务的各种端点。虽然这是一个很大的开销，而且只有当您知道自己处于一个很长的开发周期时，才真正可行。另外，我建议只使用静态文件。

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

---

无论出于何种原因，当您在很长一段时间内没有获得所需的端点时，这可能有点棘手。我们曾经有过这样的经历，整个微服务在一个月内都不可用，但我们仍然需要在前端开发丰富的功能。在这个场景中，我们使用该功能模拟来自该微服务的各种端点。虽然这是一个很大的开销，而且只有当您知道自己处于一个很长的开发周期时，才真正可行。另外，我建议只使用静态文件。

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

我们使用了

vue cli服务

，因此可以通过在

vue.config.js

中指定

contentBase

选项，使其为静态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服务

。它现在将为users.json提供API调用

---

使用的vue cli服务版本：3.6.0在我们的一个项目中，我们刚刚使用静态json文件独立于后端开发前端

我们使用了

vue cli服务

，因此可以通过在

vue.config.js

中指定

contentBase

选项，使其为静态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服务

。它现在将为users.json提供API调用

---

使用的vue cli服务版本：3.6.0

使用静态文件模拟后端是我在同时开发前端/后端的项目中所做的。只要确保当你说“尊重相同的API”时，他们的意思是真的。在整个项目中，这是一个巨大的争论点。也许让后端开发团队在API端点中返回一个模拟的最终结果。这样，您的前端团队甚至可以执行他们的

XHR

调用，并且只要后端准备好，模拟数据就可以简单地换成真正的交易。Stephan-v：后端无法工作，前端和后端的开发将异步进行（至少在一定程度上），因此后端甚至无法返回一些虚假数据。zero298：是的，这似乎是最简单的解决方案，当然“尊重api”是最难的部分。用静态文件模拟后端是我在项目中所做的，在项目中，我们同时开发前端/后端。只要确保当你说“尊重相同的API”时，他们的意思是真的。在整个项目中，这是一个巨大的争论点