Was sind die Grundkenntnisse von Vue+ElementUI+Springboot?

1. Das Old World Web

Backend

(1) Zu Beginn war das Web-Backend grundsätzlich in PHP geschrieben, in einer Skriptsprache, eingebettet bequem, HTML einzugeben.

(2) Dann begann Java seine Macht auszuüben und JSP+Servlet wurde zum Mainstream.

(3) Ich fand, dass Java stinkend und lang war, also begann ich, einige häufig verwendete Ideen in Klassen zu kapseln, sodass Spring erwachsen wurde und zwei Kernkonzepte hatte: AOP-Aspekte und IoC-Kontrollinversion. Diese beiden Ideen sind einfach unbesiegbar.

AOP: Ausnahmen können beispielsweise an jeder Stelle in unserem Programm ausgelöst werden. In der Vergangenheit war es sehr umständlich, an jeder Stelle zu versuchen, sie zu fangen, und die Verarbeitung nach dem Fang war ähnlich. Wenn es einen Aspekt gibt, der den Ausgang des Webs abfängt, wird der gesamte Datenverkehr über diesen Aspekt geleitet. Sobald eine Ausnahme abgefangen und ausgelöst wird, wird an vielen Stellen nur eine Ausnahme zurückgegeben geworfen, und es besteht keine Notwendigkeit zu fangen. Ganz zu schweigen vom Code, auch die Ausnahmebehandlungsmethode ist einheitlich. Dies ist nur die einfachste Anwendung von AOP.

IoC: Spring bietet ein Konzept eines Containers, der ein Objekt für alle Klassen erstellt, die instanziiert werden müssen, genannt Bean (ähnlich wie auf dieser Seite in Wandou, wenn Klasse A Klasse B erfordert). Es ist an der Zeit, das verwaltete Objekt der Klasse B in die Klasse A einzufügen, als würde man diese Website zusammendrücken. Dadurch wird die Kopplung zwischen den Klassen entkoppelt. Es gibt keine Vorababhängigkeit untereinander. Wenn ich Klasse A erhalte, muss ich mir keine Gedanken über den Konstruktor von Klasse A machen Klasse zuerst. B. Eine Klasse C... Natürlich gibt es tatsächlich viele komplexe Referenzbeziehungen zwischen Klassen. Die Reihenfolge der Instanziierungs- und Abhängigkeitsschleifenausnahmen kann von Spring verwaltet werden.

(4) Da die Leute immer fauler werden, möchte Springs XML nicht mehr geschrieben werden, also kam so etwas wie Springboot heraus. Der Slogan lautet „Konvention ist größer als Konfiguration“, und einige grundlegende Parameter sind es Wenn Sie es nicht ändern müssen, können Sie es verwenden, indem Sie es direkt referenzieren. Wenn Sie es ändern möchten, müssen Sie es nur in der Datei application.yml konfigurieren Genauer gesagt, schreiben Sie einfach eine Konfigurations-Bean. Das ist großartig. Alle Konfigurations-Beans und application.yml werden automatisch eingefügt, und es ist nicht erforderlich, XML zu schreiben, um festzustellen, welcher Bean der Klassenname ist, wie die ID lautet und wie er initialisiert wird , usw. Mit der integrierten Entwicklungsumgebung IDEA von Jetbrains wird das Schreiben von Java extrem einfach, der Codierungsaufwand wird reduziert und es ist leicht zu warten.

(5) Die Zukunft: Es wird definitiv die Welt von Go sein.

frontend

(1) Am Anfang: HTML+CSS+JS Three King Kong

(2) Ich habe festgestellt, dass JS nicht zufriedenstellend ist Mein Wunsch, also dachte ich, es sei bequemer, Skripte zu entwickeln, also kam Jquery heraus.

Da HTML zu viele wiederholte Anweisungen enthält, entstanden kombinierte Front-End- und Back-End-Sprachen wie JSP. Thymeleaf ist weiterhin für Springboot verfügbar und bietet Back-End-Entwicklern Tools, die speziell für Front-End-Neulinge eingeführt wurden.

Front-End-Experten stellten fest, dass der Front-End-Schwellenwert zu niedrig war, und verwendeten daher „Komponenten“-Denken, um doppelten Code zu verwalten und den Schwellenwert zu erhöhen. Ich habe zum Beispiel endlich eine sehr schöne Tabelle mit HTML+CSS+JS geschrieben, aber jedes Mal, wenn ich sie verwende, muss ich den gesamten Code kopieren. Wenn ich eine kleine Änderung vornehme, muss ich alle kopierten Stellen ändern. Wenn diese Tabelle eine Komponente ist, muss ich nur darauf verweisen und dann die Daten an sie übergeben, und sie kann automatisch in HTML gerendert werden und auf das relevante CSS und JS verweisen. Wie großartig. Darüber hinaus ist es mühsam, jedes Mal zu überlegen, welche Browser kompatibel sind. Wenn es ein Skript gibt, geben Sie ein, welche Versionen und Browser unterstützt werden sollen, schreiben Sie es in einer fortgeschritteneren Sprache und konvertieren Sie es dann automatisch in eine Kompatibilität mit verschiedenen Browser während der Kompilierung. Das native HTML+CSS+JS des Browsers, ist das nicht großartig? Dies führt zu modernen Frontend-Sprachen. Die Grundlage der modernen Frontend-Sprache ist React, und alles ist mit JS verwoben. React ist immer noch relativ nativ, daher wurden verschiedene Frameworks darauf abgeleitet. Die bekanntesten sind Vue und Ant Design, die einige gängige Ideen und grundlegende Operationen wie die JS-Generierung von HTML kapseln. Ich möchte wirklich sagen, dass der Einstieg zu schwierig ist...

