ホームページ >ウェブフロントエンド >Vue.js >Vue と Axios を使用してデータに対する CRUD 操作を実装する方法

Vue と Axios を使用してデータに対する CRUD 操作を実装する方法

WBOYオリジナル: 2023-07-17 16:33:20936ブラウズ

フロントエンド開発では、データの追加、削除、変更、クエリを実行するためにバックエンドサーバーと対話する必要があることがよくあります。 (CRUD) 操作。 Vue は、インタラクティブなユーザーインターフェイスの構築に役立つ人気のある JavaScript フレームワークです。 Axios は、サーバーとのデータ通信を容易にする Promise ベースの HTTP ライブラリです。 Vue と Axios を組み合わせることで、データに対する CRUD 操作を簡単に実装できます。

この記事では、単純なタスク管理システムを例として、CRUD 操作に Vue と Axios を使用する方法を説明します。

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 Array という名前の空のオブジェクトを定義します。タスクリストを保存します。同時に、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 Interface にアクセスし、返されたデータを 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/tasksinterface にリクエストを送信し、リクエスト本文として { 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/:idInterface にリクエストを送信し、削除するタスクの ID を指定します。 then コールバック関数では、filter メソッドを使用して、削除されたタスクを含まない tasks 配列をフィルターで除外できます。

上記のコード例を通じて、Vue と Axios を使用してデータに対する CRUD 操作を実装する方法を確認できます。もちろん、実際のプロジェクトでは、ニーズに応じて拡張や最適化を行う必要もあります。この記事が Vue と Axios の理解と応用に役立つことを願っています。

以上がVue と Axios を使用してデータに対する CRUD 操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html Filter 回调函数接口 delete promise http

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vue と Element-plus を使用して美しいユーザーインターフェイスを迅速に開発する方法次の記事：vue と Element-plus を使用して美しいユーザーインターフェイスを迅速に開発する方法

続きを見る