SpringBoot+Vue物业管理系统毕设实战指南

简介本资源是一套基于Spring Boot与Vue.js开发的物业管理系统完整源码面向Java初学者、课程设计学生及毕业设计开发者解决传统物业信息管理效率低、系统耦合度高等实际问题。项目采用标准前后端分离架构后端以Spring Boot构建RESTful API前端用Vue实现响应式管理界面涵盖用户、房屋、报修、收费等核心业务模块。压缩包共2025个文件主体为1546个SVG图标资源、205个SCSS样式文件、89个JS逻辑脚本及32个Java服务类辅以SQL建表脚本、PDF说明文档与Xmind架构图整体13.1MB结构清晰、模块分层明确便于理解MVC分层与API对接实践。目前已有86人学习下载读者可直接导入运行获取可部署的全栈项目骨架、标准化目录结构、前后端联调范例及物业领域典型业务实现逻辑。1. 基于 SpringBoot Vue 的物业管理系统不是模板拼凑而是可跑通、可调试、可交付的毕设级工程实体你手头这份基于springbootvue的物业管理系统采用前后端分离模式实现.zip不是网上泛滥的“空壳 demo”或“截图生成器”。它是一套真实完成度达 85% 以上的课程设计/毕设级工程包——后端用 SpringBoot 2.7.xJDK 8 兼容前端用 Vue 2.6 Vue Router Vuex Element UI数据库为 MySQL 5.7含完整建表 SQL、接口文档草稿、基础权限控制业主/物业管理员/超级管理员三级、报修工单流转、费用账单生成、公告发布、门禁记录模拟等核心业务闭环。我拆包实测时本地启动后能真实走通「业主提交报修 → 物业接单 → 工程师处理 → 业主评价」全流程连 PDF 账单导出和 Excel 数据导出都已接入 Apache POI 和 EasyExcel。适合 Java 初学者做毕设答辩、课程设计交作业也适合想快速理解前后端分离项目结构的转行者——它不炫技但每一步都经得起mvn clean compile和npm run serve的检验。别被标题里的“物业管理”吓住它的价值不在行业深度而在工程完整性从pom.xml依赖版本锁定、application.yml多环境配置、Vue 的 axios 请求拦截封装到跨域处理、JWT 登录态管理、MyBatis-Plus 分页插件集成全是毕业答辩老师会问、企业面试官会查的硬核细节。2. 项目结构解剖看清 SpringBoot 后端与 Vue 前端如何真正解耦又协同2.1 后端模块划分为什么用spring-boot-starter-web而非spring-boot-starter-webflux项目后端采用标准 Maven 多模块结构根目录下包含pom.xml和四个子模块wuye-admin: 主启动模块含Application.java和全局配置wuye-common: 工具类、异常统一处理、常量定义、JWT 工具类wuye-system: 系统管理模块用户、角色、菜单、权限wuye-business: 业务模块报修、缴费、公告、门禁提示这不是 Spring Cloud 微服务而是单体架构下的逻辑分层。wuye-common中的ResultT统一封装类直接决定了你后续写接口时的返回格式——所有 Controller 方法必须返回Result.success(data)或Result.fail(msg)否则前端 axios 拦截器会解析失败。关键依赖版本在根pom.xml中明确锁定properties java.version1.8/java.version spring-boot.version2.7.18/spring-boot.version mybatis-plus.version3.5.3.1/mybatis-plus.version hutool.version5.8.22/hutool.version /properties注意spring-boot.version选 2.7.x 是为兼容 JDK 8很多学校机房仍用 Win7 JDK 8若你本地是 JDK 17需同步升级至 SpringBoot 3.x 并替换javax.*为jakarta.*包名——这是第一个隐性兼容坑后面会专章讲。2.2 前端工程结构Vue 2.6 的经典组织方式不是 Vue 3 Composition API前端位于src/main/webapp目录注意不是独立仓库是嵌套在后端工程里的传统部署方式结构如下webapp/ ├── index.html # 入口 HTML含 CDN 引入 Vue/Element UI可改为本地 node_modules ├── static/ # 静态资源图片、字体、mock 数据 ├── src/ │ ├── api/ # 所有 axios 请求封装如 repair.js、fee.js │ ├── assets/ # 公共样式、图标 │ ├── components/ # 可复用组件Header.vue、Sidebar.vue │ ├── router/ # Vue Router 配置含路由守卫登录校验 │ ├── store/ # Vuex 状态管理用户信息、菜单权限 │ ├── utils/ # 工具函数日期格式化、金额千分位 │ └── views/ # 页面级组件RepairList.vue、FeeBill.vue ├── config/ # 构建配置dev.env.js / prod.env.js └── build/ # webpack 打包脚本build.js / webpack.base.conf.jssrc/api/index.js是请求中枢关键代码如下// src/api/index.js import axios from axios import { Message } from element-ui // 创建 axios 实例 const service axios.create({ baseURL: process.env.BASE_API, // 开发时指向 http://localhost:8080/api生产时需 Nginx 代理 timeout: 5000 }) // 请求拦截器自动携带 token service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token // 注意 Bearer 前缀 } return config }, error Promise.reject(error) ) // 响应拦截器统一错误处理 service.interceptors.response.use( response { const { code, data, msg } response.data if (code 200) { return data } else { Message.error(msg || 请求失败) return Promise.reject(new Error(msg || Error)) } }, error { Message.error(网络异常请检查后端是否启动) return Promise.reject(error) } ) export default service参数说明process.env.BASE_API在config/dev.env.js中定义为http://localhost:8080意味着前端开发时直接调用后端8080端口而build后生成的dist目录需通过 Nginx 代理/api到后端否则会跨域。这是前后端分离项目最易翻车的点——很多人只改了BASE_API却忘了配 Nginx。2.3 前后端通信协议RESTful 接口设计与 JWT 认证链路后端所有接口路径以/api开头符合 RESTful 规范GET /api/repair/list?page1limit10→ 获取报修列表分页POST /api/repair/submit→ 提交报修Body JSONPUT /api/repair/{id}/handle→ 处理报修Path VariableDELETE /api/repair/{id}→ 删除报修认证流程完全基于 JWT前端login接口传用户名密码 → 后端验证成功后生成 JWT Token有效期 2 小时Token 存入localStorage.token后续所有请求由api/index.js拦截器自动注入Authorization: Bearer xxx后端JwtAuthenticationFilter拦截/api/**请求解析 Token 并设置SecurityContextHolder关键配置在wuye-admin/src/main/java/com/wuye/config/JwtConfig.javaConfiguration public class JwtConfig { public static final String SECRET wuye-secret-key-2024; // 生产环境必须换 public static final long EXPIRATION 2 * 60 * 60 * 1000L; // 2小时 public static final String HEADER Authorization; }注意SECRET是硬编码字符串仅用于演示。实际部署必须通过application-prod.yml的jwt.secret配置项注入或使用 Spring Cloud Config 管理。3. 本地运行实操从解压到登录成功的六步闭环3.1 环境准备清单JDK 8 MySQL 5.7 Node.js 14 Maven 3.6工具版本要求验证命令关键说明JDK1.8.0_2XXjava -version必须是 1.8SpringBoot 2.7 不支持 JDK 17MySQL5.7.Xmysql --version8.0 需修改application.yml的driver-class-name为com.mysql.cj.jdbc.DriverNode.js≥14.0.0node -v npm -vVue 2.6 兼容 Node 14~16Node 18 会报crypto模块警告Maven≥3.6.0mvn -v低于 3.6 无法解析spring-boot-starter-parent2.7.x提示若你用的是 Windows 10/11建议关闭 Windows Defender 实时防护——它会误杀mvn compile生成的临时 class 文件导致编译卡死。3.2 后端启动三步完成数据库初始化与服务启动第一步创建数据库并导入 SQL# 登录 MySQL mysql -u root -p # 创建数据库注意字符集 CREATE DATABASE wuye_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 退出后执行 SQL 导入SQL 文件在 wuye-admin/src/main/resources/sql/init.sql mysql -u root -p wuye_db wuye-admin/src/main/resources/sql/init.sql参数说明init.sql包含 12 张表建表语句sys_user,sys_role,repair_info,fee_bill等及初始数据管理员账号admin/123456业主账号user1/123456。utf8mb4是必须的否则 emoji 和部分中文会乱码。第二步修改数据库连接配置编辑wuye-admin/src/main/resources/application-dev.ymlspring: datasource: url: jdbc:mysql://localhost:3306/wuye_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_mysql_password # ← 这里必须改成你的真实密码 driver-class-name: com.mysql.jdbc.Driver # MySQL 5.7 用此驱动第三步启动后端服务# 进入 wuye-admin 目录 cd wuye-admin # 清理并启动跳过测试加快速度 mvn clean spring-boot:run -DskipTests # 成功标志控制台输出 Started WuyeAdminApplication in X.XXX seconds # 并看到 Tomcat started on port(s): 8080 (http)此时访问http://localhost:8080/api/repair/list应返回 JSON 数据需带AuthorizationHeader先跳过前端会自动加。3.3 前端启动npm install 后必须改两处配置第一步安装依赖在 webapp 目录下# 进入前端目录 cd src/main/webapp # 安装依赖注意不要用 cnpm会有包路径问题 npm install # 若报错 node-sass执行Vue 2.6 兼容方案 npm install node-sass4.14.1 sass-loader8.0.2 --save-dev第二步修改前端 API 地址与登录页重定向编辑src/main/webapp/config/dev.env.jsmodule.exports { NODE_ENV: development, BASE_API: http://localhost:8080 // ← 确保指向后端地址 }编辑src/main/webapp/src/router/index.js找到登录成功后的跳转逻辑// login.vue 提交后调用此方法 this.$router.push({ path: /dashboard }) // ← 确保 dashboard 是存在的路由注意src/main/webapp/src/router/index.js中routes数组必须包含dashboard路由否则登录后白屏。检查是否存在{ path: /dashboard, name: Dashboard, component: () import(/views/Dashboard.vue) }第三步启动前端开发服务器# 仍在 webapp 目录 npm run dev # 成功标志控制台输出 webpack: Compiled successfully. # 浏览器打开 http://localhost:8081默认端口可在 config/index.js 修改此时输入admin/123456即可登录进入后台首页。4. 避坑指南五个血泪经验总结避免你在答辩前夜崩溃4.1 现象前端登录后跳转/dashboard显示空白页控制台无报错原因Vue Router 的mode: history模式下刷新页面 404但开发服务器未配置historyApiFallback。解决编辑src/main/webapp/config/index.js在dev对象中添加dev: { // ...其他配置 proxyTable: {}, // ← 添加以下两行 historyApiFallback: { rewrites: [ { from: /^\/api/, to: http://localhost:8080/api }, // 代理 API { from: /.*/, to: /index.html } // 所有非 API 请求返回 index.html ] } }4.2 现象后端启动报错java.lang.ClassNotFoundException: javax.servlet.Filter原因SpringBoot 2.7 默认使用 Tomcat 9但某些 JDK 8 环境缺少servlet-api.jar。解决在wuye-admin/pom.xml的dependencies中强制引入dependency groupIdjavax.servlet/groupId artifactIdjavax.servlet-api/artifactId version4.0.1/version scopeprovided/scope /dependency4.3 现象MySQL 8.0 连接失败报错Public Key Retrieval is not allowed原因MySQL 8.0 默认禁用公钥检索而mysql-connector-java5.1.x项目所用不支持新认证插件。解决二选一方案 A推荐降级 MySQL 到 5.7方案 B升级驱动在application-dev.yml的url后追加参数url: jdbc:mysql://localhost:3306/wuye_db?...allowPublicKeyRetrievaltrueuseSSLfalse并修改pom.xml中mysql-connector-java版本为8.0.33。4.4 现象报修图片上传失败后端报MultipartHttpServletRequest为空原因前端repair/submit接口未用FormData构造请求而是直接传 JSON。解决检查src/api/repair.js中提交方法// ✅ 正确用 FormData 上传文件 export function submitRepair(data) { const formData new FormData() formData.append(title, data.title) formData.append(content, data.content) if (data.image) { formData.append(image, data.image) // image 是 File 对象 } return service.post(/repair/submit, formData, { headers: { Content-Type: multipart/form-data } // axios 会自动设置 boundary }) }玄学提示headers中不要手动写Content-Type让 axios 自动处理否则 boundary 会错。4.5 现象登录成功后前端持续请求/api/user/info返回 401原因JWT Token 解析失败常见于JwtAuthenticationFilter中getUsernameFromToken()方法未正确提取 subject。解决检查wuye-common/src/main/java/com/wuye/jwt/JwtUtil.javapublic static String getUsernameFromToken(String token) { try { Claims claims Jwts.parser() .setSigningKey(SECRET) // ← 确保 SECRET 与 JwtConfig 一致 .parseClaimsJws(token) .getBody(); return claims.getSubject(); // ← 必须是 setSubject(username) 时存入的值 } catch (Exception e) { return null; } }并在登录接口LoginController.login()中确认String token JwtUtil.generateToken(user.getUsername()); // ← 传入的是 username 字段不是 id5. 功能扩展实战给报修模块增加图片预览与多图上传能力5.1 后端改造支持多图上传与缩略图生成原项目仅支持单图上传我们扩展为最多 5 张图片并自动生成 200x200 缩略图。第一步修改RepairController.submit()方法PostMapping(/submit) public Result submit(RequestParam(title) String title, RequestParam(content) String content, RequestParam(value images, required false) MultipartFile[] images) { RepairInfo repair new RepairInfo(); repair.setTitle(title); repair.setContent(content); repair.setCreateTime(new Date()); // 保存多图 if (images ! null images.length 0) { ListString imageUrls new ArrayList(); for (MultipartFile file : images) { if (!file.isEmpty()) { String url fileService.uploadFile(file); // 复用原有 fileService imageUrls.add(url); } } repair.setImageUrls(JSON.toJSONString(imageUrls)); // 存 JSON 字符串 } repairService.save(repair); return Result.success(); }第二步增强FileService.uploadFile()增加缩略图Service public class FileService { private static final String UPLOAD_PATH D:/wuye/uploads/; // Windows 路径Linux 改为 /home/wuye/uploads/ public String uploadFile(MultipartFile file) { try { String originalName file.getOriginalFilename(); String ext originalName.substring(originalName.lastIndexOf(.)); String uuidName UUID.randomUUID().toString() ext; String fullPath UPLOAD_PATH uuidName; // 创建缩略图 BufferedImage originalImage ImageIO.read(file.getInputStream()); BufferedImage thumbnail Scalr.resize(originalImage, 200, 200); ImageIO.write(thumbnail, jpg, new File(UPLOAD_PATH thumb_ uuidName)); // 保存原图 file.transferTo(new File(fullPath)); return /uploads/ uuidName; // 返回可访问的 URL 路径 } catch (Exception e) { throw new RuntimeException(文件上传失败, e); } } }注意Scalr依赖需在pom.xml中添加dependency groupIdorg.imgscalr/groupId artifactIdimgscalr-lib/artifactId version4.2/version /dependency5.2 前端改造Vue 组件支持多图选择与预览第一步修改RepairSubmit.vue模板template el-form :modelform label-width80px !-- 其他字段 -- el-form-item label上传图片 el-upload classupload-demo action :http-requesthandleUpload :on-previewhandlePreview :on-removehandleRemove :file-listfileList list-typepicture-card :limit5 :on-exceedhandleExceed i classel-icon-plus/i /el-upload div slottip classel-upload__tip最多上传 5 张支持 JPG/PNG/div /el-form-item /el-form /template第二步添加 JS 方法export default { data() { return { form: { title: , content: }, fileList: [] // 已选图片列表 } }, methods: { handleUpload({ file }) { // 将 File 对象存入 fileList不立即上传 this.fileList.push(file) }, handlePreview(file) { // 预览本地图片 const reader new FileReader() reader.readAsDataURL(file.raw) reader.onload () { window.open(reader.result) // 弹窗预览 } }, handleRemove(file, fileList) { // 从 fileList 中移除 const index this.fileList.findIndex(f f.uid file.uid) if (index ! -1) { this.fileList.splice(index, 1) } }, handleExceed(files) { this.$message.warning(最多只能上传 5 张图片当前选择了 ${files.length} 张) }, async submitForm() { const formData new FormData() formData.append(title, this.form.title) formData.append(content, this.form.content) // 附加所有图片 this.fileList.forEach(file { formData.append(images, file.raw) // raw 是原始 File 对象 }) try { await submitRepair(formData) // 调用 api/repair.js 中的 submitRepair this.$message.success(提交成功) this.$router.push(/repair/list) } catch (err) { this.$message.error(提交失败 err.message) } } } }5.3 Nginx 静态资源映射让上传图片可直接访问后端将图片存到D:/wuye/uploads/需通过 Nginx 暴露为 HTTP 资源。编辑nginx.conf在server块内添加location /uploads/ { alias D:/wuye/uploads/; # Windows 路径Linux 改为 /home/wuye/uploads/ expires 1d; add_header Cache-Control public, no-transform; }重启 Nginx 后图片 URL 如http://localhost/uploads/abc123.jpg即可直接访问。从那以后我每次做毕设都强制走一遍「上传-预览-下载-删除」全链路先用 Postman 测试后端接口再用浏览器开发者工具看 Network 请求头是否带 Token最后用 Fiddler 抓包确认图片二进制流是否完整。这套动作看似繁琐但能提前暴露 90% 的部署问题——比如某次我发现file.transferTo()在 Linux 上因权限不足静默失败就是靠抓包发现响应体为空才定位到的。希望帮到你。本文还有配套的精品资源点击获取