2. Öffnen Sie die Tür zur neuen Welt von Vue

1. Grundkonzepte#🎜🎜 #

# 🎜🎜#

Node.js ist eine JavaScript-Laufzeitumgebung, die speziell für die Ausführung von JavaScript-Code entwickelt wurde. Befehle ähnlich wie Java -jar xxx.jar, z. B. Ausführen von node xxx.js
npm: node.js-Paketverwaltung. Ähnlich wie Javas Maven und Gradle verfügt auch JavaScript über npm, das zur Versionskontrolle und Referenzierung bereits geschriebenen JavaScript-Codes verwendet wird.
ES6: ECMAScript 6 ist eine neue Version von Javascript, die einfacher zu schreiben ist als natives Javascript.
Babel: Wird zum Konvertieren von High-Level-Versions-JS wie ES6 und ES7 in Low-Level-Versions-JS-Sprachen verwendet, um die Skriptkompatibilität mit verschiedenen Betriebsplattformen zu erleichtern
• #🎜🎜 #
  vue-cli: Es ist das Befehlszeilentool von vue

• vue-router: Es gibt ein wichtiges Konzept in Das Frontend heißt „Routing“. Tatsächlich steuert es, wie die Seiten-URL springt. Dies ist die Routing-Komponente von vue.

• webpack: Packt und komprimiert alle Front-End-Projektcodes zusammen und kann Hochsprachen kompilieren (z. B. CSS-Hochsprachen, SCSS, LESS). ), Code-Redundanz reduzieren, Dateien bei Bedarf laden, zwischen mehreren Umgebungskonfigurationen unterscheiden, Bilder, Schriftarten und andere Dateien komprimieren und Hot-Load durchführen (den Code nach dem Speichern sofort im Browser anzeigen, ohne den Dienst neu zu starten)

2, npm

Offizielles Lager https://mvnrepository.cominländisches LagerKonfigurationsdatei# 🎜🎜#Inhalt der Konfigurationsdatei#🎜 🎜#"dependencies": {"vue": "^1.0.0"}Paketgeneriertes Verzeichnisdisttarget3 und Vue

Vergleichselemente	npm	maven
Repository-Name	Registrierung	Repository# 🎜🎜#
	http://registry.npmjs.org
	https://registry.npm.taobao.org#🎜 🎜# http://maven.aliyun.com/nexus/content/groups/public
package.json	pom.xml
	…… #🎜 🎜#
		Danke an npm Es ist sehr beliebt. In der höheren Version von node.js wurden npm

integriert, um Ihnen eine ungefähre Vorstellung davon zu geben, was Vue ist.

Syntax: Vue ähnelt syntaktisch der Tag-Version der dynamischen Webseitensprache JSP oder ist themeleaf sehr ähnlich.

• Komponente: Alles in Vue ist eine Komponente. Sie können HTML+CSS+JS zusammen kapseln, um eine Komponente anzupassen.

• Routing: Das Wesentliche ist, welche URL zurückgegeben werden soll, welche Komponente zurückgegeben werden soll.

• Einige gekapselte Funktionen: Beispielsweise kann mount den Inhalt verarbeiten, wenn die Webseite geladen wird, und Daten können einige Variablen definieren und lokale Komponenten automatisch rendern, wenn sie sich ändern, sowie Methoden Es können einige JS-Funktionen usw. definiert werden.

CSS kann in Sprachen wie SCSS geschrieben werden. Sie können das Schlüsselwort „scope“ hinzufügen, um den Umfang von CSS einzuschränken. und Sie müssen es nur importieren, um darauf zu verweisen. Die definierte Komponente kann direkt in Form von HTML-Tags geschrieben werden, und Parameter werden über Daten übergeben, zum Beispiel:

• <mytitle></mytitle>

  The Der Kern besteht darin, Hochsprachen zu verwenden, um HTML+CSS+ langsamer zu schreiben JS...

4, element-ui

element-ui ist ein Frontend Die von Ele.me erstellte Benutzeroberfläche hat bereits einige exquisite Komponenten eingerichtet. Diese Komponenten müssen einfach zu Webseiten zusammengesetzt werden, anstatt die Komponenten einzeln von Grund auf neu zu schreiben.

Diese Komponenten, wie Optionsfelder, Tabellen, Fortschrittsbalken usw., sind sehr schön gestaltet und können einfach durch Übergabe von Daten gerendert werden. Wenn Sie der Meinung sind, dass etwas Unansehnliches vorliegt, können Sie das CSS überschreiben und selbst ersetzen. Dies ist sehr praktisch für Mid-End-Seiten und Back-End-Seiten, die hohe funktionale Anforderungen haben und sich nicht um das Interface-Design kümmern.

5. Warum nicht Laui verwenden?

Seit ich mit dem Frontend in Berührung gekommen bin, verwende ich immer Laui. Später stellte ich fest, dass es besser zur Optimierung des Seitenanzeigeeffekts basierend auf nativem HTML + CSS + JS / Jquery geeignet ist, aber nicht sehr kompatibel mit den Ideen moderner Front-End-Sprachen ist. Es enthält einige voreingestellte jQuery-Initialisierungs- und Ereignisauslösemethoden, die nicht mit der Schreibmethode von Vue kompatibel sind. Darüber hinaus sind einige Komponenten wie Tooltip und Popover nicht enthalten.

Das obige ist der detaillierte Inhalt vonWas sind die Grundkenntnisse von Vue+ElementUI+Springboot?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!