初心者向け必須: Vue と Axios を使用してフロントエンドとバックエンドのインタラクティブ プロジェクトを構築する方法

初心者必携: Vue と Axios を使用してフロントエンドとバックエンドの対話プロジェクトを構築する方法

はじめに:
現代の Web 開発では、フロントエンドとバックエンド端分離アーキテクチャが主流になりました。フロントエンドとバックエンドの対話を実現するには、HTTP リクエストを送信して処理するためにいくつかのツールを使用する必要があります。人気のフロントエンド フレームワークである Vue.js と、Promise ベースの HTTP ライブラリである Axios を組み合わせることで、フロントエンドとバックエンドの相互作用を簡単に実現できます。この記事では、Vue と Axios を使用してフロントエンドとバックエンドの対話型プロジェクトを構築する方法を初心者に紹介します。

ステップ 1: Vue プロジェクトを作成する
まず、Vue CLI (スキャフォールディング ツール) をインストールして、新しい Vue プロジェクトを作成する必要があります。ターミナルを開いて次のコマンドを実行します:

npm install -g @vue/cli

インストールが完了したら、次のコマンドを使用して新しい Vue プロジェクトを作成します:

vue create my-project

次に、プロジェクト ディレクトリに移動して、開発サーバー:

cd my-project
npm run serve

ブラウザで http://localhost:8080 を開くと、デフォルトの Vue ページが表示されるはずです。

ステップ 2: Axios をインストールして構成する
Vue プロジェクトで Axios を使用するには、最初に Axios をインストールする必要があります。ターミナルで次のコマンドを実行します:

npm install axios

インストールが完了したら、Axios を main.js ファイルにインポートします:

import axios from 'axios'

次に、Axios の基本的なグローバル リクエスト URL を構成する必要があります。 。 main.js ファイルの import ステートメントの後に、次のコードを追加します。

axios.defaults.baseURL = 'http://localhost:3000/api'

この方法で、Axios のデフォルトのリクエスト URL を指定します。これは、バックエンド サービスのアドレスに応じて変更できます。

ステップ 3: Axios を使用してリクエストを送信する
Vue プロジェクトと Axios の構成が完了したので、Axios を使用してリクエストを送信できるようになりました。以下に例を示します。

methods: {
  fetchData() {
    axios.get('/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

この例では、Vue インスタンスのメソッドで Axios を使用して GET リクエストを送信します。 Axios の get メソッドは Promise を返します。リクエストが成功した場合は then メソッドを使用してコールバックを処理し、catch メソッドを使用してコールバックを処理します。リクエストが失敗したとき。 response.data にアクセスすると、サーバーから返されたデータを取得できます。

ステップ 4: リクエスト パラメーターの処理
実際の開発では、いくつかのリクエスト パラメーターをバックエンドに渡す必要がある場合があります。以下は、クエリ パラメーターを含む GET リクエストの例です。

methods: {
  search(query) {
    axios.get('/search', { params: { q: query } })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

この例では、q という名前のクエリ パラメーターをバックエンドに渡します。 Axios の get メソッドの 2 番目のパラメータでは、クエリ パラメータを含むオブジェクト { params: { q: query } } を使用します。

概要:
この記事の導入部を通じて、Vue と Axios を使用してフロントエンドとバックエンドの対話型プロジェクトを構築する方法を学びました。まず、Vue プロジェクトを作成し、Axios をインストールしました。次に、Axios グローバル リクエスト URL を main.js ファイルに設定しました。最後に、Axios を使用して GET リクエストを送信し、リクエスト パラメータの処理方法を学習しました。

これは Vue と Axios の機能のほんの一部にすぎません。引き続き学習し、さらに多くの用途を探索できます。この記事が初心者にヘルプとガイダンスを提供し、フロントエンドとバックエンドの相互作用プロジェクトを正常に構築するのに役立つことを願っています。

コード例については付録を参照してください。

付録:
main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://localhost:3000/api'

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

以上が初心者向け必須: Vue と Axios を使用してフロントエンドとバックエンドのインタラクティブ プロジェクトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。