SSM VUE Axios Detaillierte Erklärung

Inhaltsverzeichnis

Wie wird das SQL-Protokoll angezeigt? ?
Beschreibung der Parameterübergabe in SpringMVC
erholsam

Grammatik:
Benutzerspezifikationen:
Empfangene Parameter:
MyBatis vereinfacht SQL-Annotationen

Front-End- und Back-End-Anrufe

1. Vue-Erste-Schritte-Fall
2. Vue-Lebenszyklus

Konzept
Typ (③+⑧)

3. Frontend- und Backend-Aufruf Axios

Ajax
Fall 1:
Fall 2: Spleißen mit der Methode ?attribute=attribute value
Fall 3: Datenübertragung durch Objekte

Zusammenfassen

Wie wird das SQL-Protokoll angezeigt? ?

Konfigurieren Sie Informationen in der YML-Core-Konfigurationsdatei

#Datensätze zum Drucken von SQL-Protokolldateien:
  Ebene: 
    com.jt.mapper:debug

Beschreibung der Parameterübergabe in SpringMVC

Einfache Parameterwertübergabe: Verwenden Sie MVC, um Parameter in die Methode zu schreiben und Werte direkt zu übergeben

Objekt, das Daten empfängt: Zu viele Parameter sind in Objekten gekapselt

Objektreferenzzuweisung: Doppelte Parameterübergabe dog.name

erholsam

Grammatik:

1. Verwenden Sie / zum Trennen von Parametern

2. Sobald die Parameterreihenfolge definiert ist, kann sie nicht mehr geändert werden

3. Verben können nicht im Anforderungspfad erscheinen, da sie die Absicht der Operation nicht offenlegen und den Zweck nicht verbergen können.

Benutzerspezifikationen:

Verwenden Sie unterschiedliche Anfragetypen, um Geschäftsanforderungen zu unterscheiden

Abfrage abrufen

Beitrag hinzufügen/Formular übermitteln

Änderung setzen

löschen

Empfangene Parameter:

1. Verwenden Sie / zum Trennen von Parametern

2. Parameter werden in {} eingeschlossen

3. Parameterformat @PathVariable("name") Stringname

4. Wenn zu viele Parameter vorhanden sind und die Parameternamen mit den Attributnamen im Objekt übereinstimmen, können Sie den Objektempfang verwenden

    @RequestMapping("Benutzer/{Name}/{Alter}/{ID}")
    öffentlicher Integer-Benutzer (@PathVariable("Name") String-Name,
                        @PathVariable("Alter") Integer Alter,
                        @PathVariable("id") Integer-ID){
        returniere userService.user(Name, Alter, ID);
    }
    /*Methode zum Empfangen von Objekten*/
// @RequestMapping("Benutzer/{name}/{alter}/{id}")
// öffentliche Ganzzahl userr(Benutzer user) {
// returniere userService.user(Benutzer);
// }

<update id="Benutzer">
        Aktualisiere demo_user setze Name=#{name},age=#{age} wobei id =#{id}
    </Aktualisieren>

MyBatis vereinfacht SQL-Annotationen

@Einfügen() @Auswählen() @Aktualisieren() @Löschen()

Vereinfachen Sie SQL, aber nur für einfache Operationen. Anmerkungen und Zuordnungsdateien können nicht gleichzeitig angezeigt werden.

Front-End- und Back-End-Anrufe

1. Vue-Erste-Schritte-Fall

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>VUE-Erste-Schritte-Fall</title>
		<script src="../js/vue.js"></script>
	</Kopf>
	<Text>
		
		<div id="app">
			<h1>Daten abrufen: {{msg}}</h1>
		</div>
		<Skript>
			neuer Vue({
				el:"#app",
				Daten:{
					msg:"Hallo VUE JS"
				}
			})
		</Skript>
		
	</body>
</html>

Variablen in js
var hat keinen Gültigkeitsbereich, let hat einen Gültigkeitsbereich, const definiert Konstanten

2. Vue-Lebenszyklus

