Vue 및 Axios를 사용하여 데이터에 대한 CRUD 작업을 구현하는 방법-View.js-php.cn

Vue 및 Axios를 사용하여 데이터에 대한 CRUD 작업을 구현하는 방법

WBOY

풀어 주다： 2023-07-17 16:33:20

원래의

936명이 탐색했습니다.

Vue 및 Axios를 사용하여 데이터에 대한 CRUD 작업을 구현하는 방법

프런트 엔드 개발에서는 데이터 추가, 삭제, 수정 및 쿼리(CRUD) 작업을 수행하기 위해 백엔드 서버와 상호 작용해야 하는 경우가 많습니다. Vue는 대화형 사용자 인터페이스를 구축하는 데 도움이 되는 인기 있는 JavaScript 프레임워크입니다. Axios는 서버와 데이터를 쉽게 통신하는 데 도움이 되는 Promise 기반 HTTP 라이브러리입니다. Vue와 Axios를 결합하면 데이터에 대한 CRUD 작업을 쉽게 구현할 수 있습니다.

이 기사에서는 간단한 작업 관리 시스템을 예로 들어 CRUD 작업에 Vue 및 Axios를 사용하는 방법을 보여 드리겠습니다.

Create Vue 인스턴스

먼저 데이터 바인딩 및 작업을 위한 Vue 인스턴스를 만들어야 합니다. HTML 파일에 Vue를 도입하고 JavaScript에서 Vue 인스턴스를 생성할 수 있습니다:

<!-- 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() {
    // 获取任务列表
  }
});

로그인 후 복사

위 코드에서 Vue 인스턴스를 생성하고 tasks라는 빈 배열을 정의하여 작업 목록을 저장합니다. . 동시에 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);
    });
}

로그인 후 복사

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

로그인 후 복사

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

로그인 후 복사

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

로그인 후 복사

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

마운트

tasks

get

/api/tasks

then

tasks

addTask

post

/api/tasks

{ title: 'New Task' }