Beispiel für die Integration von Springboot mit Angular2

Hintergrund

Das Framework begann mit Springboot als Tomcat und das mit Angular2 als Front-End-Seite verwendete Framework. Schließlich muss der Code von Angular2 im eingebauten Springboot ausgeführt werden.

Projektstruktur

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

Das Winkelverzeichnis ist ein neues Projekt, das mit Angular CLI erstellt wurde. Der Startcode von Springboot in Java. Es gibt nur die Konfigurationsdatei application.yml im Ressourcenverzeichnis

Integrationsideen

Da Springboot -Projekte statische HTML -Dateien usw. hinzufügen müssen, müssen Sie sie in das statische Verzeichnis unter Ressourcen einfügen, und dann können Sie direkt auf die Index.html -Datei im statischen Verzeichnis über Localhost: 8080/Index.html zugreifen. Deshalb müssen wir den kompilierten Angularcode in dieses statische Verzeichnis einfügen.

Die Integrationsschritte:

1. Kompilieren Sie Winkelprojekte, verwenden Sie den Befehl npm run release und der kompilierte Code befindet sich im Angular/Dist -Verzeichnis
2. Kopieren Sie alle Dateien im Angular/Dist -Verzeichnis in das Ressourcen-/Dist -Verzeichnis (das von Springboot zusammengestellte JAR -Paketverzeichnis) oder verwenden Sie das Angular/Dist -Verzeichnis als Ressourcenressource

Wir können es durch einige Plugins von Maven tun, wo das Exec-Maven-Plugin-Plugin (zum Ausführen von Befehlen verwendet wird).

bauen Sie pom.xml auf

In der POM.xml -Datei des Projekts müssen wir die Build -Konfiguration hinzufügen:

1. Verwendung/SRC/Main/Angular/DIST -Verzeichnis als Ressourcenverzeichnis
2. Führen Sie beim Erstellen den Befehl npm run release aus

 <build> <ressourcen> <ressourcen> <Direcidory> src/main/ressourcen </direcessory> </ressourcen> <ressourcen> <Direcidory> $ {project.basedir}/src/main/angular/dist </disticy> <targetPath> static </targetPath> </ressourcen> </ressourcen> </ressourcen> <! --> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>1.6.0</version> <executions> <execution> <phase>generate-sources</phase> <goals> <goal>exec</goal> </goals> </execution> </execution> </execution> </execution> <configuration> <ausführbare> npm </ausführbare> <WorkingDirectory> Src/Main/Angular </WorkingDirectory> <argumente> <argument> Run </argument> <argument> Release </Argument> </Argumente> </configuration> </plugin> </plugins> </build>

Nachdem Sie das MVN Clean -Paket ausgeführt haben, sehen Sie alle Dateien im statischen Verzeichnis und im Angular/Dist -Verzeichnis im Verzeichnis Ziel/Klassen. Das endgültige generierte JAR -Paket enthält auch diese Inhalte.

Lokale Startup -Projekttests

Wenn Sie weiterhin mit der Funktion der Anwendung von sptringboot ausgeführt werden, da kein Angular/Dist -Code in Ressourcen enthält, werden die Seite nicht korrekt angezeigt. Die Lösung besteht darin, ein anderes Maven-Plugin zu verwenden: Spring-Boot-Maven-Plugin, das speziell für den Befehl maven von Springboot verwendet wird.

Fügen Sie den folgenden Code hinzu, um> Plugins in pom.xml zu erstellen:

 <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>1.5.9.RELEASE</version> <executions> <execution> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin>

Führen Sie dann den Befehl mavens run aus: mvn clean spring-boot:run , um das Projekt zu starten, und die angular kompilierte Datei wird geladen.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.