vue が Springboot プログラムにリクエストを送信する方法を分析する

Vue は、シングルページ アプリケーションの構築に使用できる人気のある JavaScript フレームワークです。 Spring Boot は、Web アプリケーションを構築するための人気のある Java フレームワークです。多くの場合、フロントエンド アプリケーションは、データを取得したり操作を実行したりするために、バックエンド アプリケーションに HTTP リクエストを送信する必要があります。この記事では、Vue アプリケーションで Spring Boot アプリケーションにリクエストを送信する方法を紹介します。

実装する手順は次のとおりです:

1. Axios のインストール

Axios は、Vue と Spring Boot の間で HTTP リクエストを送信するのに役立つ人気のある JavaScript ライブラリです。 Axios を使用するには、まず Vue アプリケーションに Axios をインストールする必要があります。 Axios は、npm パッケージ マネージャーを使用してインストールできます。ターミナルで次のコマンドを実行するだけです:

npm install axios

2. Vue コンポーネントの作成

HTTP リクエストを送信し、応答データを表示する Vue コンポーネントを作成する必要があります。 Vue CLI を使用して、新しい Vue プロジェクトを作成できます。ターミナルで次のコマンドを実行するだけです:

vue create my-vue-app

このコマンドは、Vue CLI を使用して新しい Vue プロジェクトを作成します。次に、プロジェクトに新しいコンポーネントを作成する必要があります。 src/components ディレクトリに「springbootComponent.vue」という名前のファイルを作成します。ファイルの内容は次のとおりです:

<template>
  <div>
    <button v-on:click="sendRequest">发送请求</button>
    <div v-if="response">{{ response }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'springboot-component',
  data() {
    return {
      response: null
    };
  },
  methods: {
    sendRequest() {
      axios.get('http://localhost:8080/api/data')
        .then(response => this.response = response.data)
        .catch(error => console.log(error));
    }
  }
};
</script>

上記のコードでは、「springboot-component」という名前の Vue コンポーネントを定義します。このコンポーネントには、ボタンと、応答データを表示する div 要素が含まれています。ボタンがクリックされると、「sendRequest」メソッドが呼び出されます。このメソッドは、Axios を使用して HTTP GET リクエストを「http://localhost:8080/api/data」URL に送信し、レスポンス データをコンポーネント データ (つまり「レスポンス」) の一部として設定します。

3. Spring Boot REST API の作成

Vue アプリケーションによって送信された HTTP リクエストを受信し、応答データを返すために Spring Boot REST API を作成する必要があります。この例では、乱数を返す単純な REST API を作成します。 Eclipse または Intellij IDEA で新しい Spring Boot プロジェクトを作成し、以下に示すように「DataController」という名前のクラスを作成します。

@RestController
@RequestMapping("/api")
public class DataController {
   @GetMapping("/data")
   public int getData() {
      return new Random().nextInt(1000);
   }
}

上記のコードでは、「DataController」クラスという名前のクラスを定義し、GET リクエストを定義しました。 「getData」という名前のマッピング。 getDataメソッドでは0～999の乱数を生成し、レスポンスデータとして返します。

4. Vue および Spring Boot アプリケーションの実行

Vue と Spring Boot アプリケーションを連携させるには、両方のアプリケーションを同時に実行する必要があります。ターミナルで、Vue アプリケーション ディレクトリを開き、次のコマンドを実行します。

npm run serve

このコマンドにより、Vue 開発サーバーが起動し、ブラウザでアプリケーションにアクセスできるようになります (デフォルトでは、アクセス URL は「http」です) ://ローカルホスト:8080")。

Eclipse または Intellij IDEA で、Spring Boot アプリケーションを実行します。この時点で、Spring Boot アプリケーションは「http://localhost:8080」URL で HTTP リクエストのリッスンを開始します。 Vue アプリケーションは、この URL を使用して HTTP リクエストを送信します。

ブラウザで、Vue アプリケーションにアクセスします。 「リクエストの送信」ボタンをクリックすると、Vue アプリケーションは HTTP リクエストを Spring Boot アプリケーションに送信します。 Spring Boot アプリケーションは乱数を応答データとして返し、Vue アプリケーションに表示します。

これは、Vue アプリケーションで Spring Boot にリクエストを送信する方法です。 Axios と REST API を使用すると、Vue と Spring Boot の間で HTTP リクエストとレスポンス データを簡単に送信できます。

以上がvue が Springboot プログラムにリクエストを送信する方法を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。