Comment utiliser Vue et Axios pour implémenter des opérations CRUD sur les données-Voir.js-php.cn

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

WBOY

Libérer： 2023-07-17 16:33:20

original

937 Les gens l'ont consulté

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.

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>

Copier après la connexion

// app.js
var app = new Vue({
  el: '#app',
  data: {
    tasks: []
  },
  methods: {
    // CRUD方法
  },
  mounted: function() {
    // 获取任务列表
  }
});

Copier après la connexion

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操作的方法。

获取任务列表

在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);
    });
}

Copier après la connexion

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

添加任务

添加任务时，我们需要发送一个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);
      });
  }
}

Copier après la connexion

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

更新任务

更新任务时，我们需要发送一个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);
      });
  }
}

Copier après la connexion

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

删除任务

删除任务时，我们需要发送一个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);
      });
  }
}

Copier après la connexion

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

monté

tâches

get

/api/tasks

tâches

then

addTask

post

/api/tasks

{ title: 'New Task' }