Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data-View.js-php.cn

Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data

WBOY

Lepaskan： 2023-07-17 16:33:20

asal

937 orang telah melayarinya

Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data

Dalam pembangunan bahagian hadapan, selalunya perlu untuk berinteraksi dengan pelayan bahagian belakang untuk melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan (CRUD) data. Vue ialah rangka kerja JavaScript popular yang membantu kami membina antara muka pengguna interaktif. Axios ialah perpustakaan HTTP berasaskan Promise yang boleh membantu kami menyampaikan data dengan mudah dengan pelayan. Dengan menggabungkan Vue dan Axios, kami boleh melaksanakan operasi CRUD pada data dengan mudah.

Dalam artikel ini, kami akan mengambil sistem pengurusan tugasan mudah sebagai contoh untuk menunjukkan cara menggunakan Vue dan Axios untuk operasi CRUD.

Buat contoh Vue

Pertama, kita perlu mencipta tika Vue untuk pengikatan dan operasi data. Anda boleh memperkenalkan Vue dalam fail HTML dan mencipta tika Vue dalam 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>

Salin selepas log masuk

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

Salin selepas log masuk

Dalam kod di atas, kami mencipta tika Vue dan menentukan tatasusunan kosong bernama tasks, menggunakan untuk menyimpan senarai tugasan . Pada masa yang sama, kami juga menentukan beberapa kaedah untuk operasi 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);
    });
}

Salin selepas log masuk

上述代码中，我们使用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);
      });
  }
}

Salin selepas log masuk

上述代码中，我们使用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);
      });
  }
}

Salin selepas log masuk

上述代码中，我们使用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);
      });
  }
}

Salin selepas log masuk

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

dipasang

tasks

get

/api/tasks

tasks

then

addTask

post

antara muka /api/tasks

{ title: 'New Task' }

then

tasks

updateTask

put

/api/tasks/:id

then

deleteTask

delete

/api/tasks/:id

then

filter

tasks

Atas ialah kandungan terperinci Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!