มีโซลูชั่นหลักสองประการสำหรับการรวม Springboot และ Vue บนเครือข่าย:
1. [ไม่แนะนำ] ใช้แท็กสคริปต์โดยตรงเพื่อแนะนำ Vue และส่วนประกอบที่ใช้กันทั่วไปใน HTML วิธีนี้เหมือนกับในการพัฒนาแบบดั้งเดิมก่อนหน้านี้ แต่คุณสามารถใช้ข้อมูลสองทางของ Vue ได้อย่างมีความสุขมาก วิธีนี้เหมาะสำหรับการพัฒนาแบบเต็มรูปแบบธรรมดาเท่านั้น
2. [แนะนำ] ใช้การนั่งร้านอย่างเป็นทางการของ Vue เพื่อสร้างโครงการวิศวกรรมส่วนหน้าแยกต่างหากเพื่อให้บรรลุการพัฒนาที่เป็นอิสระและการปรับใช้อย่างเป็นอิสระจากแบ็คเอนด์และปรับใช้บริการพักผ่อนที่บริสุทธิ์แยกต่างหากจากส่วนหลังในขณะที่ส่วนหน้าใช้ Nginx โดยตรงสำหรับการปรับใช้ สิ่งนี้เรียกว่ารูปแบบการพัฒนาสถาปัตยกรรมการแยกส่วนหน้าและแบ็คเอนด์ที่สมบูรณ์ แต่มีปัญหามากมายเกี่ยวกับการอนุญาต API ที่จำเป็นต้องแก้ไขในการแยกรวมถึงการปรับใช้การกำหนดเส้นทางเราเตอร์ Vue ที่ต้องการกฎการเขียนใหม่ที่จะกำหนดค่าใน Nginx สถาปัตยกรรมประเภทนี้ที่แยกออกจากด้านหน้าและด้านหลังอย่างสมบูรณ์ก็ถูกนำมาใช้โดย บริษัท อินเทอร์เน็ต เซิร์ฟเวอร์แบ็กเอนด์ไม่จำเป็นต้องจัดการกับทรัพยากรคงที่อีกต่อไปและยังสามารถลดแรงกดดันบางอย่างบนเซิร์ฟเวอร์แบ็กเอนด์
1. ทำไมการแยกส่วนหน้าและส่วนหลังและการผสาน
ในอุตสาหกรรมดั้งเดิมหลายคนถูกครอบงำด้วยแนวคิดโครงการมากกว่าผลิตภัณฑ์ โครงการจะถูกขายให้กับลูกค้าหลายคนและนำไปใช้กับห้องคอมพิวเตอร์ในท้องถิ่นของลูกค้า ในอุตสาหกรรมดั้งเดิมบางแห่งเทคโนโลยีการปรับใช้และการใช้งานบุคลากรไม่สามารถเปรียบเทียบกับทีมงานและการบำรุงรักษาของ บริษัท อินเทอร์เน็ตและเนื่องจากสภาพแวดล้อมที่ไม่แน่นอนต่าง ๆ จึงไม่สามารถสร้างการปรับใช้แบบคอนเทนเนอร์โดยอัตโนมัติ ฯลฯ ดังนั้นในกรณีนี้พยายามลดข้อกำหนดซอฟต์แวร์บริการในระหว่างการปรับใช้ ในการตอบสนองต่อสถานการณ์นี้การพัฒนาอิสระส่วนหน้าจะถูกนำไปใช้ในการพัฒนา วิธีการพัฒนาทั้งหมดเหมือนกับวิธีที่สองที่กล่าวถึงข้างต้น อย่างไรก็ตามเมื่อสปริงบู๊ตแบ็คเอนด์ได้รับการบรรจุและปล่อยออกมาจะมีการป้อนเอาต์พุตการก่อสร้างส่วนหน้าเข้าด้วยกัน ในท้ายที่สุดเพียงแค่ปรับใช้โครงการ Springboot ไม่จำเป็นต้องติดตั้งเซิร์ฟเวอร์ Nginx
2. การดำเนินการที่สำคัญของการรวม Springboot และ Vue
ในความเป็นจริงในบทความนี้การแยกส่วนหน้าของการพัฒนาส่วนหน้าหลังจากการพัฒนาส่วนหน้าเสร็จสิ้นไฟล์ในแบบคงที่ที่สร้างขึ้นในการสร้างจะถูกคัดลอกไปยังสแตติกของทรัพยากรของสปริงบู๊ตและ index.html ถูกคัดลอกโดยตรงไปยังทรัพยากรของสปริงโบท นี่คือตัวอย่างไดอะแกรม:
โครงการ Vue Front-End
โครงการ Springboot:
ข้างต้นเป็นวิธีที่ง่ายที่สุดในการผสาน แต่ถ้าเป็นการพัฒนาโครงการระดับวิศวกรรมไม่แนะนำให้ใช้การผสานด้วยตนเองและไม่แนะนำให้สร้างรหัสส่วนหน้าเพื่อสร้างและส่งไปยังทรัพยากร Springboot วิธีที่ดีคือการรักษารหัสการพัฒนาที่เป็นอิสระอย่างสมบูรณ์และรหัสโครงการจะไม่ส่งผลกระทบต่อกันและกัน ด้วยความช่วยเหลือของเครื่องมือการก่อสร้างเช่นเจนกินส์การก่อสร้างส่วนหน้าจะถูกเรียกใช้และสคริปต์ระบบอัตโนมัติจะถูกเขียนขึ้นเมื่อสร้างสปริงบู๊ตคัดลอกทรัพยากรที่สร้างขึ้นโดย Webpack ส่วนหน้าไปยัง Springboot แล้วบรรจุในขวด ในที่สุดฉันได้รับโครงการ Springboot ที่มีส่วนหน้าและส่วนหลังอย่างสมบูรณ์
3. ประเด็นหลักของการรวม
หลังจากการบูรณาการข้างต้นมีปัญหาสองอย่างที่ค่อนข้างใหญ่จะเกิดขึ้น:
1. ทรัพยากรคงที่ไม่สามารถเข้าถึงได้ตามปกติ
2. เส้นทางของเส้นทางเราเตอร์ Vue ไม่สามารถแก้ไขได้ตามปกติ
ในการแก้ปัญหาแรกเราต้องระบุคำนำหน้าการประมวลผลทรัพยากรแบบคงที่ของ Springboot อีกครั้งรหัส:
@ConfigurationPublic คลาส SpringWebMvCconFig ขยาย WebMVCCONFigurerAdapter {@Override โมฆะสาธารณะ addResourceHandlers (ResourceHandlerRegistry Registry) {registry.addresourceHandler ("/คงที่/**") Super.addresourceHandlers (รีจิสทรี); -วิธีในการแก้ปัญหาที่สองคือการเขียนเส้นทางของเส้นทาง Vue ใหม่และปล่อยให้เราเตอร์เพื่อประมวลผลแทนที่จะเป็น Springboot เพื่อจัดการกับตัวเอง เมื่อเขียนใหม่คุณสามารถพิจารณาเพิ่มเส้นทางเส้นทางได้อย่างสม่ำเสมอจากนั้นเขียนการกรองและสกัดกั้นคำต่อท้ายที่เฉพาะเจาะจงใน Springboot เพื่อทำการประมวลผลเส้นทางของการส่งต่อการร้องขอและส่งไปยัง Vue ชอบ:
const เราเตอร์ = ใหม่ vuerouter ({โหมด: 'ประวัติ', ฐาน: __dirname, เส้นทาง: [{path: '/ui/first.vhtml', ส่วนประกอบ: แรก}, {path: '/ui/second.vhtml'การสกัดกั้นแบ็กเอนด์กับ VHTML จะถูกทิ้งไว้ในเราเตอร์เพื่อประมวลผล วิธีนี้เป็นไปได้อย่างสมบูรณ์ในการบรรจุภัณฑ์หลังจากเขียนตัวกรองเพื่อสกัดกั้นแบ็กเอนด์ แต่จะมีปัญหากับการเข้าถึงเส้นทางโดยตรงกับคำต่อท้ายที่พัฒนาขึ้นโดยส่วนหน้า
อีกวิธีหนึ่งคือการเพิ่มคำนำหน้าเช่น /UI ไปยังเส้นทางการกำหนดเส้นทางส่วนหน้า ในเวลานี้ตัวกรองการเขียนแบ็คเอนด์ตรงกับคำนำหน้าซึ่งจะไม่ส่งผลกระทบต่อปัญหาการวิเคราะห์การกำหนดเส้นทางของการพัฒนาส่วนหน้าแยกกัน การอ้างอิงตัวกรองมีดังนี้:
/** * ใช้เพื่อเขียนเราเตอร์ Vue ใหม่ * * @author yu ใน 2017-11-22 19:47:23 */คลาสสาธารณะ rewriteFilter ใช้ตัวกรอง {/***ที่อยู่ปลายทางที่ต้องเขียนใหม่*/สตริงสุดท้ายคงที่สาธารณะ rewrite_to = "rewriteurl"; / *** ไวลด์การ์ด URL และ URL ที่ถูกสกัดกั้นถูกคั่นด้วยอัฒภาคภาษาอังกฤษ*/ สตริงสุดท้ายคงที่สาธารณะ rewrite_patterns = "urlpatterns"; ชุดส่วนตัว <String> urlPatterns = null; // กำหนดค่า URL WildCard สตริงส่วนตัว rewriteto = null; @Override โมฆะสาธารณะ init (FilterConfig CFG) พ่น ServleTexception {// เริ่มต้นการกำหนดค่าการสกัดกั้น rewriteTo = cfg.getInitParameter (rewrite_to); String ยกเว้น URULSTRING = CFG.GETINITPARAMETER (reWrite_Patterns); if (stringUtil.isnotEmpty (ยกเว้น urlString)) {urlpatterns = collections.unmodifiableset (ใหม่ hashset <> (array.aslist (ยกเว้น urlstring.split (";", 0)))); } else {urlpatterns = collections.empyset (); }} @Override โมฆะสาธารณะ Dofilter (ServletRequest REQ, ServletResponse Resp, FilterChain Chain) พ่น IOException, ServleTexception {httpservletRequest Request = (httpservletRequest) req; String servletPath = request.getServletPath (); String Context = request.getContextPath (); // เส้นทางที่ตรงกัน rewrite if (ismatches (urlpatterns, servletpath)) {req.getRequestDispatcher (บริบท+"/"+rewriteto). forward (req, resp); } else {chain.dofilter (req, resp); }} @Override โมฆะสาธารณะทำลาย () {} / ** * การจับคู่ส่งคืนจริงไม่ตรงกันจะส่งคืนค่าเท็จ * @param รูปแบบการแสดงออกปกติหรือไวด์การ์ด * @param url ที่ร้องขอ url * @return * / private boolean ismatches (set <string> รูปแบบ } สำหรับ (String str: patterns) {if (str.endswith ("/*")) {ชื่อสตริง = str.substring (0, str.length () - 2); if (url.contains (ชื่อ)) {return true; }} else {รูปแบบรูปแบบ = pattern.compile (str); if (pattern.matcher (url). -matches ()) {return true; }} return false; -การลงทะเบียนตัวกรอง:
@springbootapplicationPublic คลาส SpringbootMainApplication {โมฆะคงที่สาธารณะหลัก (สตริง [] args) {springapplication.run (springbootmainapplication.class, args); } @Bean Public EmbeddedServletContainerCustomizer มี comederCustomizer () {return (container -> {errorpage error401Page = new ErrorsPage (httpstatus.unauthorized, "/errors/401.html"); "orrors/404.html"); } @Bean Public FilterRegistrationBean TestFilterRegistration () {การลงทะเบียน FilterRegistrationBean = FilterRegistrationBean ใหม่ (); ลงทะเบียน SetFilter (ใหม่ rewriteFilter ()); // ลงทะเบียนการเขียนตัวกรอง rewrite registration.addurlpatterns ("/*"); ลงทะเบียน AddinitParameter (rewriteFilter.rewrite_to, "/index.html"); ลงทะเบียน AddinitParameter (rewriteFilter.rewrite_patterns, "/ui/*"); ลงทะเบียน. setName ("rewriteFilter"); การลงทะเบียน SetOrder (1); การลงทะเบียนคืน; -ในเวลานี้ Springboot สามารถส่งมอบทรัพยากรการกำหนดเส้นทางส่วนหน้าไปยังเส้นทางสำหรับการประมวลผล ณ จุดนี้การแยกส่วนหน้าและการแยกส่วนหลังทั้งหมดและการรวมตัวกันเสร็จสิ้นแล้ว วิธีนี้สามารถแยกออกจากด้านหน้าและด้านหลังได้อย่างง่ายดายเมื่อมีเงื่อนไขในระยะต่อมา
สรุป
ด้านบนคือการแยกส่วนหน้าและแผนผสานของ Spring Boot+Vue แนะนำให้คุณรู้จักโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!