홈페이지>네트워크 프로그래밍 튜토리얼>자바 튜토리얼

SpringBoot와 Angular2의 통합의 예

저자：Eve Cole 업데이트 시간：2025-07-11 12:32:01

배경

프레임 워크는 SpringBoot로 Tomcat으로 시작되었고 프레임 워크는 Angular2와 함께 프론트 엔드 페이지로 사용되었습니다. 마지막으로, Angular2 코드는 SpringBoot의 내장 Tomcat에서 실행해야합니다.

프로젝트 구조

 src/main/-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Angular Directory는 Angular CLI를 사용하여 생성 된 새로운 프로젝트입니다. Java의 SpringBoot의 시작 코드. 리소스 디렉토리에는 application.yml configuration 파일 만 있습니다.

통합 아이디어

SpringBoot 프로젝트는 정적 HTML 파일 등을 추가해야하므로 리소스의 정적 디렉토리에 넣은 다음 LocalHost : 8080/index.html을 통해 정적 디렉토리의 Index.html 파일에 직접 액세스 할 수 있습니다. 따라서 해당 정적 디렉토리에 컴파일 된 각도 코드를 넣어야합니다.

따라서 통합 단계 :

  1. 각도 프로젝트를 컴파일하고 NPM 실행 릴리스 명령을 사용하며 컴파일 된 코드는 Angular/Dist 디렉토리에 있습니다.
  2. Angular/Dist Directory의 모든 파일을 Resources/Dist 디렉토리 (SpringBoot에서 컴파일 된 JAR 패키지 디렉토리)에 복사하거나 Angular/Dist 디렉토리를 리소스 리소스로 사용하십시오.

Exec-Maven-Plugin 플러그인 (명령을 실행하는 데 사용) 인 Maven의 일부 플러그인을 통해 수행 할 수 있습니다.

pom.xml로 빌드하십시오

프로젝트의 pom.xml 파일에서 빌드 구성을 추가해야합니다.

  1. Resource Directory로/src/main/angular/dist 디렉토리를 사용하십시오
  2. 빌드시 NPM 실행 릴리스 명령을 실행하십시오
 <빌드> <자원> <자원> <sirethory> <sirectory> src/main/resource </directory> </resource> <resource> <resource> <directory> $ {project.basedir}/src/main/angular/dist </direst </direct </direct </direct </direct </direct </direct </direct </direct </direct </direct </resources> <plugins> <!- "npm instation"및 "npm instator"및 "npm instator" -> <Plugin> <groupId> org.codehaus.mojo </groupid> <artifactid> exec-maven-plugin </artifactid> <6.0 </version> <executions> <ception> 생성 </sources </phase> <goving> <goving> </boving> </execution> </execution> </execution> </execution> </execution> </execution> </execution> </execution> <fonfiguration> <executable> npm </executable> <workingDirectory> src/main/angular </workingdirectory> <argument> run </argument> <athument> release </argument> </argument> </configuration> </plugin> </flugins> </build>

그런 다음 MVN Clean 패키지를 실행하면 정적 디렉토리의 모든 파일과 대상/클래스 디렉토리에 각도/디렉토리가 표시됩니다. 최종 생성 된 JAR 패키지에는 이러한 내용도 포함됩니다.

로컬 스타트 업 프로젝트 테스트

SptringBoot의 Application.Main 기능을 사용하여 계속 실행하는 경우, 자원에 각도/디스크 코드가 없으므로 페이지가 올바르게 표시되지 않습니다. 솔루션은 SpringBoot의 Maven 명령에 특별히 사용되는 다른 Maven 플러그인 : Spring-Boot Maven-Plugin을 사용하는 것입니다.

pom.xml에서> 플러그인을 빌드 할 다음 코드를 추가하십시오.

 <Flugin> <groupId> org.springframework.boot </groupid> <artifactid> Spring-Boot-Maven-Plugin </artifactid> <bersion> 1.5.9. release </version> <executions> <GOOMS> <GOOM> Repackage </Goal> </executions> </plugin> </plugin>

그런 다음 Maven 's Run Command : mvn clean spring-boot:run Angular 컴파일 된 파일이로드됩니다.

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.

관련 기사