Es gibt zwei Hauptlösungen für die Kombination von Springboot und Vue im Netzwerk:
1. [Nicht empfohlen] Verwenden Sie Skript -Tags direkt, um VUE und einige häufig verwendete Komponenten in HTML einzuführen. Diese Methode ist dieselbe wie in der vorherigen traditionellen Entwicklung, aber Sie können Vue's Zwei-Wege-Daten sehr glücklich verwenden. Diese Methode eignet sich nur für die gewöhnliche Vollstapelentwicklung.
2. [Empfohlen] Verwenden Sie das offizielle Gerüst von Vue, um ein separates Front-End-Engineering-Projekt zu erstellen, um eine vollständige unabhängige Entwicklung und Bereitstellung vom Back-End zu erreichen und einen reinen Ruhestand getrennt vom Back-End bereitzustellen, während das Front-End NGINX direkt für die Bereitstellung verwendet. Dies wird als Komplettmodell für Front-End- und Back-End-Trennungsarchitektur-Architektur-Architektur bezeichnet. Es gibt jedoch viele Probleme mit den API-Berechtigungen, die in der Trennung gelöst werden müssen, einschließlich der Bereitstellung von Vue-Router-Routing, bei der die Umschreibungsregeln in nginx konfiguriert werden müssen. Diese Art von Architektur, die vollständig von vorne und zurück getrennt ist, wird derzeit auch von Internetunternehmen übernommen. Backend -Server müssen sich nicht mehr mit statischen Ressourcen befassen und können auch einen gewissen Druck auf den Backend -Server verringern.
1. Warum Front-End- und Back-End-Trennung und verschmelzen
In traditionellen Branchen werden viele eher von Projektideen als von Produkten dominiert. Ein Projekt wird an viele Kunden verkauft und im lokalen Computerraum des Kunden bereitgestellt. In einigen traditionellen Branchen kann die Technologie für das Einsatz und die Implementierung von Mitarbeitern nicht mit den Betriebs- und Wartungsteams von Internetunternehmen verglichen werden. Aufgrund verschiedener unsicherer Umgebungen kann sie nicht automatisch konstruiert werden, Container -Bereitstellung usw. Daher versuchen Sie in diesem Fall, die Anforderungen an die Servicesoftware während der Bereitstellung zu minimieren, und versuchen Sie, so wenig Pakete wie möglich zu produzieren. Als Reaktion auf diese Situation wird die unabhängige Front-End-Entwicklung in der Entwicklung umgesetzt. Die gesamte Entwicklungsmethode entspricht der oben genannten zweiten Methode. Wenn der Back-End-Springboot jedoch verpackt und freigegeben wird, wird die Front-End-Konstruktionsausgabe zusammen eingegeben. Stellen Sie am Ende einfach das Springboot -Projekt ein und müssen den Nginx -Server nicht installieren.
2. Schlüsselvorgänge der Integration von Springboot und Vue
Tatsächlich werden in diesem Artikel die Front-End-Trennung der Front-End-Entwicklung nach Abschluss der Front-End-Entwicklung die Dateien im statischen im Build eingebauten statischen in die Statik der Ressource des Springboots kopiert, und der Index.html wird direkt zur Statik der Ressource des Springboots kopiert. Hier ist ein Beispieldiagramm:
Vue Front-End-Projekt
Springboot -Projekt:
Das oben genannte ist der einfachste Weg, um sich zu verschmelzen. Wenn es sich jedoch um eine Projektentwicklung auf Ingenieurebene handelt, wird man keine manuelle Zusammenführung nicht empfohlen und der Front-End-Code wird nicht empfohlen, gebaut und an die Springboot-Ressource eingereicht zu werden. Der gute Weg sollte darin bestehen, den Front-End- und Back-End-völlig unabhängigen Entwicklungscode zu behalten, und der Projektcode wirkt sich nicht gegenseitig aus. Mit Hilfe von Bauwerkzeugen wie Jenkins wird die Front-End-Konstruktion ausgelöst und das Automatisierungsskript beim Erstellen von Springboot geschrieben, die vom Front-End-Webpack erstellten Ressourcen in Springboot kopieren und dann in Glas verpacken. Schließlich bekomme ich ein Springboot-Projekt, das das Front-End und das Back-End vollständig enthält.
3.. Kernprobleme der Integration
Nach der obigen Integration treten zwei relativ große Probleme auf:
1. Die statischen Ressourcen können nicht normal zugegriffen werden.
2. Der Weg der Vue -Router -Route kann nicht normal aufgelöst werden.
Um das erste Problem zu lösen, müssen wir das statische Ressourcenverarbeitungspräfition von Springboot, Code: CODE:
@ConfigurationPublic Class Springwebmvcconfig erweitert WebMvcconFigurerAdapter {@Override public void addResourceHandlers (RessourcenHandlerRegistry -Registrierung) {Registry.addresourceHandler ("/static/**"). Super.AddresourceHandlers (Registrierung); }}Der Weg zur Lösung des zweiten Problems besteht darin, den Pfad der VUE -Route umzuschreiben und den Router zur Verarbeitung zu überlassen, anstatt den Springboot, um sie selbst zu verarbeiten. Beim Umschreiben können Sie in Betracht ziehen, die Routenpfade einheitlich hinzuzufügen, und dann die Filterung und Abnahme bestimmter Suffixe in Springboot schreiben, um die Routenverarbeitung der Anfrage zu verarbeiten und zu übergeben. wie:
const router = neuer vuerouter ({modus: 'history', base: __dirname, Routes: [{path: '/ui/first.vhtml', Komponente: First}, {Pfad: '/ui/second.vhtml', Komponente: zweite Komponente}]}))Das Backend -Abfangen für diejenigen mit VHTML bleibt dem Router zur Verarbeitung überlassen. Diese Methode ist nach dem Schreiben von Filtern völlig möglich, um das Backend abzufangen, aber es wird Probleme mit dem direkten Zugriff auf den Pfad mit Suffixen geben, die vom vorderen Ende entwickelt wurden.
Eine andere Möglichkeit besteht darin, dem Front-End-Routing-Pfad ein Präfix wie /UI hinzuzufügen. Zu diesem Zeitpunkt entspricht der Back-End-Schreibfilter mit dem Präfix, das das Problem der Routing-Analyse der Front-End-Entwicklung nicht getrennt beeinflusst. Die Filterreferenz lautet wie folgt:
/** * werden verwendet, um den Vue-Router umzuschreiben * * @author yu am 2017-11-22 19:47:23. */Public Class RewriteFilter implementiert Filter {/***Zieladresse, die neu schreiben muss / *** Abfang -URL- und URL -Wildcards werden durch englische Semikolons getrennt*/ public static Final String rewrite_patterns = "urlpatterns"; private set <string> urlpatterns = null; // URL Wildcard private String rewriteto = null; @Override public void init (filterconfig CFG) löst ServletException aus {// Initialisieren Sie die Intercept -Konfiguration um. String fasceUrlstring = cfg.getInitParameter (rewrite_patterns); if (stringutil.isnotEmpty (fassurlstring)) {urlpatterns = collections.unmodifiAbleset (neuer Hashset <> (arrays.aslist (außerUrlstring.Split (";", 0))); } else {urlpatterns = collectionss.EmptySet (); }} @Override public void dofilter (servletRequest req, servletResponse resp, Filterchain -Kette) löst IOException, ServletException {httpServletRequest Request = (httpServletRequest) REQ; String servletPath = request.getServletPath (); String context = request.getContextPath (); // Matched Pfad umschreiben if (ismatches (urlpatterns, servletPath)) {req.getRequestDispatcher (Kontext+"/"+Rewriteto) .forward (req, resp); } else {chain.dofilter (req, resp); }} @Override public void Destroy () {} / ** * Übereinstimmungsrückgabe true, Mismpatch gibt false * @param Muster regulärer Ausdruck oder Wildcard * @param URL angeforderte URL * @return * / private boolean isMatches (set <string> Muster, String url) {if (null == musters) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{return) zurück) zurück) zurück. } für (string str: musters) {if (str.endswith ("/*") {string name = str.substring (0, str.length () - 2); if (url.contains (name)) {return true; }} else {muster muster = muster.comPile (str); if (muster.Matcher (url) .Matches ()) {return true; }} return false; }}Filterregistrierung:
@SpringbootApplicationPublic Class SpringbootMainApplication {public static void main (String [] args) {SpringApplication.run (SpringbootMainApplication.Class, Args); } @Bean public EmbeddedServletContainerCustomizer contenterCustomizer () {return (Container -> {Fehlerpage error401Page = new errorPage (httpstatus.unAuthorized, "/Erors/401.html"); Fehlerpage Fehler404Page = NEW NEWERPAGE (HTTTPSTATUS.NOT_FAGE. "/Erors/404.html"); } @Bean public FilterregistrationBean TestFilterRegistration () {FilterregistrationBean Registrierung = new FilterregistrationBean (); Registrierung.SetFilter (neuer RewriteFilter ()); // Registrieren Sie die Registrierung von Filterregistrierung. Registrierung.addinitParameter (rewriteFilter.rewrite_to, "/index.html"); Registrierung.addinitParameter (rewriteFilter.rewrite_Patterns, "/ui/*"); Registrierung.SetName ("RewriteFilter"); Registrierung.Setorder (1); Rückgaberegistrierung; }}Zu diesem Zeitpunkt kann Springboot die Front-End-Routing-Ressourcen zur Verarbeitung auf die Route übergeben. Zu diesem Zeitpunkt wird die gesamte Lösung für die Trennung von Front und Back-End- und Zusammenführungen abgeschlossen. Diese Methode kann auch leicht von den vorderen und hinteren Enden getrennt werden, wenn die Bedingungen in der späteren Phase verfügbar sind.
Zusammenfassen
Das obige ist der Front-End-Trennungs- und Merge-Plan von Spring Boot+Vue, der Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!