这次我们来看一个基于 SpringBoot 和 Vue3 的博客管理系统项目。这是一个典型的 JavaWeb 全栈实战案例采用前后端分离架构包含了博客文章、分类、标签、评论等核心功能模块的增删改查操作。对于正在学习 SpringBoot、Vue3 或寻找毕业设计、简历项目素材的同学来说这是一个结构清晰、可直接运行的参考项目。项目的核心价值在于提供了一个完整的、可落地的全栈开发样板。它不只是一个简单的 CRUD 演示而是涵盖了从后端 API 设计、数据库交互到前端组件化开发、路由管理的完整流程。本文将带你从零开始在半小时内完成项目的环境搭建、数据库初始化、前后端启动并验证其核心功能。无论你是想快速搭建一个个人博客后台还是深入学习前后端分离项目的工程化实践这篇文章都能提供一条清晰的路径。1. 核心能力速览在深入细节之前我们先通过一个表格快速了解这个项目的核心特性和技术栈帮助你判断它是否符合你的需求。能力项说明项目类型前后端分离的博客内容管理系统 (CMS)技术栈后端SpringBoot, MyBatis-Plus, MySQL前端Vue3, Element-Plus, Axios, Vue Router核心功能文章管理增删改查、分类/标签管理、评论管理、用户登录/权限控制通常包含部署方式本地开发环境运行需分别启动后端服务和前端项目启动门槛需本地安装 JDK 8、Node.js 16、MySQL 5.7 或 8.0、Maven、IDEA 或 VSCode硬件要求无特殊要求普通开发电脑即可运行适合场景JavaWeb/全栈学习、毕业设计、个人项目实践、简历项目素材、小型博客系统搭建项目亮点代码结构清晰、技术栈主流、功能模块完整、附源码可快速运行2. 适用场景与使用边界这个项目最适合以下几类开发者JavaWeb 初学者希望通过一个完整项目理解 SpringBoot 如何与 Vue 配合掌握 RESTful API 设计和前后端数据交互。全栈技能学习者正在从后端或前端转向全栈开发需要一个覆盖两端的技术栈实践项目。毕业设计寻找者需要一个功能完整、技术栈较新、有源码和文档的 JavaWeb 项目作为毕设基础。个人项目实践者想快速搭建一个博客后台并在此基础上进行二次开发或功能扩展。使用边界与注意事项非生产级该项目主要作为学习和演示用途在安全性如 SQL 注入防护、XSS 攻击防护、高并发、数据备份等方面可能未做深度优化直接用于生产环境需谨慎评估和加固。功能完整性通常包含后台管理功能前台展示页面可能较为简单或需要自行开发。版权与合规项目源码通常遵循开源协议如 MIT使用时请遵守对应协议。若用于商业用途请确保理解并遵守相关条款。项目中使用的第三方库如 Element-Plus也需遵守其各自的许可证。3. 环境准备与前置条件在开始部署之前请确保你的本地开发环境满足以下要求。这是项目能否成功运行的第一步。操作系统Windows 10/11, macOS, 或 Linux 发行版如 Ubuntu均可。开发工具后端IntelliJ IDEA推荐或 Eclipse。前端Visual Studio Code推荐或 WebStorm。运行环境与依赖Java 开发工具包 (JDK)版本 8 或以上推荐 JDK 11 或 17。在终端输入java -version验证。Node.js 与 npm版本 16.x 或以上推荐 18.x LTS。在终端输入node -v和npm -v验证。这是运行 Vue3 项目的基础。MySQL 数据库版本 5.7 或 8.0。确保 MySQL 服务已启动并记住 root 用户密码或你有权限创建数据库的用户。项目管理与构建工具Maven用于管理 SpringBoot 项目的依赖和构建。在终端输入mvn -v验证。ViteVue3 项目通常使用 Vite 作为构建工具它会随项目依赖自动安装。资源准备项目源码从提供的资料链接中下载完整的项目压缩包。磁盘空间预留至少 500MB 空间用于存放项目代码、依赖库和数据库。4. 安装部署与启动方式假设你已经获得了名为blog-management-system.zip的源码包。接下来我们分后端和前端两步进行部署。4.1 后端 (SpringBoot) 部署解压与导入将源码包解压你会看到类似blog-server后端和blog-admin前端的两个文件夹。使用 IDEA 打开blog-server文件夹作为项目。配置数据库使用 MySQL 客户端如命令行、Navicat、MySQL Workbench连接你的 MySQL 服务。创建一个新的数据库例如命名为blog_db字符集建议使用utf8mb4。CREATE DATABASE blog_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;修改配置文件在 IDEA 项目中找到src/main/resources/application.yml或application.properties文件。修改其中的数据库连接配置使其指向你刚创建的数据库。# application.yml 示例配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root # 替换为你的数据库用户名 password: your_password # 替换为你的数据库密码运行 SQL 脚本初始化表结构在项目资源目录通常是src/main/resources下寻找sql文件夹或单独的.sql文件。找到创建表的 SQL 脚本如schema.sql在 MySQL 中执行它以创建项目所需的表。启动后端服务在 IDEA 中找到主启动类通常是被SpringBootApplication注解的类如BlogApplication。右键点击该类选择Run ‘BlogApplication‘。观察控制台日志当看到类似Tomcat started on port(s): 8080或Started BlogApplication in X.XXX seconds的日志时表示后端 SpringBoot 服务已成功启动。4.2 前端 (Vue3) 部署打开前端项目使用 VSCode 打开解压后的blog-admin文件夹。安装依赖在 VSCode 的终端中导航到项目根目录执行以下命令安装项目所需的 npm 包。这个过程可能会持续几分钟。npm install # 或使用国内镜像加速 # npm install --registryhttps://registry.npmmirror.com配置 API 代理可选但推荐为了在开发时解决前端访问后端 API 的跨域问题需要配置 Vite 的代理。找到vite.config.js或vue.config.js文件进行如下配置假设后端运行在localhost:8080// vite.config.js 示例 import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { // 代理以 /api 开头的请求 target: http://localhost:8080, // 后端服务地址 changeOrigin: true, // rewrite: (path) path.replace(/^\/api/, ) // 如果需要重写路径 } } } })启动前端开发服务器在终端中执行以下命令。npm run dev命令执行成功后终端会输出本地访问地址通常是http://localhost:5173或http://localhost:3000。5. 功能测试与效果验证前后端都启动成功后打开浏览器访问前端地址如http://localhost:5173。你应该能看到登录页面或后台管理首页。下面我们进行核心功能的验证。5.1 用户登录测试测试目的验证前后端连通性及基础权限控制。操作步骤访问前端首页进入登录页。输入默认的管理员账号和密码通常在项目文档或sql脚本中提供常见如admin/admin123。点击登录。预期结果登录成功跳转到后台管理主界面通常包含仪表盘、菜单栏。失败排查检查后端服务是否在运行localhost:8080是否可访问。检查前端代理配置是否正确浏览器开发者工具 Network 标签页查看登录请求是否发送到了正确的后端地址。检查数据库用户表中是否存在对应的账号密码。5.2 文章管理模块测试 (CRUD)这是博客系统的核心。进入“文章管理”或类似菜单。新增文章点击“新增”或“写文章”按钮。填写文章标题、选择分类、添加标签、编辑内容通常集成富文本编辑器如 WangEditor。点击“发布”或“保存”。验证在文章列表页应能看到刚创建的文章。在数据库中article表应有一条新记录。查询与列表展示页面应能正常分页显示文章列表包含标题、分类、发布时间等信息。尝试使用搜索框根据标题关键词进行过滤。编辑文章在文章列表找到目标文章点击“编辑”。修改标题或内容后保存。验证刷新列表或再次进入编辑页确认修改已生效。删除文章点击文章列表项的“删除”按钮。确认删除操作。验证该文章应从列表消失数据库中对应记录被移除或标记为删除状态。5.3 分类与标签管理测试测试目的验证数据关联和基础数据维护功能。操作在“分类管理”和“标签管理”页面分别进行新增、编辑、删除操作。验证操作后列表即时更新。在新增文章时下拉框中能正确显示已创建的分类和标签供选择。5.4 数据一致性验证测试目的验证关联操作是否正常。操作删除一个已被某篇文章使用的分类。尝试发布一篇新文章选择这个已被删除的分类。预期与排查良好的系统设计应阻止删除已被引用的分类或提供外键约束。观察系统是弹出警告还是出现错误。这有助于你理解项目的业务逻辑严谨性。6. 接口 API 与后端服务验证除了前端操作直接测试后端 API 是验证其健壮性的好方法。使用 Postman 或 curl 命令进行测试。获取文章列表 API# 使用 curl 测试 curl -X GET http://localhost:8080/api/articles?page1size10预期返回 JSON 格式的分页文章数据。新增文章 APIcurl -X POST http://localhost:8080/api/articles \ -H Content-Type: application/json \ -H Authorization: Bearer YOUR_TOKEN \ # 如果启用了JWT等鉴权 -d { title: 测试API创建的文章, content: 这是通过curl直接调用API创建的内容。, categoryId: 1 }预期返回成功状态和创建的文章ID。验证要点响应状态码成功操作应返回200或201。响应数据结构是否符合项目约定的统一响应格式如{ code: 200, data: {...}, message: “success” }。错误处理尝试发送错误数据如空标题看API是否返回清晰的错误信息如400 Bad Request和具体错误描述。7. 项目结构与代码要点解析理解项目结构能帮助你进行二次开发或深入学习。后端 (blog-server) 典型结构src/main/java/com/example/blog/ ├── controller/ # 控制器层接收HTTP请求定义API接口 ├── service/ # 业务逻辑层实现核心业务 ├── impl/ # Service接口的实现类 ├── mapper/ # 数据访问层MyBatis-Plus的Mapper接口 ├── entity/ # 实体类与数据库表对应 ├── dto/ # 数据传输对象用于前后端交互 ├── vo/ # 视图对象用于返回给前端的数据封装 └── config/ # 配置类如跨域配置、Swagger配置等 resources/ ├── application.yml # 主配置文件 └── mapper/ # MyBatis XML映射文件如果使用前端 (blog-admin) 典型结构 (基于 Vue3 Vite)src/ ├── api/ # 封装所有对后端API的请求函数 ├── router/ # Vue Router路由配置 ├── store/ # Pinia状态管理如使用 ├── views/ # 页面级组件 ├── components/ # 可复用的公共组件 ├── utils/ # 工具函数 ├── assets/ # 静态资源 └── App.vue, main.js关键技术点前后端分离前端通过axios调用后端RESTful API进行数据交互。状态管理前端可能使用Pinia管理用户登录状态等全局数据。路由守卫前端通过 Vue Router 的导航守卫实现页面访问权限控制。MyBatis-Plus后端使用此框架简化单表 CRUD 操作注意查看其Service和Mapper的用法。统一响应封装后端通常会有一个Result或R类来统一所有API的响应格式。跨域处理后端通过CrossOrigin注解或全局配置类解决前端开发时通过代理解决。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案前端启动失败npm install报错1. Node.js 版本过低2. 网络问题导致依赖下载失败3. 项目依赖与当前Node版本不兼容1.node -v检查版本2. 查看报错信息是否指向某个特定包3. 尝试清除 npm 缓存1. 升级 Node.js 至 16 或 18 LTS2. 使用淘宝镜像npm config set registry3. 删除node_modules和package-lock.json重试npm install后端启动失败端口冲突本地 8080 端口被其他程序占用1. 控制台查看错误日志2. 使用命令netstat -ano | findstr :8080(Win) 或lsof -i :8080(Mac/Linux) 查看占用进程1. 终止占用端口的进程2. 修改application.yml中的server.port为其他端口如 8081并同步修改前端代理配置数据库连接失败1. 数据库服务未启动2. 配置文件中用户名密码错误3. 数据库驱动版本不匹配1. 检查 MySQL 服务状态2. 核对application.yml中的连接信息3. 查看启动日志中的具体SQL异常信息1. 启动 MySQL 服务2. 使用数据库客户端测试连接3. 检查pom.xml中 MySQL 驱动版本是否与数据库版本匹配前端页面能打开但列表无数据或登录失败1. 后端服务未启动2. 前端代理配置错误3. API 接口路径错误1. 浏览器按 F12打开开发者工具进入 Network 标签页查看页面发起的 API 请求2. 观察请求的 URL 和响应状态码1. 确保后端服务正在运行2. 检查vite.config.js中的proxy配置确保target正确3. 检查前端api目录下请求的baseURL或路径页面样式错乱Element-Plus 等 UI 库未正确引入或版本冲突1. 检查浏览器控制台是否有 CSS/JS 加载错误2. 检查main.js中是否正确导入并使用了 Element-Plus1. 确认npm install已成功安装element-plus2. 参照官方文档检查main.js中的引入语句和 Vue.use 调用执行删除等操作后列表未刷新前端未在操作成功后重新获取数据1. 查看对应 Vue 组件中的方法2. 确认在调用删除 API 成功后是否再次调用了获取列表数据的函数在删除成功的回调函数中手动调用一次获取列表数据的方法9. 二次开发与扩展建议成功运行基础项目后你可以考虑以下方向进行扩展使其更贴近实际需求或作为更复杂的毕设项目。增加用户角色与权限管理引入Spring Security或Sa-Token实现更精细的权限控制如管理员、普通用户、游客。设计用户-角色-权限表结构实现动态菜单和按钮级权限。丰富博客前台展示单独创建一个blog-web的 Vue3 项目作为面向访客的博客首页。实现文章列表、详情页、分类/标签归档、文章搜索、友链展示等功能。集成第三方功能评论系统集成Gitalk、Valine或自建评论模块支持回复和邮件通知。文件上传集成阿里云 OSS、腾讯云 COS 或本地存储支持文章图片、附件上传。内容搜索集成Elasticsearch实现全文检索提升搜索体验。数据统计集成百度统计或自建统计记录文章访问量。优化性能与体验后端为频繁查询的接口添加 Redis 缓存。前端使用路由懒加载、组件异步加载、图片懒加载优化首屏速度。部署学习使用 Docker 将前后端和数据库容器化编写docker-compose.yml一键部署。完善后台功能增加仪表盘展示文章数、访问量等统计图表可集成 ECharts。增加系统设置页面可动态配置网站标题、LOGO、页脚信息等。增加操作日志记录功能。这个 SpringBoot Vue3 的博客管理系统项目提供了一个非常扎实的起点。它的价值不在于功能有多炫酷而在于清晰地展示了一个现代 JavaWeb 全栈应用的标准架构和开发流程。从环境搭建、配置修改到功能验证整个过程本身就是一次宝贵的学习实践。建议你在成功运行的基础上多阅读源码理解其分层设计和数据流转并尝试进行一两个小功能的扩展这比单纯复制代码更能提升你的实际开发能力。项目源码和资料建议妥善保存作为你技术栈中的一个重要参考案例。