هناك حلان رئيسيان للجمع بين Springboot و Vue على الشبكة:
1. [غير موصى به] استخدم علامات البرنامج النصي مباشرة لتقديم VUE وبعض المكونات شائعة الاستخدام في HTML. هذه الطريقة هي نفسها كما في التطوير التقليدي السابق ، ولكن يمكنك استخدام بيانات Vue ثنائية الاتجاه بسعادة كبيرة. هذه الطريقة مناسبة فقط لتطوير الكامل العادي.
2. [الموصى به] استخدم سقالات VUE الرسمية لإنشاء مشروع هندسي أمامي منفصل ، وذلك لتحقيق تطوير ونشر مستقلون كاملون من الواجهة الخلفية ، ونشر خدمة مريحة خالصة بشكل منفصل عن الواجهة الخلفية ، بينما يستخدم الواجهة الأمامية NGINX مباشرة للنشر. وهذا ما يسمى نموذج تطوير بنية الفصل الأمامية والخلفية الكاملة ، ولكن هناك العديد من المشكلات التي تعاني من أذونات API التي تحتاج إلى حل في الفصل ، بما في ذلك نشر توجيه Vue Trouter الذي يتطلب تكوين قواعد إعادة كتابة في Nginx. هذا النوع من الهندسة المعمارية التي يتم فصلها بالكامل عن النهايات الأمامية والخلفية يتم تبنيها حاليًا من قبل شركات الإنترنت. لم تعد خوادم الواجهة الخلفية بحاجة إلى التعامل مع الموارد الثابتة ، ويمكنها أيضًا تقليل بعض الضغط على خادم الواجهة الخلفية.
1. لماذا الفصل بين الواجهة الأمامية والخلفية والاندماج
في الصناعات التقليدية ، يهيمن العديد من أفكار المشروع ، بدلاً من المنتجات. سيتم بيع المشروع للعديد من العملاء وسيتم نشره في غرفة الكمبيوتر المحلية للعميل. في بعض الصناعات التقليدية ، لا يمكن مقارنة تقنية نشر وتنفيذ الموظفين مع فرق التشغيل والصيانة في شركات الإنترنت ، وبسبب مختلف البيئات غير المؤكدة ، لا يمكن بناؤها تلقائيًا ، ونشر الحاويات ، وما إلى ذلك ، في هذه الحالة ، محاولة تقليل متطلبات برامج الخدمة أثناء النشر ومحاولة الإنتاج القليلة قدر الإمكان. استجابة لهذا الموقف ، يتم تنفيذ التنمية المستقلة في الواجهة الأمامية في التنمية. طريقة التطوير بأكملها هي نفس الطريقة الثانية المذكورة أعلاه. ومع ذلك ، عندما يتم تعبئة وفرع سبرينج في النهاية ، يتم إدخال ناتج البناء الأمامي معًا. في النهاية ، ما عليك سوى نشر مشروع Springboot ، لا حاجة لتثبيت خادم Nginx.
2. العمليات الرئيسية لتكامل سبرينغ بوت و Vue
في الواقع ، في هذه المقالة ، يتم نسخ الفصل الأمامي لتطوير الواجهة الأمامية ، بعد الانتهاء من التطوير الأمامي ، الملفات الموجودة في البنية الثابتة في البناء إلى ثابت مورد Springboot ، ويتم نسخ index.html مباشرة إلى ثابت مورد Springboot. هنا مثال مخطط:
مشروع VUE الواجهة الأمامية
مشروع Springboot:
ما سبق هو أسهل طريقة للاندماج ، ولكن إذا كانت تطوير مشروع على مستوى الهندسة ، فلا ينصح بدمج يدوي ، ولا ينصح ببناء الرمز الأمامي وتقديمه إلى مورد Springboot. يجب أن تكون الطريقة الجيدة هي الحفاظ على رمز التطوير المستقل في الواجهة الأمامية والخلفية ، ولا يؤثر رمز المشروع على بعضها البعض. بمساعدة أدوات البناء مثل Jenkins ، يتم تشغيل البناء الأمامي ، ويتم كتابة البرنامج النصي الأتمتة عند إنشاء Springboot ، ونسخ الموارد التي تم إنشاؤها بواسطة حزمة الويب الأمامية إلى Springboot ثم حزمها في جرة. أخيرًا ، أحصل على مشروع Springboot يحتوي تمامًا على الواجهة الأمامية والخلفية.
3. القضايا الأساسية للتكامل
بعد التكامل أعلاه ، ستنشأ مشكلتان كبيرتان نسبيًا:
1. لا يمكن الوصول إلى الموارد الثابتة بشكل طبيعي.
2. لا يمكن حل مسار مسار Vue Router بشكل طبيعي.
لحل المشكلة الأولى ، يجب علينا إعادة تحديد بادئة معالجة الموارد الثابتة لـ Springboot ، الرمز:
ConfigurationPublic Class SpringWebMvcConfig يمتد webmvcconfigureRadapter {Override public void addresourceHandlers (ResourceHandlerRegistry Registry) {registry.addresourceHandler ("/static/**"). addresourcations ("classpath:/static/") ؛ super.addresourceHandlers (السجل) ؛ }}تتمثل طريقة حل المشكلة الثانية في إعادة كتابة مسار مسار Vue وتركها إلى جهاز التوجيه للمعالجة ، بدلاً من Springboot للتعامل معه بنفسها. عند إعادة الكتابة ، يمكنك التفكير في إضافة مسارات المسار بشكل موحد ، ثم كتابة التصفية واعتراض اللواحق المحددة في Springboot للقيام بمعالجة المسار لطلب إعادة توجيهه وتسليمه إلى Vue. يحب:
const router = new vuerouter ({mode: 'history' ، base: __dirname ، Routes: [{path: '/Ui/First.vhtml' ، component: first} ، {path: '/ui/Second.vhtml' ، المكون: المكون الثاني}]})})يتم ترك اعتراض الواجهة الخلفية لتلك مع VHTML إلى جهاز التوجيه للمعالجة. هذه الطريقة ممكنة تمامًا للتجميع بعد كتابة مرشحات لاعتراض الواجهة الخلفية ، ولكن ستكون هناك مشاكل في الوصول المباشر إلى المسار مع اللواحق التي طورتها الواجهة الأمامية.
هناك طريقة أخرى هي إضافة بادئة مثل /واجهة المستخدم إلى مسار التوجيه الأمامي. في هذا الوقت ، يطابق مرشح الكتابة الخلفية البادئة ، والتي لن تؤثر على مشكلة تحليل التوجيه في التطوير الأمامي بشكل منفصل. مرجع المرشح كما يلي:
/** * يمكن استخدامها لإعادة كتابة Vue Router * * Author Yu في 2017-11-22 19:47:23. */فئة عامة rewriteFilter تنفذ Filter {/***عنوان الوجهة الذي يحتاج إلى إعادة كتابة*/سلسلة نهائية ثابتة rewrite_to = "rewriteurl" ؛ / *** يتم فصل أحرف URL المعتادة وعنوان URL بواسطة semicolons الإنجليزية*/ السلسلة النهائية الثابتة العامة rewrite_patterns = "urlpatterns" ؛ مجموعة خاصة <string> urlpatterns = null ؛ // تكوين url wildcard سلسلة خاصة rewriteto = null ؛ Override public void init (filterConfig cfg) يلقي servleTexception {// تهيئة تكوين التقاطع rewriteto = cfg.getInitParameter (rewrite_to) ؛ سلسلة باستثناء urlString = cfg.getInitParameter (rewrite_patterns) ؛ if (stringUtil.isnotempty (باستثناء urlString)) {urlpatterns = collections.unmodiviableset (new hashset <> (arrays.aslist (argeturlstring.split ("؛" ، 0)))) ؛ } آخر {urlpatterns = collections.emptyset () ؛ }} Override public void dofilter (servletrequest req ، servletResponse resp ، filterchain chain) يلقي ioexception ، servleTexception {httpservletrequest request = (httpservletrequest) req ؛ String servleTpath = request.getServletPath () ؛ سياق السلسلة = request.getContextPath () ؛ // إعادة كتابة المسار المتطابق إذا (isMatches (urlpatterns ، servletpath)) {req.getRequestDispatcher (context+"/"+rewriteto). forward (req ، resp) ؛ } آخر {chain.dofilter (req ، resp) ؛ }} Override public void Dride () {} / ** * المطابقة إرجاع صحيح ، فإن عدم التطابق يعيد خطأ * param أنماط التعبير العادي أو wildcard * param url url url * / return * / private boolean isMatches (تعيين <string> أنماط ، url url) } لـ (String str: أنماط) {if (str.endswith ("/*")) {string name = str.substring (0 ، str.length () - 2) ؛ if (url.contains (name)) {return true ؛ }} آخر {pattern pattern = pattern.compile (str) ؛ if (pattern.matcher (url) .Matches ()) {return true ؛ }} إرجاع خطأ ؛ }}تسجيل التصفية:
springbootapplicationpublicpublicpublic springbootmainapplication {public static void main (string [] args) {springapplication.run (springbootmainapplication.class ، args) ؛ } bean public embeddedServletContainerCustomizer contercustomizer () {return (Container -> {errorpage error401page = new errorpage (httpstatus.unauthorized ، "/errors/401.html") "/errors/404.html") ؛ } bean publicregistrationBean testFilterRegistration () {filterRegistrationBean registration = new filterregistrationbean () ؛ التسجيل. التسجيل. التسجيل. التسجيل. التسجيل. تسجيل العودة ؛ }}في هذا الوقت ، يمكن لـ Springboot تسليم موارد التوجيه الأمامية إلى الطريق للمعالجة. في هذه المرحلة ، يتم الانتهاء من حل الواجهة الأمامية والخلفية بالكامل. يمكن أيضًا فصل هذه الطريقة بسهولة عن النهايات الأمامية والخلفية عند توفر الظروف في المرحلة اللاحقة.
لخص
ما سبق هو الفصل الأمامي ودمج خطة SPRING BOOT+VUE المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!