Analysieren Sie, wie Vue eine Anfrage an das Springboot-Programm sendet

Vue ist ein beliebtes JavaScript-Framework, mit dem Single-Page-Anwendungen erstellt werden können. Spring Boot ist ein beliebtes Java-Framework zum Erstellen von Webanwendungen. In vielen Fällen müssen Front-End-Anwendungen HTTP-Anfragen an Back-End-Anwendungen senden, um Daten abzurufen oder Vorgänge auszuführen. In diesem Artikel wird erläutert, wie Anforderungen an Spring Boot-Anwendungen in Vue-Anwendungen gesendet werden.

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 'axios';

export default {
  name: 'springboot-component',
  data() {
    return {
      response: null
    };
  },
  methods: {
    sendRequest() {
      axios.get('http://localhost:8080/api/data')
        .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. Spring Boot REST API erstellen

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 vonAnalysieren Sie, wie Vue eine Anfrage an das Springboot-Programm sendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!