Beranda>Tutorial Pemrograman Jaringan>Tutorial Java

Contoh integrasi springboot dengan angular2

Penulis：Eve Cole Waktu Pembaruan：2025-07-11 12:32:01

latar belakang

Kerangka kerja dimulai dengan Springboot sebagai Tomcat, dan kerangka kerja yang digunakan dengan Angular2 sebagai halaman front-end. Akhirnya, kode Angular2 perlu dijalankan di tomcat springboot bawaan.

Struktur proyek

 SRC/Main/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Direktori Angular adalah proyek baru yang dibuat menggunakan sudut CLI. Kode startup Springboot di Java. Hanya ada file konfigurasi application.yml di direktori sumber daya

Ide Integrasi

Karena proyek Springboot perlu menambahkan file HTML statis, dll., Anda perlu meletakkannya di direktori statis di bawah sumber daya, dan kemudian Anda dapat secara langsung mengakses file index.html di direktori statis melalui localhost: 8080/index.html. Jadi kita perlu meletakkan kode sudut yang dikompilasi di direktori statis itu.

Jadi, langkah -langkah integrasi:

  1. Kompilasi Proyek Angular, Gunakan Perintah Release NPM Run, dan kode yang dikompilasi ada di direktori Angular/Dist
  2. Salin semua file dalam direktori Angular/Dist ke Direktori Sumber Daya/Dist (Direktori Paket JAR yang dikompilasi oleh Springboot), atau gunakan direktori Angular/Dist sebagai sumber daya sumber daya

Kita dapat melakukannya melalui beberapa plugin Maven, di mana plugin exec-maven-plugin (digunakan untuk menjalankan perintah).

Bangun di pom.xml

Dalam file pom.xml proyek, kita perlu menambahkan konfigurasi build:

  1. Penggunaan/SRC/Main/Angular/Dist Directory sebagai Direktori Sumber Daya
  2. Saat membangun, jalankan perintah rilis NPM Run
 <Build> <Ser sumber daya> <Serayat> <Recrectory> SRC/Main/Resources </directory> </resource> <serformage> <recrectory> $ {Project.basedir}/src/main/angular/dist </directory> </targetpath> non-nol "nol" nol "NOBINT" NOBINTM> </Resources> </sumber daya> </Directory> <! Direktori-> <lugin> <GroupId> org.codehaus.mojo </groupid> <ArTifactId> exec-maven-plugin </artifactid> <version> 1.6.0 </version> <EXECUCUT> <ECEXECUT> <TREACT> HARE <Configuration> <Eksekutasi> npm </executable> <workingdirectory> src/main/angular </wessingdirectory> <Arguments> <Argument> run </gurument> <gergument> rilis </argumen> </argumen> </configuration> </lugin> </plugins> </build>

Kemudian setelah menjalankan paket MVN Clean, Anda akan melihat semua file di direktori statis dan direktori Angular/Dist di direktori target/kelas. Paket JAR yang dihasilkan terakhir juga akan berisi konten ini.

Pengujian Proyek Startup Lokal

Jika Anda terus berjalan menggunakan aplikasi aplikasi. Fungsi sptringboot, karena tidak ada kode sudut/dist sumber daya, Anda tidak akan melihat halaman dengan benar. Solusinya adalah dengan menggunakan plugin Maven lain: spring-boot-maven-plugin, yang secara khusus digunakan untuk perintah Maven Springboot.

Tambahkan kode berikut untuk membangun> plugin di pom.xml:

 <lugin> <GroupId> org.springframework.boot </groupid> <ArTifactId> Spring-boot-maven-plugin </artifactid> <version> 1.5.9.release </version> <Execution> <Execution> <ject> <jemur> </gol </gol </versi> </eksekusi> </Execution> </gol resackage </gol </gol </gol </execution> </Execution> </gol

Kemudian jalankan Perintah Jalankan Maven: mvn clean spring-boot:run untuk memulai proyek dan file yang dikompilasi sudut akan dimuat.

Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.

Artikel Terkait