suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So implementieren Sie die Funktion zum Aktualisieren nur einiger Spaltendaten in Vue.js

So implementieren Sie die Funktion zum Aktualisieren nur einiger Spaltendaten in Vue.js

PHPz
PHPzOriginal
2023-04-13 10:46:241167Durchsuche

In der tatsächlichen Projektentwicklung stehen wir oft vor der Situation, dass wir Daten auf der Grundlage bestimmter Bedingungen abfragen müssen, aber nur einige der Spalten aktualisieren möchten, nicht alle. Zu diesem Zeitpunkt können wir Vue.js verwenden, um eine einfache Front-End-Anwendung zu erstellen und Datenabfragen und -aktualisierungen mithilfe der AJAX-Technologie zu implementieren.

In diesem Artikel wird erläutert, wie die Funktion zum Aktualisieren nur eines Teils der Spaltendaten in Vue.js implementiert wird.

Schritt 1: Vorbereitung

Zuerst müssen wir eine Datenbank vorbereiten und die entsprechende API auf der Serverseite schreiben, damit die Front-End-Anwendung mit der Serverseite interagieren kann. In diesem Artikel gehen wir von einer MySQL-Datenbank aus und schreiben die API mit Node.js und dem Express-Framework.

Angenommen, unsere Datenbank verfügt über eine Benutzertabelle, die die folgenden Felder enthält:

  • id – eindeutige Benutzerkennung, sich selbst erhöhende Ganzzahl
  • Name – Benutzername, Zeichenfolgentyp
  • E-Mail – E-Mail-Adresse des Benutzers, Zeichen Zeichenfolgentyp
  • Telefon – Telefonnummer des Benutzers, Zeichenfolgentyp

Wir hoffen, die folgenden Funktionen zu erreichen:

  • Alle Benutzerinformationen basierend auf dem Namen des Benutzers abfragen;
  • kann die E-Mail-Adresse und Telefonnummer des Benutzers aktualisieren, andere Informationen sind nicht zulässig geändert werden.

Um diese Funktion zu implementieren, müssen wir die Abfrage- und Aktualisierungsfunktionen jeweils in der serverseitigen API implementieren und zwei Routen entsprechen:

  • GET /users/:name – Benutzerinformationen basierend auf dem Benutzernamen abfragen ;
  • PUT /users/:id – Benutzerinformationen aktualisieren.

Da der Schwerpunkt dieses Artikels auf der Front-End-Implementierung liegt, werden wir nicht weiter auf die serverseitige Implementierungsmethode eingehen. Interessierte Leser können auf andere verwandte Materialien verweisen.

Schritt 2: Erstellen Sie eine Front-End-Anwendung

Als nächstes werden wir Vue.js verwenden, um eine Front-End-Anwendung zu erstellen und über AJAX-Technologie und serverseitige API mit Daten zu interagieren.

Zuerst müssen wir Vue.js- und jQuery-Bibliotheken in die HTML-Datei einführen. Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label>用户名：</label>
            <input type="text" v-model="name">
            <button @click="search">查询</button>
        </div>
        <div v-if="result">
            <label>邮箱：</label>
            <input type="text" v-model="result.email" :disabled="loading">
            <label>电话：</label>
            <input type="text" v-model="result.phone" :disabled="loading">
            <button @click="update">更新</button>
        </div>
        <div v-else>
            {{ message }}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

In der HTML-Datei definieren wir ein div-Element mit der ID „app“ als Einhängepunkt für Vue.js-Instanz. In diesem Div verwenden wir die Vorlagensyntax und Anweisungen von Vue.js, um die folgenden Funktionen zu implementieren:

  • Binden Sie den Wert des Eingabeelements an das Namensattribut der Vue.js-Instanz;
  • Wenn auf die Abfrageschaltfläche geklickt wird Die Suche heißt Methode. Die
  • v-if-Direktive zeigt Abfrageergebnisse oder Fehleraufforderungen basierend auf dem Ergebnisattributwert der Vue.js-Instanz dynamisch an, und die Ergebnis- und Nachrichtenattribute speichern den Inhalt der Abfrageergebnisse bzw. Fehleraufforderungen ;
  • Binden Sie den Wert des Eingabeelements an die E-Mail- und Telefonfelder der Ergebnisse und deaktivieren Sie das Eingabeelement während des Ladens.
  • Wenn auf die Aktualisierungsschaltfläche geklickt wird, wird die Aktualisierungsmethode aufgerufen.

