Comment utiliser Vue et Axios pour demander et mettre à jour des données au niveau de la page

Comment utiliser Vue et Axios pour demander et mettre à jour des données au niveau de la page

Introduction :
Dans le développement front-end d'aujourd'hui, la demande et la mise à jour de données sont des opérations très courantes et importantes. En tant que framework frontal populaire, Vue.js offre une façon de penser basée sur les données. En même temps, combiné à Axios, une excellente bibliothèque HTTP, il peut facilement implémenter des demandes et des mises à jour de données au niveau de la page. Cet article présentera en détail comment utiliser Vue et Axios pour demander et mettre à jour des données au niveau de la page dans le projet Vue, et fournira quelques exemples de code associés.

1. Installez et introduisez Vue et Axios
   Tout d'abord, assurez-vous que Vue et Axios ont été installés dans votre projet. S'il n'est pas installé, vous pouvez l'installer avec la commande suivante.

   npm install vue axios

   Ensuite, là où Vue et Axios doivent être utilisés, présentez-les via le code suivant.

   import Vue from 'vue'
   import axios from 'axios'
   
   Vue.prototype.$axios = axios

2. Envoyer une demande pour obtenir des données
   De manière générale, nous enverrons une demande dans la fonction hook de cycle de vie du composant Vue pour obtenir des données et les afficher. Voici un exemple qui montre comment envoyer une requête GET pour obtenir des données dans un composant Vue.

   export default {
     data() {
    return {
      users: []
    }
     },
     mounted() {
    this.$axios.get('/api/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.error(error)
      })
     }
   }

   Dans le code ci-dessus, la fonction hook de cycle de vie montée sera automatiquement appelée une fois le composant monté, puis enverra une requête GET à l'interface /api/users et attribuera les données renvoyées à l'attribut users dans le composant. données.

3. Mettre à jour les données
   Une fois les données obtenues, nous pouvons les manipuler et les afficher dans le composant Vue. Vous trouverez ci-dessous un exemple qui montre comment mettre à jour les données dans un composant Vue.

   export default {
     data() {
    return {
      users: []
    }
     },
     methods: {
    updateUser(id, newName) {
      this.$axios.put(`/api/users/${id}`, { name: newName })
        .then(response => {
          // 更新成功，更新对应用户的name
          const updatedUser = response.data
          const index = this.users.findIndex(user => user.id === updatedUser.id)
          if (index !== -1) {
            this.$set(this.users, index, updatedUser)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
     }
   }

   Dans le code ci-dessus, la méthode updateUser recevra un identifiant d'utilisateur et un nouveau nom d'utilisateur en tant que paramètres, et enverra une requête PUT à l'interface correspondante. Lorsque la requête réussit, nous pouvons mettre à jour l'attribut de nom de l'utilisateur dans la fonction de rappel de réponse et garantir des mises à jour réactives via la méthode $set de Vue.

4. Supplément : envoyer une requête POST et supprimer des données
   En plus des requêtes GET et PUT, nous pouvons également envoyer des requêtes POST pour créer de nouvelles données et envoyer des requêtes DELETE pour supprimer des données. Vous trouverez ci-dessous deux exemples montrant comment envoyer des requêtes POST et DELETE.

   export default {
     methods: {
    createUser(name) {
      this.$axios.post('/api/users', { name: name })
        .then(response => {
          // 创建成功，将新用户添加到users数组中
          const newUser = response.data
          this.users.push(newUser)
        })
        .catch(error => {
          console.error(error)
        })
    },
    deleteUser(id) {
      this.$axios.delete(`/api/users/${id}`)
        .then(() => {
          // 删除成功，从users数组中移除对应用户
          const index = this.users.findIndex(user => user.id === id)
          if (index !== -1) {
            this.users.splice(index, 1)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
     }
   }

   Dans le code ci-dessus, la méthode createUser recevra un nom d'utilisateur en tant que paramètre et enverra une requête POST à ​​l'interface /api/users pour créer un nouvel utilisateur. Lorsque la requête réussit, nous pouvons ajouter le nouvel utilisateur au tableau des utilisateurs dans la fonction de rappel de réponse. La méthode deleteUser reçoit un identifiant utilisateur en paramètre et envoie une requête DELETE à l'interface correspondante pour supprimer l'utilisateur correspondant. Lorsque la requête réussit, nous pouvons supprimer l'utilisateur correspondant du tableau des utilisateurs dans la fonction de rappel de réponse.

Résumé :
Grâce à la combinaison de Vue et Axios, nous pouvons facilement implémenter des demandes de données et des mises à jour au niveau de la page dans le projet Vue. Grâce aux exemples de code ci-dessus, vous pouvez mieux comprendre comment utiliser Vue et Axios pour envoyer des requêtes GET, POST, PUT et DELETE, ainsi qu'exploiter et mettre à jour les données renvoyées. J'espère que cet article pourra vous aider à comprendre et à utiliser Vue et Axios pour gérer les demandes de données dans votre projet.

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!