简体中文（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 utiliser Vue et Axios pour implémenter des opérations CRUD sur les données

Comment utiliser Vue et Axios pour implémenter des opérations CRUD sur les données

WBOY
WBOYoriginal
2023-07-17 16:33:20918parcourir

Comment utiliser Vue et Axios pour implémenter des opérations CRUD sur les données

Dans le développement front-end, il est souvent nécessaire d'interagir avec le serveur back-end pour effectuer des opérations d'ajout, de suppression, de modification et d'interrogation de données (CRUD). Vue est un framework JavaScript populaire qui nous aide à créer des interfaces utilisateur interactives. Axios est une bibliothèque HTTP basée sur Promise qui peut nous aider à communiquer facilement des données avec le serveur. En combinant Vue et Axios, nous pouvons facilement implémenter des opérations CRUD sur les données.

Dans cet article, nous prendrons comme exemple un système de gestion de tâches simple pour démontrer comment utiliser Vue et Axios pour les opérations CRUD.

  1. Créer une instance Vue

Tout d'abord, nous devons créer une instance Vue pour la liaison de données et les opérations. Vous pouvez introduire Vue dans un fichier HTML et créer une instance de Vue en JavaScript : 

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CRUD Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 页面内容 -->
  </div>
  <script src="app.js"></script>
</body>
</html>
// app.js
var app = new Vue({
  el: '#app',
  data: {
    tasks: []
  },
  methods: {
    // CRUD方法
  },
  mounted: function() {
    // 获取任务列表
  }
});

Dans le code ci-dessus, nous créons une instance de Vue et définissons un tableau vide nommé tasks, en utilisant pour stocker la liste des tâches . Parallèlement, nous avons également défini certaines méthodes pour les opérations CRUD. tasks的空数组，用来存储任务列表。同时，我们也定义了一些用来进行CRUD操作的方法。

  1. 获取任务列表

在Vue的mounted生命周期钩子中，我们可以使用Axios发送一个GET请求来获取任务列表，并将返回的数据赋值给tasks：

// app.js
mounted: function() {
  var vm = this;
  axios.get('/api/tasks')
    .then(function(response) {
      vm.tasks = response.data;
    })
    .catch(function(err) {
      console.error(err);
    });
}

上述代码中，我们使用Axios的get方法来发送一个GET请求到/api/tasks接口，然后在then回调函数中将返回的数据赋值给tasks。

  1. 添加任务

添加任务时，我们需要发送一个POST请求到服务器，并将新任务的数据传递过去。可以在Vue实例中定义一个addTask方法来处理这个请求：

// app.js
methods: {
  addTask: function() {
    var vm = this;
    axios.post('/api/tasks', { title: 'New Task' })
      .then(function(response) {
        vm.tasks.push(response.data);
      })
      .catch(function(err) {
        console.error(err);
      });
  }
}

上述代码中，我们使用Axios的post方法来发送一个POST请求到/api/tasks接口，并将{ title: 'New Task' }作为请求体传递过去。在then回调函数中，我们将服务器返回的新任务数据追加到tasks数组中。

  1. 更新任务

更新任务时，我们需要发送一个PUT请求到服务器，并将更新后的任务数据传递过去。可以在Vue实例中定义一个updateTask方法来处理这个请求：

// app.js
methods: {
  updateTask: function(task) {
    var vm = this;
    axios.put('/api/tasks/' + task.id, { title: task.title })
      .then(function(response) {
        // 更新成功
      })
      .catch(function(err) {
        console.error(err);
      });
  }
}

上述代码中，我们使用Axios的put方法来发送一个PUT请求到/api/tasks/:id接口，并将任务的ID和更新后的标题作为请求参数传递过去。在then回调函数中，我们可以执行一些更新成功后的操作。

  1. 删除任务

删除任务时，我们需要发送一个DELETE请求到服务器，并指定待删除任务的ID。可以在Vue实例中定义一个deleteTask方法来处理这个请求：

// app.js
methods: {
  deleteTask: function(task) {
    var vm = this;
    axios.delete('/api/tasks/' + task.id)
      .then(function(response) {
        vm.tasks = vm.tasks.filter(function(t) {
          return t.id !== task.id;
        });
      })
      .catch(function(err) {
        console.error(err);
      });
  }
}

上述代码中，我们使用Axios的delete方法来发送一个DELETE请求到/api/tasks/:id接口，并指定待删除任务的ID。在then回调函数中，我们可以使用filter方法来过滤出不包含删除任务的tasks

    Obtenir la liste des tâches

    🎜Dans le hook de cycle de vie monté de Vue, nous pouvons utiliser Axios pour envoyer une requête GET pour obtenir la liste des tâches et renvoyer les données renvoyées Attribuez une valeur aux tâches : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode get d'Axios pour envoyer une requête GET au /api/tasks interface, puis attribuez les données renvoyées aux tâches dans la fonction de rappel then. 🎜
      🎜Ajouter une tâche🎜🎜🎜Lors de l'ajout d'une tâche, nous devons envoyer une requête POST au serveur et transmettre les données de la nouvelle tâche. Vous pouvez définir une méthode addTask dans l'instance Vue pour gérer cette requête : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode post d'Axios pour envoyer une requête POST à ​​ /api/tasks et transmettez { title: 'New Task' } comme corps de la requête. Dans la fonction de rappel then, nous ajoutons les nouvelles données de tâche renvoyées par le serveur au tableau tasks. 🎜
        🎜Tâche de mise à jour🎜🎜🎜Lors de la mise à jour d'une tâche, nous devons envoyer une requête PUT au serveur et transmettre les données de la tâche mises à jour. Vous pouvez définir une méthode updateTask dans l'instance Vue pour gérer cette requête : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode put d'Axios pour envoyer une requête PUT à /api/tasks/:id et transmettez l'ID de la tâche et le titre mis à jour comme paramètres de requête. Dans la fonction de rappel then, nous pouvons effectuer certaines opérations une fois la mise à jour réussie. 🎜
          🎜Supprimer des tâches🎜🎜🎜Lors de la suppression d'une tâche, nous devons envoyer une requête DELETE au serveur et spécifier l'ID de la tâche à supprimer. Vous pouvez définir une méthode deleteTask dans l'instance Vue pour gérer cette requête : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode delete d'Axios pour envoyer une requête DELETE à /api/tasks/:id et précisez l'ID de la tâche à supprimer. Dans la fonction de rappel then, nous pouvons utiliser la méthode filter pour filtrer le tableau tasks qui ne contient pas de tâches supprimées. 🎜🎜Grâce aux exemples de code ci-dessus, nous pouvons voir comment utiliser Vue et Axios pour implémenter des opérations CRUD sur les données. Bien entendu, dans les projets réels, nous devons également procéder à des extensions et des optimisations en fonction de besoins spécifiques. J'espère que cet article pourra vous aider à mieux comprendre et appliquer Vue et Axios. 🎜

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!

JavaScript html Filter 回调函数 接口 delete promise http
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 développer rapidement de belles interfaces utilisateur en utilisant vue et Element-plusArticle suivant：Comment développer rapidement de belles interfaces utilisateur en utilisant vue et Element-plus

Articles Liés

Voir plus