前端使用 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 {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic 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!”。