采用一体化项目结构，将 前端 frontend 与后端 backend 整合于同一根目录，通过配置构建工具输出前端资源至 backend/src/main/resources/Static，实现静态文件自动集成；后端使用 @RestController 提供 /api/v1/ 前缀的restful 接口 ，配合 CORS 允许前端域名访问；开发阶段前端利用vite 等工具的代理功能将 /api 请求转发至后端 8080 端口，兼顾热重载与跨域解决；前后端分离运行、统一接口规范、自动化 构建部署，提升协作效率与项目可维护性。
在现代 Web 开发中，javaScript前端 与spring Boot 后端的集成已成为主流 架构 。合理的项目结构不仅能提升开发效率，还能增强可维护性和团队协作性。以下是如何优化javascript 与spring boot项目结构并实现高效集成的操作指南。
统一项目结构布局
建议采用一体化的项目结构，将前端与后端整合在一个根目录下，便于版本控制和部署管理。
典型结构如下：
my-app/
├── backend/
│ ├── src/main/java/com/example/demo
│ ├── src/main/resources
│ └── pom.xml
├── frontend/
│ ├── public/
│ ├── src/
│ └── package.json
├── pom.xml (可选：根目录聚合构建）
└── README.md
这种分层结构清晰区分前后端代码，避免耦合，同时支持独立运行与打包。
立即学习“Java 免费学习笔记（深入）”；
前端构建输出集成到 Spring Boot
通过构建工具（如webpack、Vite）将前端资源编译后输出至 Spring Boot 的静态资源目录，实现无缝集成。
操作步骤：
- 配置前端构建工具，将打包输出路径设为 backend/src/main/resources/static
- 在 frontend/package.json 中添加构建脚本：
“build”: “vite build –outDir ../backend/src/main/resources/static” - 执行 npm run build 后，前端资源自动复制到后端资源目录
- Spring Boot 默认从 /static 提供静态文件，无需额外配置
API 接口规范化对接
前后端通过 RESTful API 通信，需统一接口规范以减少联调成本。
建议实践：
- 后端使用 @RestController 提供jsON 接口，路径统一前缀如 /api/v1/
- 前端请求库（如 axios） 封装 基础 URL，开发环境指向代理，生产环境自动匹配上下文路径
- 使用 CORS 配置允许前端域名访问：
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin(“http://localhost:3000”);
config.addAllowedMethod(“*”);
config.addAllowedHeader(“*”);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration(“/api/**”, config);
return source;
}
开发阶段热更新与代理配置
开发时保持前后端分离运行，利用代理解决跨域问题，同时享受各自热重载优势。
配置方式：
- 启动 Spring Boot 服务在 http://localhost:8080
- 前端启动本地开发服务器（如 Vite 默认在 3000 端口）
- 在 vite.config.js 中设置代理：
export default defineConfig({
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:8080’,
changeOrigin: true
}
}
}
}) - 前端代码直接请求 /api/user，由开发服务器代理至后端
基本上就这些关键点。合理规划结构、自动化构建集成、规范接口、优化开发体验，能让 JavaScript 与 Spring Boot 协同更顺畅。不复杂但容易忽略细节，坚持标准化能显著提升项目质量。