Konzept

Es handelt sich um eine erweiterte Funktion, die VUE für Benutzer bereitstellt. Die Lebenszyklusfunktion wird automatisch ausgeführt.

Typ (③+⑧)

1. Initialisierungsphase ④

beforeCreate (Vue-Objekt erstellen, das Attribut ist vorübergehend null) Erstellt (den Attributwert laden, nur erstellen, aber nicht ausführen, Instanziierung ist erfolgreich)

beforeMount (el: „#app“ analysieren und den angegebenen Bereich/Daten-Rendering-Bereich zur Verwaltung an das Vue-Objekt übergeben) Mouted (nachdem das Objekt erstellt wurde und das Rendering im angegebenen Bereich beginnt, den Ausdruck analysieren, nach erfolgreicher Ausführung kann der Benutzer die analysierte Seite sehen)

2. Änderung von VUE-Objekten während der Objektnutzungsphase ②

beforeUpdate Aktualisiert

3. Zerstörungsphase ②

beforeDestroy Destroyed→Das VUE-Objekt wird zerstört und existiert nicht mehr

3. Frontend- und Backend-Aufruf Axios

Ajax

Features: teilweise Aktualisierung, asynchroner Zugriff

Synchron vs. Asynchron

Ajax-Designprinzipien: Ajax Engine

Rückruffunktion? ? So benachrichtigen Sie Benutzer

Fall 1:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Axios-Übung</title>
		<script src="../js/axios.js"></script>
	</Kopf>
	<Text>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax - Erste Schritte</h1>
		<Skript>
			let url="http://localhost:8090/getUser"
			axios.get(URL)
			       .dann(Funktion(Versprechen){
				    Konsole.log(Versprechen.Daten)
			})
		</Skript>
	</body>
</html>

Hinweis: Sie müssen die Annotation @CrossOrigin auf der Controller-Ebene hinzufügen! ! ! ! ! ! !

Fall 2: Spleißen mit der Methode ?attribute=attribute value

Anforderung: Abfrage der Benutzer-URL gemäß ID: URL-Adresse: http://localhost:8090/axios/findUserById

Front-End-Code:

	lass Benutzer = {
					Alter: 21,
					Geschlecht: "weiblich"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						Parameter: Benutzer
					})
					.dann(Funktion(Versprechen) {
						Konsole.log(Versprechen.Daten)
					})

Fall 3: Datenübertragung durch Objekte

Anforderung: Abfrage von Benutzerinformationen basierend auf Alter/Geschlecht URL: http://localhost:8090/axios/findUserByAS

Front-End-Code:

	lass Benutzer = {
					Alter: 21,
					Geschlecht: "weiblich"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						Parameter: Benutzer
					})
					.dann(Funktion(Versprechen) {
						Konsole.log(Versprechen.Daten)
					})

Zusammenfassen

3 Möglichkeiten zum Übergeben von Parametern in der Front-End-Get-Anfrage

Methode 1: Spleißen mit der Methode ?attribute=attribute value

Methode 2: Datenübertragung durch Objekte

Methode 3: Verwenden Sie die RestFul-Struktur, um die Parameterübergabe zu implementieren.

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:

Implementierung der Integration des SSM+Vue-Frontend- und Backend-Trennungsframeworks (mit Quellcode)
vue + SSM realisiert die Bestätigungscodefunktion
Der Vue Axios Interceptor verwendet häufig die wiederholte Stornierung von Anforderungen
Was sind die Unterschiede zwischen Vue Navigation Guard und Axios Interceptor
Vue3 konfiguriert die domänenübergreifende Axios-Implementierungsprozessanalyse
vue-axios fordert mehrere Schnittstellen gleichzeitig an und wartet, bis alle Schnittstellen vollständig geladen sind, bevor der Vorgang ausgeführt wird

<<: mysqldump-Parameter, die Sie möglicherweise nicht kennen

>>: Über das Problem beim Ausführen von Git-Programmen in von Docker bereitgestellten Jenkins