这次我们来看一个基于 Spring Boot 和 Vue3 的博客管理项目。对于 Java 开发者尤其是正在准备毕业设计或丰富简历的同学来说一个功能完整、技术栈主流的个人博客系统是极具价值的实战项目。它不仅能帮你串联起前后端分离开发的核心流程更能作为你技术能力的直接展示。这个项目的核心是让你快速拥有一个属于自己的、可部署的博客网站。它采用了当前企业级开发中非常流行的技术组合后端使用 Spring Boot 提供 RESTful API前端使用 Vue3 构建现代化的用户界面。文章将带你从零开始完成环境搭建、项目启动、功能测试到部署上线的完整流程。你会了解到如何配置数据库、如何启动前后端服务、如何进行基本的文章管理操作以及如何将这个项目转化为你简历上的一个亮点。无论你是想深入学习 Spring Boot 和 Vue3 的整合还是急需一个高质量的毕设项目这篇文章提供的“手把手”指南都能让你在一小时内看到成果并理解其背后的技术脉络。1. 核心能力速览在深入代码之前我们先快速了解这个博客项目的核心特性和技术栈判断它是否适合你的需求。能力项说明项目类型前后端分离的个人博客管理系统技术栈后端Spring Boot, MyBatis/MyBatis-Plus, MySQL前端Vue3, Element Plus, Axios主要功能用户登录、文章分类管理、文章发布/编辑/删除、文章列表展示、标签管理、评论功能通常具备部署方式后端可打包为 Jar 独立运行前端打包后由 Nginx 等静态服务器托管启动门槛需本地安装 JDK 8、Node.js 16、MySQL 5.7 或 Docker 环境是否提供API是标准的 RESTful API便于二次开发或对接其他客户端是否支持一键启动通常提供详细的启动脚本或 Docker Compose 配置但需先完成环境配置适合场景Java/Vue 初学者练手、毕业设计、个人博客搭建、全栈项目经验积累2. 适用场景与使用边界这个博客项目主要面向以下几类开发者Java 后端与 Vue 前端学习者希望通过一个完整项目理解前后端如何通过 API 交互。计算机相关专业毕业生需要一个结构清晰、技术栈不过时、文档齐全的毕业设计项目。求职者需要能体现自身 Spring Boot 和 Vue3 开发能力的实战项目填充简历。技术博客爱好者希望拥有一个代码可控、可自定义功能的个人博客平台。它能解决的问题技术整合实践将 Spring Boot、MyBatis、Vue3、Vue Router、Pinia/Vuex、Element Plus 等流行技术栈串联应用。CRUD业务理解通过文章、分类、标签、用户等实体的增删改查深入理解后台管理系统的典型业务逻辑。前后端协作流程掌握从接口设计、后端实现、前端调用到页面渲染的完整开发链路。项目部署经验获得将 Spring Boot 应用和 Vue 前端打包并部署到服务器的基础经验。使用边界与注意事项非生产级作为学习或毕设项目其在安全性如更细粒度的权限控制、SQL注入深度防护、高并发、数据备份等方面的考虑可能不如成熟开源项目如 WordPress、Halo。版权与内容合规部署后发布的内容需遵守相关法律法规尊重原创避免侵权。自定义需求项目提供了基础框架但深度的UI美化、附加功能如SEO优化、第三方登录、图床集成需要自行开发。3. 环境准备与前置条件开始之前请确保你的开发环境满足以下要求。这是项目能成功运行的基础。1. 后端开发环境JDK版本 1.8 或更高推荐 JDK 8, 11, 17。在终端输入java -version验证。Maven用于管理项目依赖和构建。版本 3.6。输入mvn -v验证。IDEIntelliJ IDEA推荐或 Eclipse。MySQL版本 5.7 或 8.0。你需要准备一个空的数据库例如my_blog。2. 前端开发环境Node.js版本 16.x 或更高推荐 18.x LTS。这是运行 Vue 和包管理工具 npm/pnpm/yarn 的前提。输入node -v和npm -v验证。包管理器npm随 Node.js 安装或更快的 pnpm/yarn。本文以 npm 为例。IDE/编辑器Visual Studio Code推荐或 WebStorm。3. 可选工具Git用于克隆项目源码。Docker Docker Compose如果你希望通过容器化方式一键启动所有服务MySQL 后端。Postman 或 Apifox用于测试后端 API 接口。浏览器开发者工具用于前端调试。4. 资源准备从提供的源码地址获取项目。通常项目结构包含backendSpring Boot和frontendVue3两个独立目录。准备好你的 MySQL 连接信息主机通常是localhost、端口通常是3306、数据库名、用户名和密码。4. 安装部署与启动方式我们将分步启动后端和前端服务。请严格按照顺序操作。4.1 后端服务启动步骤一导入项目并配置数据库使用 IDEA 打开backend目录。找到配置文件通常是src/main/resources/application.yml或application.properties。修改数据库连接配置填入你在环境准备阶段创建的数据库信息。# application.yml 示例配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/my_blog?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root # 你的数据库用户名 password: yourpassword # 你的数据库密码步骤二初始化数据库表项目通常会提供数据库初始化脚本sql文件你需要在 MySQL 中执行它来创建表结构和初始数据。如果项目使用了 Flyway 或 MyBatis-Plus 的自动建表功能则可能在首次启动时自动完成。步骤三启动 Spring Boot 应用在 IDEA 中找到主启动类通常带有SpringBootApplication注解类名如BlogApplication右键运行Run。 或者使用 Maven 命令启动cd backend mvn spring-boot:run看到控制台输出类似Tomcat started on port(s): 8080的信息说明后端服务启动成功。默认端口通常是8080。4.2 前端服务启动步骤一安装依赖在frontend目录下打开终端执行以下命令安装项目所需的所有 npm 包。cd frontend npm install # 如果网络较慢可以使用淘宝镜像npm install --registryhttps://registry.npmmirror.com这个过程会创建node_modules文件夹下载所有依赖。步骤二配置后端 API 地址前端需要知道后端服务的地址以发起请求。找到前端项目的配置文件通常是src/config/index.js、.env.development或vite.config.js中关于代理的配置。 你需要将代理目标指向正在运行的后端地址例如http://localhost:8080。// vite.config.js 示例 (Vite项目) 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/, ) // 根据实际情况决定是否需要重写路径 } } } })步骤三启动开发服务器在frontend目录下执行npm run dev # 或 npm run serve # 取决于项目是用 Vite 还是 Vue CLI 创建的控制台会输出本地访问地址通常是http://localhost:5173(Vite) 或http://localhost:8081。用浏览器打开此地址。5. 功能测试与效果验证服务启动后我们通过实际操作来验证核心功能是否正常。这是判断项目是否成功运行的关键。5.1 用户登录测试目的验证前后端连通性及用户认证模块。操作访问前端首页找到登录入口。输入默认的管理员账号密码常见如 admin/123456具体查看项目文档或数据库初始脚本。预期点击登录后页面跳转到后台管理首页或文章列表页浏览器开发者工具 Network 标签中能看到登录接口如/api/login返回成功的状态码如 200和 token 信息。成功标志登录后页面显示用户信息或出现登出按钮并且可以访问需要权限的页面如文章管理。5.2 文章管理功能测试这是博客的核心。新增文章操作在管理后台找到“写文章”或“新增”按钮进入文章编辑页面。填写标题、选择分类、添加标签、编写内容支持Markdown编辑器是加分项点击“发布”或“保存”。预期页面提示“发布成功”并在文章列表页能看到刚创建的文章。验证同时检查数据库article表应有一条对应的新记录。编辑文章操作在文章列表页找到刚创建的文章点击“编辑”。预期跳转到编辑页面内容与发布时一致。修改部分内容后保存。验证刷新列表或查看详情确认修改已生效。删除文章操作点击文章列表的“删除”按钮并确认。预期该文章从列表消失页面有删除成功提示。验证数据库article表中对应记录的deleted字段可能被标记为1逻辑删除或记录被物理删除。文章列表与详情查看操作退出后台访问博客前台首页可能是一个不同的端口或路由如/index。预期首页能正常展示文章列表标题、摘要、发布时间等。点击任意文章标题能进入文章详情页完整显示内容和格式。5.3 分类与标签管理测试操作在后台管理页面尝试新增、编辑、删除文章分类和标签。预期操作后在文章编辑页面能正确关联到新创建的分类和标签。验证发布一篇带有新分类和标签的文章然后在前台查看确认分类和标签显示正确。5.4 接口直接测试可选但推荐使用 Postman 或 Apifox 直接调用后端 API绕过前端界面更纯粹地测试后端逻辑。获取文章列表GET http://localhost:8080/api/articles发布新文章POST http://localhost:8080/api/article在 Body 中传入 JSON 格式的文章数据。验证响应检查返回的状态码、数据格式是否符合预期。6. 接口 API 与批量任务理解项目的 API 设计是进行二次开发和集成的基础。虽然本项目主要面向 Web 界面但其后端本质是一个 API 服务器。6.1 核心 API 概览一个典型的博客系统会提供以下 RESTful 接口功能模块请求方法接口路径示例说明用户认证POST/api/login用户登录返回 tokenPOST/api/logout用户登出文章管理GET/api/articles分页获取文章列表GET/api/article/{id}根据ID获取文章详情POST/api/article新增文章PUT/api/article修改文章DELETE/api/article/{id}删除文章分类管理GET/api/categories获取所有分类POST/api/category新增分类DELETE/api/category/{id}删除分类标签管理GET/api/tags获取所有标签POST/api/tag新增标签6.2 API 调用示例以下是一个使用 Pythonrequests库调用登录和发布文章接口的示例。你可以用任何你熟悉的语言进行测试。import requests import json # 1. 登录获取 token login_url http://localhost:8080/api/login login_data { username: admin, password: 123456 } login_resp requests.post(login_url, jsonlogin_data) if login_resp.status_code 200: token login_resp.json().get(data).get(token) # 根据实际返回结构调整 print(f登录成功token: {token}) else: print(登录失败) exit() # 2. 使用 token 发布文章 headers { Authorization: fBearer {token}, # 或可能是 X-Token: {token}根据项目实际 Content-Type: application/json } article_url http://localhost:8080/api/article article_data { title: 通过API发布的测试文章, content: 这是通过Python脚本调用API发布的文章内容。, categoryId: 1, tagIds: [1, 2], status: 1 # 1表示发布0可能表示草稿 } article_resp requests.post(article_url, headersheaders, jsonarticle_data) print(f发布文章状态码: {article_resp.status_code}) print(f响应内容: {article_resp.text})6.3 关于“批量任务”对于博客系统典型的“批量任务”可能包括批量导入文章编写脚本读取本地 Markdown 文件或从其他平台导出的数据循环调用POST /api/article接口。批量更新分类/标签遍历文章列表调用更新接口。数据备份与导出定期调用查询接口将数据保存为 JSON 或 SQL 文件。这些都需要你根据业务需求基于现有的 API 进行脚本开发。项目本身通常不提供图形化的批量操作界面。7. 资源占用与性能观察作为一个 Spring Boot Vue 的轻量级应用在开发和学习阶段其资源占用通常不是问题但了解如何观察和优化是有益的。1. 后端服务资源占用内存一个刚启动的 Spring Boot 博客应用JVM 堆内存占用通常在 200MB - 500MB 之间具体取决于依赖和启动参数。你可以使用jconsole、jvisualvmJDK 自带或arthas等工具监控。CPU在无并发请求时CPU 占用率极低。在发布文章、处理 Markdown 渲染时会有短暂峰值。数据库连接观察 MySQL 的连接数确保连接池如 HikariCP配置合理没有泄漏。2. 前端开发服务器资源占用内存Node.js 开发服务器如 Vite内存占用通常在 100MB - 300MB。热更新性能Vite 的热更新速度远快于传统的 Webpack。如果感觉慢检查是否安装了过多大型依赖或配置了低效的插件。3. 生产环境部署考虑后端使用java -jar启动时可通过-Xms和-Xmx参数设置 JVM 堆内存初始大小和最大大小。例如-Xms256m -Xmx512m。前端运行npm run build后生成的dist文件夹是纯静态文件由 Nginx 托管几乎不消耗服务器动态资源。数据库随着文章数量增加需关注article表的大小并为经常查询的字段如category_id,status,create_time建立索引以优化查询速度。4. 简单监控命令在 Linux/Mac 上可以使用top或htop查看 Java 和 Node 进程的 CPU 和内存占用。在 Windows 上可以通过任务管理器查看。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突8080 端口被其他程序占用控制台报错Port 8080 was already in use1. 终止占用端口的进程。2. 在application.yml中修改server.port为其他端口如8081。前端启动失败依赖安装报错Node.js 版本不兼容或网络问题查看npm install的错误信息1. 确保 Node.js 版本符合要求。2. 使用npm cache clean --force清除缓存后重试。3. 切换 npm 镜像源npm config set registry https://registry.npmmirror.com前端页面能打开但列表为空或登录失败前端代理配置错误无法连接到后端 API1. 打开浏览器开发者工具查看 Network 标签中 API 请求的状态码是否为 404 或 500。2. 检查请求的 URL 是否正确指向后端服务。1. 确认后端服务是否在运行 (localhost:8080)。2. 核对前端项目中的代理配置如vite.config.js确保 target 地址正确。登录成功但无法进行增删改操作1. 前端未正确携带 token。2. 后端接口权限验证失败。1. 查看请求头中是否有Authorization或X-Token。2. 查看后端控制台是否有权限相关的日志。1. 检查前端请求拦截器确保登录后 token 被正确存储和设置到后续请求头中。2. 检查后端 Spring Security 或拦截器的配置。数据库连接失败1. 数据库服务未启动。2. 配置文件中用户名、密码、数据库名错误。3. 数据库驱动版本不匹配。后端启动时控制台会打印详细的数据库连接错误信息。1. 启动 MySQL 服务。2. 仔细检查application.yml中的数据库连接配置。3. 确认pom.xml中的 MySQL 驱动版本与安装的 MySQL 版本兼容。前端打包后访问页面空白或资源4041. 静态资源路径错误。2. Nginx 配置未指向正确的dist目录。查看浏览器控制台报错确认是哪个 JS/CSS 文件加载失败。1. 在vite.config.js中配置正确的base路径如果部署在子路径下。2. 检查 Nginx 配置root或alias指向前端dist目录的绝对路径。9. 最佳实践与使用建议为了让这个项目更好地为你服务无论是用于学习、毕设还是作为个人博客的起点遵循以下建议可以事半功倍。代码阅读与理解优先在急于添加功能之前先花时间通读一遍前后端的主要代码结构。理解控制器Controller、服务Service、数据访问层Mapper/DAO的分层以及前端的路由、组件和状态管理。版本控制立即将项目初始化为你的 Git 仓库如果源码本身不是 Git 仓库。在修改任何核心代码前进行提交便于回溯。数据库管理为你的开发、测试环境使用不同的数据库或至少不同的表前缀。考虑使用 Flyway 或 Liquibase 来管理数据库版本变更而不是手动执行 SQL 脚本。配置外部化不要将数据库密码等敏感信息硬编码在application.yml中。使用 Spring Boot 的ConfigurationProperties或环境变量来管理配置。对于前端不同环境的 API 地址可以通过.env.development和.env.production文件区分。安全性增强针对毕设或生产密码加密确保用户密码在数据库中是加密存储的如使用 BCrypt。API 防护除了登录接口其他增删改查接口都应进行身份认证和权限校验。输入验证在后端对用户输入如文章标题、内容进行有效性验证和过滤防止 XSS 攻击。SQL 注入坚持使用 MyBatis 的参数绑定#{}避免字符串拼接。功能扩展方向SEO 优化为文章详情页生成静态的、对搜索引擎友好的 URL如/article/123.html。评论系统集成第三方评论服务如 Gitalk, Waline或自行实现。全文搜索集成 Elasticsearch 或使用 MySQL 全文索引实现文章内容搜索。文件上传实现将本地图片上传到服务器或第三方图床如 OSS、七牛云并在文章中引用。后台仪表盘增加数据统计面板显示文章数、访问量等。部署实践学习使用 Docker 将后端应用和 MySQL 容器化编写Dockerfile和docker-compose.yml。学习使用 GitHub Actions 或 Jenkins 设置简单的 CI/CD 流程实现代码推送后自动构建和部署。购买一个最基础的云服务器如 1核2G尝试将你的博客部署到公网体验完整的运维流程。10. 总结与下一步这个 Spring Boot Vue3 的博客项目为你提供了一个绝佳的、贴近企业开发流程的实战沙盒。它的价值不在于功能有多么惊艳而在于提供了一个清晰、完整、可运行的全栈应用骨架。通过完成环境搭建、功能测试和问题排查你已经走完了一个小型软件项目的核心生命周期。最值得尝试的点不是简单地运行起来而是尝试修改它。比如给文章增加一个“浏览量”字段并在前台展示或者增加一个“友情链接”管理模块。这个过程会强迫你去阅读前后端代码理解数据如何从数据库流动到前端页面这是提升工程能力的关键。最先应该验证的功能确保“登录 - 发布文章 - 前台查看”这条主链路完全畅通。这是博客系统的核心价值所在。最容易踩的坑环境配置尤其是 Node.js 和 Java 版本、前后端联调时的跨域或代理问题、数据库连接配置。按照本文的步骤和排查清单大部分问题都能解决。下一步可以做什么代码重构尝试用更优雅的方式实现某个功能比如用 MyBatis-Plus 的 Service 层封装替换手写的通用 Mapper 方法。技术栈升级将 Vue3 的选项式 API 改为组合式 API尝试用 Pinia 替换 Vuex 进行状态管理。项目文档化为你修改后的项目编写清晰的 README.md说明项目特点、部署步骤和配置方法。这既是良好的习惯也是面试时的加分项。接入云服务尝试将图片存储改为阿里云 OSS或接入第三方登录如 GitHub OAuth。把这个项目吃透你收获的不仅仅是一个可以运行的博客更是一套应对未来更复杂项目的思维方式和实践能力。建议收藏本文在实践过程中遇到具体问题时再回来对照相关章节进行排查。