Comment intégrer vue et java

Avec le développement continu de la technologie front-end, Vue est devenu un framework populaire dans le développement front-end, tandis que Java est l'un des langages importants pour le développement d'applications au niveau de l'entreprise. devenu une préoccupation pour de nombreuses entreprises. Dans cet article, nous discuterons de la manière dont Vue et Java sont intégrés, ainsi que de la signification et des méthodes d'intégration.

1. Le sens de l'intégration

L'intégration de Vue et Java vise principalement à répondre aux besoins des applications de niveau entreprise, impliquant une connexion transparente entre le front-end et le back-end. Les applications de certaines grandes entreprises doivent prendre en charge la transmission et le traitement de données massives. La manière de transmettre et de traiter les données est la principale question d'intégration.

Généralement, le front-end est développé avec Vue et le back-end est développé avec Java. Le modèle de séparation front-end et back-end permet d'effectuer en parallèle le développement front-end et back-end, ce qui peut réduire les coûts de coordination et le temps de développement. Cependant, la séparation du front-end et du back-end signifie également que les deux modules front-end et back-end doivent interagir et communiquer entre eux, ce qui nécessite une intégration.

2. Méthode d'intégration

1. API RESTful

L'API RESTful est actuellement le front-end et le back-end le plus courant -méthode d'interaction de données de fin , cette méthode peut facilement intégrer les applications Vue et les backends Java. En pratique, nous pouvons utiliser le composant axios de Vue et l'annotation RestController de Spring Boot comme méthode d'interaction. Vue utilise le composant axios pour envoyer une requête HTTP au RestController dans le backend Spring Boot analyse la requête HTTP et renvoie enfin une réponse HTTP au format JSON. Vue affiche les données en traitant la réponse.

2. WebSocket

WebSocket est un protocole HTML5 qui permet une communication bidirectionnelle entre le navigateur et le serveur. Cette méthode offre de bonnes performances en temps réel et peut répondre aux besoins de performances en temps réel solides, telles que le chat en ligne, les jeux en ligne et d'autres scénarios.

Vue peut utiliser l'API WebSocket pour communiquer directement avec le backend Java et développer à l'aide de l'API WebSocket de Java. Vue établit une connexion WebSocket avec le backend Java via WebSocket. Java envoie des données en temps réel à Vue via cette connexion et Vue affiche les données.

3. Étapes d'intégration

1. Configuration de Vue

Dans Vue, nous devons installer le composant axios, utilisez npm install axios commande à installer. Après l'installation, ajoutez simplement une référence à axios dans le fichier d'entrée Vue.

2. Configurer le backend Java

Dans le backend Java, nous devons utiliser Spring Boot comme cadre de développement et devons configurer certaines dépendances. Par exemple :

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

Vous devez également configurer le point de terminaison WebSocket en Java pour recevoir la requête WebSocket de Vue, traiter les données et les renvoyer à Vue.

3. Réaliser l'interaction et la communication des données

Après avoir terminé la configuration ci-dessus, nous pouvons commencer à mettre en œuvre l'interaction et la communication des données. Lors de l'utilisation de la méthode API RESTful, nous pouvons utiliser le composant axios de Vue pour envoyer des requêtes HTTP et utiliser le framework Spring Boot de Java pour recevoir la requête et traiter les données renvoyées au format JSON. Parmi eux, en Java, vous devez utiliser l'annotation @RestController pour marquer une classe ou une méthode afin d'en faire une API RESTful.

Si vous utilisez la méthode WebSocket, nous devons implémenter la classe WebSocket Endpoint de Java, qui doit contenir trois méthodes : onOpen(), onClose() et onMessage(). Vue fera une demande à WebSocket, le backend Java recevra la demande et enverra les données requises à Vue, et Vue écoutera les données reçues de WebSocket.

4. Exemple

Afin de mieux comprendre l'intégration de Vue et Java, nous pouvons la démontrer à travers un exemple. Ici, nous prenons comme exemple le « salon de discussion en ligne ».

1. Configuration de Vue

Dans Vue, nous pouvons utiliser des composants d'Element UI pour implémenter la mise en page des salles de discussion. Dans le composant principal du salon de discussion, utilisez le composant axios pour le traitement lors de l'envoi des demandes.

<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>

2. Configurer le backend Java

Nous utilisons le framework Spring Boot pour implémenter le backend Java et devons introduire les dépendances liées à Spring Boot WebSocket.

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

Dans le code backend, nous pouvons définir WebSocket Endpoint.

@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);
    }
  }
}

3. Réaliser l'interaction et la communication des données

Dans le code ci-dessus, @ServerEndpoint("/chat") indique que cette classe est WebSocket Endpoint . @OnOpen, @OnClose et @OnMessage sont des écouteurs d'événements permettant respectivement d'établir une connexion, de fermer une connexion et de recevoir un message.

Lors de l'envoi d'un message dans Vue, l'interface RESTful sera appelée ou WebSocket sera connecté. Le backend Java reçoit la requête de Vue et renvoie les données à Vue après traitement. Les messages ultérieurs seront communiqués en temps réel via 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>

La méthode d'écoute est définie dans Vue pour afficher les enregistrements de discussion en temps réel. WebSocket appellera cette méthode pour actualiser les données lors de la réception d'un message.

5. Conclusion

L'intégration de Vue et Java peut apporter des améliorations significatives au développement d'applications au niveau de l'entreprise. Vue peut nous aider à réaliser un développement rapide de vues frontales, et Java peut mettre en œuvre le traitement et l'interaction des données. Pendant le processus d'intégration, nous devons prêter attention au choix de la méthode d'intégration et suivre les étapes pour la configurer et la mettre en œuvre. En bref, l'intégration de Vue et Java peut considérablement améliorer l'efficacité du développement de projets et l'expérience utilisateur, et revêt une grande importance pour le développement d'applications au niveau de l'entreprise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!