ตัวอย่างของการรวม Springboot กับ Angular2

พื้นหลัง

เฟรมเวิร์กเริ่มต้นด้วย Springboot เป็น Tomcat และเฟรมเวิร์กที่ใช้กับ Angular2 เป็นหน้าส่วนหน้า ในที่สุดรหัสของ Angular2 จะต้องทำงานใน Tomcat ในตัวของ Springboot ในตัว

โครงสร้างโครงการ

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

ไดเรกทอรีเชิงมุมเป็นโครงการใหม่ที่สร้างขึ้นโดยใช้ Angular CLI รหัสเริ่มต้นของ Springboot ใน Java มีเพียงไฟล์การกำหนดค่า application.yml ในไดเรกทอรีทรัพยากร

ไอเดียบูรณาการ

เนื่องจากโครงการ Springboot จำเป็นต้องเพิ่มไฟล์ HTML แบบคงที่ ฯลฯ คุณต้องใส่ไว้ในไดเรกทอรีแบบคงที่ภายใต้ทรัพยากรจากนั้นคุณสามารถเข้าถึงไฟล์ index.html โดยตรงในไดเรกทอรีแบบคงที่ผ่าน localhost: 8080/index.html ดังนั้นเราจำเป็นต้องใส่รหัสที่รวบรวมของ Angular ในไดเรกทอรีแบบคงที่

ดังนั้นขั้นตอนของการรวม:

1. รวบรวมโครงการเชิงมุมใช้คำสั่ง NPM Run Release และรหัสที่รวบรวมอยู่ในไดเรกทอรี Angular/Dist
2. คัดลอกไฟล์ทั้งหมดในไดเรกทอรี Angular/Dist ไปยัง Distory/Dist Directory (ไดเรกทอรีแพ็คเกจ JAR ที่รวบรวมโดย SpringBoot) หรือใช้ไดเรกทอรี Angular/Dist เป็นทรัพยากรทรัพยากร

เราสามารถทำได้ผ่านปลั๊กอินของ Maven ซึ่งปลั๊กอิน Exec-Maven-Plugin (ใช้ในการเรียกใช้คำสั่ง)

สร้างใน pom.xml

ในไฟล์ pom.xml ของโครงการเราจำเป็นต้องเพิ่มการกำหนดค่าการสร้าง:

1. ใช้/src/main/angular/dist directory เป็นไดเรกทอรีทรัพยากร
2. เมื่อสร้างให้เรียกใช้คำสั่งรีลีส NPM Run

 <uffect> <sroves> <resource> <Sroresory> SRC/Main/Resources </Directory> </sursece> <srovesors> <Sroresory> $ {project.basedir}/src/main/angular/dist </directory> <plugin> <roupId> org.codehaus.mojo </groupid> <ratifactid> exec-maven-plugin </artifactid> <cersion> 1.6.0 </เวอร์ชัน> <cenections> <EXCUTION> <S EXICUTION </EXICUTIOF <encutable> NPM </executable> <workingDirectory> SRC/Main/Angular </workingDirectory> <goruments> <guralic> เรียกใช้ </rigment> <gurgal> release </igration>

จากนั้นหลังจากดำเนินการแพ็คเกจ MVN Clean คุณจะเห็นไฟล์ทั้งหมดในไดเรกทอรีแบบคงที่และไดเรกทอรี Angular/Dist ในไดเรกทอรีเป้าหมาย/คลาส แพ็คเกจ JAR ที่สร้างขึ้นสุดท้ายจะมีเนื้อหาเหล่านี้

การทดสอบโครงการเริ่มต้นในพื้นที่

หากคุณดำเนินการต่อโดยใช้แอปพลิเคชันฟังก์ชั่นของ SPTRINGBOOT เนื่องจากไม่มีรหัสเชิงมุม/DIST ในทรัพยากรคุณจะไม่เห็นหน้าเว็บอย่างถูกต้อง วิธีแก้ปัญหาคือการใช้ปลั๊กอิน Maven อื่น: Spring-Boot-Maven-Plugin ซึ่งใช้เป็นพิเศษสำหรับคำสั่ง Maven ของ Springboot

เพิ่มรหัสต่อไปนี้เพื่อสร้าง> ปลั๊กอินใน pom.xml:

 <Plugin> <roupID> org.springframework.boot </groupId> <ratifactid> Spring-Boot-Maven-Plugin </ArtifactId> <Sersion> 1.5.9.Release </เวอร์ชัน> <Cenecutions>

จากนั้นเรียกใช้คำสั่ง RUN ของ Maven: mvn clean spring-boot:run เพื่อเริ่มโครงการและจะโหลดไฟล์เชิงมุม

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น