vueとjavaを統合する方法-フロントエンドQ&A-php.cn

vueとjavaを統合する方法

WBOY

リリース： 2023-05-11 09:58:06

オリジナル

1840 人が閲覧しました

フロントエンドテクノロジーの継続的な開発により、Vue はフロントエンド開発で人気のフレームワークとなり、Java はエンタープライズレベルのアプリケーション開発にとって重要な言語の 1 つとなり、この 2 つの統合も進んでいます。多くの企業にとって懸念事項です。この記事では、VueとJavaがどのように統合されるのか、統合の意味や方法について説明します。

1. 統合の重要性

Vue と Java の統合は、主にエンタープライズレベルのアプリケーションのニーズを満たすことを目的としており、フロントエンドとバックエンド間のシームレスな接続が含まれます。一部の大企業のアプリケーションは大規模なデータの送信と処理をサポートする必要があり、データをどのように送信して処理するかが統合の主要な課題です。

一般的に、フロントエンドは Vue を使用して開発され、バックエンドは Java を使用して開発されます。フロントエンドとバックエンドの分離モデルにより、フロントエンドとバックエンドの開発を並行して実行できるため、調整コストと開発時間を削減できます。ただし、フロントエンドとバックエンドの分離は、フロントエンドとバックエンドの 2 つのモジュールが相互に対話して通信する必要があることも意味し、そのためには統合が必要になります。

2. 統合方法

RESTful API

RESTful API は、現在最も一般的なフロントエンドとバックエンドのデータ対話方法です。 Vue を簡単に統合できます。アプリケーションは Java バックエンドと統合されています。実際には、Vue の axios コンポーネントと Spring Boot の RestController アノテーションを対話メソッドとして使用できます。 Vue は axios コンポーネントを使用して、Spring Boot バックエンドの RestController に HTTP リクエストを送信します。Spring Boot は HTTP リクエストを解析し、最終的に JSON 形式で HTTP レスポンスを返します。Vue はレスポンスを処理してデータを表示します。

WebSocket

WebSocket は、ブラウザとサーバー間の双方向通信を可能にする HTML5 のプロトコルです。この方法は優れたリアルタイムパフォーマンスを備えており、オンラインチャット、オンラインゲーム、その他のシナリオなど、強力なリアルタイムパフォーマンスのニーズを満たすことができます。

Vue は、WebSocket API を使用して Java バックエンドと直接通信し、開発に Java の WebSocket API を使用できます。 Vue は、WebSocket を通じて Java バックエンドとの WebSocket 接続を確立し、Java はこの接続を通じてリアルタイムデータを Vue に送信し、Vue がデータを表示します。

3. 統合手順

Vue の設定

Vue では、axios コンポーネントをインストールし、npm install axios コマンドを使用してインストールする必要があります。。インストール後、Vue エントリファイルに axios への参照を追加するだけです。

Java バックエンドの構成

Java バックエンドでは、開発フレームワークとして Spring Boot を使用し、いくつかの依存関係を構成する必要があります。例:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

ログイン後にコピー

Vue の WebSocket リクエストを受信し、データを処理して Vue に返すように、Java で WebSocket エンドポイントを構成する必要もあります。

データの対話と通信の実装

上記の構成を完了したら、データの対話と通信の実現を開始できます。 RESTful API メソッドを使用する場合、Vue の axios コンポーネントを使用して HTTP リクエストを送信し、Java の Spring Boot フレームワークを使用してリクエストを受信し、JSON 形式で返されたデータを処理できます。その中で、Java では、@RestController アノテーションを使用してクラスまたはメソッドをマークし、それを RESTful API にする必要があります。

WebSocket メソッドを使用する場合は、Java の WebSocket Endpoint クラスを実装する必要があります。このクラスには、onOpen()、onClose()、および onMessage() の 3 つのメソッドが含まれている必要があります。 Vue は WebSocket にリクエストを送信し、Java バックエンドはリクエストを受信して必要なデータを Vue に送信し、Vue は WebSocket から受信したデータをリッスンします。

4. 例

Vue と Java の統合をより深く理解するために、例を通してそれを示します。ここでは「オンラインチャットルーム」を例に挙げます。

Vue の構成

Vue では、Element UI のコンポーネントを使用してチャットルームページレイアウトを実装できます。チャットルームのメインコンポーネントでは、リクエスト送信時の処理にaxiosコンポーネントを使用します。

<script>
import axios from 'axios'
export default {
  data() {
    return {
      message: '',
      chatRecords: []
    }
  },
  ...
  methods: {
    // 定义发送消息方法
    send: function() {
      let that = this
      axios.post('/chat/send', {
        message: that.message
      }).then(function (response) {
        that.chatRecords.push('我: ' + that.message)
        that.message = ''
      })
    }
  }
}
</script>

ログイン後にコピー

Java バックエンドの構成

Spring Boot フレームワークを使用して Java バックエンドを実装し、Spring Boot WebSocket 関連の依存関係を導入する必要があります。

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

ログイン後にコピー

バックエンドコードでは、WebSocket エンドポイントを定義できます。

@Component
@ServerEndpoint("/chat")
public class ChatWebSocket {
  private static final List<Session> sessions = new CopyOnWriteArrayList<Session>();
  
  @OnOpen
  public void onOpen(Session session) throws IOException {
    sessions.add(session);
  }
  
  @OnClose
  public void onClose(Session session) throws IOException {
    sessions.remove(session);
  }
  
  @OnMessage
  public void onMessage(String message, Session session) throws IOException {
    // 处理接收到的消息
    for (Session s : sessions) {
      s.getBasicRemote().sendText(message);
    }
  }
}

ログイン後にコピー

データの対話と通信を実現する

上記のコードでは、@ServerEndpoint("/chat") は、このクラスが WebSocket のエンドポイントであることを示しています。 @OnOpen、@OnClose、@OnMessage は、それぞれ接続を確立、接続を閉じ、メッセージを受信するためのイベントリスナーです。

Vue でメッセージを送信する場合、RESTful インターフェイスを呼び出すか、WebSocket に接続します。Java バックエンドは Vue からのリクエストを受け取り、処理後にデータを Vue に返します。後続のメッセージは WebSocket 経由でリアルタイムに通信されます。

<script>
import io from 'socket.io-client'
export default {
  ...
  mounted() {
    // 连接WebSocket
    var socket = io.connect('http://localhost:8080/chat');
    var that = this;

    // 监听服务端消息
    socket.on('message', function (data) {
      that.chatRecords.push(data);
    })
  }
}
</script>

ログイン後にコピー

チャットレコードをリアルタイムで表示するためのリスニングメソッドが Vue で定義されており、WebSocket はメッセージの受信時にこのメソッドを呼び出してデータを更新します。

5. 結論

Vue と Java の統合により、エンタープライズレベルのアプリケーション開発に大幅な改善がもたらされます。 Vue はフロントエンドビューの迅速な開発を実現するのに役立ち、Java はデータ処理と対話を実装できます。統合プロセス中は、統合方法の選択に注意を払い、その構成と実装の手順に従う必要があります。つまり、Vue と Java の統合は、プロジェクト開発効率とユーザーエクスペリエンスを大幅に向上させることができ、エンタープライズレベルのアプリケーションの開発にとって非常に重要です。

以上がvueとjavaを統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。