So verstehen Sie die Dateninteraktion und -anzeige im Vue-Frontend und -Backend

1. Technischer Überblick

Die vom Backend berechneten Daten werden an der entsprechenden Position der Front-End-Seite angezeigt. Die entsprechenden Daten und die Schnittstelle werden entsprechend der Klickoperation des Benutzers geändert und der Wert dann an das Backend übergeben. Diese Technologie ist für die Webentwicklung von entscheidender Bedeutung und stellt das Bindeglied zwischen den Front-End- und Back-End-Interaktionen dar. Die Schwierigkeit besteht darin, Backend-Daten zu erhalten und eine Datenverknüpfung zu verhindern.

2. Technische Details

1. Holen Sie sich Backend-Daten aus der Schnittstelle

(1) Überprüfen Sie sorgfältig die Art der vom Backend übertragenen Daten. Wichtig ist vor allem die Unterscheidung zwischen Arrays und Einzeldaten. Überprüfen Sie die Anforderungsmethode des Backends und unterscheiden Sie zwischen „Post“ und „Get“.

(2) Geben Sie zunächst ein xxxData:[]-Array oder eine Variable xxxData:<Typ> in Daten zurück, um die vom Backend gesendeten Daten zu empfangen.

(3) Definieren Sie in der Methode eine Anforderungsfunktion. Beispielsweise definieren wir den Funktionsnamen als update. Das Wichtigste in der Anforderungsfunktion ist die Anforderungsanweisung zum Abrufen von Backend-Daten über die API.

{params:this.xxx} wird mit den mitgelieferten Parametern aufgefüllt.

Beim Abrufen wird params als Schlüsselwort verwendet, um die Übertragung aller Parameter zu steuern. Wenn der Name des Parameters beispielsweise id ist und der Wert der in data deklarierte Wert myId ist, kann die Anweisung zur Abrufanforderung wie folgt geschrieben werden:

aktualisieren(){
      dies.$http.get(baseURL+`api/condition`,{params:{id:this.myId}}).dann(function(res){
        diese.memberData = res.body;
     });
},

Beim Posten müssen Sie das Schlüsselwort „params“ nicht hinzufügen. Direkt geschrieben als:

aktualisieren(){
      dies.$http.get(baseURL+`api/condition`,{id:this.myId}).dann(function(res){
        diese.memberData = res.body;
     });
},

Der zurückgegebene Parameter befindet sich danach in der anonymen Funktion.

Dabei ist baseURL der Pfad des Projekts. Wenn das Projekt auf einem Server bereitgestellt wird, lautet das allgemeine Format www.XXX.com/Projektname. Die folgende API ist die vom Backend gekapselte API-Schnittstelle.

Vom Frontend definierte Variablen erscheinen häufig in der API/Bedingung. Wenn sie direkt bei der Werteübergabe geschrieben werden, werden sie Teil der Schnittstellenadresse. Um seinen internen Wert darzustellen, verwenden Sie ${}, um den Wert abzurufen. Zum Beispiel:

console.info(`Hallo zusammen, mein Name ist ${name}, ich bin dieses Jahr ${age} Jahre alt`)
//Entspricht console.info('Hallo zusammen, mein Name ist ' + Name + ', ich bin dieses Jahr ' + Alter + ' Jahre alt')

(4) Zu diesem Zeitpunkt wird der Anforderungsvorgang nicht aufgerufen und standardmäßig ausgeführt. Daher muss er bei der Bereitstellung in Echtzeit ausgeführt werden.

Die Gesamtdarstellung des Codes sieht wie folgt aus:

