30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度这次我们来看一个半小时就能搭建完成的 SpringBoot Vue3 前后端分离博客管理系统。对于正在寻找 JavaWeb 项目练手、准备毕业设计或者想快速搭建一个个人博客后台的同学来说这个项目非常值得一试。它整合了当前主流的技术栈提供了完整的增删改查功能并且源码结构清晰可以拿来即用。这个项目的核心价值在于“快”和“全”。你不需要从零开始配置环境、设计数据库、编写基础 CRUD 代码它已经为你准备好了前后端分离的完整框架。前端使用 Vue3 Element Plus界面现代后端基于 SpringBoot MyBatis-Plus开发高效。无论是学习前后端交互、理解 RESTful API 设计还是作为简历上的一个完整项目展示它都能满足需求。本文将带你从零开始在半小时内完成这个博客管理系统的本地部署和运行。我们会重点关注环境准备、项目启动、核心功能验证以及常见问题的排查。即使你是 JavaWeb 的初学者跟着步骤走也能顺利跑起来。1. 核心能力速览在动手之前我们先快速了解这个项目的关键信息判断它是否符合你的需求。能力项说明项目类型前后端分离的博客内容管理系统 (CMS)技术栈后端SpringBoot, MyBatis-Plus, MySQL前端Vue3, Element Plus, Vite, Axios核心功能用户登录、博客文章管理增删改查、分类/标签管理、评论管理可能硬件门槛普通开发电脑即可无特殊 GPU 要求。主要依赖 JDK、Node.js、MySQL。启动方式后端通过 IDE如 IDEA启动或 Maven 命令启动前端通过 npm 或 yarn 启动。是否支持 API是后端提供标准的 RESTful API 供前端调用。是否支持批量任务通常指后台的数据导出、批量删除等管理功能项目应具备基础能力。适合场景JavaWeb 学习、毕业设计/课程设计、个人博客搭建、简历项目实践、前后端分离架构理解。从表格可以看出这是一个典型的教学与实践相结合的项目。它的重点不在于处理海量数据或高并发而在于提供一个完整、规范、可运行的现代 Web 应用范例。2. 适用场景与使用边界这个项目最适合谁Java 后端初学者想通过一个完整项目学习 SpringBoot、MyBatis-Plus 如何与数据库交互如何设计 Controller、Service、Mapper 分层架构。前端初学者Vue3想了解如何使用 Vue3 的 Composition API、组件化开发以及如何通过 Axios 与后端 API 通信。全栈学习爱好者希望亲手实践一次前后端分离项目的完整搭建、联调与部署流程。毕业生急需一个结构清晰、功能完整、技术栈较新的项目作为毕业设计或课程设计。面试准备者需要一个能写在简历上并能清晰阐述技术选型、模块设计和难点解决的项目。它能解决什么问题技能验证为你提供一个可运行、可演示的“作品”证明你掌握了相关技术栈。学习脚手架基于此项目你可以轻松扩展新功能如用户权限、文件上传、全文搜索深入理解框架原理。快速原型如果你需要一个简单的博客后台来管理自己的文章它可以作为快速启动的基础。不适合什么场景高并发生产环境项目通常未经过深入的性能优化、安全加固和压力测试直接用于高流量生产环境存在风险。复杂业务系统它是一个标准的 CMS如果业务逻辑非常复杂或特殊需要在其基础上进行大量重构。无编程基础虽然目标是半小时搭建但仍需具备基础的 Java、JavaScript 和数据库知识。使用边界与合规提醒代码版权使用开源项目源码进行学习和毕业设计是常见的但如果用于商业用途请务必仔细阅读项目附带的许可证如 MIT、GPL遵守相关条款。数据安全如果部署在公网务必修改默认的数据库密码、管理员账号密码并考虑增加安全防护措施。内容合规作为博客系统发布的内容需遵守法律法规项目使用者应承担内容管理责任。3. 环境准备与前置条件在开始“半小时搭建”之前请确保你的开发环境已经就绪。以下是必须安装的组件及其推荐版本。1. 后端开发环境JDK版本 8 或 11推荐 11。SpringBoot 2.x 对 JDK 8 兼容性好SpringBoot 3.x 则需要 JDK 17。根据项目源码的pom.xml判断。检查命令java -versionMaven用于管理项目依赖和构建。版本 3.6。检查命令mvn -vIDEIntelliJ IDEA社区版或旗舰版或 Eclipse。IDEA 对 SpringBoot 支持更好推荐使用。MySQL版本 5.7 或 8.0。这是最常用的数据库。检查命令登录 MySQL 客户端如mysql -u root -p2. 前端开发环境Node.js版本 16推荐 18 LTS。Vue3 和 Vite 需要较新的 Node 版本。检查命令node -v和npm -v包管理器npm随 Node.js 安装或 yarn。本文示例使用 npm。3. 数据库准备启动你的 MySQL 服务。创建一个新的数据库例如blog_db字符集建议使用utf8mb4。CREATE DATABASE blog_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;4. 项目源码从提供的“附源码资料”中获取项目压缩包并解压到一个没有中文和空格的路径下。通用检查清单[ ] JDK 已安装且环境变量配置正确。[ ] Maven 已安装且镜像源如阿里云镜像配置正确加速依赖下载。[ ] MySQL 服务已启动并记得 root 密码。[ ] Node.js 和 npm 已安装。[ ] IDE如 IDEA已准备好。[ ] 源码已下载并解压。4. 安装部署与启动方式我们的目标是“半小时运行”所以步骤要清晰。整个过程分为后端启动和前端启动两部分。4.1 后端 SpringBoot 项目启动步骤 1导入项目到 IDEA打开 IntelliJ IDEA。选择File-Open找到并选择解压后的后端项目根目录通常包含pom.xml的文件夹。IDEA 会自动识别为 Maven 项目并开始导入依赖。等待右下角进度条完成。步骤 2配置数据库连接在项目中找到配置文件通常是src/main/resources/application.yml或application.properties。修改其中的数据库连接信息包括url、username和password使其指向你刚创建的blog_db。# 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_here # 替换为你的MySQL密码# application.properties 示例 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai spring.datasource.usernameroot spring.datasource.passwordyour_password_here步骤 3执行 SQL 脚本初始化数据库在项目资源目录如src/main/resources或项目根目录的sql文件夹下找到数据库初始化脚本如blog.sql或schema.sql。使用 MySQL 客户端如 Navicat、MySQL Workbench 或命令行连接你的数据库然后执行这个 SQL 文件。这将创建所需的表结构和初始数据如管理员账号。步骤 4启动后端服务方式一推荐在 IDEA 中找到主启动类通常是被SpringBootApplication注解的类如BlogApplication.java右键点击选择Run ‘BlogApplication’。方式二在项目根目录下打开终端执行 Maven 命令mvn spring-boot:run启动成功标志控制台输出中包含Tomcat started on port(s): 8080或类似信息并且没有报错。此时你可以尝试在浏览器访问http://localhost:8080如果项目有简单的欢迎页或者访问http://localhost:8080/doc.html如果集成了 Swagger/Knife4j 接口文档来确认后端 API 服务已正常运行。4.2 前端 Vue3 项目启动步骤 1打开前端项目使用 VS Code、WebStorm 或 IDEA 打开解压后的前端项目目录通常是一个包含package.json和vite.config.js的文件夹。步骤 2安装依赖在终端中进入前端项目根目录。执行以下命令安装项目所需的所有 npm 包npm install # 或使用淘宝镜像加速 # npm install --registryhttps://registry.npmmirror.com这个过程可能会持续几分钟取决于网络速度。步骤 3配置后端 API 地址前端需要知道后端服务的地址。配置文件通常位于src/config目录下或根目录的.env、.env.development文件中。找到配置后端基础 URL 的地方例如在src/config/index.js或src/utils/request.js中// 示例在 axios 的 baseURL 中配置 const service axios.create({ baseURL: http://localhost:8080, // 确保这里指向你的后端服务地址和端口 timeout: 5000 });如果后端运行在8080端口且前端在本地开发通常无需修改。如果端口不同或需要部署到服务器则必须修改。步骤 4启动前端开发服务器在终端中执行启动命令npm run dev # 或 npm run serve具体命令请查看package.json中的scripts部分。启动成功标志终端输出类似VITE v4.x.x ready in xxx ms的信息并提示Local: http://localhost:5173端口可能是 3000, 8081 等。在浏览器中访问这个本地地址应该能看到博客管理系统的登录界面或首页。5. 功能测试与效果验证系统启动后我们需要验证核心功能是否正常。按照用户从登录到管理内容的流程进行测试。5.1 登录功能测试测试目的验证用户认证系统是否正常工作能否进入管理后台。操作步骤访问前端本地地址如http://localhost:5173。在登录页面输入初始化 SQL 脚本中提供的默认管理员账号和密码常见如admin/admin123。点击登录。预期结果登录成功页面跳转到后台管理首页Dashboard。判断成功能看到后台管理菜单如文章管理、分类管理、用户管理等并且没有弹出错误提示。常见失败登录失败提示“用户名或密码错误”。检查数据库用户表数据是否正确初始化密码是否是加密存储可能需要使用初始化密码的明文。登录后页面空白或报错。检查浏览器控制台F12的 Network 和 Console 标签页查看 API 请求是否成功状态码 200以及是否有 JavaScript 错误。很可能是前端配置的 API 地址不对。5.2 博客文章管理增删改查测试这是博客系统的核心。测试目的验证对博客文章的基本操作是否完整。操作步骤点击“文章管理”或类似菜单。查Read页面应加载出文章列表可能是空的或有一些示例数据。增Create点击“新增”或“写文章”按钮进入编辑页面。填写标题、选择分类、填写内容可能支持富文本编辑器点击“发布”或“保存”。改Update在文章列表找到刚创建的文章点击“编辑”。修改一些内容然后保存。删Delete点击文章列表的“删除”按钮确认删除。预期结果列表查询正常。新增文章后列表立即刷新或能查到新文章。编辑后文章内容被更新。删除后文章从列表中消失。判断成功所有操作均有明确的成功提示如“操作成功” toast且数据变化能实时反映在界面上。同时检查数据库article或blog_post表数据应同步变化。常见失败新增/编辑时富文本编辑器图片上传失败。检查后端文件上传接口配置和存储路径。删除失败提示外键约束。检查文章是否有关联数据如评论未级联删除。5.3 分类与标签管理测试测试目的验证文章分类和标签的维护功能。操作步骤类似文章管理尝试创建、编辑、删除一个分类或标签。预期结果在文章编辑页面能正确选择到新创建的分类和标签。判断成功分类/标签数据与文章关联正确。5.4 前端路由与页面切换测试测试目的验证 Vue Router 工作是否正常页面切换是否流畅。操作步骤点击左侧导航栏的不同菜单项如“文章管理”、“分类管理”、“系统设置”等。预期结果页面内容相应切换URL 地址栏发生变化且没有整页刷新。判断成功单页应用SPA体验正常。6. 接口 API 与批量任务理解前后端如何通过 API 交互是掌握这个项目的关键。6.1 后端 API 接口探查启动后端服务后如果项目集成了 API 文档工具如 Swagger 或 Knife4j访问其 UI 界面是了解所有接口的最佳方式。访问地址通常是http://localhost:8080/doc.html(Knife4j) 或http://localhost:8080/swagger-ui.html(Swagger)。在文档中你可以看到所有控制器Controller的列表。每个接口的请求方式GET/POST/PUT/DELETE、路径、简要说明。请求参数和响应体的数据结构。尝试调用在文档页面找到文章相关的接口例如POST /api/article。点击“Try it out”填写 JSON 格式的请求参数然后执行。观察响应结果这能帮你理解后端接收和返回数据的格式。6.2 使用工具模拟 API 调用Postman/cURL除了在文档界面测试使用专业工具能更灵活地验证接口。使用 Postman新建一个请求方法选择POSTURL 填写http://localhost:8080/api/article。在Headers中添加Content-Type: application/json。在Body中选择raw和JSON输入创建文章的 JSON 数据。{ title: 测试API创建的文章, categoryId: 1, content: 这是通过Postman直接调用API创建的内容。, status: 1 }点击Send查看响应状态码是否为200响应体是否包含成功信息或创建的文章ID。使用 cURL命令行curl -X POST http://localhost:8080/api/article \ -H Content-Type: application/json \ -d {title:cURL测试文章,categoryId:1,content:cURL创建,status:1}6.3 前端如何调用 API查看前端代码理解调用逻辑。通常会在src/api目录下找到各个模块的 API 封装文件。// 示例src/api/article.js import request from /utils/request // 导入封装好的axios实例 export function getArticleList(params) { return request({ url: /article/list, method: get, params }) } export function addArticle(data) { return request({ url: /article, method: post, data }) }在 Vue 组件中会引入这些 API 函数并调用import { getArticleList, addArticle } from /api/article export default { methods: { async loadArticles() { const res await getArticleList({ page: 1, size: 10 }) this.tableData res.data.records }, async handleAdd() { await addArticle(this.form) this.$message.success(添加成功) this.loadArticles() // 刷新列表 } } }6.4 批量任务处理在博客管理系统中“批量任务”可能体现为批量删除文章前端传递一个文章ID数组后端循环删除或使用delete inSQL。批量导出文章后端查询列表使用 POI 等库生成 Excel 文件供下载。批量修改文章状态如批量发布/下架。关键点后端接口需要设计为支持接收数组参数。前端在调用批量接口时需要注意数据格式和可能存在的性能问题如一次删除过多数据。在测试时可以尝试选择多条数据执行批量操作观察后端日志和数据库变化。7. 资源占用与性能观察对于 JavaWeb 项目性能观察主要集中在 JVM 内存、数据库连接和前端资源加载上。1. 后端服务资源占用观察工具IDEA 的运行控制台、JConsole、VisualVM或 Spring Boot Actuator 端点如果开启。关键指标内存启动后观察堆内存Heap占用。一个简单的 SpringBoot 博客项目初始堆内存可能在 200-500MB。随着请求增多内存会上升并触发 GC。CPU在空闲状态下 CPU 占用应很低。执行大量数据库操作或复杂业务时CPU 使用率会短暂升高。线程数Tomcat 线程池的活跃线程数。正常情况不应持续增长。启动时关注如果启动非常慢可能是 Maven 在下载依赖或者数据库连接失败在重试。检查网络和数据库配置。2. 数据库连接池项目通常使用 HikariCP 或 Druid 作为数据库连接池。在application.yml中配置了最大连接数等参数。常见问题如果配置不当可能出现连接泄露导致连接池耗尽后续请求无法获取数据库连接而报错。在压力测试或频繁操作后观察应用日志是否有相关错误。3. 前端资源加载性能观察工具浏览器开发者工具的Network标签页。关键指标页面加载时间首次打开管理页面加载 JS、CSS 等静态资源的时间。API 响应时间每个前端发起的 API 请求的耗时Time。正常情况下应在几百毫秒内。优化点如果发现chunk-vendors.js文件过大1MB说明第三方依赖包很大。在生产环境需要通过构建工具Vite/Webpack进行代码分割、压缩和 Tree Shaking 来优化。4. 简单压力测试可选使用 Apache JMeter 或wrk工具对核心 API如文章列表查询GET /api/article进行简单的并发请求测试观察响应时间和错误率。这对于理解项目在高并发下的表现很有帮助。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突端口 8080 被其他程序占用控制台报错Port 8080 was already in use1. 在application.yml中修改server.port。2. 命令行查找占用进程并结束netstat -ano | findstr :8080前端npm install失败网络问题或 node 版本不兼容查看 npm 错误日志通常包含ETIMEDOUT或not compatible1. 切换 npm 镜像源npm config set registry https://registry.npmmirror.com2. 检查package.json中要求的 node 版本升级或使用 nvm 切换版本。前端运行npm run dev报错依赖缺失或配置文件错误查看终端报错信息通常指向某个具体文件或模块1. 删除node_modules和package-lock.json重新npm install。2. 检查vite.config.js等配置文件是否有语法错误。数据库连接失败数据库配置错误、服务未启动、密码错误、时区问题后端启动时控制台报Communications link failure或Access denied1. 核对application.yml中的url,username,password。2. 确认 MySQL 服务已启动。3. 确认数据库blog_db已创建。4. 在连接 URL 中加上serverTimezoneAsia/Shanghai。登录失败提示“用户名密码错误”数据库用户表无数据、密码加密方式不匹配1. 检查数据库user表是否有初始用户。2. 检查后端密码校验逻辑比对明文还是加密后的密文。1. 重新执行初始化 SQL 脚本。2. 如果忘记密码可以临时在代码中关闭密码加密或直接修改数据库密码为已知的加密字符串。前端页面能打开但列表数据为空或报 404前端请求的后端 API 地址错误打开浏览器开发者工具Network标签查看 API 请求的 URL 和响应状态码。修改前端配置文件中baseURL确保其指向正确的后端服务地址和端口。新增/编辑文章时富文本编辑器图片上传失败后端文件上传路径不存在、权限不足、未配置查看浏览器Network中图片上传请求的响应查看后端控制台日志。1. 检查后端文件上传控制器代码。2. 确认存储目录如D:/upload存在且有读写权限。3. 或修改为相对路径上传到项目内。页面样式错乱Element Plus 等 UI 库未正确引入或版本冲突浏览器控制台有 CSS 或 JS 加载错误。1. 检查main.js或app.vue中是否正确引入了 UI 库及其样式。2. 检查package.json中 UI 库版本是否兼容 Vue3。通用排查流程看日志无论是后端控制台还是浏览器控制台错误信息是第一线索。查网络使用浏览器开发者工具的 Network 面板确认请求是否发出、状态码是什么、响应体是什么。对配置反复核对数据库连接字符串、前端 API 地址、服务器端口等配置项一个字符的错误都可能导致失败。搜错误将具体的错误信息复制到搜索引擎中很大概率能找到解决方案。9. 最佳实践与使用建议成功运行项目只是第一步如何用好它并基于它进行学习或二次开发这里有一些建议。1. 代码阅读与学习路径先跑通再阅读按照本文步骤先让项目跑起来有一个直观感受。从前到后跟踪一个请求在浏览器中点击“新增文章”在开发者工具 Network 里找到对应的 API 请求。然后到后端代码中根据请求路径如/api/article找到对应的RestController一步步跟踪到Service、Mapper直到 SQL 执行。这是理解前后端分离架构最有效的方式。重点看后端pom.xml依赖、application.yml配置、实体类Entity、控制器Controller、服务层接口与实现Service、数据访问层Mapper/DAO。前端package.json依赖、路由配置router/index.js、状态管理如pinia商店、API 封装层src/api、页面组件src/views。2. 二次开发与功能扩展添加新模块例如想增加“友情链接”管理。后端创建Link实体、LinkMapper接口、LinkService和LinkController。前端在src/api创建link.js在src/views创建link目录及列表、编辑页面在路由中注册新页面。修改现有功能例如为文章增加“浏览量”统计。在文章表中增加view_count字段。修改文章实体类。在文章详情查询的接口中实现浏览量1的逻辑。在前端文章列表和详情页显示这个字段。3. 部署到服务器后端使用mvn clean package打包生成jar文件然后通过java -jar blog.jar在服务器上运行。建议使用nohup或配置为系统服务。前端运行npm run build生成静态文件在dist目录然后将这些文件放到 Nginx 或 Apache 的 Web 目录下进行部署。分离部署前端静态服务Nginx运行在 80 端口后端 SpringBoot Jar 运行在 8080 端口。前端需要配置代理将 API 请求转发到后端端口。4. 项目优化方向加入缓存使用 Redis 缓存文章列表、热门文章等减轻数据库压力。接口安全完善 JWT Token 认证与授权防止接口被恶意调用。日志记录使用 SLF4J Logback 记录操作日志和错误日志便于排查问题。接口文档完善 Swagger/Knife4j 注解让 API 文档更清晰。单元测试为 Service 层和 Controller 层编写单元测试提高代码质量。这个 SpringBoot Vue3 博客管理系统项目是一个优秀的学习样板和开发起点。它的最大价值在于提供了一个完整、可运行、技术栈主流的代码框架让你能跳过繁琐的基础搭建直接切入业务逻辑学习和功能开发。对于初学者建议先确保能按照指南成功运行。然后选择一两个核心功能点比如文章发布深入代码理解从前端表单提交到后端数据库落地的完整数据流。对于有经验的开发者可以将其作为脚手架快速添加自己需要的特性或者借鉴其项目结构来规范自己的开发。最容易踩的坑无非是环境配置和前后端联调。只要耐心核对数据库连接、服务器端口和 API 地址大部分问题都能解决。把这个项目吃透无论是应对面试中的项目细节提问还是独立开发一个类似的管理系统你都会更有底气。建议收藏本文在搭建和开发过程中随时参考。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度