Dans le développement réel d'un projet, nous sommes souvent confrontés à une situation dans laquelle nous devons interroger des données en fonction de certaines conditions, mais souhaitons uniquement mettre à jour certaines colonnes, pas toutes. À l'heure actuelle, nous pouvons utiliser Vue.js pour créer une application frontale simple et implémenter la requête et la mise à jour des données via la technologie AJAX.
Cet article présente comment implémenter la fonction de mise à jour d'une partie seulement des données des colonnes dans Vue.js.
Étape 1 : Préparation
Tout d'abord, nous devons préparer une base de données et écrire l'API correspondante côté serveur afin que l'application frontale puisse interagir avec le côté serveur. Dans cet article, nous supposons une base de données MySQL et écrivons l'API à l'aide de Node.js et du framework Express.
Supposons que notre base de données ait une table utilisateurs, qui contient les champs suivants :
Nous espérons atteindre les fonctions suivantes :
Afin d'implémenter cette fonction, nous devons implémenter respectivement les fonctions de requête et de mise à jour dans l'API côté serveur, et correspondre à deux itinéraires :
Étant donné que cet article se concentre sur l'implémentation frontale, nous ne discuterons pas davantage de la méthode d'implémentation côté serveur. Les lecteurs intéressés peuvent se référer à d'autres documents connexes.
Étape 2 : Créer une application frontale
Ensuite, nous utiliserons Vue.js pour créer une application frontale et interagir avec les données via la technologie AJAX et l'API côté serveur.
Tout d'abord, nous devons introduire les bibliothèques Vue.js et jQuery dans le fichier HTML. Le code est le suivant :
<!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>Dans le fichier HTML, nous définissons un élément div avec l'identifiant "app" comme point de montage pour le. Instance Vue.js . Dans ce div, nous utilisons la syntaxe du modèle et les instructions de Vue.js pour implémenter les fonctions suivantes :
Il convient de noter que nous avons introduit la bibliothèque axios dans le fichier HTML, qui est un client HTTP basé sur Promise qui peut être utilisé pour envoyer des requêtes AJAX.
Ensuite, nous écrivons le code de l'instance Vue.js dans le fichier app.js Le code est le suivant :
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("更新失败，请重试");
});
},
},
});Dans le fichier app.js, nous définissons d'abord les attributs de données de l'instance Vue.js, comprenant :
Ensuite, nous avons défini deux méthodes :
Il convient de noter que nous utilisons la bibliothèque axios lors de l'envoi de requêtes AJAX. Selon la méthode d'implémentation de l'API, vous pouvez utiliser la méthode axios.get ou axios.put avec les paramètres correspondants pour implémenter les fonctions de requête et de mise à jour.
Enfin, nous montons l'application front-end en créant une instance Vue.js.
Étape 3 : Testez l'application
Maintenant, nous pouvons démarrer le serveur, accéder au fichier HTML et tester l'application.
Tout d’abord, entrez le nom d’utilisateur sur la page et cliquez sur le bouton de requête. Si la requête réussit, les zones de saisie de l'e-mail et du téléphone des résultats de la requête seront automatiquement remplies avec les informations de l'utilisateur sur l'e-mail et le téléphone. Si la requête échoue, un message d'erreur s'affichera.
Ensuite, nous pouvons modifier les informations de courrier électronique et de téléphone, puis cliquer sur le bouton de mise à jour pour effectuer l'opération de mise à jour. Une fois la mise à jour réussie, une boîte de dialogue apparaîtra.
Résumé
Dans cet article, nous avons présenté à travers un exemple comment utiliser la technologie Vue.js et AJAX pour implémenter la fonction de mise à jour d'une partie seulement des données des colonnes. Grâce à cet exemple, nous pouvons apprendre les points de connaissances suivants :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment créer une animation GIF sur PS
Comment utiliser la fonction de filtre
git annuler le commit soumis
Comment désactiver le pare-feu
méthode de mise à niveau Win10
Comment insérer des numéros de page dans ppt
Quelle version du système Linux est facile à utiliser ?
Quelles sont les différences entre weblogic et Tomcat
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