<Skript>
    Standard exportieren {
        Daten(){
            memberData[], // Wartet darauf, dass das empfangende Array die Backend-Daten speichert},
        montiert(){
            this.update();//Nachdem das HTML geladen wurde, entspricht es der synchronen Anzeige der Backend-Daten auf der Seite},
        Methoden:{
            aktualisieren(){
                  dies.$http.get(`/api/project/${this.$store.state.project.id}`, {
                      Projekt-ID:dies.$store.state.project.id,
                    }).dann(doc => {
                          varcode = doc.data.status;
                          var msg = doc.data.msg;
                      if (code == 0){//Die Anforderung ist erfolgreich. Entsprechende Aktionen können gemäß den unterschiedlichen Statuscode-Rückgabewerten ausgeführt werden. this.memberData = doc.data.data.member//Dieses Array wird in den Back-End-Daten gespeichert}			
                  })
            },
        },
    };
</Skript>

Im obigen Beispiel empfängt doc die zurückgegebenen Parameter, beginnend mit doc.data. Die vom Backend übertragenen Daten verfügen über eine Datenstruktur, sodass .data erneut verwendet wird, um die darin enthaltenen Mitgliedsdaten abzurufen.

Hinweis: Als ich anfing zu lernen, wie man Daten abruft, habe ich die Anforderungs-URL versehentlich in einfache Anführungszeichen (') gesetzt. Hier werden einfache Anführungszeichen (`) verwendet.

Wenn bei der Vue-Programmierung das in der Komponente gebundene Ereignis einen eingehenden Ereignisnamen-String/String-Parameter hat, führt die Verwendung von nur einfachen und doppelten Anführungszeichen dazu, dass der String nicht definiert ist. Zu diesem Zeitpunkt müssen wir Backsimple-Anführungszeichen verwenden.

Vergleichen Sie die Backend-Projektdokumentation:

2. Interaktion zwischen Front-End- und Back-End-Wertübertragung

Das Konzept der Werteübergabe vom Front-End zum Back-End ist dasselbe wie das zuvor erwähnte Konzept der Parameterübergabe, und auch die Methode ist dieselbe. Der Unterschied besteht jedoch darin, dass es sich hierbei um eine Interaktion handelt, bei der hauptsächlich Parameter vom Front-End an das Back-End übergeben werden. Wenn also viele Parameter vorhanden sind, kann es leicht dazu führen, dass der Code zu lang und das Lesen und Schreiben umständlich wird. Auf diese Weise können Sie eine Zwischenvariablenstruktur erstellen und Werte einheitlich übergeben, sodass Sie nur einen Parameter eingeben müssen. Zum Beispiel:

var obj = {//Alle Parameter zusammenfügen project_id:this.$store.state.project.id,
    id:diese.id,
    Ausführung: geprüft,
    Name:dieser.FlowName
}
this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//Sammlung von direkten Werten transfer.then(doc => {
            varcode = doc.data.status;
            var msg = doc.data.msg;
			wenn (Code == 0){
				this.update()//Aktualisiert das Frontend automatisch, nachdem die Backend-Daten aktualisiert wurden, und ändert dabei das Erscheinungsbild }
    		anders{
					dies.$alert(msg,'false')
			}
	});

3. Anzeige der erfassten Daten

Im Vergleich zur Datenerfassung ist die Datenanzeige viel einfacher.

Zunächst müssen die vom Backend gesendeten Daten eine mehrschichtige Struktur oder eine Sammlung sein. Wenn Sie also ein großes Array zum Empfangen der Backend-Daten verwenden, müssen Sie mehrere spezifische Variablen deklarieren, die Sie in der Datenrückgabe anzeigen müssen. Die Hintergrunddaten müssen eindeutig in den Frontend-Variablen gespeichert werden, bevor sie vom Frontend verwendet werden können. Trennen Sie die Daten im Array erneut. Zum Beispiel:

getTaskData:Funktion(){
	this.$http.get(`/api/project/${this.$store.state.project.id}/task/info? id=${this.messageId}`, //Gemäß der vom Backend bereitgestellten URL sollte der Parameter nach ? als ${} geschrieben werden.
        {params:{project_id:this.$store.state.project.id,task_id:this.messageId}})
        .dann(doc=>{
            if(doc.data.data){//Kann nur abgerufen werden, wenn Daten empfangen werden. Ist sie leer, so kommt es bei der erneuten Suche der Untervariablen in der Struktur unter den übergebenen Daten zu einem Fehler.
                this.taskData=doc.data.data;//Das sogenannte Gesamt-Großarray enthält alle übertragenen Daten this.defaultChecked=this.taskData.finish;//Die übertragene Datenstruktur unterteilen und in die deklarierten Variablen einfügen this.taskRemarks=this.taskData.remarks;   
            }                  
            anders
                diese.taskData=null;
            }).catch(err=>{//Möglichkeit zur Fehlerbehandlung this.$alert("Unbekannter Fehler", "false"); //Der Server ist noch nicht eingerichtet })                
},

Als ich zum ersten Mal mit dem Empfangen von Daten in Berührung kam, hatte ich eine Frage. Ich wusste nicht, wie ich an „Unterdaten“ wie diese gelangen sollte:

Nachdem ich die spezifischen Daten erhalten habe, möchte ich sie in HTML anzeigen. Im Allgemeinen werden Variablen bzw. die von ihnen dargestellten Informationen auf einer Webseite angezeigt, indem sie in HTML-Tags eingefügt werden. Variablen als Attributwerte müssen mit v-bind implementiert werden. v-bind wird zum Binden von Daten und Elementattributen verwendet. Zum Beispiel:

<a href="myHome.com" rel="external nofollow" >OK</a>

Wenn Sie den href-Attributwert in Echtzeit aktualisieren möchten, müssen Sie eine benutzerdefinierte Variable daran binden. Die Variablen in Anführungszeichen werden als Zeichenfolgen behandelt. Diesmal müssen wir dazu v-bind verwenden. Nach dem Binden muss der entsprechende Wert in den Vue-Daten gefunden werden. Wenn wir die URL in der Konsole ändern, ändert sich auch das Entsprechende. In ähnlicher Weise können wir auch das Bild-Quellattribut und das Klassenattribut binden.

//Hier ist URL eine benutzerdefinierte Variable, die in den Daten zurückgegeben wird und die Linkzeichenfolge //url: „MyHome.com“ speichert.
<a v-bind:href="url" rel="externes nofollow" rel="externes nofollow" >OK</a>
//Abgekürzt als (ich setze einfach einen Doppelpunkt vor das Attribut, wenn ein Variablenname als Attribut benötigt wird)
<a :href="url" rel="externes nofollow" rel="externes nofollow" >OK</a>

Als ich zum ersten Mal die Seitenanzeigedaten in Echtzeit ändern wollte, also die Tag-Attribute der Seitenanzeige entsprechend den vom Backend gesendeten Daten ändern wollte, habe ich fälschlicherweise DOM zur Steuerung der Elementanzeige verwendet. Da ich noch nie zuvor mit Vue in Berührung gekommen bin, bleibt mein Bewusstsein für sich ändernde Schnittstellenelemente auf der Stufe „document.getElementById('xxx').<attribute>=xxx“. Dies macht den Code umständlich und ineffizient und erhöht die Kopplung des Codes.

4. Datenverknüpfung verhindern

Um im Aufgabenbereichmodul unterschiedliche Aufgabendetails basierend auf unterschiedlichen Klicks anzuzeigen, ist es erforderlich, die eindeutige ID jeder Aufgabe zu übergeben. Nach der Anzeige der Details gibt es eine Funktion zum Ändern der Informationen. Zufällige Änderungen hier können sich auf die Informationen anderer Aufgaben auswirken und zu Informationsverwirrung führen. Der Hauptgrund ist, dass wir zu Beginn auf die Änderungen aller Komponenten geachtet haben. Beispielsweise wird dieser Code aufgerufen, wenn sich die Dringlichkeit der Aufgabe ändert:

onFlowPri(pri){
			this.taskpriority = pri
			dies.$http
         .post(`/api/project/${this.$store.state.project.id}/task/update`, {//Wenn sich die Dringlichkeit ändert, werden die Daten an das Backend übertragen. Nur eine Änderung ändert alle Daten. Zu diesem Zeitpunkt wird die Übertragung anderer alter Daten auf Probleme stoßen project_id:this.$store.state.project.id,
				id:diese.id,
				Bemerkungen:this.flowMarks,
				Name:dieser.FlowName,
				beenden:dieses.beenden,
				Priorität:pri,
			})
         .dann(doc => {
            varcode = doc.data.status;
            var msg = doc.data.msg;
				wenn (Code == 0){
					dies.update()
				}anders{
					dies.$alert(msg,'false')
				}
         });
},

Eine zu frühe Übermittlung geänderter Daten, bei der noch nicht bekannt ist, ob der Benutzer diese speichert und eine aktive Überwachung dieser erfolgt, kann allerdings zu Fehlern führen. Erhöht die Komplexität des Codes. Insbesondere wenn genügend Daten vorhanden sind, mit denen Benutzer interagieren, kann dies zu Verwirrung führen. Ein guter Ansatz besteht darin, die zum Ausfüllen des gesamten Formulars erforderlichen Daten erst nach der Bestätigung und Speicherung durch den Benutzer an das Backend zu übertragen, sodass durch eine einmalige Übermittlung die Richtigkeit der Daten sichergestellt ist.

3. Technische Probleme

1. Automatische Aktualisierung der Benutzeroberfläche

Problembeschreibung: Wenn der Benutzer die Eigenschaften bestimmter Funktionen ändert, können die auf der Benutzeroberfläche angezeigten Daten oder Komponenten nicht in Echtzeit geändert werden, sodass der Benutzer die gesamte Seite manuell aktualisieren muss.

Lösung: Zunächst hängt das Laden der Schnittstelle von der in der gemounteten Methode definierten Methode ab, um Hintergrunddaten (hier heißt die Methode im Allgemeinen „Update“) für die Anzeige abzurufen. Als Hook-Funktion fordert es das Backend an, ruft Daten zurück und macht etwas mit dem Router-Hook. Zum Abrufen von Daten wird hauptsächlich die API verwendet. Beim Mounten oder Ändern können Sie das Update direkt aufrufen. Das heißt, nach dem Auftreten eines Benutzerklickereignisses wird update an der Stelle des entsprechenden Ereignisses aufgerufen, um neue Daten aus dem Hintergrund abzurufen.

2. Fehler beim Abrufen des Datenarrays

Problembeschreibung: Das Backend übergibt ein Array an das Frontend. Nachdem das Frontend sein eigenes Array erhalten hat, tritt ein Fehler auf, wenn es zum zweiten Mal ein neues Element in das Array schiebt.

Das Problem scheint auf den ersten Blick einfach zu sein. Der Grund ist, dass das von mir gepushte Array nicht als Array erkannt wird. Ich habe aber immer wieder überprüft, dass der empfangende Datentyp in den Daten tatsächlich als Array deklariert ist. Der genaue Fehlerort kann nicht gefunden werden. Alle Fehler werden aus dem Laufzeitcache gelesen und es wird keine Quelldatei zugeordnet. Es ist eine metaphysische Frage.

Lösung: Wählen Sie das Projekt aus. So einfach ist das. Unser Produkt besteht darin, durch Auswahl des Projekts, also der Projekt-ID, Daten in den Hintergrund zu übertragen. Versuchen Sie daher bei einer unklaren Fehlermeldung herauszufinden, ob ein Problem vorliegt, das darauf zurückzuführen ist, dass die Informationen nicht gelesen werden.

3. Werte übermitteln und anzeigen (für Uhrzeit)

Problembeschreibung: Ein komplizierteres Problem bei der Front-End- und Back-End-Dateninteraktion ist die Datentypkonvertierung, wenn die Zeit als Wert vom Typ DateTime übergeben wird. Und wenn Sie einen Zeitselektor verwenden, wird die Zeit in der Komponente als Zeit des übergebenen Wertes angezeigt.

Wie in der Abbildung gezeigt, ist die an der Zeiteinstellungsposition angezeigte Zeit falsch, während die Konsole die korrekte, aus dem Hintergrund übermittelte Zeit ausgibt. Das heißt, die Uhrzeit kann im Zeitauswahlfeld nicht in Echtzeit angezeigt werden.

Wenn Sie die Zeit in einem Zeitauswahlfeld wie „Zeit festlegen“ ändern und an das Backend übergeben, tritt ein Typkonfliktproblem auf. Das heißt, die Konvertierung zwischen String und DateTime.

Lösung: Fügen Sie dem Zeitselektor das Attribut :value hinzu und verwenden Sie moment, um die anzuzeigende Zeitvariable einzuschränken. Beispiel:

 :Wert="[Augenblick(taskDetails.t_begin), Augenblick(taskDetails.t_end)]"

Verwendung der Zeitformatierungskomponente „Moment“: Sie müssen die Komponente in das Skript importieren und „Moment“ in Methoden deklarieren.

<script>Moment aus 'Moment' importieren</script>

Wenn Sie die Zeitdaten an das Backend zurückgeben möchten, müssen Sie die Daten vom Typ String konvertieren, d. h. Sie müssen eine toDateTime-Funktion deklarieren und definieren:

Funktion toDateTime(Zeit) {
	var Datum = neues Datum (Uhrzeit);
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
	var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
	var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
	var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
	strDate = J+M+T+h+m+s;
	gibt strDate zurück;
}

Normalisieren Sie direkt bei der Werteübergabe.

IV. Fazit

1. Das Übertragen von Werten in Vue ist ein relativ einfacher Teil. Es geht hauptsächlich darum, Variablen vorzubereiten, die auf den Empfang warten, und sicherzustellen, dass die Daten erfolgreich geladen werden. Der Datentyp sollte ebenfalls notiert werden, und die vom Backend gesendeten Daten sollten sorgfältig überprüft werden. Die Front-End- und Back-End-Interaktionen von Vue werden mit relativ einfachen und praktischen Vorlagen implementiert, sodass sie leicht zu beherrschen sind.

2. Wenn Sie Daten anzeigen, müssen Sie die Anzeigemethoden verschiedener Komponenten verstehen. Einige verwenden die Elementschleifenanzeige, andere zitieren direkt und mehr verwenden V-Bind, um die Anzeige variabler Einflüsse zu realisieren.

3. Bei der Entwicklung dieses Projekts waren die Entwicklung des Aufgabenbereichs und das Schreiben des Codes sehr kompliziert und leicht zu verwechseln, da es mehrere Popup-Fenster und Bereiche gibt, der vom Benutzer eingegebene Inhalt und der vom Hintergrund empfangene und angezeigte Inhalt unterschiedlich sind und die Datenverknüpfung zwischen ihnen sehr schlecht ist. Wenn Sie nicht aufpassen, können neue Bereichsdaten leicht die alten Daten überschreiben, die zuvor angezeigt wurden. Insbesondere bei Komponenten wie Formularen, die eine Benutzerbeteiligung erfordern, ist es notwendig, jede mögliche interaktive Unterkomponente in Echtzeit zu überwachen. Es ist jedoch wichtig zu beachten, dass nicht jede Unterkomponente zeitnahes Feedback erfordert, da sonst unnötige zugehörige Aktionen die endgültige Speicherung von Informationen beeinträchtigen können. Insbesondere bei Formularen mit Kündigungsfunktion, die eine Zurücksetzung mit einem Klick erfordern, ist ein zu frühes Ergreifen entsprechender Aktionen kontraproduktiv.

Oben finden Sie Einzelheiten zum Verständnis der Interaktion und Anzeige von Vue-Frontend- und Backend-Daten. Weitere Informationen zur Interaktion und Anzeige von Vue-Frontend- und Backend-Daten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!