Spring Boot + Vue 前后端不分离应用

这是一个展示如何将 Vue 3 + Vite 前端与 Spring Boot 后端集成的示例项目，采用前后端不分离的架构。

技术栈

后端

• Spring Boot 5.3.19
• Spring Web MVC
• Jetty 服务器
• Jackson JSON 处理

前端

• Vue 3
• Vue Router 4
• Vite 构建工具
• Axios HTTP 客户端

项目结构

demo-spring5/
├── frontend/                 # Vue 前端项目
│   ├── src/
│   │   ├── components/      # Vue 组件
│   │   ├── App.vue         # 根组件
│   │   └── main.js         # 入口文件
│   ├── index.html          # HTML 模板
│   ├── package.json        # 前端依赖
│   └── vite.config.js      # Vite 配置
├── src/main/java/          # Java 后端代码
├── src/main/resources/static/ # 构建后的前端资源
├── build.sh               # 构建脚本
├── dev.sh                 # 开发脚本
└── pom.xml               # Maven 配置

快速开始

1. 安装依赖

确保已安装：

• Java 11 或更高版本
• Node.js 16 或更高版本
• Maven 3.6 或更高版本

2. 开发模式

# 启动开发环境（前端热重载 + 后端）
./dev.sh

这将同时启动：

• 前端开发服务器：http://localhost:3000
• 后端服务器：http://localhost:8080

3. 生产构建

# 构建整个应用
./build.sh

# 运行构建后的应用
mvn exec:java -Dexec.mainClass="com.dddpeter.app.WebApp"

开发说明

前端开发

前端代码位于 frontend/ 目录，使用 Vite 作为构建工具：

cd frontend
npm install          # 安装依赖
npm run dev         # 开发模式
npm run build       # 生产构建

后端开发

后端使用 Spring Boot，主要文件：

• WebApp.java - 应用入口
• AppWebConfig.java - Web 配置
• IndexController.java - API 控制器
• TestService.java - 业务服务

集成说明

1. 构建集成：Vite 构建输出到 src/main/resources/static/ 目录
2. 路由支持：Spring 配置了视图控制器，支持 Vue Router 的 History 模式
3. API 代理：开发模式下，前端通过 Vite 代理访问后端 API

API 端点

• GET /api/ - 获取欢迎消息
• GET /api/health - 健康检查

特性

• ✅ 前后端不分离架构
• ✅ 热重载开发体验
• ✅ 现代化 UI 设计
• ✅ 响应式布局
• ✅ 单页应用路由
• ✅ RESTful API 集成

部署

1. 运行 ./build.sh 构建项目
2. 将生成的 JAR 文件部署到服务器
3. 启动应用：java -jar target/demo-spring5-1.0-SNAPSHOT.jar

许可证

MIT License