Comment vue envoie une requête au programme springboot

Voici les étapes à mettre en œuvre :

1. Installez Axios

Axios est une bibliothèque JavaScript populaire qui peut nous aider à envoyer des requêtes HTTP entre Vue et Spring Boot. Pour utiliser Axios, nous devons d'abord l'installer dans notre application Vue. Axios peut être installé à l'aide du gestionnaire de packages npm. Exécutez simplement la commande suivante dans le terminal :

npm install axios

2. Créez un composant Vue

Nous devons créer un composant Vue qui enverra des requêtes HTTP et affichera les données de réponse. Vous pouvez utiliser Vue CLI pour créer un nouveau projet Vue. Exécutez simplement la commande suivante dans le terminal :

vue create my-vue-app

Cette commande créera un nouveau projet Vue à l'aide de Vue CLI. Ensuite, nous devons créer un nouveau composant dans le projet. Créez un fichier nommé "springbootComponent.vue" dans le répertoire src/components. Le contenu du fichier est le suivant :

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

Dans le code ci-dessus, nous définissons un composant Vue nommé "springboot-component". Le composant contient un bouton et un élément div qui affiche les données réactives. Lorsque le bouton est cliqué, la méthode "sendRequest" est appelée. Cette méthode utilise Axios pour envoyer une requête HTTP GET à l'URL « http://localhost:8080/api/data » et définit les données de réponse dans le cadre des données du composant (c'est-à-dire « réponse »).

3. Créer une API REST Spring Boot

Nous devons créer une API REST Spring Boot pour recevoir les requêtes HTTP envoyées par l'application Vue et renvoyer les données de réponse. Dans cet exemple, nous allons créer une simple API REST qui renverra des nombres aléatoires. Créez un nouveau projet Spring Boot dans Eclipse ou Intellij IDEA et créez une classe appelée "DataController" comme indiqué ci-dessous :

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

Dans le code ci-dessus, nous avons défini une classe appelée "DataController", et définissons un mappage de requête GET nommé "getData ". Dans la méthode "getData", générez un nombre aléatoire entre 0 et 999 et renvoyez-le comme données de réponse.

4. Exécution des applications Vue et Spring Boot

Pour que les applications Vue et Spring Boot fonctionnent ensemble, nous devons exécuter les deux applications en même temps. Dans le terminal, ouvrez le répertoire de l'application Vue et exécutez la commande suivante :

npm run serve

Cette commande démarrera le serveur de développement Vue et nous permettra d'accéder à l'application dans le navigateur (par défaut, l'URL d'accès est "http:// localhost :8080").

Dans Eclipse ou Intellij IDEA, exécutez l'application Spring Boot. À ce stade, l'application Spring Boot commencera à écouter les requêtes HTTP sur l'URL « http://localhost:8080 ». L'application Vue utilisera cette URL pour envoyer des requêtes HTTP.

Dans un navigateur, accédez à l'application Vue. Cliquez sur le bouton "Envoyer la demande" et l'application Vue enverra une requête HTTP à l'application Spring Boot. L'application Spring Boot renvoie le nombre aléatoire sous forme de données de réponse et l'affiche dans l'application Vue.

Voici comment envoyer des requêtes à Spring Boot dans une application Vue. En utilisant Axios et l'API REST, nous pouvons facilement envoyer des données de requête et de réponse HTTP entre Vue et Spring Boot.

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!