使用分离的 Spring 后端构建 Angular 应用程序时的不同项目结构答案

【问题标题】：Different project structures when building an Angular App with separated Spring Backend使用分离的 Spring 后端构建 Angular 应用程序时的不同项目结构
【发布时间】：2019-04-14 08:39:57
【问题描述】：

我想构建一个网页，在其中分离数据库、后端和前端，然后通过 REST 进行通信。我对如何构建项目感到非常困惑。据我了解，有以下几种方法：

制作不同的项目：一个用于前端（比如说 Angular），一个用于后端（Spring），包括数据库连接。它们彼此完全分开，可能会使用不同的 IDE。
在一个大项目中构建它，但仍使用 REST 进行通信（见下图）。

现在我想知道这两种方法之间的区别是什么？我不知道（也不会问）哪一种更好，但我什至无法弄清楚选择一个高于或低于另一个的原因或影响。

【问题讨论】：

我认为最好的解决方案是遵循JHipster 的架构，将后端和前端放在一个项目中。如果将它们放入两个不同的项目中，则必须处理 CORS，并且还要使用合适的身份验证机制，例如 JWT 或 Oauth
@zakariaamine 但是当我通过 REST 分离前端和后端时，我是否总是需要使用合适的身份验证机制，因为我需要一种方法来验证用户访问权限？还是我弄错了？
如果将它们放在同一个项目中，并通过 spring 控制器直接提供前端文件，那么您可以简单地使用已经提供的 HTTP 会话。否则，不同的项目需要在前端进行进一步设置，您必须在其中处理安全性和后端以颁发和验证令牌。
@zakariaamine 我发现我很难理解所有这些如何协同工作。但是让我们看看我们是否可以稍微澄清一下：每当我可以简单地使用已经提供的 HTTP 会话时，我在前端和后端之间没有“真正的”REST 分离，对吧？因为我也可以离开 REST 的东西。

标签： spring angular maven spring-boot

【解决方案1】：

这确实是关于个人偏好的问题，但是您让它们位于完全不同的项目中，同时您可以将 JS 捆绑包（来自 ng build）放在资源/静态文件夹（Spring 应用程序的）中，并且假设您想在同一台服务器上运行它们，它将完美运行。

您可以设置代理配置以使其更容易，例如：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

这样，每当您使用 Angulars HttpClient 之类的东西进行休息调用时，只要您将 /api 放在 url 前面，它就会调用您的 spring 后端。

例子：

  public fetchResource(id: number): Observable<Resource> {
    return this.http.get(`/api/resources/${id}`);
  }

我更喜欢让我的客户端和 api 在不同的项目中。

当您想将 JS 包添加到您的资源/静态文件夹时，您可以在 package.json 中创建一个 NPM 脚本来为您完成。

【讨论】：

谢谢！我有两点： 1. 你提到的第一件事（移动 JS 捆绑包）只有当我将它部署为一个应用程序但之前构建它作为两个应用程序时才需要？ 2. 如果您不使用这种方式，那么您将在您的 tomcat（或您可能使用的任何服务器）上部署了两个应用程序，它们充当两个不同的应用程序，对吗？但我很难理解为什么有人会以一种或另一种方式使用它。当然每个人都有自己的偏好，但这些解决方案中的每一个都必须带有一些“利弊”
我措辞不正确。无论您是否在与 Spring Boot 应用程序相同的服务器上运行ng build --prod，当您准备好部署时，您都会想要运行它。当您仍在开发中时，您不需要将任何 JS 捆绑包移动到资源/静态（同样，如果您选择在同一台服务器上运行它）。如果你愿意，可以，但不需要。 2：您可以在 GH 页面上托管您的 Angular 应用程序，在 heroku 上托管您的 API。它会正常工作的。最后一点实际上只是为了方便。查看front-end-maven-plugin