Ada dua solusi utama untuk menggabungkan springboot dan vue di jaringan:
1. [Tidak disarankan] Gunakan tag skrip secara langsung untuk memperkenalkan Vue dan beberapa komponen yang umum digunakan dalam HTML. Metode ini sama seperti pada pengembangan tradisional sebelumnya, tetapi Anda dapat menggunakan data dua arah Vue yang mengikat dengan sangat bahagia. Metode ini hanya cocok untuk pengembangan tumpukan penuh biasa.
2. [Direkomendasikan] Gunakan perancah resmi VUE untuk membuat proyek teknik front-end terpisah, untuk mencapai pengembangan dan penyebaran independen lengkap dari back-end, dan menyebarkan layanan REST yang murni secara terpisah dari back-end, sementara front-end secara langsung menggunakan Nginx untuk ditempatkan. Ini disebut model pengembangan arsitektur pemisahan front-end dan back-end lengkap, tetapi ada banyak masalah dengan izin API yang perlu diselesaikan dalam pemisahan, termasuk penyebaran perutean router vue yang membutuhkan aturan penulisan ulang untuk dikonfigurasi di Nginx. Jenis arsitektur yang benar -benar terpisah dari ujung depan dan belakang juga saat ini diadopsi oleh perusahaan internet. Server backend tidak perlu lagi berurusan dengan sumber daya statis, dan juga dapat mengurangi beberapa tekanan pada server backend.
1. Mengapa pemisahan dan gabungan front-end dan back-end
Dalam industri tradisional, banyak yang didominasi oleh ide -ide proyek, bukan produk. Sebuah proyek akan dijual kepada banyak pelanggan dan digunakan ke ruang komputer lokal pelanggan. Dalam beberapa industri tradisional, teknologi penyebaran dan pelaksanaan personel tidak dapat dibandingkan dengan tim operasi dan pemeliharaan perusahaan internet, dan karena berbagai lingkungan yang tidak pasti, itu tidak dapat dibangun secara otomatis, penyebaran yang dimasukkan, dll. Oleh karena itu, dalam hal ini, cobalah untuk meminimalkan persyaratan perangkat lunak layanan selama penyebaran dan mencoba menghasilkan beberapa paket sebanyak mungkin. Menanggapi situasi ini, pengembangan independen front-end dilaksanakan dalam pengembangan. Seluruh metode pengembangan sama dengan metode kedua yang disebutkan di atas. Namun, ketika springboot back-end dikemas dan dilepaskan, output konstruksi front-end dimasukkan bersama. Pada akhirnya, cukup gunakan proyek Springboot, tidak perlu menginstal server Nginx.
2. Operasi kunci integrasi springboot dan vue
Faktanya, dalam artikel ini, pemisahan front-end pengembangan front-end, setelah pengembangan front-end selesai, file-file dalam statis yang dibangun dalam build disalin ke statis sumber daya springboot, dan index.html secara langsung disalin ke statis sumber daya springboot. Berikut adalah contoh diagram:
Proyek front-end vue
Proyek Springboot:
Di atas adalah cara termudah untuk bergabung, tetapi jika itu adalah pengembangan proyek tingkat rekayasa, penggabungan manual tidak disarankan, dan kode front-end tidak disarankan untuk dibangun dan diserahkan ke sumber daya Springboot. Cara yang baik adalah untuk menjaga kode pengembangan front-end dan back-end sepenuhnya independen, dan kode proyek tidak saling mempengaruhi. Dengan bantuan alat konstruksi seperti Jenkins, konstruksi front-end dipicu dan skrip otomatisasi ditulis saat membangun springboot, salin sumber daya yang dibangun oleh webpack front-end ke springboot dan kemudian mengemasnya dalam toples. Akhirnya, saya mendapatkan proyek Springboot yang sepenuhnya berisi front-end dan back-end.
3. Masalah Integrasi Inti
Setelah integrasi di atas, dua masalah yang relatif besar akan muncul:
1. Sumber daya statis tidak dapat diakses secara normal.
2. Jalur rute router Vue tidak dapat diselesaikan secara normal.
Untuk menyelesaikan masalah pertama, kita harus menentukan ulang awalan pemrosesan sumber daya statis Springboot, kode:
@ConfigurationPublic kelas springwebmvccconfig memperluas WebMvCconfigurerAdapter {@Override public void addResourceHandlers (ResourceHandlerRegistry Registry) {Registry.AdResourceHandler ("/Static/**). AddResourelocations (" ClassPath:/Static/"*). super.addresourceHandlers (registri); }}Cara untuk menyelesaikan masalah kedua adalah dengan menulis ulang jalur rute Vue dan meninggalkannya ke router untuk diproses, daripada springboot untuk menanganinya sendiri. Saat menulis ulang, Anda dapat mempertimbangkan untuk menambahkan jalur rute secara seragam, dan kemudian menulis pemfilteran dan mencegat sufiks spesifik di Springboot untuk melakukan pemrosesan rute penerusan permintaan dan menyerahkannya ke Vue. menyukai:
const router = vuerouter baru ({mode: 'history', base: __dirname, rute: [{path: '/Ui/first.vhtml', komponen: pertama}, {path: '/Ui/second.vhtml', komponen: komponen kedua}]}))Intersepsi backend untuk yang dengan VHTML dibiarkan ke router untuk diproses. Metode ini benar -benar layak untuk dikemas setelah menulis filter untuk mencegat backend, tetapi akan ada masalah dengan akses langsung ke jalur dengan sufiks yang dikembangkan di ujung depan.
Cara lain adalah menambahkan awalan seperti /UI ke jalur perutean front-end. Pada saat ini, filter penulisan back-end cocok dengan awalan, yang tidak akan mempengaruhi masalah analisis perutean dari pengembangan front-end secara terpisah. Referensi filter adalah sebagai berikut:
/** * dapat digunakan untuk menulis ulang vue router * * @author yu pada 2017-11-22 19:47:23. */kelas publik REWRITEFILTER mengimplementasikan filter {/***Alamat tujuan yang perlu ditulis ulang*/string final statis public RE RERITE_TO = "REWRITEURL"; / *** Wildcard URL dan URL yang dicegat dipisahkan oleh titik koma bahasa Inggris*/ string final statis public RE ulange_patterns = "urlpatterns"; Private Set <String> urlpatterns = null; // Konfigurasikan URL Wildcard Private String REWRITETO = NULL; @Override public void init (filterconfig cfg) melempar servletException {// menginisialisasi konfigurasi intersepsi ulang criteto = cfg.getInitparameter (re write_to); String excuttring = cfg.getInitparameter (REWRITE_PATERS); if (stringutil.isnotEmpty (excepUrlString)) {urlpatterns = collections.unmodifibleBleset (hashset baru <> (arrays.aslist (kecualiarlString.split (";", 0)))); } else {urlpatterns = collections.EmptySet (); }} @Override public void dofilter (servletRequest req, servletResponse resp, rantai filterchain) melempar ioException, servletException {httpservletRequest request = (httpservletrequest) req; String servletpath = request.getSerVletpath (); String context = request.getContextPath (); // Jalur yang cocok untuk menulis ulang if (isMatch (urlpatterns, servletpath)) {req.getRequestDispatcher (konteks+"/"+recriteto) .forward (req, resp); } else {chain.dofilter (req, resp); }} @Override public void dashare () {} / ** * cocokkan kembali benar, ketidakcocokan mengembalikan false * @param pola ekspresi reguler atau wildcard * @param url url yang diminta * @return * / private boolean isMatches (set <string> pola, string url) {if (null == pola) {fales) fales; } untuk (string str: pola) {if (str.endswith ("/*")) {string name = str.substring (0, str.length () - 2); if (url.contains (name)) {return true; }} else {pola pola = pola.compile (str); if (pola.matcher (url) .matches ()) {return true; }} return false; }}Pendaftaran Filter:
@SpringbootApplicationPublic kelas springbootmainApplication {public static void main (string [] args) {springApplication.run (springbootmainApplication.class, args); } @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { return (container -> { ErrorPage error401Page = new ErrorPage(HttpStatus.UNAUTHORIZED, "/errors/401.html"); ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/rors/404.html"); } @Bean Public FilterRegistrationBean testFilterRegistration () {filterRegistrationBean Registration = new FilterRegistrationBean (); Registrasi.SetFilter (RE -REWITEFILTER ()); // Daftarkan Pendaftaran Filter Pendaftaran RE REGRIST.ADDURLPATTER ("/*"); Registration.addinitparameter (RE -writefilter.rewrite_to, "/index.html"); Registration.addinitparameter (REWITEFILTER.REWRITE_PATERS, "/UI/*"); Registrasi.SetName ("RE -writefilter"); Registrasi.Setorder (1); pendaftaran kembali; }}Pada saat ini, Springboot dapat menyerahkan sumber routing front-end ke rute untuk diproses. Pada titik ini, seluruh pemisahan front-end dan back-end dan solusi gabungan selesai. Metode ini juga dapat dengan mudah dipisahkan dari ujung depan dan belakang ketika kondisi tersedia di tahap selanjutnya.
Meringkaskan
Di atas adalah rencana pemisahan dan gabungan front-end dari Spring Boot+Vue yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!