ホームページ > 記事 > ウェブフロントエンド > Vue と Axios をゼロから学び、フロントエンドとバックエンドのデータ送信を実現します
Vue と Axios をゼロから学び、フロントエンドとバックエンドのデータ送信を実現します
- 王林オリジナル
- 2023-07-17 13:22:392889ブラウズ
Vue と Axios をゼロから学び、フロントエンドとバックエンドのデータ送信を実現します
Vue.js は、インタラクティブな Web インターフェイスを構築できる人気の JavaScript フレームワークです。 Axios は、バックエンド API と簡単に通信できる強力な HTTP クライアントです。この記事では、Vue と Axios をゼロから学習する方法と、それらを使用してフロントエンドとバックエンドのデータ送信を実装する方法を紹介します。
ステップ 1: Vue と Axios をインストールする
まず、Vue と Axios をインストールする必要があります。これらは、npm (ノード パッケージ マネージャー) または Yarn を使用してインストールできます。コマンド ライン ウィンドウを開き、プロジェクトのルート ディレクトリで次のコマンドを実行します:
npm install vue axios
または
yarn add vue axios
インストールが完了したら、次の手順に進むことができます。
ステップ 2: Vue インスタンスを作成する
次に、Vue インスタンスを作成する必要があります。プロジェクトのルート ディレクトリに、app.js という名前のファイルを作成し、その中に次のコードを記述します。
import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: ''
}
});ステップ 3: Vue テンプレートとコンポーネントを作成する
#次に、ページにデータを表示するための Vue テンプレートとコンポーネントを作成する必要があります。ルート ディレクトリで、index.html というファイルを作成し、次のコードをそこに貼り付けます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue and Axios Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="Enter a message">
<button @click="sendMessage">Send</button>
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>ステップ 4: Axios リクエストを作成しますそれでは、 Axios を使用して HTTP リクエストを送信し、バックエンドと対話します。 app.js ファイルに、次のコードを追加します。
import axios from 'axios';
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
sendMessage: function() {
axios.post('/api/send', {
message: this.message
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
}
}
}); 上記のコードでは、Axios の post メソッドを /api/ に使用します。 sendPOST リクエストが送信され、メッセージを含むオブジェクトが渡されました。対応する API ルートがバックエンドに設定されていることを確認してください。
vue-cli を使用すると、Vue プロジェクトをすばやく作成し、その組み込みの開発サーバーを使用できます。
vue-cli がインストールされていない場合は、次のコマンドを使用してインストールできます。
npm install -g @vue/cliインストールが完了したら、次のコマンドを実行します。開発を開始するプロジェクトのルート ディレクトリ サーバー:
vue serve index.htmlステップ 6: アプリケーションをテストする ここで、ブラウザで
localhost:8080 にアクセスしてアプリケーションをテストできます。 。入力ボックスにテキストを入力して「送信」ボタンをクリックすると、テキストは Axios を通じてバックエンドに送信され、応答がコンソールに表示されます。
以上がVue と Axios をゼロから学び、フロントエンドとバックエンドのデータ送信を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。