So entwickeln Sie das Vue3+Spring Framework-Framework

1. Umgebungseinrichtung

Um Node.js und Java JDK auf Ihrem Computer verwenden zu können, müssen Sie diese zuerst installieren. Anschließend können wir mit der Vue-CLI ein Vue3-Projekt erstellen:

rubyCopy code$ npm install -g @vue/cli
$ vue create vue-spring-demo

Dann müssen wir ein Spring-Projekt mit Spring Initializr erstellen:

• Zugriff auf Spring Initializr unter start.spring.io/.

• Wählen Sie Projektabhängigkeiten und andere Konfigurationsoptionen aus.

• Klicken Sie auf die Schaltfläche „Generieren“, um das generierte komprimierte Projektpaket herunterzuladen.

• Extrahieren Sie das Projekt in einen Ordner auf Ihrem Computer.

Jetzt sind wir bereit, mit der praktischen Entwicklung von Vue3 und Spring zu beginnen.

2. Erstellen Sie Vue3-Komponenten

Komponenten in Vue3 sind wiederverwendbare Codeblöcke, die zum Erstellen der UI-Schnittstelle von Webanwendungen verwendet werden. Mithilfe des Komponentensystems von Vue3 können wir mehrere Komponenten erstellen und diese auf übergeordnete Komponenten anwenden.

Wir erstellen eine einfache Vue3-Komponente, um die Versionsnummer des Spring Framework anzuzeigen. Erstellen Sie eine Datei mit dem Namen SpringVersion.vue und fügen Sie den folgenden Code hinzu: SpringVersion.vue的文件，并将以下代码添加到其中：

htmlCopy code<template>
  <div>
    <h3>Spring Framework Version:</h3>
    <p>{{ version }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      version: &#39;&#39;,
    };
  },
  mounted() {
    fetch(&#39;/spring/version&#39;)
      .then(response => response.text())
      .then(data => (this.version = data))
      .catch(error => console.error(error));
  },
};
</script>

在该组件中，我们使用了<template>标签来定义组件的HTML内容。我们使用{{ version }}来显示从Spring Framework获取到的版本号。在<script>标签中，我们定义了组件的JavaScript代码。我们使用fetch()方法来获取Spring Framework的版本号，并将其存储在组件的version数据属性中。我们还在mounted()生命周期钩子中调用了fetch()方法。

三、创建Spring控制器

在Spring Framework中，控制器是用于处理Web请求的Java类。我们将编写一个简单的控制器，用于返回Spring Framework的版本号。

创建一个名为SpringController.java的文件，并将以下代码添加到其中：

javaCopy codeimport org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SpringController {
    @GetMapping("/spring/version")
    public String version() {
        return org.springframework.core.SpringVersion.getVersion();
    }
}

在该控制器中，我们使用@RestController注解标记类，表示该类是一个控制器。我们还使用@GetMapping注解标记version()方法，以指定它是处理/spring/version路径的GET请求的方法。该方法返回Spring Framework的版本号。

四、配置Spring项目

在我们可以运行Spring项目之前，我们需要进行一些配置。为了让Spring Boot和Spring MVC能够处理Web请求和响应，我们需要对它们进行配置。

首先，我们需要将SpringController.java文件放入Spring项目的src/main/java/com/example/demo文件夹中。然后，我们需要在DemoApplication.java文件中添加@ComponentScan注解，以告诉Spring在哪里查找组件。我们还需要添加一个@CrossOrigin注解，以允许跨域请求。

javaCopy codeimport org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.CrossOrigin;
@SpringBootApplication
@ComponentScan("com.example.demo")
@CrossOrigin(origins = "*")
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

现在，我们已经完成了Spring项目的配置。我们可以使用以下命令启动Spring项目：

shellCopy code$ cd vue-spring-demo
$ ./mvnw spring-boot:run

五、使用Vue3组件和Spring控制器

现在，我们已经准备好在Vue3应用程序中使用SpringVersion组件和Spring控制器。我们需要将SpringVersion组件添加到Vue3应用程序中的某个父组件中，并使用以下代码在该组件中引入：

<template>
  <div>
    <spring-version></spring-version>
  </div>
</template>
<script>
import SpringVersion from &#39;./components/SpringVersion.vue&#39;;
export default {
  components: {
    SpringVersion,
  },
};
</script>

我们现在可在Vue3应用程序中检索Spring Framework的版本号。我们可以使用以下命令启动Vue3应用程序：

shellCopy code$ cd vue-spring-demo
$ npm run serve

在浏览器中访问http://localhost:8080rrreee

In dieser Komponente haben wir das Tag <template> verwendet, um den HTML-Inhalt zu definieren der Komponente. Wir verwenden {{ version }}, um die vom Spring Framework erhaltene Versionsnummer anzuzeigen. Im Tag <script> definieren wir den JavaScript-Code der Komponente. Wir verwenden die Methode fetch(), um die Versionsnummer des Spring Framework abzurufen und sie im Datenattribut version der Komponente zu speichern. Wir haben auch die Methode fetch() im Lebenszyklus-Hook mount() aufgerufen. 🎜🎜3. Erstellen Sie einen Spring-Controller🎜🎜Im Spring Framework ist ein Controller eine Java-Klasse, die zur Verarbeitung von Webanfragen verwendet wird. Wir werden einen einfachen Controller schreiben, der die Versionsnummer des Spring Framework zurückgibt. 🎜🎜Erstellen Sie eine Datei mit dem Namen SpringController.java und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜In diesem Controller markieren wir die Klasse mit der Annotation @RestController, um dies anzuzeigen Die Klasse ist ein Controller. Wir markieren außerdem die Methode version() mit der Annotation @GetMapping, um anzugeben, dass es sich um die Methode handelt, die GET-Anfragen für /spring/versionverarbeitet > Pfad. Diese Methode gibt die Versionsnummer des Spring Framework zurück. 🎜🎜4. Konfigurieren Sie das Spring-Projekt🎜🎜Bevor wir das Spring-Projekt ausführen können, müssen wir einige Konfigurationen vornehmen. Damit Spring Boot und Spring MVC Webanfragen und -antworten verarbeiten können, müssen wir sie konfigurieren. 🎜🎜Zuerst müssen wir die Datei SpringController.java in den Ordner src/main/java/com/example/demo des Spring-Projekts legen. Dann müssen wir die Annotation @ComponentScan in der Datei DemoApplication.java hinzufügen, um Spring mitzuteilen, wo sich die Komponente befindet. Wir müssen auch eine @CrossOrigin-Annotation hinzufügen, um domänenübergreifende Anfragen zu ermöglichen. 🎜rrreee🎜Jetzt haben wir die Konfiguration des Spring-Projekts abgeschlossen. Wir können das Spring-Projekt mit dem folgenden Befehl starten: 🎜rrreee🎜 5. Verwendung von Vue3-Komponenten und Spring-Controllern 🎜🎜Jetzt sind wir bereit, die SpringVersion-Komponente und den Spring-Controller in der Vue3-Anwendung zu verwenden. Wir müssen die SpringVersion-Komponente zu einer übergeordneten Komponente in der Vue3-Anwendung hinzufügen und sie mit dem folgenden Code in die Komponente einführen: 🎜rrreee🎜 Wir können jetzt die Versionsnummer des Spring Framework in der Vue3-Anwendung abrufen. Wir können den folgenden Befehl verwenden, um die Vue3-Anwendung zu starten: 🎜rrreee🎜Besuchen Sie http://localhost:8080 im Browser, um die Versionsnummer von Spring Framework anzuzeigen. 🎜

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie das Vue3+Spring Framework-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!