Wie Vue eine Anfrage an das Springboot-Programm sendet

Hier sind die Schritte zur Implementierung:

1. Axios installieren

Axios ist eine beliebte JavaScript-Bibliothek, die uns beim Senden von HTTP-Anfragen zwischen Vue und Spring Boot helfen kann. Um Axios verwenden zu können, müssen wir es zuerst in unserer Vue-Anwendung installieren. Axios kann mit dem npm-Paketmanager installiert werden. Führen Sie einfach den folgenden Befehl im Terminal aus:

npm install axios

2. Erstellen Sie eine Vue-Komponente.

Wir müssen eine Vue-Komponente erstellen, die HTTP-Anfragen sendet und Antwortdaten anzeigt. Sie können die Vue-CLI verwenden, um ein neues Vue-Projekt zu erstellen. Führen Sie einfach den folgenden Befehl im Terminal aus:

vue create my-vue-app

Dieser Befehl erstellt ein neues Vue-Projekt mithilfe der Vue-CLI. Als nächstes müssen wir eine neue Komponente im Projekt erstellen. Erstellen Sie eine Datei mit dem Namen „springbootComponent.vue“ im Verzeichnis src/components. Der Dateiinhalt lautet wie folgt:

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

Im obigen Code definieren wir eine Vue-Komponente mit dem Namen „springboot-component“. Die Komponente enthält eine Schaltfläche und ein div-Element, das die Reaktionsdaten anzeigt. Beim Klicken auf die Schaltfläche wird die Methode „sendRequest“ aufgerufen. Diese Methode verwendet Axios, um eine HTTP-GET-Anfrage an die URL „http://localhost:8080/api/data“ zu senden und setzt die Antwortdaten als Teil der Komponentendaten (d. h. „Antwort“).

3. Erstellen Sie eine Spring Boot REST API

Wir müssen eine Spring Boot REST API erstellen, um von der Vue-Anwendung gesendete HTTP-Anfragen zu empfangen und Antwortdaten zurückzugeben. In diesem Beispiel erstellen wir eine einfache REST-API, die Zufallszahlen zurückgibt. Erstellen Sie ein neues Spring Boot-Projekt in Eclipse oder Intellij IDEA und erstellen Sie eine Klasse namens „DataController“, wie unten gezeigt:

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

Im obigen Code haben wir eine Klasse namens „DataController“ definiert und eine GET-Anforderungszuordnung mit dem Namen „getData“ definiert ". Generieren Sie in der Methode „getData“ eine Zufallszahl zwischen 0 und 999 und geben Sie diese als Antwortdaten zurück.

4. Ausführen von Vue- und Spring Boot-Anwendungen

Damit Vue- und Spring Boot-Anwendungen zusammenarbeiten, müssen wir beide Anwendungen gleichzeitig ausführen. Öffnen Sie im Terminal das Vue-Anwendungsverzeichnis und führen Sie den folgenden Befehl aus:

npm run serve

Dieser Befehl startet den Vue-Entwicklungsserver und ermöglicht uns den Zugriff auf die Anwendung im Browser (standardmäßig lautet die Zugriffs-URL „http:// localhost :8080").

Führen Sie in Eclipse oder Intellij IDEA die Spring Boot-Anwendung aus. An diesem Punkt beginnt die Spring Boot-Anwendung, auf HTTP-Anfragen auf der URL „http://localhost:8080“ zu warten. Die Vue-Anwendung verwendet diese URL zum Senden von HTTP-Anfragen.

Greifen Sie in einem Browser auf die Vue-Anwendung zu. Klicken Sie auf die Schaltfläche „Anfrage senden“ und die Vue-Anwendung sendet eine HTTP-Anfrage an die Spring Boot-Anwendung. Die Spring Boot-Anwendung gibt die Zufallszahl als Antwortdaten zurück und zeigt sie in der Vue-Anwendung an.

So senden Sie Anfragen an Spring Boot in einer Vue-Anwendung. Durch die Verwendung von Axios und der REST-API können wir problemlos HTTP-Anfrage- und Antwortdaten zwischen Vue und Spring Boot senden.

Das obige ist der detaillierte Inhalt vonWie Vue eine Anfrage an das Springboot-Programm sendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!