vue が Springboot プログラムにリクエストを送信する方法-＆＃＆チュートリアル-php.cn

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

王林

リリース： 2023-05-13 17:07:06

転載

780 人が閲覧しました

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

1. Axios のインストール

Axios は、Vue と Spring Boot の間でメッセージを送信するのに役立つ人気のある JavaScript ライブラリです。 HTTPリクエスト。 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 &#39;axios&#39;;

export default {
  name: &#39;springboot-component&#39;,
  data() {
    return {
      response: null
    };
  },
  methods: {
    sendRequest() {
      axios.get(&#39;http://localhost:8080/api/data&#39;)
        .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 サイトの他の関連記事を参照してください。