Comment développer le framework Vue3+Spring Framework

1. Configuration de l'environnement

Pour utiliser Node.js et Java JDK sur votre ordinateur, vous devez d'abord les installer. Nous pouvons ensuite créer un projet Vue3 à l'aide de Vue CLI :

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

Ensuite, nous devons créer un projet Spring à l'aide de Spring Initializr :

• Accédez à Spring Initializr sur start.spring.io/.

• Sélectionnez les dépendances du projet et d'autres options de configuration.

• Cliquez sur le bouton "Générer" pour télécharger le package compressé du projet généré.

• Extraire le projet dans un dossier sur votre ordinateur.

Maintenant, nous sommes prêts à commencer le développement pratique de Vue3 et Spring.

2. Créer des composants Vue3

Les composants de Vue3 sont des blocs de code réutilisables utilisés pour créer l'interface utilisateur des applications Web. En utilisant le système de composants de Vue3, nous pouvons créer plusieurs composants et les appliquer aux composants parents.

Nous allons créer un simple composant Vue3 pour afficher le numéro de version de Spring Framework. Créez un fichier appelé SpringVersion.vue et ajoutez-y le code suivant : 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>

在该组件中，我们使用了d477f9ce7bf77f53fbcf36bec1b69b7a标签来定义组件的HTML内容。我们使用{{ version }}来显示从Spring Framework获取到的版本号。在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中，我们定义了组件的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

Dans ce composant, nous avons utilisé la balise d477f9ce7bf77f53fbcf36bec1b69b7a pour définir le contenu HTML. du composant. Nous utilisons {{ version }} pour afficher le numéro de version obtenu à partir de Spring Framework. Dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, nous définissons le code JavaScript du composant. Nous utilisons la méthode fetch() pour obtenir le numéro de version de Spring Framework et le stocker dans l'attribut de données version du composant. Nous avons également appelé la méthode fetch() dans le hook de cycle de vie Mounted(). 🎜🎜3. Créer un contrôleur Spring🎜🎜Dans Spring Framework, un contrôleur est une classe Java utilisée pour gérer les requêtes Web. Nous allons écrire un contrôleur simple qui renvoie le numéro de version de Spring Framework. 🎜🎜Créez un fichier appelé SpringController.java et ajoutez-y le code suivant : 🎜rrreee🎜Dans ce contrôleur, nous marquons la classe avec l'annotation @RestController, indiquant que la classe est un contrôleur. Nous marquons également la méthode version() avec l'annotation @GetMapping pour spécifier qu'il s'agit de la méthode qui gère les requêtes GET pour le /spring/version chemin. Cette méthode renvoie le numéro de version de Spring Framework. 🎜🎜4. Configurez le projet Spring🎜🎜Avant de pouvoir exécuter le projet Spring, nous devons effectuer une configuration. Pour que Spring Boot et Spring MVC puissent gérer les requêtes et les réponses Web, nous devons les configurer. 🎜🎜Tout d'abord, nous devons placer le fichier SpringController.java dans le dossier src/main/java/com/example/demo du projet Spring. Ensuite, nous devons ajouter l'annotation @ComponentScan dans le fichier DemoApplication.java pour indiquer à Spring où trouver le composant. Nous devons également ajouter une annotation @CrossOrigin pour autoriser les requêtes inter-domaines. 🎜rrreee🎜Maintenant, nous avons terminé la configuration du projet Spring. Nous pouvons démarrer le projet Spring avec la commande suivante : 🎜rrreee🎜 5. Utiliser les composants Vue3 et les contrôleurs Spring 🎜🎜Maintenant, nous sommes prêts à utiliser le composant SpringVersion et le contrôleur Spring dans l'application Vue3. Nous devons ajouter le composant SpringVersion à un composant parent de l'application Vue3 et l'introduire dans le composant en utilisant le code suivant : 🎜rrreee🎜 Nous pouvons maintenant récupérer le Spring Framework dans le numéro de version de l'application Vue3. Nous pouvons utiliser la commande suivante pour démarrer l'application Vue3 : 🎜rrreee🎜Visitez http://localhost:8080 dans le navigateur pour voir le numéro de version de Spring Framework. 🎜

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!