尧图网站建设 
简介这份资源是基于Spring Boot与Vue.js的物业管理系统完整源码包采用前后端分离架构面向Java课程设计、毕业设计学生及需要项目架构参考的开发者。后端以Spring Boot提供数据接口与服务前端用Vue组件化构建交互界面两者通过API通信适合学习企业级Web项目的分层设计与模块划分。压缩包共2025个文件约13.1MB其中svg与scss、css、less等样式资源占比较大用于界面图标与主题美化js与html构成前端页面逻辑32个java文件承载后端控制器与服务类另含sql脚本、properties配置、xml映射及少量pdf、xmind文档便于理解数据库与项目结构。目前已有87人学习下载。读者可从中获取一套可运行的课程设计或毕设参考方案观察前后端分离的目录组织、接口调用与样式工程化实践并借助配置与脚本文件快速还原开发环境适合作为项目架构学习与二次开发的起点。1. 从一份物业管理系统源码包说起前后端分离到底拆了什么很多同学做 Java 课程设计或毕设时拿到一个「基于 SpringBoot Vue 的物业管理系统」压缩包第一反应是解压、找 main 方法、点运行然后发现前端跑不起来、后端连不上库、登录接口 404。这套系统采用前后端分离模式后端 SpringBoot 提供 REST 接口前端 Vue 单独起服务两边通过 HTTP 和 JSON 通信。它能解决的核心问题是把业主、房产、车位、报修、缴费、公告这些物业场景的数据流串成一条可演示、可答辩的完整链路。适合正在找 Java 项目架构参考的课程设计学生也适合想补一个前后端分离项目实战经验的初级开发者。下面按「资源是什么 → 怎么跑起来 → 坑在哪 → 怎么改」的顺序拆开讲。2. 后端 SpringBoot 工程结构与接口分层先看懂再动手2.1 典型目录长什么样各层职责怎么分拿到源码后别急着改代码先把后端目录结构过一遍。一个规范的 SpringBoot 物业管理系统后端常见做法是按controller、service、mapper、entity、config、common分层。controller只负责接收请求和返回统一响应体service写业务逻辑mapper对应 MyBatis 的数据库操作entity是跟表字段一一映射的实体类。config里通常放跨域配置、拦截器注册、MyBatis 分页插件等。common放统一返回结果类Result、全局异常处理GlobalExceptionHandler、常量类。我一般会先看application.yml因为数据库连接、端口、文件上传路径这些关键参数都在这。物业系统常见的表有owner业主、house房产、parking车位、repair报修工单、fee缴费记录、notice公告。实体类字段跟这些表对应命名上多是驼峰转下划线。# application.yml 关键片段 server: port: 8081 # 后端端口前端代理要跟这个对上 spring: datasource: url: jdbc:mysql://localhost:3306/property_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB # 报修图片上传大小限制 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这段配置里server.port决定后端监听端口前端vue.config.js里的代理目标必须跟它一致否则请求会打到错误端口。url里的serverTimezone不写容易在插入时间字段时报时区错误。map-underscore-to-camel-case打开后数据库的create_time能自动映射到实体的createTime省掉大量手动映射。2.2 统一响应体与全局异常答辩时最容易被问的点物业系统的接口返回值通常包一层Result包含code、msg、data三个字段。这样做的好处是前端拦截器能统一判断成功失败不用每个接口单独写判断逻辑。// Result.java 统一响应体 public class ResultT { private Integer code; // 200 成功500 失败 private String msg; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMsg(操作成功); r.setData(data); return r; } public static T ResultT error(String msg) { ResultT r new Result(); r.setCode(500); r.setMsg(msg); return r; } }配合RestControllerAdvice写一个全局异常处理器把NullPointerException、SQLException这类异常统一转成Result.error前端就不会收到一堆 500 堆栈。参数说明code用 200/500 是常见约定也可以换成 0/1但前后端要统一。msg建议写用户能看懂的话别把异常堆栈直接返回。2.3 跨域配置前后端分离绕不开的第一道坎前端跑在 8080后端跑在 8081浏览器同源策略会拦请求。常见做法是在后端加一个CorsConfig或者用 SpringBoot 的CrossOrigin注解。更推荐全局配置避免每个 Controller 都加。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 开发阶段放开上线要收紧 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) .maxAge(3600); } }allowedOriginPatterns(*)在 SpringBoot 2.4 以后替代了allowedOrigins(*)因为后者跟allowCredentials(true)同时用会报错。maxAge(3600)表示预检请求结果缓存一小时减少 OPTIONS 请求次数。上线时把*换成具体域名这是安全底线。3. 前端 Vue 工程怎么接后端代理、路由与请求封装3.1 vue.config.js 代理配置让 /api 请求落到 8081前端 Vue 项目通常用axios发请求开发阶段通过devServer.proxy把/api开头的请求转发到后端。这样前端代码里写/api/owner/list实际请求会打到http://localhost:8081/owner/list。// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 跟后端 server.port 一致 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀再转发 } } } }changeOrigin: true会把请求头里的 host 改成目标地址避免后端校验 host 失败。pathRewrite决定是否去掉前缀如果后端接口本身不带/api就必须重写如果后端 Controller 映射就是/api/owner那就不用重写。这两个参数配错表现就是 404但浏览器 Network 里能看到请求确实发出去了。3.2 axios 请求封装与响应拦截直接在组件里写axios.get会导致每个页面重复处理 token、错误提示。常见做法是建一个request.js创建 axios 实例加请求拦截器和响应拦截器。// utils/request.js import axios from axios import { Message } from element-ui const service axios.create({ baseURL: /api, // 配合代理使用 timeout: 10000 }) // 请求拦截统一带 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) // 响应拦截统一处理 code service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res.data // 直接返回业务数据组件里少写一层 .data }, error { Message.error(error.message) return Promise.reject(error) } ) export default servicebaseURL: /api跟代理前缀对应改一处两边都生效。响应拦截里判断res.code ! 200就弹提示并 reject组件里只需要try/catch或.catch。return res.data让组件拿到的直接是业务数据不用再写res.data.data这是很多新手容易绕晕的地方。3.3 路由与菜单权限物业系统的角色区分物业系统一般有管理员、业主两种角色。管理员能管房产、车位、收费业主只能看自己的报修和缴费。前端路由用vue-router的meta.roles标记配合全局前置守卫判断。// router/index.js const routes [ { path: /owner, component: () import(/views/owner/Index.vue), meta: { roles: [admin], title: 业主管理 } }, { path: /repair, component: () import(/views/repair/Index.vue), meta: { roles: [admin, owner], title: 报修管理 } } ] router.beforeEach((to, from, next) { const role localStorage.getItem(role) if (to.meta.roles !to.meta.roles.includes(role)) { next(/403) // 无权限跳转 } else { next() } })meta.roles是自定义字段路由守卫里读取当前角色判断。注意前端权限只是展示层控制真正的数据隔离必须后端也做否则改一下 localStorage 就能越权。后端在查询报修列表时要根据当前登录用户 id 过滤管理员查全部业主只查自己的。4. 数据库与核心业务表物业系统的数据底座4.1 建库建表与初始化数据拿到源码后先找sql目录下的.sql文件导入 MySQL。常见做法是用 Navicat 或命令行source执行。建库语句一般指定utf8mb4否则业主姓名里的生僻字会乱码。CREATE DATABASE property_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE property_db; CREATE TABLE owner ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 业主姓名, phone VARCHAR(20) NOT NULL COMMENT 手机号, house_id INT DEFAULT NULL COMMENT 关联房产, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_phone (phone) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;utf8mb4比utf8多支持 emoji 和部分生僻字物业系统里业主备注可能带表情用utf8mb4省心。uk_phone唯一索引防止同一手机号重复录入。create_time默认当前时间插入时不用手动传。4.2 报修工单的状态流转报修是物业系统里状态最多的业务。常见状态有待处理、处理中、已完成、已取消。后端更新状态时要用条件更新防止并发下状态被覆盖。UPDATE repair SET status 处理中, handler_id #{handlerId} WHERE id #{id} AND status 待处理;这条 SQL 的WHERE里带了status 待处理只有当前状态还是待处理时才更新。如果两个管理员同时点「接单」只有一个能成功另一个影响行数为 0后端据此返回「工单已被接取」。这是乐观锁的简化写法比加版本号字段更直观。4.3 缴费记录与金额字段类型缴费金额千万别用FLOAT或DOUBLE浮点数在累加时会出现0.1 0.2 0.30000000000000004这种问题。用DECIMAL(10,2)Java 侧对应BigDecimal。CREATE TABLE fee ( id INT NOT NULL AUTO_INCREMENT, owner_id INT NOT NULL, amount DECIMAL(10,2) NOT NULL COMMENT 缴费金额, fee_type VARCHAR(20) COMMENT 物业费/水费/电费, pay_time DATETIME, status TINYINT DEFAULT 0 COMMENT 0未缴 1已缴, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;DECIMAL(10,2)表示总共 10 位小数 2 位最大 99999999.99够物业场景用。Java 实体里用BigDecimal amountMyBatis 会自动映射。计算总金额时用BigDecimal.add别用。5. 避坑与排查跑不起来时先看这几条5.1 后端启动报数据库连接失败现象启动时抛Communications link failure或Access denied for user。原因通常是application.yml里的密码跟本地 MySQL 不一致或者 MySQL 服务没启动。解决先用命令行mysql -uroot -p确认能登录再核对url里的库名、端口。如果报时区错误在url末尾加serverTimezoneAsia/Shanghai。5.2 前端 npm install 卡住或报 node 版本不兼容现象npm install长时间无响应或node-sass编译失败。原因多是 node 版本跟依赖不匹配老项目常用 node 14/16新机器装了 node 20 就容易翻车。解决用 nvm 切到项目package.json里engines指定的版本或者把node-sass换成sassdart-sass。没有engines字段就试 node 16。5.3 登录接口 200 但前端一直跳登录页现象登录请求返回了 token但路由守卫还是把页面踢回登录。原因通常是 token 存到了localStorage但请求拦截器读的 key 不一致或者路由守卫判断的是store.state.token而没同步。解决全局搜localStorage.setItem和getItem的 key确保一致用 Vuex 的话在登录成功后commit一下。5.4 图片上传成功但回显 404现象报修图片上传后数据库存了路径但前端img显示裂图。原因是后端把文件存到了本地磁盘但没有配置静态资源映射。解决在application.yml里配spring.resources.static-locations或者写一个WebMvcConfigurer把上传目录映射到/upload/**。注意路径分隔符在 Windows 和 Linux 下不同用File.separator。5.5 分页查询总数不对现象列表只显示 10 条但总数显示 0 或跟实际不符。原因多是 MyBatis-Plus 分页插件没注册或者手写 SQL 时count语句的WHERE条件跟查询语句不一致。解决检查MybatisPlusConfig里有没有PaginationInnerInterceptor手写分页时把条件抽成公共where片段。6. 二次开发与验证把物业系统改成你自己的毕设6.1 加一个「访客登记」模块的完整链路想在这个系统上加功能按「建表 → 实体 → mapper → service → controller → 前端页面 → 路由」的顺序走。以访客登记为例先建表CREATE TABLE visitor ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, phone VARCHAR(20), visit_time DATETIME, reason VARCHAR(200), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;后端VisitorController暴露/visitor/list、/visitor/add、/visitor/delete三个接口返回Result。前端在views/visitor/Index.vue里用el-table展示el-dialog加表单。路由里加一条meta: { roles: [admin] }。这样一套下来答辩时能讲清楚数据从表单到数据库再回显的完整链路。6.2 用 Postman 验证接口再联调前端前端页面出问题时先别改前端用 Postman 直接打后端接口。如果 Postman 能返回正确数据问题就在前端代理或请求封装如果 Postman 也报错看后端日志。常见做法是后端开logging.level.com.你的包debug把 SQL 打出来。验证顺序数据库有数据 → 后端接口返回 200 → 前端 Network 里请求 URL 正确 → 响应拦截器没误判。6.3 打包部署时前端放哪开发阶段前后端分开跑部署时常见两种做法一是前端npm run build生成dist用 Nginx 托管Nginx 里配/api反向代理到后端二是把dist放进 SpringBoot 的resources/static后端直接托管静态资源。第二种简单但前后端耦合改前端要重新打包后端。第一种更符合前后端分离的初衷Nginx 配置如下server { listen 80; location / { root /usr/share/nginx/html; # dist 目录 try_files $uri $uri/ /index.html; # 解决刷新 404 } location /api/ { proxy_pass http://127.0.0.1:8081/; } }try_files那行是关键Vue 是单页应用刷新非根路径时 Nginx 找不到对应文件会 404回退到index.html让前端路由接管。proxy_pass末尾的/决定是否去掉/api前缀跟开发阶段的pathRewrite逻辑对应。从那以后我每次拿到一个前后端分离的源码包都强制先跑通「数据库导入 → 后端启动 → Postman 验证一个接口 → 前端代理配置 → 登录」这条最小链路再去看业务代码。这套物业管理系统结构清晰、业务闭环完整适合作为课程设计或毕设的底子改起来也有明确的入手点。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue前后端分离物业管理系统源码解析与实战避坑
简介这份资源是基于Spring Boot与Vue.js的物业管理系统完整源码包采用前后端分离架构面向Java课程设计、毕业设计学生及需要项目架构参考的开发者。后端以Spring Boot提供数据接口与服务前端用Vue组件化构建交互界面两者通过API通信适合学习企业级Web项目的分层设计与模块划分。压缩包共2025个文件约13.1MB其中svg与scss、css、less等样式资源占比较大用于界面图标与主题美化js与html构成前端页面逻辑32个java文件承载后端控制器与服务类另含sql脚本、properties配置、xml映射及少量pdf、xmind文档便于理解数据库与项目结构。目前已有87人学习下载。读者可从中获取一套可运行的课程设计或毕设参考方案观察前后端分离的目录组织、接口调用与样式工程化实践并借助配置与脚本文件快速还原开发环境适合作为项目架构学习与二次开发的起点。1. 从一份物业管理系统源码包说起前后端分离到底拆了什么很多同学做 Java 课程设计或毕设时拿到一个「基于 SpringBoot Vue 的物业管理系统」压缩包第一反应是解压、找 main 方法、点运行然后发现前端跑不起来、后端连不上库、登录接口 404。这套系统采用前后端分离模式后端 SpringBoot 提供 REST 接口前端 Vue 单独起服务两边通过 HTTP 和 JSON 通信。它能解决的核心问题是把业主、房产、车位、报修、缴费、公告这些物业场景的数据流串成一条可演示、可答辩的完整链路。适合正在找 Java 项目架构参考的课程设计学生也适合想补一个前后端分离项目实战经验的初级开发者。下面按「资源是什么 → 怎么跑起来 → 坑在哪 → 怎么改」的顺序拆开讲。2. 后端 SpringBoot 工程结构与接口分层先看懂再动手2.1 典型目录长什么样各层职责怎么分拿到源码后别急着改代码先把后端目录结构过一遍。一个规范的 SpringBoot 物业管理系统后端常见做法是按controller、service、mapper、entity、config、common分层。controller只负责接收请求和返回统一响应体service写业务逻辑mapper对应 MyBatis 的数据库操作entity是跟表字段一一映射的实体类。config里通常放跨域配置、拦截器注册、MyBatis 分页插件等。common放统一返回结果类Result、全局异常处理GlobalExceptionHandler、常量类。我一般会先看application.yml因为数据库连接、端口、文件上传路径这些关键参数都在这。物业系统常见的表有owner业主、house房产、parking车位、repair报修工单、fee缴费记录、notice公告。实体类字段跟这些表对应命名上多是驼峰转下划线。# application.yml 关键片段 server: port: 8081 # 后端端口前端代理要跟这个对上 spring: datasource: url: jdbc:mysql://localhost:3306/property_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB # 报修图片上传大小限制 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这段配置里server.port决定后端监听端口前端vue.config.js里的代理目标必须跟它一致否则请求会打到错误端口。url里的serverTimezone不写容易在插入时间字段时报时区错误。map-underscore-to-camel-case打开后数据库的create_time能自动映射到实体的createTime省掉大量手动映射。2.2 统一响应体与全局异常答辩时最容易被问的点物业系统的接口返回值通常包一层Result包含code、msg、data三个字段。这样做的好处是前端拦截器能统一判断成功失败不用每个接口单独写判断逻辑。// Result.java 统一响应体 public class ResultT { private Integer code; // 200 成功500 失败 private String msg; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMsg(操作成功); r.setData(data); return r; } public static T ResultT error(String msg) { ResultT r new Result(); r.setCode(500); r.setMsg(msg); return r; } }配合RestControllerAdvice写一个全局异常处理器把NullPointerException、SQLException这类异常统一转成Result.error前端就不会收到一堆 500 堆栈。参数说明code用 200/500 是常见约定也可以换成 0/1但前后端要统一。msg建议写用户能看懂的话别把异常堆栈直接返回。2.3 跨域配置前后端分离绕不开的第一道坎前端跑在 8080后端跑在 8081浏览器同源策略会拦请求。常见做法是在后端加一个CorsConfig或者用 SpringBoot 的CrossOrigin注解。更推荐全局配置避免每个 Controller 都加。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 开发阶段放开上线要收紧 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) .maxAge(3600); } }allowedOriginPatterns(*)在 SpringBoot 2.4 以后替代了allowedOrigins(*)因为后者跟allowCredentials(true)同时用会报错。maxAge(3600)表示预检请求结果缓存一小时减少 OPTIONS 请求次数。上线时把*换成具体域名这是安全底线。3. 前端 Vue 工程怎么接后端代理、路由与请求封装3.1 vue.config.js 代理配置让 /api 请求落到 8081前端 Vue 项目通常用axios发请求开发阶段通过devServer.proxy把/api开头的请求转发到后端。这样前端代码里写/api/owner/list实际请求会打到http://localhost:8081/owner/list。// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 跟后端 server.port 一致 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀再转发 } } } }changeOrigin: true会把请求头里的 host 改成目标地址避免后端校验 host 失败。pathRewrite决定是否去掉前缀如果后端接口本身不带/api就必须重写如果后端 Controller 映射就是/api/owner那就不用重写。这两个参数配错表现就是 404但浏览器 Network 里能看到请求确实发出去了。3.2 axios 请求封装与响应拦截直接在组件里写axios.get会导致每个页面重复处理 token、错误提示。常见做法是建一个request.js创建 axios 实例加请求拦截器和响应拦截器。// utils/request.js import axios from axios import { Message } from element-ui const service axios.create({ baseURL: /api, // 配合代理使用 timeout: 10000 }) // 请求拦截统一带 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) // 响应拦截统一处理 code service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res.data // 直接返回业务数据组件里少写一层 .data }, error { Message.error(error.message) return Promise.reject(error) } ) export default servicebaseURL: /api跟代理前缀对应改一处两边都生效。响应拦截里判断res.code ! 200就弹提示并 reject组件里只需要try/catch或.catch。return res.data让组件拿到的直接是业务数据不用再写res.data.data这是很多新手容易绕晕的地方。3.3 路由与菜单权限物业系统的角色区分物业系统一般有管理员、业主两种角色。管理员能管房产、车位、收费业主只能看自己的报修和缴费。前端路由用vue-router的meta.roles标记配合全局前置守卫判断。// router/index.js const routes [ { path: /owner, component: () import(/views/owner/Index.vue), meta: { roles: [admin], title: 业主管理 } }, { path: /repair, component: () import(/views/repair/Index.vue), meta: { roles: [admin, owner], title: 报修管理 } } ] router.beforeEach((to, from, next) { const role localStorage.getItem(role) if (to.meta.roles !to.meta.roles.includes(role)) { next(/403) // 无权限跳转 } else { next() } })meta.roles是自定义字段路由守卫里读取当前角色判断。注意前端权限只是展示层控制真正的数据隔离必须后端也做否则改一下 localStorage 就能越权。后端在查询报修列表时要根据当前登录用户 id 过滤管理员查全部业主只查自己的。4. 数据库与核心业务表物业系统的数据底座4.1 建库建表与初始化数据拿到源码后先找sql目录下的.sql文件导入 MySQL。常见做法是用 Navicat 或命令行source执行。建库语句一般指定utf8mb4否则业主姓名里的生僻字会乱码。CREATE DATABASE property_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE property_db; CREATE TABLE owner ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 业主姓名, phone VARCHAR(20) NOT NULL COMMENT 手机号, house_id INT DEFAULT NULL COMMENT 关联房产, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_phone (phone) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;utf8mb4比utf8多支持 emoji 和部分生僻字物业系统里业主备注可能带表情用utf8mb4省心。uk_phone唯一索引防止同一手机号重复录入。create_time默认当前时间插入时不用手动传。4.2 报修工单的状态流转报修是物业系统里状态最多的业务。常见状态有待处理、处理中、已完成、已取消。后端更新状态时要用条件更新防止并发下状态被覆盖。UPDATE repair SET status 处理中, handler_id #{handlerId} WHERE id #{id} AND status 待处理;这条 SQL 的WHERE里带了status 待处理只有当前状态还是待处理时才更新。如果两个管理员同时点「接单」只有一个能成功另一个影响行数为 0后端据此返回「工单已被接取」。这是乐观锁的简化写法比加版本号字段更直观。4.3 缴费记录与金额字段类型缴费金额千万别用FLOAT或DOUBLE浮点数在累加时会出现0.1 0.2 0.30000000000000004这种问题。用DECIMAL(10,2)Java 侧对应BigDecimal。CREATE TABLE fee ( id INT NOT NULL AUTO_INCREMENT, owner_id INT NOT NULL, amount DECIMAL(10,2) NOT NULL COMMENT 缴费金额, fee_type VARCHAR(20) COMMENT 物业费/水费/电费, pay_time DATETIME, status TINYINT DEFAULT 0 COMMENT 0未缴 1已缴, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;DECIMAL(10,2)表示总共 10 位小数 2 位最大 99999999.99够物业场景用。Java 实体里用BigDecimal amountMyBatis 会自动映射。计算总金额时用BigDecimal.add别用。5. 避坑与排查跑不起来时先看这几条5.1 后端启动报数据库连接失败现象启动时抛Communications link failure或Access denied for user。原因通常是application.yml里的密码跟本地 MySQL 不一致或者 MySQL 服务没启动。解决先用命令行mysql -uroot -p确认能登录再核对url里的库名、端口。如果报时区错误在url末尾加serverTimezoneAsia/Shanghai。5.2 前端 npm install 卡住或报 node 版本不兼容现象npm install长时间无响应或node-sass编译失败。原因多是 node 版本跟依赖不匹配老项目常用 node 14/16新机器装了 node 20 就容易翻车。解决用 nvm 切到项目package.json里engines指定的版本或者把node-sass换成sassdart-sass。没有engines字段就试 node 16。5.3 登录接口 200 但前端一直跳登录页现象登录请求返回了 token但路由守卫还是把页面踢回登录。原因通常是 token 存到了localStorage但请求拦截器读的 key 不一致或者路由守卫判断的是store.state.token而没同步。解决全局搜localStorage.setItem和getItem的 key确保一致用 Vuex 的话在登录成功后commit一下。5.4 图片上传成功但回显 404现象报修图片上传后数据库存了路径但前端img显示裂图。原因是后端把文件存到了本地磁盘但没有配置静态资源映射。解决在application.yml里配spring.resources.static-locations或者写一个WebMvcConfigurer把上传目录映射到/upload/**。注意路径分隔符在 Windows 和 Linux 下不同用File.separator。5.5 分页查询总数不对现象列表只显示 10 条但总数显示 0 或跟实际不符。原因多是 MyBatis-Plus 分页插件没注册或者手写 SQL 时count语句的WHERE条件跟查询语句不一致。解决检查MybatisPlusConfig里有没有PaginationInnerInterceptor手写分页时把条件抽成公共where片段。6. 二次开发与验证把物业系统改成你自己的毕设6.1 加一个「访客登记」模块的完整链路想在这个系统上加功能按「建表 → 实体 → mapper → service → controller → 前端页面 → 路由」的顺序走。以访客登记为例先建表CREATE TABLE visitor ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, phone VARCHAR(20), visit_time DATETIME, reason VARCHAR(200), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;后端VisitorController暴露/visitor/list、/visitor/add、/visitor/delete三个接口返回Result。前端在views/visitor/Index.vue里用el-table展示el-dialog加表单。路由里加一条meta: { roles: [admin] }。这样一套下来答辩时能讲清楚数据从表单到数据库再回显的完整链路。6.2 用 Postman 验证接口再联调前端前端页面出问题时先别改前端用 Postman 直接打后端接口。如果 Postman 能返回正确数据问题就在前端代理或请求封装如果 Postman 也报错看后端日志。常见做法是后端开logging.level.com.你的包debug把 SQL 打出来。验证顺序数据库有数据 → 后端接口返回 200 → 前端 Network 里请求 URL 正确 → 响应拦截器没误判。6.3 打包部署时前端放哪开发阶段前后端分开跑部署时常见两种做法一是前端npm run build生成dist用 Nginx 托管Nginx 里配/api反向代理到后端二是把dist放进 SpringBoot 的resources/static后端直接托管静态资源。第二种简单但前后端耦合改前端要重新打包后端。第一种更符合前后端分离的初衷Nginx 配置如下server { listen 80; location / { root /usr/share/nginx/html; # dist 目录 try_files $uri $uri/ /index.html; # 解决刷新 404 } location /api/ { proxy_pass http://127.0.0.1:8081/; } }try_files那行是关键Vue 是单页应用刷新非根路径时 Nginx 找不到对应文件会 404回退到index.html让前端路由接管。proxy_pass末尾的/决定是否去掉/api前缀跟开发阶段的pathRewrite逻辑对应。从那以后我每次拿到一个前后端分离的源码包都强制先跑通「数据库导入 → 后端启动 → Postman 验证一个接口 → 前端代理配置 → 登录」这条最小链路再去看业务代码。这套物业管理系统结构清晰、业务闭环完整适合作为课程设计或毕设的底子改起来也有明确的入手点。希望帮到你。本文还有配套的精品资源点击获取