这次我们来看一个完整的个人博客管理项目实战基于 Spring Boot 3 和 Vue 3 实现。这个项目不是一个简单的 Demo而是一个企业级实战项目旨在帮助开发者从零到一构建一个功能完备、架构清晰的后台管理系统并附带了完整的源码和笔记。对于正在学习全栈开发、准备面试或希望深入理解 Spring Boot 3 与 Vue 3 整合的开发者来说这是一个非常值得动手实践的案例。项目的核心价值在于“手把手”和“企业级”。它不仅仅提供了代码更通过笔记和实战流程拆解了从环境搭建、技术选型、前后端分离开发、接口联调到部署上线的完整链路。本文将带你快速了解这个项目的核心功能、技术栈、部署方式以及如何通过它来巩固你的技术栈为进入大厂增加实战筹码。1. 核心能力速览能力项说明项目类型个人博客后台管理系统企业级实战项目技术栈后端Spring Boot 3, Spring Security, JWT, MyBatis-Plus, MySQL前端Vue 3, TypeScript, Vite, Element Plus, Pinia核心功能用户权限管理、文章CRUD、分类标签管理、评论审核、文件上传、数据统计仪表盘部署方式前后端分离部署支持 Docker 容器化需根据源码自行配置学习产出掌握前后端分离项目开发全流程、企业级代码规范、接口设计、权限控制方案适合人群Java/全栈初学者进阶、应届生丰富简历、面试前项目深度复盘2. 适用场景与使用边界这个项目主要适用于以下几个场景学习与进阶对于已经掌握 Spring Boot 和 Vue 基础语法的开发者需要通过一个完整的项目来串联知识点理解控制器、服务、数据访问层如何协作以及前端路由、状态管理、组件化开发的实际应用。简历项目项目具备“个人博客后台管理”这一清晰的应用场景且采用了主流的技术栈Spring Boot 3 Vue 3可以作为简历上的一个亮点项目在面试中展示自己的工程能力。技术栈整合实践项目涉及 JWT 无状态认证、Spring Security 权限控制、MyBatis-Plus 高效数据操作、Vue 3 组合式 API、Pinia 状态管理等实用技术是学习这些技术整合的最佳实践。代码规范参考企业级项目通常意味着更清晰的分层架构、统一的异常处理、规范的接口返回格式和日志记录本项目可作为学习良好编码风格的范本。使用边界与注意非生产级虽然标榜“企业级实战”但作为学习项目在安全性、高并发、异常恢复等方面可能与真实生产环境有差距直接上线需进行充分测试和加固。版权与用途源码和笔记用于个人学习与研究。如需商用请确保理解每一行代码并自行承担由此产生的数据安全、版权合规等风险。技术迭代Spring Boot 和 Vue 生态更新较快项目依赖的具体版本可能在未来需要升级适配。3. 环境准备与前置条件在开始克隆和运行项目之前请确保你的开发环境满足以下要求。这是项目能否成功启动的第一步。后端环境 (Spring Boot 3)JDK: 版本 17 或更高Spring Boot 3 必须要求 JDK 17。推荐使用 OpenJDK 17。Maven: 版本 3.6.3 或更高用于管理项目依赖和构建。MySQL: 版本 5.7 或 8.0。需要提前创建好数据库如blog_db。IDE: IntelliJ IDEA推荐或 Eclipse with STS 插件。前端环境 (Vue 3)Node.js: 版本 16.x 或更高推荐 18.x LTS。可在终端输入node -v检查。包管理器: npm 或 yarn。本项目通常使用 npm可通过npm -v检查。IDE: Visual Studio Code推荐或 WebStorm。通用工具Git: 用于克隆项目代码。Postman 或 Apifox: 用于测试后端 RESTful API。浏览器: Chrome 或 Edge用于前端开发和调试。检查清单java -version确认输出 JDK 17。mvn -v确认 Maven 安装成功。mysql -V确认 MySQL 服务已启动并可连接。node -v和npm -v确认 Node.js 环境就绪。4. 项目结构与源码获取一个清晰的项目结构是理解其架构的基础。典型的 Spring Boot 3 Vue 3 前后端分离项目会分为两个独立的工程。后端项目结构 (blog-backend)src/main/java/com/example/blog ├── config/ # 配置类安全、跨域、Swagger等 ├── controller/ # 控制层接收请求调用服务 ├── service/ # 业务逻辑层接口 ├── service/impl/ # 业务逻辑层实现 ├── mapper/ # MyBatis-Plus 的 Mapper 接口 ├── entity/ # 实体类对应数据库表 ├── dto/ # 数据传输对象请求/响应封装 ├── vo/ # 视图对象用于前端展示 ├── utils/ # 工具类JWT、加密、文件处理等 ├── filter/ # 过滤器如认证过滤器 ├── aspect/ # 切面如日志、事务 └── BlogApplication.java # Spring Boot 主启动类 resources/ ├── application.yml # 主配置文件数据库、服务器端口等 └── mapper/ # MyBatis XML 映射文件如使用前端项目结构 (blog-frontend)src/ ├── api/ # 封装所有后端 API 请求 ├── assets/ # 静态资源图片、样式 ├── components/ # 可复用 Vue 组件 ├── router/ # Vue Router 路由配置 ├── store/ # Pinia 状态管理 ├── utils/ # 前端工具函数 ├── views/ # 页面视图组件 ├── App.vue # 根组件 └── main.ts # 应用入口文件获取源码通常这类项目会托管在 Gitee 或 GitHub 上。你可以通过 Git 命令克隆请将[项目地址]替换为实际地址。git clone [项目地址] cd blog-project克隆后你会看到前后端分离的两个文件夹或者一个包含子模块的父工程。5. 后端启动与数据库配置后端服务是整个应用的核心必须先确保它正确运行。步骤 1导入项目并配置数据库使用 IDEA 打开后端项目文件夹 (blog-backend)。找到resources/application.yml(或application.properties) 文件。修改数据库连接配置包括 URL、用户名和密码。spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: your_password在你的 MySQL 中创建名为blog_db的数据库字符集建议utf8mb4。项目可能提供了 SQL 初始化脚本通常位于resources/sql目录下。在 MySQL 中执行该脚本创建表并初始化必要数据如管理员账号。步骤 2解决依赖与启动IDEA 会自动识别 Maven 项目并下载依赖查看底部进度条。如果网络问题导致下载慢可配置国内镜像源。依赖下载完毕后找到主启动类BlogApplication.java右键点击Run ‘BlogApplication‘。观察控制台日志如果没有报错并看到类似Tomcat started on port(s): 8080的信息说明后端启动成功。打开浏览器访问http://localhost:8080/doc.html如果集成了knife4j或http://localhost:8080/swagger-ui.html你应该能看到 API 文档界面这证明后端接口服务已就绪。关键点排查端口冲突如果 8080 端口被占用可以在application.yml中修改server.port。数据库连接失败检查 MySQL 服务是否启动用户名密码是否正确数据库名是否匹配。依赖下载失败检查 Maven 配置或尝试在项目根目录执行mvn clean install -DskipTests。6. 前端启动与跨域配置前端项目负责用户界面需要独立运行并与后端交互。步骤 1安装依赖使用 VS Code 打开前端项目文件夹 (blog-frontend)。打开终端Terminal确保路径在前端项目根目录。执行以下命令安装项目依赖此过程可能需要一些时间npm install # 或使用淘宝镜像加速 # npm install --registryhttps://registry.npmmirror.com步骤 2配置后端 API 地址前端需要知道后端服务的地址来发送请求。通常这个配置在环境变量或axios的全局配置文件中。找到配置文件常见位置是src/api/request.ts或.env.development文件。在配置文件中将后端 API 的基础地址指向你本地运行的后端服务例如http://localhost:8080。// 示例在 request.ts 中配置 baseURL import axios from ‘axios‘; const service axios.create({ baseURL: ‘http://localhost:8080‘, // 后端地址 timeout: 5000 });步骤 3解决跨域问题如果后端未配置前后端分离开发最常见的联调问题就是跨域。如果后端已经通过CrossOrigin注解或全局配置解决了跨域此步可略过。如果访问接口出现跨域错误可以在前端开发服务器配置代理。在项目根目录找到或创建vite.config.ts(Vite) 或vue.config.js(Vue CLI)。添加代理配置// vite.config.ts 示例 import { defineConfig } from ‘vite‘; export default defineConfig({ server: { proxy: { ‘/api‘: { // 将所有以 /api 开头的请求转发到后端 target: ‘http://localhost:8080‘, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ‘‘) } } } });同时需要将前端代码中请求的baseURL改为相对路径/api。步骤 4启动前端开发服务器在终端执行启动命令npm run dev # 或 npm run serve控制台会输出本地访问地址通常是http://localhost:5173或http://localhost:3000。用浏览器打开此地址即可看到博客管理系统的登录界面。7. 核心功能模块实战演练项目启动后我们通过操作主要功能模块来验证项目的完整性和学习其实现逻辑。7.1 用户登录与权限验证操作打开前端登录页使用初始化脚本中的管理员账号如 admin/123456登录。验证点登录成功后页面跳转到后台首页或仪表盘。浏览器Application-Storage-Local Storage中应能看到存储的tokenJWT令牌。后续的 API 请求在Headers中应自动携带Authorization: Bearer token。技术关联此流程涉及 Spring Security 的认证流程、JWT 的生成与校验、前端路由守卫拦截未登录访问和axios请求拦截器自动添加 token。7.2 文章管理CRUD这是博客系统的核心。创建文章在文章管理页面点击“新建”填写标题、分类、标签、内容富文本编辑器点击发布。后端观察在 IDEA 控制台查看 SQL 日志观察INSERT语句是否执行。检查数据库article表是否新增记录。查询文章返回文章列表页查看刚发布的文章是否显示。尝试使用分页、按分类/标签筛选、按标题搜索等功能。更新与删除对已有文章进行编辑更新或执行删除操作注意是否有逻辑删除标志deleted字段。技术关联MyBatis-Plus 的ServiceImpl快速 CRUD、Lambda 查询、分页插件Page、逻辑删除配置、富文本编辑器如wangEditor或Quill的集成与内容存储。7.3 分类与标签管理操作在分类/标签管理模块尝试创建、编辑、删除分类和标签。验证点创建文章时下拉选择框中应能出现新创建的分类和标签。这涉及到前端下拉框数据的动态获取与后端接口的联动。技术关联多对多关系文章-标签在数据库中的关联表设计以及在业务层和前端展示时的处理逻辑。7.4 文件上传功能操作在文章编辑器的图片上传或独立的文件上传组件中选择一张本地图片上传。验证点上传成功后前端应显示图片预览或返回可访问的图片 URL。在服务器指定目录如uploads/下应能找到上传的文件。通过返回的 URL 能在浏览器中直接访问该图片。技术关联Spring Boot 处理MultipartFile、配置文件上传大小限制、自定义文件存储路径、提供静态资源访问通过WebMvcConfigurer配置资源映射以及前端使用FormData进行文件上传。7.5 数据统计仪表盘操作登录后进入首页或仪表盘页面。验证点页面应展示关键数据如文章总数、分类数、标签数、近期访问趋势图表等。技术关联后端聚合查询使用GROUP BY或 MyBatis-Plus 的聚合方法、数据接口封装、前端图表库如ECharts或AntV的集成与数据绑定。8. 接口 API 设计与调用分析理解项目的接口设计是深入学习的重点。通过 API 文档如 Swagger可以清晰地看到所有端点。典型 RESTful 接口示例POST /api/auth/login- 用户登录GET /api/articles- 分页查询文章列表GET /api/articles/{id}- 获取文章详情POST /api/articles- 创建文章需要认证PUT /api/articles/{id}- 更新文章需要认证DELETE /api/articles/{id}- 删除文章需要认证GET /api/categories- 获取所有分类POST /api/upload- 文件上传使用 Postman 测试接口首先调用登录接口获取token。在后续需要认证的接口请求头中添加Authorization: Bearer your_token。测试文章创建接口发送 JSON 格式的请求体。{ “title“: “测试文章标题“, “content“: “这里是文章内容...“, “categoryId“: 1, “tagIds“: [1, 2] }观察返回的 HTTP 状态码成功应为 200和响应体通常包含code、msg、data的标准格式。接口设计亮点学习统一响应体所有接口返回格式统一便于前端处理。全局异常处理使用ControllerAdvice捕获并处理各类异常返回友好的错误信息。参数校验使用Validated注解和 JSR-303 校验规则如NotBlank对入参进行验证。9. 常见问题与排查方法在运行项目过程中你可能会遇到以下问题这里提供排查思路。问题现象可能原因排查方式解决方案前端npm install失败网络问题、Node.js 版本不兼容、依赖冲突查看终端报错信息通常是某个包下载失败或版本解析错误1. 使用npm cache clean --force清缓存后重试。2. 切换 npm 镜像源npm config set registry https://registry.npmmirror.com。3. 删除node_modules和package-lock.json重新npm install。后端启动时报数据库连接错误MySQL 服务未启动、配置错误、驱动类找不到检查application.yml中的数据库连接字符串、用户名密码检查 MySQL 服务状态查看依赖中是否有mysql-connector-j1. 启动 MySQL 服务。2. 核对配置文件确保数据库名已创建。3. 检查 Maven 依赖确保数据库驱动包已引入。前端访问后端接口 404后端服务未启动、接口路径错误、跨域问题1. 确认后端控制台无报错且已启动。2. 直接在浏览器访问后端接口完整路径如http://localhost:8080/api/articles。3. 查看浏览器开发者工具 Network 面板看请求是否发出响应状态码。1. 重启后端服务。2. 核对前端请求的 URL 是否与后端RequestMapping路径匹配。3. 按第6章节配置跨域。登录成功但后续请求 401/403Token 失效、未携带 Token、Token 格式错误、权限不足1. 检查前端请求头是否携带Authorization: Bearer token。2. 检查后端 Token 校验逻辑和过期时间设置。3. 查看接口是否需要特定角色权限。1. 确保登录后正确存储和发送 Token。2. 检查 Spring Security 配置的权限规则。3. 重新登录获取新 Token。文件上传失败或无法访问上传目录不存在、权限不足、静态资源未映射1. 查看后端日志是否有文件保存的 IO 异常。2. 检查配置的文件存储路径是否存在。3. 尝试通过完整服务器路径访问上传的文件。1. 在服务器创建上传目录。2. 检查WebMvcConfig中静态资源映射的配置是否正确。3. 确认文件上传大小限制配置。页面样式错乱或 JS 错误前端依赖未正确安装、组件引入错误、浏览器缓存查看浏览器控制台 (Console) 报错信息。1. 重新执行npm install。2. 根据控制台错误信息修复代码或引入方式。3. 尝试浏览器无痕模式或清除缓存。10. 项目扩展与进阶学习建议完成基础功能的运行和调试后你可以尝试以下方向进行深度学习和项目改造使其真正成为你的作品。引入 Redis 缓存将热点数据如网站配置、首页文章列表缓存到 Redis 中提升访问速度。学习 Spring Cache 与 Redis 的集成。实现搜索功能集成 Elasticsearch为文章内容提供全文检索能力比数据库LIKE查询更高效。增加评论与邮件通知完善评论模块当用户评论被回复时发送邮件通知。学习 Spring Boot 邮件发送和异步任务Async。接入第三方登录实现 GitHub、Gitee 等第三方 OAuth2 登录学习 Spring Security OAuth2 Client 的配置。容器化部署为前后端分别编写Dockerfile使用docker-compose.yml编排 MySQL、Redis、后端、前端服务实现一键部署。这是企业级发布的必备技能。编写单元测试为后端的 Service 层和 Controller 层编写 JUnit 单元测试保证代码质量。学习MockMvc测试控制器。前端性能优化分析前端打包体积使用路由懒加载、组件异步加载、CDN 引入第三方库等方式优化首屏加载速度。完善权限系统将现有的角色权限细化到按钮级别即基于资源的权限控制 RBAC实现更精细化的管理。这个 Spring Boot 3 Vue 3 的个人博客管理项目提供了一个绝佳的实战沙盒。它的价值不在于代码本身而在于通过它你能系统地走完一个现代 Web 应用从开发到部署的完整生命周期并触及企业开发中的诸多关键技术和设计思想。建议你在通读源码和笔记的基础上亲手敲一遍关键代码并尝试至少一项扩展功能。当你能够清晰地解释每一层代码的职责并成功对其进行改造时这份经历将成为你技术面试中强有力的谈资。