SpringBoot+Vue前后端分离项目结构

🤖 Assistant

1
2
3

# 🌱 SpringBoot + Vue 前后端分离项目结构

## 📁 项目根目录

project-root/
├── backend/ # 🖥️ SpringBoot 后端代码
├── frontend/ # 🖌️ Vue 前端代码
├── docs/ # 📚 项目文档
└── README.md # 📋 项目说明文件

1 2	## 🖥️ 后端结构 (SpringBoot)

backend/
├── src/
│ ├── main/
│ │ ├── java/com/example/
│ │ │ ├── config/ # ⚙️ 配置类
│ │ │ ├── controller/ # 🎮 API接口层
│ │ │ ├── service/ # 🔧 业务逻辑层
│ │ │ ├── repository/ # 💾 数据访问层
│ │ │ ├── model/ # 🧩 数据实体类
│ │ │ └── exception/ # ❌ 异常处理
│ │ └── resources/
│ │ ├── application.yml # 🛠️ 应用配置
│ │ └── static/ # 🏗️ 前端构建后资源（可选）
├── target/ # 📦 构建输出目录
└── pom.xml # 🧶 Maven依赖管理

1 2	## 🖌️ 前端结构 (Vue 3)

frontend/
├── public/ # 🏠 静态资源
├── src/
│ ├── api/ # 📡 接口请求封装
│ ├── assets/ # 🎨 静态资源
│ ├── components/ # 🧩 公共组件
│ ├── router/ # 🗺️ 路由配置
│ ├── store/ # 🏪 Vuex状态管理
│ ├── views/ # 🖼️ 页面组件
│ ├── App.vue # 🌐 根组件
│ └── main.js # ⚡ 入口文件
├── package.json # 📦 依赖管理
└── vite.config.js # ⚙️ Vite配置


## 🔄 交互流程
1. 🌐 用户访问前端页面 (Vue)
2. 📡 前端通过axios调用后端API (SpringBoot)
3. 🛠️ 后端处理请求并返回JSON数据
4. 🎨 前端动态渲染页面

## 🔧 开发环境

🛠️ 后端: JDK 17+ + IDE（IntelliJ IDEA/VSCode）
🎨 前端: Node.js 16+ + VSCode
📦 构建: Maven（后端） + Vite（前端）


## ⚠️ 注意事项
- 🔒 跨域配置（后端需添加`@CrossOrigin`或全局配置）
- 🔄 API文档建议使用Swagger
- 🌐 部署时前端打包后文件可放入后端static目录或单独部署

图标说明：📁 文件夹 🖥️ 后端 🎨 前端 ⚙️ 配置 📡 接口 🧩 组件