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:
Wir hoffen, die folgenden Funktionen zu erreichen:
Um diese Funktion zu implementieren, müssen wir die Abfrage- und Aktualisierungsfunktionen jeweils in der serverseitigen API implementieren und zwei Routen entsprechen:
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:
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:
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;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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