Es ist zu beachten, dass wir die Axios-Bibliothek in der HTML-Datei eingeführt haben, bei der es sich um einen Promise-basierten HTTP-Client handelt, der zum Senden von AJAX-Anfragen verwendet werden kann.

Als nächstes schreiben wir den Code für die Vue.js-Instanz in die app.js-Datei. Der Code lautet wie folgt: 

var app = new Vue({
    el: "#app",
    data: {
        name: "",
        result: null,
        message: "",
        loading: false,
    },
    methods: {
        search: function() {
            var self = this;
            self.loading = true;
            self.result = null;
            self.message = "正在加载...";
            axios.get("/api/users/" + self.name).then(function(res) {
                self.loading = false;
                if (res.data.status === 0) {
                    self.result = res.data.result;
                    self.message = "";
                } else {
                    self.message = res.data.message;
                }
            }).catch(function() {
                self.loading = false;
                self.message = "加载失败，请重试";
            });
        },
        update: function() {
            var self = this;
            var data = {
                email: self.result.email,
                phone: self.result.phone,
            };
            axios.put("/api/users/" + self.result.id, data).then(function(res) {
                if (res.data.status === 0) {
                    alert("更新成功");
                } else {
                    alert(res.data.message);
                }
            }).catch(function() {
                alert("更新失败，请重试");
            });
        },
    },
});

In der app.js-Datei definieren wir zunächst die Datenattribute der Vue.js-Instanz. einschließlich:

  • Name: speichert die vom Benutzer eingegebenen Abfragebedingungen (d. h. Benutzername);
  • Nachricht: speichert Fehleraufforderungen;
  • Laden: gibt an, ob Daten gerade geladen werden.
  • Dann haben wir zwei Methoden definiert:

Suche: Senden Sie eine AJAX-Anfrage, fragen Sie Benutzerinformationen basierend auf dem Benutzernamen ab und aktualisieren Sie Datenattribute basierend auf den Abfrageergebnissen.
  • Update: Senden Sie eine AJAX-Anfrage, aktualisieren Sie den Benutzer Informationen und ein Popup-Eingabeaufforderungsfeld.
  • Es ist zu beachten, dass wir beim Senden von AJAX-Anfragen die Axios-Bibliothek verwenden. Abhängig von der API-Implementierungsmethode können Sie die Methode axios.get oder axios.put mit entsprechenden Parametern verwenden, um die Abfrage- und Aktualisierungsfunktionen zu implementieren.

Abschließend mounten wir die Front-End-Anwendung, indem wir eine Vue.js-Instanz erstellen.

Schritt 3: Anwendung testen

Jetzt können wir den Server starten, auf die HTML-Datei zugreifen und die Anwendung testen.

Geben Sie zunächst den Benutzernamen auf der Seite ein und klicken Sie auf die Schaltfläche „Abfrage“. Wenn die Abfrage erfolgreich ist, werden die E-Mail- und Telefoneingabefelder der Abfrageergebnisse automatisch mit den E-Mail- und Telefoninformationen des Benutzers gefüllt. Wenn die Abfrage fehlschlägt, wird eine Fehlermeldung angezeigt.

Dann können wir die E-Mail- und Telefoninformationen ändern und auf die Schaltfläche „Aktualisieren“ klicken, um den Aktualisierungsvorgang durchzuführen. Nach erfolgreicher Aktualisierung wird ein Eingabeaufforderungsfenster angezeigt.

Zusammenfassung

In diesem Artikel haben wir anhand eines Beispiels vorgestellt, wie Vue.js und AJAX-Technologie verwendet werden, um die Funktion zum Aktualisieren nur eines Teils der Spaltendaten zu implementieren. Anhand dieses Beispiels können wir die folgenden Wissenspunkte lernen:

Wie man Datenattribute und -methoden in Vue.js definiert;
  • Wie man Vorlagensyntax und Anweisungen verwendet, um Datenbindung und dynamische Aktualisierungen zu implementieren; Axios-Bibliothek Senden Sie eine AJAX-Anfrage.
  • Dieser Artikel wird natürlich nur anhand eines einfachen Beispiels vorgestellt. Wenn diese Technologien in tatsächlichen Projekten angewendet werden müssen, müssen sie entsprechend der spezifischen Situation angepasst und verbessert werden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Aktualisieren nur einiger Spaltendaten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So gestalten Sie ein Textfeld in HTMLNächster Artikel：So gestalten Sie ein Textfeld in HTML

In Verbindung stehende Artikel

Mehr sehen