Heim > Artikel > Web-Frontend > 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:
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
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“).
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.
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!