这次我们来看一个基于 SpringBoot3 和 Vue3 的前后端分离实战项目它同时包含了个人博客系统和小区物业管理系统两个核心模块。对于正在寻找毕业设计选题、希望系统学习现代企业级开发技术栈或者想从零构建一个完整可运行项目的开发者来说这个项目提供了一个非常理想的切入点。它不只是一个简单的 CRUD 演示而是涵盖了从技术选型、架构设计到功能实现、部署上线的全链路实践。项目的核心价值在于它用一套代码、一个架构实现了两个具有不同业务逻辑的独立系统。这能让你深刻理解如何在一个工程中组织多模块、多业务以及如何设计可复用的前后端组件。本文将带你从零开始一步步完成项目的环境搭建、本地启动、功能验证并深入分析其架构设计、代码组织以及在实际部署中可能遇到的问题。无论你是 Java 后端、Vue 前端还是全栈开发者都能从中获得可直接复用的工程经验。1. 核心能力速览能力项说明项目类型前后端分离的 Web 应用包含个人博客与物业管理系统双模块技术栈后端SpringBoot 3.x MyBatis-Plus MySQL前端Vue 3.x TypeScript Vite Element Plus / Ant Design Vue核心架构前后端完全分离通过 RESTful API 交互支持跨域主要功能博客系统文章发布/管理、分类标签、评论、用户认证物业系统业主管理、费用收缴、报修处理、公告发布部署方式支持本地开发环境一键启动也提供生产环境部署指南数据交互JSON 格式使用 JWT 进行接口鉴权适合场景毕业设计、课程设计、个人技术学习、全栈项目实战、微服务入门铺垫2. 适用场景与使用边界这个项目非常适合以下几类开发者在校学生需要一个结构清晰、技术栈主流、功能完整的毕业设计或课程设计项目。求职者希望丰富个人作品集展示对 SpringBoot3、Vue3、前后端分离架构的实践能力。转型全栈的开发者后端想学前端或前端想了解后端通过一个完整项目打通全链路开发流程。技术爱好者想学习如何在单体应用中优雅地组织多业务模块为后续微服务拆分打基础。它能解决的问题包括技术栈整合如何将 SpringBoot3 与 Vue3 高效协同。权限控制基于角色的访问控制RBAC在前后端的实现。多模块开发在一个工程内管理博客和物业两套业务代码。工程化实践包括代码规范、接口文档、错误处理、日志记录等。需要注意的使用边界非生产级作为学习项目在安全性、高并发、数据备份等方面未做深度优化直接用于线上生产环境需谨慎评估和加固。业务逻辑简化物业和博客的业务流程经过了教学化简化与实际商业系统有差距重在展示技术实现。版权与数据项目中使用的图标、UI组件等应确保授权合规。若用于演示请使用模拟数据避免泄露真实个人信息。3. 环境准备与前置条件在开始编码之前请确保你的开发环境满足以下要求。这是项目能够顺利启动和运行的基础。操作系统Windows 10/11, macOS, 或 Linux 发行版如 Ubuntu均可。内存建议 8GB 及以上。磁盘空间至少预留 2GB 空间用于安装开发工具和项目依赖。后端环境 (Java)JDK必须安装JDK 17 或更高版本。SpringBoot 3.x 最低要求 JDK 17。检查命令java -versionMaven用于管理项目依赖和构建。建议使用 3.6.x 及以上版本。检查命令mvn -vMySQL版本 5.7 或 8.0。需要提前创建数据库。本项目通常需要两个数据库blog_db(博客) 和property_db(物业)。具体名称以项目 SQL 脚本为准。确保 MySQL 服务已启动并记住 root 用户密码或你有权限创建数据库的用户。前端环境 (Node.js)Node.js建议安装LTS 版本如 18.x, 20.x。npm 会随之安装。检查命令node -v和npm -v包管理器可以使用 npm但更推荐yarn或pnpm速度更快、依赖管理更清晰。安装 yarn:npm install -g yarn安装 pnpm:npm install -g pnpm开发工具 (可选但推荐)IDE后端推荐 IntelliJ IDEA 或 VS Code Java 扩展包。前端推荐 VS Code 或 WebStorm。API 测试工具Postman 或 Apifox用于测试后端接口。浏览器Chrome 或 Edge用于调试前端应用。4. 安装部署与启动方式假设你已经从 GitHub 或 Gitee 等平台克隆了项目代码到本地。项目结构通常如下your-project/ ├── backend/ # SpringBoot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue3 前端项目 │ ├── blog-admin/ # 博客管理系统前端 │ ├── property-admin/ # 物业管理系统前端 │ ├── ... │ └── package.json └── sql/ # 数据库初始化脚本4.1 数据库初始化使用 MySQL 客户端如命令行、Navicat、DBeaver连接你的 MySQL 服务。运行sql/目录下的脚本文件。通常会有blog_init.sql和property_init.sql分别创建数据库、表结构和初始化数据。确认数据库创建成功并且有初始的管理员账号如 admin/123456。4.2 后端服务启动配置数据库连接打开backend/src/main/resources/application.yml(或application.properties) 文件。找到数据源配置部分修改为你本地 MySQL 的地址、端口、数据库名、用户名和密码。# 示例配置 (application.yml格式) 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 # 可能还有第二个数据源配置给物业系统安装依赖并启动在backend目录下打开终端。运行mvn clean install下载依赖并编译项目。运行mvn spring-boot:run启动 SpringBoot 应用。或者直接在 IDE 中找到主启动类通常名为Application或*Application右键运行。验证启动看到控制台输出类似Tomcat started on port(s): 8080的信息说明后端启动成功。可以在浏览器访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html如果集成了相关依赖查看接口文档。4.3 前端服务启动本项目前端可能是一个工程包含两个子项目博客后台、物业后台也可能是两个独立的前端工程。以下以常见情况为例启动博客管理系统前端进入前端项目目录例如frontend/blog-admin。安装依赖# 使用 npm npm install # 或使用 yarn yarn install # 或使用 pnpm pnpm install启动开发服务器npm run dev # 或 yarn dev, pnpm dev控制台会输出本地访问地址通常是http://localhost:5173(Vite 默认) 或http://localhost:3000。启动物业管理系统前端步骤同上进入frontend/property-admin目录执行npm install和npm run dev。注意端口可能不同避免冲突。关键配置前端需要配置后端 API 的代理或基础 URL以解决跨域问题。通常在vite.config.ts或vue.config.js中配置代理// vite.config.ts 示例 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })或者在.env.development文件中设置VITE_API_BASE_URLhttp://localhost:80805. 功能测试与效果验证前后端都启动后我们开始验证核心功能。建议按以下顺序进行从基础到业务。5.1 用户登录与认证测试目的验证 JWT 令牌生成、接口鉴权、路由守卫是否正常工作。操作步骤打开前端登录页如http://localhost:5173/login。使用 SQL 脚本中初始化的管理员账号登录例如用户名admin密码123456。预期结果登录成功跳转到系统主页Dashboard。浏览器开发者工具F12的Application-Storage-Local Storage或Cookies中应能看到存储的token。刷新页面应保持登录状态不会退回登录页。判断成功能进入系统内部页面并且调用一个需要认证的接口如获取用户信息返回成功。5.2 个人博客系统功能验证登录博客管理系统后台进行以下测试文章管理创建文章点击“新建文章”输入标题、选择分类/标签、编辑内容富文本编辑器应能正常使用点击发布。预期文章列表页立即出现刚发布的文章状态为“已发布”。编辑与删除对刚创建的文章进行编辑、下架或删除操作观察列表和数据库变化是否同步。分类与标签管理新增分类在分类管理页面添加一个如“技术杂谈”的新分类。预期创建文章时下拉框中能选择到这个新分类。评论管理模拟评论可以直接在数据库blog_comment表插入一条测试数据或等待前端有评论功能后测试。审核与回复在后台评论列表应能看到这条评论并可进行“审核通过”、“回复”、“删除”操作。5.3 小区物业管理系统功能验证登录物业管理系统后台业主信息管理新增业主录入模拟的业主信息包括楼栋号、单元号、房号、姓名、联系方式。预期业主列表能正确显示支持按楼栋、房号搜索。物业费用管理生成费用账单选择一位业主生成一条“物业管理费”账单设置金额和截止日期。缴费操作模拟该业主进行“缴费”账单状态应从“待支付”变为“已支付”。查看统计在费用统计页面应能看到相关的收入汇总。报修处理流程提交报修模拟业主提交一个“水管漏水”的报修单。分配处理管理员登录后在报修单列表将该工单分配给某个“维修工”需要先有维修工角色用户。状态流转维修工账号登录后应能看到分配的工单并可将状态更新为“处理中”、“已完成”。业主确认流程结束后业主端如果有或后台可以标记“已确认”完成闭环。5.4 前后端联调与数据一致性验证这是最关键的一步确保前端操作能真实影响后端数据。工具打开浏览器开发者工具的Network标签页并保持开启。操作在前端进行任何一个操作如“删除一篇文章”。观察Network中会出现一条DELETE或POST请求URL 类似/api/article/delete。查看该请求的Request Headers应包含Authorization: Bearer your-jwt-token。查看请求的Payload或Query String Parameters确认发送的参数正确如文章ID。查看请求的Response返回的 JSON 数据格式应符合后端定义的统一响应体如{ code: 200, message: “成功” data: null }。验证随后刷新文章列表或直接查询数据库确认该文章记录已被正确删除。6. 接口 API 与批量任务本项目作为教学项目可能未显式设计“批量任务队列”但其中涉及批量操作的接口是理解 API 设计的好例子。6.1 核心 API 设计模式观察项目代码你会发现接口设计通常遵循 RESTful 风格并使用统一的响应封装。统一的响应体结构 (后端)// 常见的 Result 类 Data public class ResultT { private Integer code; // 200成功500失败等 private String message; private T data; // 成功/失败的静态方法 public static T ResultT success(T data) { ... } public static T ResultT error(String msg) { ... } }对应的前端会有一个通用的request.ts工具拦截所有响应统一处理code非 200 的情况如 token 过期跳转登录。典型 CRUD 接口示例GET /api/articles- 获取文章列表分页、查询POST /api/article- 创建新文章PUT /api/article/{id}- 更新文章DELETE /api/article/{id}- 删除文章GET /api/article/{id}- 获取文章详情6.2 使用 Postman 测试 API脱离前端直接测试后端接口的健壮性。获取 Token方法POSTURL:http://localhost:8080/api/auth/loginBody (raw JSON):{ username: admin, password: 123456 }从响应中复制data.token字段的值。调用受保护接口方法GETURL:http://localhost:8080/api/user/infoHeaders: 添加Authorization值为Bearer 刚才复制的token。应成功返回用户信息。6.3 模拟“批量任务” - 数据导入导出虽然项目可能没有专门的批量任务模块但你可以通过以下方式实践批量处理思想后端实现批量删除DeleteMapping(/articles/batch) public Result? batchDelete(RequestBody ListLong ids) { // 接收ID列表 articleService.removeByIds(ids); return Result.success(); }前端调用// 假设已选中多条数据的ID数组 selectedIds const deleteBatch async () { try { await axios.delete(/api/articles/batch, { data: selectedIds }); ElMessage.success(批量删除成功); fetchData(); // 刷新列表 } catch (error) { ElMessage.error(删除失败); } };数据导出可以添加一个GET /api/articles/export接口使用 Apache POI 或 EasyExcel 将查询结果生成 Excel 文件供前端下载。这涉及到文件流处理和 HTTP 响应头设置是一个很好的学习点。7. 资源占用与性能观察对于本地开发和学习而言资源占用通常不是问题但了解如何观察和优化是有益的。后端 (SpringBoot) 资源观察启动时观察启动后端时控制台会打印内存初始化信息。关注Started Application in X.XXX seconds启动时间越短越好。JVM 内存你可以通过 JVM 参数调整初始堆内存。在IDE的运行配置或mvn spring-boot:run命令前添加MAVEN_OPTS-Xms256m -Xmx512m mvn spring-boot:run这限制了堆内存使用在 256MB 到 512MB 之间对于学习项目足够。数据库连接池检查application.yml中的 HikariCP 配置SpringBoot 默认。合理的配置能防止连接泄漏。spring: datasource: hikari: maximum-pool-size: 10 # 根据实际调整开发环境5-10即可 connection-timeout: 30000前端 (Vue3 Vite) 资源观察开发服务器运行npm run dev后Vite 会显示本地服务器地址和启动时间。热更新HMR速度是开发体验的关键。构建优化运行npm run build进行生产构建。观察终端输出的打包信息dist/目录的大小。是否有警告提示存在未使用的依赖或大体积包。可以使用rollup-plugin-visualizer生成依赖分析图查看哪些包体积最大。浏览器性能使用 Chrome DevTools 的Lighthouse或Performance面板对构建后的生产包进行分析查看首屏加载时间、最大内容绘制 (LCP) 等指标。通用性能建议后端对于复杂的列表查询务必使用分页PageHelper 或 MyBatis-Plus 分页插件避免一次性加载海量数据。为频繁查询的接口考虑添加缓存如 Redis。前端对于大型表格或列表使用虚拟滚动如vue-virtual-scroller组件。路由使用懒加载 (() import(‘…’))。图片等静态资源进行压缩。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供系统的排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突8080 端口被其他程序如另一个SpringBoot应用、Tomcat占用1. 控制台查看错误信息。2. 命令行运行netstat -ano | findstr :8080(Win) 或lsof -i:8080(Mac/Linux) 查看占用进程。1. 终止占用进程。2. 在application.yml中修改server.port为其他端口如8090。前端启动失败依赖安装报错1. Node.js 版本不兼容。2. 网络问题导致包下载失败。3.node_modules缓存混乱。1. 确认 Node.js 版本符合package.json中的engines要求。2. 检查网络可尝试切换 npm 源npm config set registry https://registry.npmmirror.com。3. 查看具体报错信息。1. 升级或降级 Node.js。2. 清除缓存npm cache clean --force删除node_modules和package-lock.json重新npm install。3. 使用yarn或pnpm重试。数据库连接失败1. MySQL 服务未启动。2.application.yml中数据库配置错误IP、端口、库名、用户名、密码。3. 数据库驱动版本不匹配。1. 检查 MySQL 服务状态。2. 逐项核对配置文件。3. 查看后端启动日志中的 SQL 异常信息。1. 启动 MySQL 服务。2. 修正配置文件。3. 检查pom.xml中mysql-connector-java版本SpringBoot 3 推荐使用8.x版本驱动。前端访问后端 API 404 或跨域错误1. 后端服务未启动。2. 前端代理配置 (vite.config.ts) 错误或未生效。3. 后端未配置跨域。1. 确认后端地址http://localhost:8080能直接访问如打开 Swagger 文档。2. 检查前端请求的完整 URL 是否正确。3. 查看浏览器控制台 Network 标签页的具体错误信息。1. 确保后端服务运行。2. 修正代理配置或环境变量VITE_API_BASE_URL。3. 在后端添加全局跨域配置类 (ConfigurationWebMvcConfigurer)。登录成功但后续接口 401 未授权1. 前端未正确存储或发送 Token。2. Token 已过期。3. 后端 JWT 校验过滤器配置有误。1. 检查浏览器 LocalStorage 是否有 token。2. 检查请求头Authorization是否携带Bearer token。3. 查看后端日志关于 JWT 解析的异常。1. 确保登录后保存 token并在 axios 拦截器中统一设置请求头。2. 实现 Token 自动刷新逻辑或跳转重新登录。3. 检查 JWT 密钥、过期时间配置。页面样式错乱或组件不显示1. Element Plus / Ant Design Vue 等 UI 库未正确引入或版本冲突。2. 自定义样式覆盖了组件样式。3. 浏览器缓存。1. 检查main.ts中 UI 库的引入语句。2. 使用浏览器开发者工具检查元素看样式是否加载。1. 确认package.json中 UI 库版本并参考官方文档重新引入。2. 使用样式穿透 (:deep()) 或调整选择器优先级。3. 禁用缓存或强制刷新。9. 最佳实践与使用建议为了让这个项目更好地服务于你的学习和未来的开发这里有一些进阶建议代码层面理解而非复制尝试逐行阅读关键代码如全局异常处理器 (ControllerAdvice)、统一返回体 (Result)、JWT 过滤器 (JwtAuthenticationTokenFilter)、权限注解 (PreAuthorize) 的实现。理解其设计意图。尝试重构如果你觉得某些代码可以写得更好例如使用更优雅的 Lambda 表达式、Stream API或拆分过大的 Service 类大胆去修改并验证。添加新功能在现有框架上尝试添加一个新模块例如“站内消息通知”或“数据仪表盘”。这能极大锻炼你的架构设计能力。工程化层面使用 Git如果你是从头开始跟着做务必使用 Git 进行版本控制。为每个大的功能点如“完成用户模块”、“实现文章CRUD”进行一次提交并撰写清晰的提交信息。编写接口文档即使项目已有 Swagger尝试为重要的业务接口编写更详细的 Markdown 文档描述其业务场景、请求/响应示例、错误码。配置多环境学习如何配置application-dev.yml,application-prod.yml并通过spring.profiles.active切换开发、测试、生产环境的不同配置如数据库地址、日志级别。部署与扩展尝试 Docker 部署为后端和前端分别编写Dockerfile并使用docker-compose.yml将应用与 MySQL 容器编排在一起。这是现代应用部署的必备技能。思考微服务拆分这个单体项目包含了博客和物业两个业务。思考如果流量增大如何将其拆分为blog-service和property-service需要考虑服务注册发现Nacos、配置中心、API 网关Spring Cloud Gateway等。前端优化实践前端性能优化如图片懒加载、组件异步加载、利用浏览器缓存策略、配置 Nginx 进行静态资源压缩和缓存。安全与合规强化密码安全默认密码是弱密码。在真实场景中密码必须加盐哈希存储使用 BCrypt并强制要求用户使用强密码。接口防刷为登录、短信验证码等接口添加限流如使用 Redis Lua或验证码机制防止恶意攻击。SQL 注入防护坚持使用 MyBatis-Plus 的 Lambda 查询或#{}参数绑定切勿直接拼接 SQL 字符串。XSS 防护对于富文本内容如博客文章在前端展示时进行合适的转义或使用安全的 HTML 净化库。这个 SpringBoot3 Vue3 前后端分离项目为你提供了一个绝佳的、贴近企业实践的沙箱。它的价值不仅在于让你跑通一个系统更在于为你揭示了现代 Web 应用从开发到部署的完整技术图谱。建议你以它为基础选择一个你最感兴趣的方向如性能优化、微服务化、更复杂的权限模型、引入消息队列等进行深度探索和改造这将成为你技术履历中一个扎实的亮点。 这次我们来看一个基于 SpringBoot3 和 Vue3 的前后端分离实战项目它同时包含了个人博客系统和小区物业管理系统两个核心模块。对于正在寻找毕业设计选题、希望系统学习现代企业级开发技术栈或者想从零构建一个完整可运行项目的开发者来说这个项目提供了一个非常理想的切入点。它不只是一个简单的 CRUD 演示而是涵盖了从技术选型、架构设计到功能实现、部署上线的全链路实践。项目的核心价值在于它用一套代码、一个架构实现了两个具有不同业务逻辑的独立系统。这能让你深刻理解如何在一个工程中组织多模块、多业务以及如何设计可复用的前后端组件。本文将带你从零开始一步步完成项目的环境搭建、本地启动、功能验证并深入分析其架构设计、代码组织以及在实际部署中可能遇到的问题。无论你是 Java 后端、Vue 前端还是全栈开发者都能从中获得可直接复用的工程经验。1. 核心能力速览能力项说明项目类型前后端分离的 Web 应用包含个人博客与物业管理系统双模块技术栈后端SpringBoot 3.x MyBatis-Plus MySQL前端Vue 3.x TypeScript Vite Element Plus / Ant Design Vue核心架构前后端完全分离通过 RESTful API 交互支持跨域主要功能博客系统文章发布/管理、分类标签、评论、用户认证物业系统业主管理、费用收缴、报修处理、公告发布部署方式支持本地开发环境一键启动也提供生产环境部署指南数据交互JSON 格式使用 JWT 进行接口鉴权适合场景毕业设计、课程设计、个人技术学习、全栈项目实战、微服务入门铺垫2. 适用场景与使用边界这个项目非常适合以下几类开发者在校学生需要一个结构清晰、技术栈主流、功能完整的毕业设计或课程设计项目。求职者希望丰富个人作品集展示对 SpringBoot3、Vue3、前后端分离架构的实践能力。转型全栈的开发者后端想学前端或前端想了解后端通过一个完整项目打通全链路开发流程。技术爱好者想学习如何在单体应用中优雅地组织多业务模块为后续微服务拆分打基础。它能解决的问题包括技术栈整合如何将 SpringBoot3 与 Vue3 高效协同。权限控制基于角色的访问控制RBAC在前后端的实现。多模块开发在一个工程内管理博客和物业两套业务代码。工程化实践包括代码规范、接口文档、错误处理、日志记录等。需要注意的使用边界非生产级作为学习项目在安全性、高并发、数据备份等方面未做深度优化直接用于线上生产环境需谨慎评估和加固。业务逻辑简化物业和博客的业务流程经过了教学化简化与实际商业系统有差距重在展示技术实现。版权与数据项目中使用的图标、UI组件等应确保授权合规。若用于演示请使用模拟数据避免泄露真实个人信息。3. 环境准备与前置条件在开始编码之前请确保你的开发环境满足以下要求。这是项目能够顺利启动和运行的基础。操作系统Windows 10/11, macOS, 或 Linux 发行版如 Ubuntu均可。内存建议 8GB 及以上。磁盘空间至少预留 2GB 空间用于安装开发工具和项目依赖。后端环境 (Java)JDK必须安装JDK 17 或更高版本。SpringBoot 3.x 最低要求 JDK 17。检查命令java -versionMaven用于管理项目依赖和构建。建议使用 3.6.x 及以上版本。检查命令mvn -vMySQL版本 5.7 或 8.0。需要提前创建数据库。本项目通常需要两个数据库blog_db(博客) 和property_db(物业)。具体名称以项目 SQL 脚本为准。确保 MySQL 服务已启动并记住 root 用户密码或你有权限创建数据库的用户。前端环境 (Node.js)Node.js建议安装LTS 版本如 18.x, 20.x。npm 会随之安装。检查命令node -v和npm -v包管理器可以使用 npm但更推荐yarn或pnpm速度更快、依赖管理更清晰。安装 yarn:npm install -g yarn安装 pnpm:npm install -g pnpm开发工具 (可选但推荐)IDE后端推荐 IntelliJ IDEA 或 VS Code Java 扩展包。前端推荐 VS Code 或 WebStorm。API 测试工具Postman 或 Apifox用于测试后端接口。浏览器Chrome 或 Edge用于调试前端应用。4. 安装部署与启动方式假设你已经从 GitHub 或 Gitee 等平台克隆了项目代码到本地。项目结构通常如下your-project/ ├── backend/ # SpringBoot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue3 前端项目 │ ├── blog-admin/ # 博客管理系统前端 │ ├── property-admin/ # 物业管理系统前端 │ ├── ... │ └── package.json └── sql/ # 数据库初始化脚本4.1 数据库初始化使用 MySQL 客户端如命令行、Navicat、DBeaver连接你的 MySQL 服务。运行sql/目录下的脚本文件。通常会有blog_init.sql和property_init.sql分别创建数据库、表结构和初始化数据。确认数据库创建成功并且有初始的管理员账号如 admin/123456。4.2 后端服务启动配置数据库连接打开backend/src/main/resources/application.yml(或application.properties) 文件。找到数据源配置部分修改为你本地 MySQL 的地址、端口、数据库名、用户名和密码。# 示例配置 (application.yml格式) 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 # 可能还有第二个数据源配置给物业系统安装依赖并启动在backend目录下打开终端。运行mvn clean install下载依赖并编译项目。运行mvn spring-boot:run启动 SpringBoot 应用。或者直接在 IDE 中找到主启动类通常名为Application或*Application右键运行。验证启动看到控制台输出类似Tomcat started on port(s): 8080的信息说明后端启动成功。可以在浏览器访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html如果集成了相关依赖查看接口文档。4.3 前端服务启动本项目前端可能是一个工程包含两个子项目博客后台、物业后台也可能是两个独立的前端工程。以下以常见情况为例启动博客管理系统前端进入前端项目目录例如frontend/blog-admin。安装依赖# 使用 npm npm install # 或使用 yarn yarn install # 或使用 pnpm pnpm install启动开发服务器npm run dev # 或 yarn dev, pnpm dev控制台会输出本地访问地址通常是http://localhost:5173(Vite 默认) 或http://localhost:3000。启动物业管理系统前端步骤同上进入frontend/property-admin目录执行npm install和npm run dev。注意端口可能不同避免冲突。关键配置前端需要配置后端 API 的代理或基础 URL以解决跨域问题。通常在vite.config.ts或vue.config.js中配置代理// vite.config.ts 示例 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })或者在.env.development文件中设置VITE_API_BASE_URLhttp://localhost:80805. 功能测试与效果验证前后端都启动后我们开始验证核心功能。建议按以下顺序进行从基础到业务。5.1 用户登录与认证测试目的验证 JWT 令牌生成、接口鉴权、路由守卫是否正常工作。操作步骤打开前端登录页如http://localhost:5173/login。使用 SQL 脚本中初始化的管理员账号登录例如用户名admin密码123456。预期结果登录成功跳转到系统主页Dashboard。浏览器开发者工具F12的Application-Storage-Local Storage或Cookies中应能看到存储的token。刷新页面应保持登录状态不会退回登录页。判断成功能进入系统内部页面并且调用一个需要认证的接口如获取用户信息返回成功。5.2 个人博客系统功能验证登录博客管理系统后台进行以下测试文章管理创建文章点击“新建文章”输入标题、选择分类/标签、编辑内容富文本编辑器应能正常使用点击发布。预期文章列表页立即出现刚发布的文章状态为“已发布”。编辑与删除对刚创建的文章进行编辑、下架或删除操作观察列表和数据库变化是否同步。分类与标签管理新增分类在分类管理页面添加一个如“技术杂谈”的新分类。预期创建文章时下拉框中能选择到这个新分类。评论管理模拟评论可以直接在数据库blog_comment表插入一条测试数据或等待前端有评论功能后测试。审核与回复在后台评论列表应能看到这条评论并可进行“审核通过”、“回复”、“删除”操作。5.3 小区物业管理系统功能验证登录物业管理系统后台业主信息管理新增业主录入模拟的业主信息包括楼栋号、单元号、房号、姓名、联系方式。预期业主列表能正确显示支持按楼栋、房号搜索。物业费用管理生成费用账单选择一位业主生成一条“物业管理费”账单设置金额和截止日期。缴费操作模拟该业主进行“缴费”账单状态应从“待支付”变为“已支付”。查看统计在费用统计页面应能看到相关的收入汇总。报修处理流程提交报修模拟业主提交一个“水管漏水”的报修单。分配处理管理员登录后在报修单列表将该工单分配给某个“维修工”需要先有维修工角色用户。状态流转维修工账号登录后应能看到分配的工单并可将状态更新为“处理中”、“已完成”。业主确认流程结束后业主端如果有或后台可以标记“已确认”完成闭环。5.4 前后端联调与数据一致性验证这是最关键的一步确保前端操作能真实影响后端数据。工具打开浏览器开发者工具的Network标签页并保持开启。操作在前端进行任何一个操作如“删除一篇文章”。观察Network中会出现一条DELETE或POST请求URL 类似/api/article/delete。查看该请求的Request Headers应包含Authorization: Bearer your-jwt-token。查看请求的Payload或Query String Parameters确认发送的参数正确如文章ID。查看请求的Response返回的 JSON 数据格式应符合后端定义的统一响应体如{ code: 200, message: “成功” data: null }。验证随后刷新文章列表或直接查询数据库确认该文章记录已被正确删除。6. 接口 API 与批量任务本项目作为教学项目可能未显式设计“批量任务队列”但其中涉及批量操作的接口是理解 API 设计的好例子。6.1 核心 API 设计模式观察项目代码你会发现接口设计通常遵循 RESTful 风格并使用统一的响应封装。统一的响应体结构 (后端)// 常见的 Result 类 Data public class ResultT { private Integer code; // 200成功500失败等 private String message; private T data; // 成功/失败的静态方法 public static T ResultT success(T data) { ... } public static T ResultT error(String msg) { ... } }对应的前端会有一个通用的request.ts工具拦截所有响应统一处理code非 200 的情况如 token 过期跳转登录。典型 CRUD 接口示例GET /api/articles- 获取文章列表分页、查询POST /api/article- 创建新文章PUT /api/article/{id}- 更新文章DELETE /api/article/{id}- 删除文章GET /api/article/{id}- 获取文章详情6.2 使用 Postman 测试 API脱离前端直接测试后端接口的健壮性。获取 Token方法POSTURL:http://localhost:8080/api/auth/loginBody (raw JSON):{ username: admin, password: 123456 }从响应中复制data.token字段的值。调用受保护接口方法GETURL:http://localhost:8080/api/user/infoHeaders: 添加Authorization值为Bearer 刚才复制的token。应成功返回用户信息。6.3 模拟“批量任务” - 数据导入导出虽然项目可能没有专门的批量任务模块但你可以通过以下方式实践批量处理思想后端实现批量删除DeleteMapping(/articles/batch) public Result? batchDelete(RequestBody ListLong ids) { // 接收ID列表 articleService.removeByIds(ids); return Result.success(); }前端调用// 假设已选中多条数据的ID数组 selectedIds const deleteBatch async () { try { await axios.delete(/api/articles/batch, { data: selectedIds }); ElMessage.success(批量删除成功); fetchData(); // 刷新列表 } catch (error) { ElMessage.error(删除失败); } };数据导出可以添加一个GET /api/articles/export接口使用 Apache POI 或 EasyExcel 将查询结果生成 Excel 文件供前端下载。这涉及到文件流处理和 HTTP 响应头设置是一个很好的学习点。7. 资源占用与性能观察对于本地开发和学习而言资源占用通常不是问题但了解如何观察和优化是有益的。后端 (SpringBoot) 资源观察启动时观察启动后端时控制台会打印内存初始化信息。关注Started Application in X.XXX seconds启动时间越短越好。JVM 内存你可以通过 JVM 参数调整初始堆内存。在IDE的运行配置或mvn spring-boot:run命令前添加MAVEN_OPTS-Xms256m -Xmx512m mvn spring-boot:run这限制了堆内存使用在 256MB 到 512MB 之间对于学习项目足够。数据库连接池检查application.yml中的 HikariCP 配置SpringBoot 默认。合理的配置能防止连接泄漏。spring: datasource: hikari: maximum-pool-size: 10 # 根据实际调整开发环境5-10即可 connection-timeout: 30000前端 (Vue3 Vite) 资源观察开发服务器运行npm run dev后Vite 会显示本地服务器地址和启动时间。热更新HMR速度是开发体验的关键。构建优化运行npm run build进行生产构建。观察终端输出的打包信息dist/目录的大小。是否有警告提示存在未使用的依赖或大体积包。可以使用rollup-plugin-visualizer生成依赖分析图查看哪些包体积最大。浏览器性能使用 Chrome DevTools 的Lighthouse或Performance面板对构建后的生产包进行分析查看首屏加载时间、最大内容绘制 (LCP) 等指标。通用性能建议后端对于复杂的列表查询务必使用分页PageHelper 或 MyBatis-Plus 分页插件避免一次性加载海量数据。为频繁查询的接口考虑添加缓存如 Redis。前端对于大型表格或列表使用虚拟滚动如vue-virtual-scroller组件。路由使用懒加载 (() import(‘…’))。图片等静态资源进行压缩。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供系统的排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突8080 端口被其他程序如另一个SpringBoot应用、Tomcat占用1. 控制台查看错误信息。2. 命令行运行netstat -ano | findstr :8080(Win) 或lsof -i:8080(Mac/Linux) 查看占用进程。1. 终止占用进程。2. 在application.yml中修改server.port为其他端口如8090。前端启动失败依赖安装报错1. Node.js 版本不兼容。2. 网络问题导致包下载失败。3.node_modules缓存混乱。1. 确认 Node.js 版本符合package.json中的engines要求。2. 检查网络可尝试切换 npm 源npm config set registry https://registry.npmmirror.com。3. 查看具体报错信息。1. 升级或降级 Node.js。2. 清除缓存npm cache clean --force删除node_modules和package-lock.json重新npm install。3. 使用yarn或pnpm重试。数据库连接失败1. MySQL 服务未启动。2.application.yml中数据库配置错误IP、端口、库名、用户名、密码。3. 数据库驱动版本不匹配。1. 检查 MySQL 服务状态。2. 逐项核对配置文件。3. 查看后端启动日志中的 SQL 异常信息。1. 启动 MySQL 服务。2. 修正配置文件。3. 检查pom.xml中mysql-connector-java版本SpringBoot 3 推荐使用8.x版本驱动。前端访问后端 API 404 或跨域错误1. 后端服务未启动。2. 前端代理配置 (vite.config.ts) 错误或未生效。3. 后端未配置跨域。1. 确认后端地址http://localhost:8080能直接访问如打开 Swagger 文档。2. 检查前端请求的完整 URL 是否正确。3. 查看浏览器控制台 Network 标签页的具体错误信息。1. 确保后端服务运行。2. 修正代理配置或环境变量VITE_API_BASE_URL。3. 在后端添加全局跨域配置类 (ConfigurationWebMvcConfigurer)。登录成功但后续接口 401 未授权1. 前端未正确存储或发送 Token。2. Token 已过期。3. 后端 JWT 校验过滤器配置有误。1. 检查浏览器 LocalStorage 是否有 token。2. 检查请求头Authorization是否携带Bearer token。3. 查看后端日志关于 JWT 解析的异常。1. 确保登录后保存 token并在 axios 拦截器中统一设置请求头。2. 实现 Token 自动刷新逻辑或跳转重新登录。3. 检查 JWT 密钥、过期时间配置。页面样式错乱或组件不显示1. Element Plus / Ant Design Vue 等 UI 库未正确引入或版本冲突。2. 自定义样式覆盖了组件样式。3. 浏览器缓存。1. 检查main.ts中 UI 库的引入语句。2. 使用浏览器开发者工具检查元素看样式是否加载。1. 确认package.json中 UI 库版本并参考官方文档重新引入。2. 使用样式穿透 (:deep()) 或调整选择器优先级。3. 禁用缓存或强制刷新。9. 最佳实践与使用建议为了让这个项目更好地服务于你的学习和未来的开发这里有一些进阶建议代码层面理解而非复制尝试逐行阅读关键代码如全局异常处理器 (ControllerAdvice)、统一返回体 (Result)、JWT 过滤器 (JwtAuthenticationTokenFilter)、权限注解 (PreAuthorize) 的实现。理解其设计意图。尝试重构如果你觉得某些代码可以写得更好例如使用更优雅的 Lambda 表达式、Stream API或拆分过大的 Service 类大胆去修改并验证。添加新功能在现有框架上尝试添加一个新模块例如“站内消息通知”或“数据仪表盘”。这能极大锻炼你的架构设计能力。工程化层面使用 Git如果你是从头开始跟着做务必使用 Git 进行版本控制。为每个大的功能点如“完成用户模块”、“实现文章CRUD”进行一次提交并撰写清晰的提交信息。编写接口文档即使项目已有 Swagger尝试为重要的业务接口编写更详细的 Markdown 文档描述其业务场景、请求/响应示例、错误码。配置多环境学习如何配置application-dev.yml,application-prod.yml并通过spring.profiles.active切换开发、测试、生产环境的不同配置如数据库地址、日志级别。部署与扩展尝试 Docker 部署为后端和前端分别编写Dockerfile并使用docker-compose.yml将应用与 MySQL 容器编排在一起。这是现代应用部署的必备技能。思考微服务拆分这个单体项目包含了博客和物业两个业务。思考如果流量增大如何将其拆分为blog-service和property-service需要考虑服务注册发现Nacos、配置中心、API 网关Spring Cloud Gateway等。前端优化实践前端性能优化如图片懒加载、组件异步加载、利用浏览器缓存策略、配置 Nginx 进行静态资源压缩和缓存。安全与合规强化密码安全默认密码是弱密码。在真实场景中密码必须加盐哈希存储使用 BCrypt并强制要求用户使用强密码。接口防刷为登录、短信验证码等接口添加限流如使用 Redis Lua或验证码机制防止恶意攻击。SQL 注入防护坚持使用 MyBatis-Plus 的 Lambda 查询或#{}参数绑定切勿直接拼接 SQL 字符串。XSS 防护对于富文本内容如博客文章在前端展示时进行合适的转义或使用安全的 HTML 净化库。这个 SpringBoot3 Vue3 前后端分离项目为你提供了一个绝佳的、贴近企业实践的沙箱。它的价值不仅在于让你跑通一个系统更在于为你揭示了现代 Web 应用从开发到部署的完整技术图谱。建议你以它为基础选择一个你最感兴趣的方向如性能优化、微服务化、更复杂的权限模型、引入消息队列等进行深度探索和改造这将成为你技术履历中一个扎实的亮点。 
