简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment implémenter la fonction de mise à jour d'une partie seulement des données des colonnes dans Vue.js

Comment implémenter la fonction de mise à jour d'une partie seulement des données des colonnes dans Vue.js

PHPz
PHPzoriginal
2023-04-13 10:46:241145parcourir

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 :

  • id - identifiant unique de l'utilisateur, entier auto-croissant
  • name - nom d'utilisateur, type de chaîne
  • email - e-mail de l'utilisateur, caractères Type de chaîne
  • phone - numéro de téléphone de l'utilisateur, type de chaîne

Nous espérons atteindre les fonctions suivantes :

  • Interroger toutes les informations de l'utilisateur en fonction du nom de l'utilisateur
  • peut mettre à jour l'e-mail et le numéro de téléphone de l'utilisateur, d'autres informations ne sont pas autorisées ; être modifié.

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 :

  • GET /users/:name - interroger les informations utilisateur en fonction du nom d'utilisateur
  • PUT /users/:id - Mettre à jour les informations utilisateur.

É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 :

  • Lier la valeur de l'élément d'entrée à l'attribut name de l'instance Vue.js ;
  • Lorsque le bouton de requête est cliqué ; , la recherche est appelée Méthode ;La directive
  • v-if affiche dynamiquement les résultats de la requête ou les invites d'erreur en fonction de la valeur de l'attribut de résultat de l'instance Vue.js, et les attributs de résultat et de message stockent respectivement le contenu des résultats de la requête et des invites d'erreur. ;
  • Liez la valeur de l'élément d'entrée pour interroger les champs email et téléphone des résultats, et désactivez l'élément d'entrée lors du chargement
  • Lorsque vous cliquez sur le bouton de mise à jour, la méthode de mise à jour est appelée.

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 :

  • nom : stocke les conditions de requête saisies par l'utilisateur (c'est-à-dire le nom d'utilisateur) ;
  • result : stocke les résultats de la requête ;
  • message : stocke les invites d'erreur
  • loading : identifie si les données sont en cours de chargement ;

Ensuite, nous avons défini deux méthodes :

  • recherche : envoyer une requête AJAX, interroger les informations de l'utilisateur en fonction du nom d'utilisateur et mettre à jour les attributs des données en fonction des résultats de la requête
  • update : envoyer une requête AJAX, mettre à jour l'utilisateur ; informations et une boîte de dialogue contextuelle.

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 :

  • Comment définir les attributs et les méthodes de données dans Vue.js ;
  • Comment utiliser la syntaxe et les instructions du modèle pour implémenter la liaison de données et les mises à jour dynamiques ; bibliothèque axios Envoyez une requête AJAX.
  • Bien sûr, cet article n'est présenté que sur la base d'un exemple simple. Si ces technologies doivent être appliquées dans des projets réels, elles doivent être ajustées et améliorées en fonction de la situation spécifique.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment styliser une zone de texte en HTMLArticle suivant：Comment styliser une zone de texte en HTML

Articles Liés

Voir plus