前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序

前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序

前端（Vue 3）

首先，创建一个 Vue 3 项目。

1. 安装 Vue CLI

npm install -g @vue/cli 

2. 创建 Vue 项目

vue create frontend 

在交互式提示中，选择默认的 Vue 3 预设。

3. 修改 App.vue

在 frontend/src 目录下，修改 App.vue 文件：

<template>   <div id="app">     <h1>{{ message }}</h1>     <p v-if="error">{{ error }}</p>   </div> </template>  <script> export default {   data() {     return {       message: "Loading...",       error: null     };   },   created() {     fetch("http://localhost:8080/api/hello")       .then(response => {         if (!response.ok) {           throw new Error(\`HTTP error! status: \${response.status}\`);         }         return response.json();       })       .then(data => {         this.message = data.message;       })       .catch(error => {         this.error = error.toString();       });   } }; </script>  <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style> 

4. 运行前端项目

cd frontend npm run serve 

后端（Spring Boot）

接下来，创建一个 Spring Boot 项目。

1. 使用 Spring Initializr 创建项目

可以通过 Spring Initializr 创建项目，选择以下配置：

• Project: Maven
• Language: Java
• Spring Boot:
• Dependencies: Spring Web

下载项目并解压缩，或者通过命令行工具生成项目。

2. 创建 Spring Boot 项目结构

在项目的 src/main/java/com/example/demo 目录下，创建一个控制器类 HelloController.java：

package com.example.demo;  import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController;  @RestController public class HelloController {      @GetMapping("/api/hello")     public Message hello() {         return new Message("Hello, World!");     }      public static class Message {         private String message;          public Message(String message) {             this.message = message;         }          public String getMessage() {             return message;         }          public void setMessage(String message) {             this.message = message;         }     } } 

3. 创建 CORS 配置类

在项目的 src/main/java/com/example/demo 目录下，创建一个配置类 CorsConfig.java：

package com.example.demo;  import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;  @Configuration public class CorsConfig {      @Bean     public WebMvcConfigurer corsConfigurer() {         return new WebMvcConfigurer() {             @Override             public void addCorsMappings(CorsRegistry registry) {                 registry.addMapping("/api/**")                         .allowedOrigins("http://localhost:8081")                         .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD")                         .allowCredentials(true);             }         };     } } 

4. 运行 Spring Boot 应用

在项目根目录下运行：

./mvnw spring-boot:run 

整合前后端

确保 Vue 应用和 Spring Boot 应用同时运行。前端 Vue 应用将在 http://localhost:8081 上运行，后端 Spring Boot 应用将在 http://localhost:8080 上运行。

前端应用将通过 fetch 请求从后端获取数据，并显示在页面上。

项目结构

确保项目结构如下：

project-directory/ │ ├── frontend/ │   ├── public/ │   ├── src/ │   │   └── App.vue │   ├── package.json │   └── ... │ ├── backend/ │   ├── src/ │   │   ├── main/ │   │   │   ├── java/com/example/demo/ │   │   │   │   └── HelloController.java │   │   │   │   └── CorsConfig.java │   │   │   └── resources/ │   │   ├── test/ │   │   └── ... │   ├── mvnw │   ├── mvnw.cmd │   ├── pom.xml │   └── ... 

验证

1. 启动前端和后端应用：

   • 前端：npm run serve
   • 后端：./mvnw spring-boot:run

2. 访问 Vue 应用：在浏览器中打开 http://localhost:8081，查看是否显示 “Hello, World!”。