使用Spring Boot构建Angular应用程序

Question

我想构建一个Agular应用程序，但是我不知道如何构建项目结构。

我发现了两种方法来构建应用程序。 我选择的第一种方法是将Spring Boot应用程序和Angular应用程序一起构建。 第二种方法是建立单独的项目。 通过第一种方法，我可以轻松访问静态资源，但是我认为这不是一个好方法。 通过第二种方法，这很好，因为我可以将Spring Boot应用程序用于Web和移动客户端。

我需要有关如何构建类似于Spring的项目的建议吗？ 基本问题是如何在角度项目中有效利用静态资源？

Answer 1

我有一个项目使用Spring Boot作为后端，并且在前端使用角度。 对我们来说，最好使用弹簧靴来提供角度。 但是您可以用另一种方式来做。

简而言之，spring boot可以作为API来执行CRUD，身份验证以及我们需要的其他任务。 为了在春季提供角度服务，您需要使用ng build --prod构建项目，并在春季将此处生成的所有文件复制到静态文件夹。 尽管如此，您仍需要调整路由并建立代理（我将向您展示）。

要调整路由，您可以包括以下配置：

@Configuration
public class AngularConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });

    }
}

在开发阶段，建立角度非常无聊。 因此，非常需要使用ng serve （当然要加弹）。 由于angular cli在localhost:4200而spring在localhost:8080 ，您必须在以下地址之间建立代理：

1）在项目根目录中，必须包含一个名为proxy.conf.json的文件， proxy.conf.json包含：

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

2）接下来，在文件package.json ，将"start": "ng serve"替换为"start": "ng serve --proxy-config proxy.conf.json"

你去！ 它应该工作。

最后，复制和粘贴构建非常无聊。 因此，如果您使用的是Maven，则可以包含一条规则，以便在每次启动Spring时都可以使用。 把它放在你的pom.xml ：

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                      <execution>
                          <id>copy-resources</id>
                          <phase>validate</phase>
                          <goals><goal>copy-resources</goal></goals>
                          <configuration>
                              <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory >
                              <resources>
                                  <resource>
                                      <directory>${basedir}/../frontend/dist</directory >
                                  </resource>
                              </resources>
                          </configuration>
                      </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

当然，您应该根据您的项目设置路径。

TL; DR：您可以在开发阶段使用项目，并在春季将构建包括在内以进行生产。

如果您还有其他疑问，请告诉我！ 祝好运。

Answer 2

我个人的建议；

JHipster是一个开发平台，用于生成，开发和部署Spring Boot + Angular / React Web应用程序和Spring微服务。