拓冰网站定制 
简介本资源是一套完整的Java课程设计与毕业设计级物业管理系统实战项目面向高校计算机专业学生、Java初学者及前后端分离架构学习者旨在通过真实业务场景掌握Spring Boot后端开发与Vue.js前端构建的协同实践。项目采用标准前后端分离架构后端基于Spring Boot提供RESTful API服务前端使用Vue.js实现响应式管理界面覆盖物业报修、费用收缴、住户管理等核心功能模块。压缩包共2025个文件主体为1546个SVG图标资源、205个SCSS样式文件、89个JS逻辑脚本及32个Java后端类辅以SQL建表脚本、PDF文档与Xmind思维导图整体13.1MB结构清晰、模块分层明确。目前已有86人学习下载读者可直接导入运行获取完整可部署代码、标准化目录结构、前后端联调示例及典型业务流程实现逻辑是理解企业级Java全栈开发落地的优质教学参考。1. 为什么一个「基于 SpringBoot Vue 的物业管理系统」不是模板套用题而是前后端分离落地能力的试金石你下载了一个叫springboot-vue-property-management-system.zip的压缩包解压后看到backend/和frontend/两个文件夹心里松了口气“哦前后端分离不就是前后各跑一个服务嘛”——但真正跑起来的第一分钟你就卡在了登录接口 404、跨域报错、Vue 路由白屏、SpringBoot 启动后静态资源 404、甚至打包部署到服务器上发现物业费计算模块返回 NaN……这不是代码写错了而是你没踩过这个系统里埋着的三层断点开发联调断点本地 dev 模式、构建产物断点npm run build 后的 dist 目录如何被 SpringBoot 正确托管、生产部署断点Nginx 反向代理路径与 Vue Router history 模式冲突。这个项目不是教学 Demo它天然携带真实物业场景的复杂度多角色权限业主、管家、维修工、管理员、工单状态机流转、费用账单生成与导出、设备巡检周期配置、微信扫码报修回调集成——每一项都要求你对 SpringBoot 的拦截器链、Vue Router 的导航守卫、Axios 请求拦截器、以及二者在 token 传递、错误统一处理、路由懒加载与权限控制上的协同有可调试、可验证、可回滚的实操经验。适合刚完成 SpringBoot 基础 CRUD、Vue 组件通信能写但没调过真实 API 的中级开发者不适合只学过“Vue 创建项目”或“SpringBoot 写个 Hello World”的纯新手——因为这里没有“一键启动”只有你亲手拧紧的每一个螺丝。2. 从零还原本地开发环境搭建与前后端联调闭环2.1 后端启动SpringBoot 项目结构识别与关键配置确认拿到backend/目录先别急着mvn spring-boot:run。打开pom.xml重点确认三件事SpringBoot 版本是否 ≥ 2.6.0若为 2.3.x 或更低spring-boot-starter-web默认禁用spring.mvc.throw-exception-on-missing-path会导致/api/**未匹配路径直接返回 404 而非交由全局异常处理器这会让后续的统一响应包装失效是否已引入spring-boot-starter-validation物业系统中大量表单提交如业主信息登记、报修描述需字段校验缺失该依赖时Valid注解静默失效application.yml中server.port是否为 8080spring.resources.static-location是否显式声明为classpath:/static/,classpath:/public/这是后续前端dist/静态资源能否被正确映射的前提。确认无误后在backend/目录下执行mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run提示若启动失败且报Failed to configure a DataSource说明项目使用了 MyBatis-Plus 但未配置数据库连接。此时应检查application-dev.yml或application.yml中spring.profiles.active: dev对应的 profile手动填入 MySQL 地址、用户名、密码并确保本地已运行 MySQL 5.7 实例推荐 Docker 快速拉起docker run -d --name mysql-pms -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 -e MYSQL_DATABASEpms mysql:5.7。启动成功后访问http://localhost:8080/swagger-ui.html若集成 Swagger或直接调用curl http://localhost:8080/api/v1/health返回{ status: UP }即表示后端基础服务就绪。2.2 前端启动Vue CLI 工程识别与代理配置实战进入frontend/目录执行npm install注意不要用yarn或pnpm替代除非package.json中明确指定。安装完成后关键一步是检查vue.config.js或vue.config.ts中的devServer.proxy配置// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, // 开启跨域 pathRewrite: { ^/api: /api // 保持路径前缀不变不重写 } } } } }注意此处pathRewrite是陷阱高发区。很多初学者写成^/api: 导致前端请求/api/v1/login被代理为http://localhost:8080/v1/login丢失/api而后端 Controller 映射为RequestMapping(/api/v1)必然 404。正确做法是保留/api前缀仅代理路径本身。配置完毕执行npm run serve。若浏览器打开http://localhost:8081显示登录页且打开开发者工具 Network 面板点击登录按钮后能看到POST http://localhost:8081/api/v1/login请求被成功代理至http://localhost:8080/api/v1/login并返回 200则联调闭环完成。2.3 联调验证用 Postman 模拟真实请求链路光看页面不等于通路。必须用 Postman 手动构造请求验证核心链路登录获取 TokenPOST http://localhost:8080/api/v1/loginBody (raw, JSON):{ username: admin, password: 123456 }成功响应应含token字段JWT 格式且headers中Set-Cookie不出现因本项目采用 Header 传 Token非 Cookie。带 Token 访问受保护接口GET http://localhost:8080/api/v1/property/listHeaders 添加Authorization: Bearer your_token若返回 200 物业列表数据说明 SpringBoot 的EnableWebSecurityJwtAuthenticationFilter已生效。验证跨域头是否正确查看响应 Headers必须包含Access-Control-Allow-Origin: http://localhost:8081Access-Control-Allow-Credentials: trueAccess-Control-Allow-Headers: authorization,content-type这三步验证通过才代表你真正打通了「请求发出 → 代理转发 → 后端鉴权 → 数据返回 → 前端接收」的全链路而非依赖 Vue 页面的自动跳转蒙混过关。3. 构建与部署从 npm run build 到 Nginx 托管的完整路径3.1 前端构建理解 dist 目录结构与静态资源定位逻辑执行npm run build后frontend/dist/目录生成。关键文件结构如下dist/ ├── index.html # 入口 HTML内含 script src/js/app.xxx.js ├── css/ │ └── app.xxx.css ├── js/ │ ├── app.xxx.js # 主应用 JS含 Vue Router、Axios 实例 │ ├── chunk-vendors.xxx.js # 第三方库Vue、Axios、Element UI 等 │ └── ... ├── img/ └── favicon.ico注意所有资源路径均为相对根路径/即index.html中script src/js/app.xxx.js。这意味着当 SpringBoot 托管该目录时必须将dist/下所有文件映射到 Web 应用的根路径/而非子路径如/static。3.2 SpringBoot 托管静态资源两种方案选型与实操方案一将 dist 目录复制到 SpringBoot 的 static 目录适合开发/测试这是最轻量的方案。操作步骤删除backend/src/main/resources/static/下原有文件将frontend/dist/*全部复制到backend/src/main/resources/static/修改application.yml确保静态资源路径配置为默认值无需显式配置spring: resources: static-locations: classpath:/static/,classpath:/public/,classpath:/resources/启动 SpringBoot 后访问http://localhost:8080/即可加载 Vue 页面。此时所有请求如/api/v1/login仍走后端 Controller而/js/app.xxx.js等静态资源由 SpringBoot 内置 Tomcat 直接返回。优势无需额外 Web 服务器适合快速验证劣势无法利用 Nginx 缓存、Gzip 压缩、HTTPS 终止等生产级能力且index.html中的router: { mode: history }在此模式下需配合WebMvcConfigurer添加addResourceHandlers覆盖所有未匹配路径返回index.html否则刷新页面会 404。方案二Nginx 反向代理生产环境标准做法这才是真实部署场景。Nginx 配置核心在于两点静态资源托管API 请求代理。# /etc/nginx/conf.d/pms.conf upstream pms_backend { server 127.0.0.1:8080; } server { listen 80; server_name pms.example.com; # 托管前端静态资源 root /opt/pms/frontend/dist; index index.html; # 处理 Vue Router history 模式所有非静态资源请求都返回 index.html location / { try_files $uri $uri/ /index.html; } # 将 /api 开头的请求代理到 SpringBoot 后端 location /api/ { proxy_pass http://pms_backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 静态资源缓存可选 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }配置后执行sudo nginx -t sudo systemctl reload nginx。此时访问http://pms.example.comNginx 直接返回dist/index.html点击登录浏览器发起POST /api/v1/login请求Nginx 将其转发至http://127.0.0.1:8080/api/v1/login登录成功后跳转/dashboardURL 变为http://pms.example.com/dashboardNginx 仍通过try_files返回index.html由 Vue Router 解析路由并渲染组件——这才是 history 模式的正确打开方式。3.3 后端 Jar 包部署避免 Tomcat 冲突与端口占用SpringBoot 打包为jar后常用部署命令# 后台运行日志输出到 nohup.out nohup java -jar backend/target/pms-backend-1.0.0.jar --spring.profiles.activeprod nohup.out 21 # 查看进程 ps -ef | grep pms-backend # 查看实时日志推荐用 journalctl 或 tail -f tail -f nohup.out关键参数--spring.profiles.activeprod会激活application-prod.yml其中应配置生产数据库地址、Redis 连接池、日志级别INFO、关闭 H2 Console 等。切勿在生产环境使用application-dev.yml否则可能暴露敏感配置或启用调试接口。常见问题若服务器已运行 Tomcat 占用 8080 端口可在application-prod.yml中修改server: port: 9090同时更新 Nginx 的upstream pms_backend指向server 127.0.0.1:9090;。4. 权限与状态管理Vue Router 守卫与 SpringBoot 拦截器的协同设计4.1 前端路由守卫基于 token 的动态权限控制物业系统角色差异大业主只能看自己楼栋报修管家可派单给维修工管理员能配置收费规则。单纯后端鉴权不够前端需做路由级拦截。核心逻辑在router/index.js// router/index.js router.beforeEach(async (to, from, next) { const token localStorage.getItem(token) if (!token to.meta.requiresAuth) { next({ path: /login, query: { redirect: to.fullPath } }) return } // 白名单路径登录页、404直接放行 if (to.meta.isPublic) { next() return } // 已登录但尚未获取用户信息首次访问 if (token !store.state.user.roles) { try { const user await store.dispatch(user/getInfo) // 调用 API 获取用户角色 // 根据 roles 动态添加可访问路由需提前定义路由 meta.roles const accessRoutes filterAsyncRoutes(user.roles) router.addRoutes(accessRoutes) next({ ...to, replace: true }) // 替换当前路由避免重复添加 } catch (error) { console.error(获取用户信息失败:, error) localStorage.removeItem(token) next(/login) } } else { next() } })注意filterAsyncRoutes()函数需遍历asyncRoutes预定义的异步路由数组根据用户roles数组如[ADMIN, GUARD]筛选出匹配meta.roles的路由。例如const asyncRoutes [ { path: /repair, name: RepairList, component: () import(/views/repair/List.vue), meta: { title: 报修管理, roles: [ADMIN, GUARD] } } ]4.2 后端权限拦截基于 RBAC 的注解式鉴权SpringBoot 层面采用PreAuthorize注解实现方法级权限控制RestController RequestMapping(/api/v1/repair) public class RepairController { GetMapping(/list) PreAuthorize(hasAnyRole(ADMIN,GUARD)) public ResultListRepairOrder list(RequestParam Integer status) { return Result.success(repairservice.listByStatus(status)); } PostMapping(/assign) PreAuthorize(hasRole(GUARD)) public ResultString assign(RequestBody AssignRequest request) { repairservice.assign(request.getOrderId(), request.getWorkerId()); return Result.success(派单成功); } }关键点EnableGlobalMethodSecurity(prePostEnabled true)必须在主类或 SecurityConfig 中启用否则PreAuthorize无效。同时UserDetailsServiceImpl.loadUserByUsername()返回的UserDetails对象中getAuthorities()方法必须返回GrantedAuthority集合如AuthorityUtils.createAuthorityList(ROLE_ADMIN, ROLE_GUARD)Spring Security 才能识别角色。4.3 前后端权限一致性校验Token Payload 与 Session 同步前端localStorage.token是 JWT其 payload 中应包含roles字段如roles:[ADMIN]。后端生成 Token 时必须将用户角色写入// JwtTokenUtil.generateToken() MapString, Object claims new HashMap(); claims.put(userId, user.getId()); claims.put(username, user.getUsername()); claims.put(roles, user.getRoles().stream() .map(role - ROLE_ role.getName().toUpperCase()) .collect(Collectors.toList())); // 注意 ROLE_ 前缀 return Jwts.builder() .setClaims(claims) .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() expiration)) .signWith(SignatureAlgorithm.HS512, secret) .compact();这样前端解析 Token可用jwt-decode库即可获取roles用于路由过滤后端PreAuthorize也基于同一roles字段校验——避免前后端角色定义不一致导致的权限绕过。5. 避坑指南5 个让物业系统上线前夜崩溃的真实问题5.1 现象Vue 页面白屏Console 报Uncaught SyntaxError: Unexpected token 原因Nginx 配置中location /的try_files未生效或root路径指向错误目录导致请求/js/app.xxx.js时 Nginx 返回了index.htmlHTML 文件以开头JS 引擎尝试解析 HTML 为 JS 语法而报错。解决检查 Nginxroot指向是否为dist的父目录如root /opt/pms/frontend;则dist/必须在/opt/pms/frontend/dist/执行curl -I http://localhost/js/app.xxx.js确认返回200 OK且Content-Type: application/javascript若返回200但内容是 HTML说明try_files规则匹配了index.html需检查location /块是否被其他更精确的location如location ~* \.js$覆盖。5.2 现象登录成功后跳转/dashboard但页面空白Network 中无任何 API 请求原因Vue Routermode: history下index.html中的base属性未设置或设置错误。若项目部署在子路径如http://example.com/pms/base必须为/pms/否则 Router 无法正确解析路径。解决在main.js创建 Router 实例时显式指定baseconst router new VueRouter({ mode: history, base: process.env.NODE_ENV production ? /pms/ : /, routes })同时vue.config.js中publicPath需同步设置module.exports { publicPath: process.env.NODE_ENV production ? /pms/ : / }5.3 现象SpringBoot 启动后访问http://localhost:8080/api/v1/login返回 404但http://localhost:8080/swagger-ui.html正常原因Controller 类上缺少RestController或RequestMapping(/api)或方法上RequestMapping路径拼写错误如写成RequestMapping(/api/v1/login)但类上已有RequestMapping(/api)导致实际路径为/api/api/v1/login。解决检查 Controller 类注解RestController RequestMapping(/api/v1) // 统一前缀 public class AuthController { ... }使用GetMapping(/login)替代RequestMapping(value /login, method RequestMethod.POST)更简洁不易错。5.4 现象Nginx 日志中大量502 Bad Gatewayps -ef | grep java显示 SpringBoot 进程存在但无响应原因SpringBoot Jar 包启动后JVM 内存不足触发 OOM进程假死或application-prod.yml中server.port与 Nginxupstream端口不一致或防火墙阻止了127.0.0.1:8080的本地回环访问。解决启动时添加 JVM 参数限制内存nohup java -Xms512m -Xmx1024m -jar pms-backend.jar nohup.out 21 检查netstat -tuln | grep :8080确认端口监听状态执行curl -v http://127.0.0.1:8080/api/v1/health确认本地可通。5.5 现象业主上传报修图片后端接收后文件名乱码如æ°å»ºæ件.jpg原因Tomcat 8.5 默认使用ISO-8859-1解码 URL 和表单参数中文文件名需显式设置URIEncodingUTF-8。解决在backend/src/main/resources/application.yml中添加server: tomcat: uri-encoding: UTF-8或修改pom.xml中spring-boot-maven-plugin的configuration添加jvmArguments不推荐优先用 yml 配置。6. 生产级加固从日志审计到 XSS 防御的落地细节6.1 后端日志审计记录关键业务操作与异常物业系统涉及费用、工单、人员变更必须留痕。在backend/src/main/java/com/example/pms/config/LoggingAspect.java中定义切面Aspect Component Slf4j public class LoggingAspect { Around(annotation(org.springframework.web.bind.annotation.PostMapping) || annotation(org.springframework.web.bind.annotation.PutMapping) || annotation(org.springframework.web.bind.annotation.DeleteMapping)) public Object logOperation(ProceedingJoinPoint joinPoint) throws Throwable { long start System.currentTimeMillis(); String methodName joinPoint.getSignature().toShortString(); Object[] args joinPoint.getArgs(); // 敏感操作脱敏如密码、身份证号 Object[] safeArgs Arrays.stream(args) .map(arg - arg instanceof String ((String) arg).length() 100 ? ((String) arg).substring(0, 50) ... : arg) .toArray(); try { Object result joinPoint.proceed(); long cost System.currentTimeMillis() - start; log.info([OPERATION] {} | Args: {} | Result: {} | Cost: {}ms, methodName, Arrays.toString(safeArgs), result, cost); return result; } catch (Exception e) { long cost System.currentTimeMillis() - start; log.error([OPERATION_FAIL] {} | Args: {} | Exception: {} | Cost: {}ms, methodName, Arrays.toString(safeArgs), e.getMessage(), cost, e); throw e; } } }启用该切面后所有 POST/PUT/DELETE 请求都会记录方法名、参数摘要、耗时及异常堆栈。日志输出到logs/pms.log通过logback-spring.xml配置滚动策略运维可据此追踪“谁在何时修改了哪栋楼的物业费标准”。6.2 前端 XSS 防御不只是 v-html 的简单禁用物业公告、报修描述、客服回复等字段允许富文本但必须过滤。不能仅靠前端v-htmlDOMPurify必须后端二次清洗。引入jsoup依赖!-- pom.xml -- dependency groupIdorg.jsoup/groupId artifactIdjsoup/artifactId version1.17.2/version /dependency创建工具类Component public class HtmlSanitizer { private static final Whitelist WHITELIST Whitelist.relaxed() .addTags(p, br, strong, em, u, ol, ul, li, a) .addAttributes(a, href); public String sanitize(String html) { if (html null || html.trim().isEmpty()) { return ; } return Jsoup.clean(html, WHITELIST); } }在 Controller 接收参数时主动清洗PostMapping(/notice) public ResultString createNotice(RequestBody NoticeDTO dto) { dto.setContent(sanitizer.sanitize(dto.getContent())); // 清洗后再入库 noticeService.save(dto); return Result.success(发布成功); }这样即使前端v-html渲染时被绕过如通过innerHTML直接赋值后端存储的数据已是安全 HTML从根本上杜绝 XSS 存储型漏洞。6.3 文件上传安全PDF 与图片的双重校验物业系统常需上传合同 PDF、房产证 JPG。仅校验后缀名.pdf极易被绕过上传shell.php.pdf。必须做文件头Magic Number校验Service public class FileUploadService { private static final MapString, byte[] MAGIC_NUMBERS Map.of( pdf, new byte[]{(byte) 0x25, (byte) 0x50, (byte) 0x44, (byte) 0x46}, jpg, new byte[]{(byte) 0xFF, (byte) 0xD8, (byte) 0xFF}, png, new byte[]{(byte) 0x89, (byte) 0x50, (byte) 0x4E, (byte) 0x47} ); public void validateFileType(MultipartFile file) throws IOException { String originalFilename file.getOriginalFilename(); String extension StringUtils.getFilenameExtension(originalFilename).toLowerCase(); if (!MAGIC_NUMBERS.containsKey(extension)) { throw new IllegalArgumentException(不支持的文件类型: extension); } byte[] magicBytes MAGIC_NUMBERS.get(extension); byte[] header new byte[magicBytes.length]; InputStream is file.getInputStream(); is.read(header); is.close(); if (!Arrays.equals(header, magicBytes)) { throw new IllegalArgumentException(文件头校验失败疑似伪造文件: originalFilename); } } }此校验在PostMapping方法体内调用确保上传的 PDF 真实以%PDF开头而非伪装的 PHP 文件。配合 SpringBoot 的spring.servlet.multipart.max-file-size10MB限制大小形成第一道防线。我带过的三个物业系统项目最后上线前都卡在同一个地方Nginx 的try_files配置写错了一斜杠导致整个前端白屏排查了 3 小时才发现root路径少了个dist。后来我把这条写进了团队 SOP每次部署先curl -I检查三个关键路径/,/js/app.xxx.js,/api/v1/health再看页面。技术没有玄学只有可验证的步骤。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue物业系统前后端分离实战指南
简介本资源是一套完整的Java课程设计与毕业设计级物业管理系统实战项目面向高校计算机专业学生、Java初学者及前后端分离架构学习者旨在通过真实业务场景掌握Spring Boot后端开发与Vue.js前端构建的协同实践。项目采用标准前后端分离架构后端基于Spring Boot提供RESTful API服务前端使用Vue.js实现响应式管理界面覆盖物业报修、费用收缴、住户管理等核心功能模块。压缩包共2025个文件主体为1546个SVG图标资源、205个SCSS样式文件、89个JS逻辑脚本及32个Java后端类辅以SQL建表脚本、PDF文档与Xmind思维导图整体13.1MB结构清晰、模块分层明确。目前已有86人学习下载读者可直接导入运行获取完整可部署代码、标准化目录结构、前后端联调示例及典型业务流程实现逻辑是理解企业级Java全栈开发落地的优质教学参考。1. 为什么一个「基于 SpringBoot Vue 的物业管理系统」不是模板套用题而是前后端分离落地能力的试金石你下载了一个叫springboot-vue-property-management-system.zip的压缩包解压后看到backend/和frontend/两个文件夹心里松了口气“哦前后端分离不就是前后各跑一个服务嘛”——但真正跑起来的第一分钟你就卡在了登录接口 404、跨域报错、Vue 路由白屏、SpringBoot 启动后静态资源 404、甚至打包部署到服务器上发现物业费计算模块返回 NaN……这不是代码写错了而是你没踩过这个系统里埋着的三层断点开发联调断点本地 dev 模式、构建产物断点npm run build 后的 dist 目录如何被 SpringBoot 正确托管、生产部署断点Nginx 反向代理路径与 Vue Router history 模式冲突。这个项目不是教学 Demo它天然携带真实物业场景的复杂度多角色权限业主、管家、维修工、管理员、工单状态机流转、费用账单生成与导出、设备巡检周期配置、微信扫码报修回调集成——每一项都要求你对 SpringBoot 的拦截器链、Vue Router 的导航守卫、Axios 请求拦截器、以及二者在 token 传递、错误统一处理、路由懒加载与权限控制上的协同有可调试、可验证、可回滚的实操经验。适合刚完成 SpringBoot 基础 CRUD、Vue 组件通信能写但没调过真实 API 的中级开发者不适合只学过“Vue 创建项目”或“SpringBoot 写个 Hello World”的纯新手——因为这里没有“一键启动”只有你亲手拧紧的每一个螺丝。2. 从零还原本地开发环境搭建与前后端联调闭环2.1 后端启动SpringBoot 项目结构识别与关键配置确认拿到backend/目录先别急着mvn spring-boot:run。打开pom.xml重点确认三件事SpringBoot 版本是否 ≥ 2.6.0若为 2.3.x 或更低spring-boot-starter-web默认禁用spring.mvc.throw-exception-on-missing-path会导致/api/**未匹配路径直接返回 404 而非交由全局异常处理器这会让后续的统一响应包装失效是否已引入spring-boot-starter-validation物业系统中大量表单提交如业主信息登记、报修描述需字段校验缺失该依赖时Valid注解静默失效application.yml中server.port是否为 8080spring.resources.static-location是否显式声明为classpath:/static/,classpath:/public/这是后续前端dist/静态资源能否被正确映射的前提。确认无误后在backend/目录下执行mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run提示若启动失败且报Failed to configure a DataSource说明项目使用了 MyBatis-Plus 但未配置数据库连接。此时应检查application-dev.yml或application.yml中spring.profiles.active: dev对应的 profile手动填入 MySQL 地址、用户名、密码并确保本地已运行 MySQL 5.7 实例推荐 Docker 快速拉起docker run -d --name mysql-pms -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 -e MYSQL_DATABASEpms mysql:5.7。启动成功后访问http://localhost:8080/swagger-ui.html若集成 Swagger或直接调用curl http://localhost:8080/api/v1/health返回{ status: UP }即表示后端基础服务就绪。2.2 前端启动Vue CLI 工程识别与代理配置实战进入frontend/目录执行npm install注意不要用yarn或pnpm替代除非package.json中明确指定。安装完成后关键一步是检查vue.config.js或vue.config.ts中的devServer.proxy配置// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, // 开启跨域 pathRewrite: { ^/api: /api // 保持路径前缀不变不重写 } } } } }注意此处pathRewrite是陷阱高发区。很多初学者写成^/api: 导致前端请求/api/v1/login被代理为http://localhost:8080/v1/login丢失/api而后端 Controller 映射为RequestMapping(/api/v1)必然 404。正确做法是保留/api前缀仅代理路径本身。配置完毕执行npm run serve。若浏览器打开http://localhost:8081显示登录页且打开开发者工具 Network 面板点击登录按钮后能看到POST http://localhost:8081/api/v1/login请求被成功代理至http://localhost:8080/api/v1/login并返回 200则联调闭环完成。2.3 联调验证用 Postman 模拟真实请求链路光看页面不等于通路。必须用 Postman 手动构造请求验证核心链路登录获取 TokenPOST http://localhost:8080/api/v1/loginBody (raw, JSON):{ username: admin, password: 123456 }成功响应应含token字段JWT 格式且headers中Set-Cookie不出现因本项目采用 Header 传 Token非 Cookie。带 Token 访问受保护接口GET http://localhost:8080/api/v1/property/listHeaders 添加Authorization: Bearer your_token若返回 200 物业列表数据说明 SpringBoot 的EnableWebSecurityJwtAuthenticationFilter已生效。验证跨域头是否正确查看响应 Headers必须包含Access-Control-Allow-Origin: http://localhost:8081Access-Control-Allow-Credentials: trueAccess-Control-Allow-Headers: authorization,content-type这三步验证通过才代表你真正打通了「请求发出 → 代理转发 → 后端鉴权 → 数据返回 → 前端接收」的全链路而非依赖 Vue 页面的自动跳转蒙混过关。3. 构建与部署从 npm run build 到 Nginx 托管的完整路径3.1 前端构建理解 dist 目录结构与静态资源定位逻辑执行npm run build后frontend/dist/目录生成。关键文件结构如下dist/ ├── index.html # 入口 HTML内含 script src/js/app.xxx.js ├── css/ │ └── app.xxx.css ├── js/ │ ├── app.xxx.js # 主应用 JS含 Vue Router、Axios 实例 │ ├── chunk-vendors.xxx.js # 第三方库Vue、Axios、Element UI 等 │ └── ... ├── img/ └── favicon.ico注意所有资源路径均为相对根路径/即index.html中script src/js/app.xxx.js。这意味着当 SpringBoot 托管该目录时必须将dist/下所有文件映射到 Web 应用的根路径/而非子路径如/static。3.2 SpringBoot 托管静态资源两种方案选型与实操方案一将 dist 目录复制到 SpringBoot 的 static 目录适合开发/测试这是最轻量的方案。操作步骤删除backend/src/main/resources/static/下原有文件将frontend/dist/*全部复制到backend/src/main/resources/static/修改application.yml确保静态资源路径配置为默认值无需显式配置spring: resources: static-locations: classpath:/static/,classpath:/public/,classpath:/resources/启动 SpringBoot 后访问http://localhost:8080/即可加载 Vue 页面。此时所有请求如/api/v1/login仍走后端 Controller而/js/app.xxx.js等静态资源由 SpringBoot 内置 Tomcat 直接返回。优势无需额外 Web 服务器适合快速验证劣势无法利用 Nginx 缓存、Gzip 压缩、HTTPS 终止等生产级能力且index.html中的router: { mode: history }在此模式下需配合WebMvcConfigurer添加addResourceHandlers覆盖所有未匹配路径返回index.html否则刷新页面会 404。方案二Nginx 反向代理生产环境标准做法这才是真实部署场景。Nginx 配置核心在于两点静态资源托管API 请求代理。# /etc/nginx/conf.d/pms.conf upstream pms_backend { server 127.0.0.1:8080; } server { listen 80; server_name pms.example.com; # 托管前端静态资源 root /opt/pms/frontend/dist; index index.html; # 处理 Vue Router history 模式所有非静态资源请求都返回 index.html location / { try_files $uri $uri/ /index.html; } # 将 /api 开头的请求代理到 SpringBoot 后端 location /api/ { proxy_pass http://pms_backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 静态资源缓存可选 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }配置后执行sudo nginx -t sudo systemctl reload nginx。此时访问http://pms.example.comNginx 直接返回dist/index.html点击登录浏览器发起POST /api/v1/login请求Nginx 将其转发至http://127.0.0.1:8080/api/v1/login登录成功后跳转/dashboardURL 变为http://pms.example.com/dashboardNginx 仍通过try_files返回index.html由 Vue Router 解析路由并渲染组件——这才是 history 模式的正确打开方式。3.3 后端 Jar 包部署避免 Tomcat 冲突与端口占用SpringBoot 打包为jar后常用部署命令# 后台运行日志输出到 nohup.out nohup java -jar backend/target/pms-backend-1.0.0.jar --spring.profiles.activeprod nohup.out 21 # 查看进程 ps -ef | grep pms-backend # 查看实时日志推荐用 journalctl 或 tail -f tail -f nohup.out关键参数--spring.profiles.activeprod会激活application-prod.yml其中应配置生产数据库地址、Redis 连接池、日志级别INFO、关闭 H2 Console 等。切勿在生产环境使用application-dev.yml否则可能暴露敏感配置或启用调试接口。常见问题若服务器已运行 Tomcat 占用 8080 端口可在application-prod.yml中修改server: port: 9090同时更新 Nginx 的upstream pms_backend指向server 127.0.0.1:9090;。4. 权限与状态管理Vue Router 守卫与 SpringBoot 拦截器的协同设计4.1 前端路由守卫基于 token 的动态权限控制物业系统角色差异大业主只能看自己楼栋报修管家可派单给维修工管理员能配置收费规则。单纯后端鉴权不够前端需做路由级拦截。核心逻辑在router/index.js// router/index.js router.beforeEach(async (to, from, next) { const token localStorage.getItem(token) if (!token to.meta.requiresAuth) { next({ path: /login, query: { redirect: to.fullPath } }) return } // 白名单路径登录页、404直接放行 if (to.meta.isPublic) { next() return } // 已登录但尚未获取用户信息首次访问 if (token !store.state.user.roles) { try { const user await store.dispatch(user/getInfo) // 调用 API 获取用户角色 // 根据 roles 动态添加可访问路由需提前定义路由 meta.roles const accessRoutes filterAsyncRoutes(user.roles) router.addRoutes(accessRoutes) next({ ...to, replace: true }) // 替换当前路由避免重复添加 } catch (error) { console.error(获取用户信息失败:, error) localStorage.removeItem(token) next(/login) } } else { next() } })注意filterAsyncRoutes()函数需遍历asyncRoutes预定义的异步路由数组根据用户roles数组如[ADMIN, GUARD]筛选出匹配meta.roles的路由。例如const asyncRoutes [ { path: /repair, name: RepairList, component: () import(/views/repair/List.vue), meta: { title: 报修管理, roles: [ADMIN, GUARD] } } ]4.2 后端权限拦截基于 RBAC 的注解式鉴权SpringBoot 层面采用PreAuthorize注解实现方法级权限控制RestController RequestMapping(/api/v1/repair) public class RepairController { GetMapping(/list) PreAuthorize(hasAnyRole(ADMIN,GUARD)) public ResultListRepairOrder list(RequestParam Integer status) { return Result.success(repairservice.listByStatus(status)); } PostMapping(/assign) PreAuthorize(hasRole(GUARD)) public ResultString assign(RequestBody AssignRequest request) { repairservice.assign(request.getOrderId(), request.getWorkerId()); return Result.success(派单成功); } }关键点EnableGlobalMethodSecurity(prePostEnabled true)必须在主类或 SecurityConfig 中启用否则PreAuthorize无效。同时UserDetailsServiceImpl.loadUserByUsername()返回的UserDetails对象中getAuthorities()方法必须返回GrantedAuthority集合如AuthorityUtils.createAuthorityList(ROLE_ADMIN, ROLE_GUARD)Spring Security 才能识别角色。4.3 前后端权限一致性校验Token Payload 与 Session 同步前端localStorage.token是 JWT其 payload 中应包含roles字段如roles:[ADMIN]。后端生成 Token 时必须将用户角色写入// JwtTokenUtil.generateToken() MapString, Object claims new HashMap(); claims.put(userId, user.getId()); claims.put(username, user.getUsername()); claims.put(roles, user.getRoles().stream() .map(role - ROLE_ role.getName().toUpperCase()) .collect(Collectors.toList())); // 注意 ROLE_ 前缀 return Jwts.builder() .setClaims(claims) .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() expiration)) .signWith(SignatureAlgorithm.HS512, secret) .compact();这样前端解析 Token可用jwt-decode库即可获取roles用于路由过滤后端PreAuthorize也基于同一roles字段校验——避免前后端角色定义不一致导致的权限绕过。5. 避坑指南5 个让物业系统上线前夜崩溃的真实问题5.1 现象Vue 页面白屏Console 报Uncaught SyntaxError: Unexpected token 原因Nginx 配置中location /的try_files未生效或root路径指向错误目录导致请求/js/app.xxx.js时 Nginx 返回了index.htmlHTML 文件以开头JS 引擎尝试解析 HTML 为 JS 语法而报错。解决检查 Nginxroot指向是否为dist的父目录如root /opt/pms/frontend;则dist/必须在/opt/pms/frontend/dist/执行curl -I http://localhost/js/app.xxx.js确认返回200 OK且Content-Type: application/javascript若返回200但内容是 HTML说明try_files规则匹配了index.html需检查location /块是否被其他更精确的location如location ~* \.js$覆盖。5.2 现象登录成功后跳转/dashboard但页面空白Network 中无任何 API 请求原因Vue Routermode: history下index.html中的base属性未设置或设置错误。若项目部署在子路径如http://example.com/pms/base必须为/pms/否则 Router 无法正确解析路径。解决在main.js创建 Router 实例时显式指定baseconst router new VueRouter({ mode: history, base: process.env.NODE_ENV production ? /pms/ : /, routes })同时vue.config.js中publicPath需同步设置module.exports { publicPath: process.env.NODE_ENV production ? /pms/ : / }5.3 现象SpringBoot 启动后访问http://localhost:8080/api/v1/login返回 404但http://localhost:8080/swagger-ui.html正常原因Controller 类上缺少RestController或RequestMapping(/api)或方法上RequestMapping路径拼写错误如写成RequestMapping(/api/v1/login)但类上已有RequestMapping(/api)导致实际路径为/api/api/v1/login。解决检查 Controller 类注解RestController RequestMapping(/api/v1) // 统一前缀 public class AuthController { ... }使用GetMapping(/login)替代RequestMapping(value /login, method RequestMethod.POST)更简洁不易错。5.4 现象Nginx 日志中大量502 Bad Gatewayps -ef | grep java显示 SpringBoot 进程存在但无响应原因SpringBoot Jar 包启动后JVM 内存不足触发 OOM进程假死或application-prod.yml中server.port与 Nginxupstream端口不一致或防火墙阻止了127.0.0.1:8080的本地回环访问。解决启动时添加 JVM 参数限制内存nohup java -Xms512m -Xmx1024m -jar pms-backend.jar nohup.out 21 检查netstat -tuln | grep :8080确认端口监听状态执行curl -v http://127.0.0.1:8080/api/v1/health确认本地可通。5.5 现象业主上传报修图片后端接收后文件名乱码如æ°å»ºæ件.jpg原因Tomcat 8.5 默认使用ISO-8859-1解码 URL 和表单参数中文文件名需显式设置URIEncodingUTF-8。解决在backend/src/main/resources/application.yml中添加server: tomcat: uri-encoding: UTF-8或修改pom.xml中spring-boot-maven-plugin的configuration添加jvmArguments不推荐优先用 yml 配置。6. 生产级加固从日志审计到 XSS 防御的落地细节6.1 后端日志审计记录关键业务操作与异常物业系统涉及费用、工单、人员变更必须留痕。在backend/src/main/java/com/example/pms/config/LoggingAspect.java中定义切面Aspect Component Slf4j public class LoggingAspect { Around(annotation(org.springframework.web.bind.annotation.PostMapping) || annotation(org.springframework.web.bind.annotation.PutMapping) || annotation(org.springframework.web.bind.annotation.DeleteMapping)) public Object logOperation(ProceedingJoinPoint joinPoint) throws Throwable { long start System.currentTimeMillis(); String methodName joinPoint.getSignature().toShortString(); Object[] args joinPoint.getArgs(); // 敏感操作脱敏如密码、身份证号 Object[] safeArgs Arrays.stream(args) .map(arg - arg instanceof String ((String) arg).length() 100 ? ((String) arg).substring(0, 50) ... : arg) .toArray(); try { Object result joinPoint.proceed(); long cost System.currentTimeMillis() - start; log.info([OPERATION] {} | Args: {} | Result: {} | Cost: {}ms, methodName, Arrays.toString(safeArgs), result, cost); return result; } catch (Exception e) { long cost System.currentTimeMillis() - start; log.error([OPERATION_FAIL] {} | Args: {} | Exception: {} | Cost: {}ms, methodName, Arrays.toString(safeArgs), e.getMessage(), cost, e); throw e; } } }启用该切面后所有 POST/PUT/DELETE 请求都会记录方法名、参数摘要、耗时及异常堆栈。日志输出到logs/pms.log通过logback-spring.xml配置滚动策略运维可据此追踪“谁在何时修改了哪栋楼的物业费标准”。6.2 前端 XSS 防御不只是 v-html 的简单禁用物业公告、报修描述、客服回复等字段允许富文本但必须过滤。不能仅靠前端v-htmlDOMPurify必须后端二次清洗。引入jsoup依赖!-- pom.xml -- dependency groupIdorg.jsoup/groupId artifactIdjsoup/artifactId version1.17.2/version /dependency创建工具类Component public class HtmlSanitizer { private static final Whitelist WHITELIST Whitelist.relaxed() .addTags(p, br, strong, em, u, ol, ul, li, a) .addAttributes(a, href); public String sanitize(String html) { if (html null || html.trim().isEmpty()) { return ; } return Jsoup.clean(html, WHITELIST); } }在 Controller 接收参数时主动清洗PostMapping(/notice) public ResultString createNotice(RequestBody NoticeDTO dto) { dto.setContent(sanitizer.sanitize(dto.getContent())); // 清洗后再入库 noticeService.save(dto); return Result.success(发布成功); }这样即使前端v-html渲染时被绕过如通过innerHTML直接赋值后端存储的数据已是安全 HTML从根本上杜绝 XSS 存储型漏洞。6.3 文件上传安全PDF 与图片的双重校验物业系统常需上传合同 PDF、房产证 JPG。仅校验后缀名.pdf极易被绕过上传shell.php.pdf。必须做文件头Magic Number校验Service public class FileUploadService { private static final MapString, byte[] MAGIC_NUMBERS Map.of( pdf, new byte[]{(byte) 0x25, (byte) 0x50, (byte) 0x44, (byte) 0x46}, jpg, new byte[]{(byte) 0xFF, (byte) 0xD8, (byte) 0xFF}, png, new byte[]{(byte) 0x89, (byte) 0x50, (byte) 0x4E, (byte) 0x47} ); public void validateFileType(MultipartFile file) throws IOException { String originalFilename file.getOriginalFilename(); String extension StringUtils.getFilenameExtension(originalFilename).toLowerCase(); if (!MAGIC_NUMBERS.containsKey(extension)) { throw new IllegalArgumentException(不支持的文件类型: extension); } byte[] magicBytes MAGIC_NUMBERS.get(extension); byte[] header new byte[magicBytes.length]; InputStream is file.getInputStream(); is.read(header); is.close(); if (!Arrays.equals(header, magicBytes)) { throw new IllegalArgumentException(文件头校验失败疑似伪造文件: originalFilename); } } }此校验在PostMapping方法体内调用确保上传的 PDF 真实以%PDF开头而非伪装的 PHP 文件。配合 SpringBoot 的spring.servlet.multipart.max-file-size10MB限制大小形成第一道防线。我带过的三个物业系统项目最后上线前都卡在同一个地方Nginx 的try_files配置写错了一斜杠导致整个前端白屏排查了 3 小时才发现root路径少了个dist。后来我把这条写进了团队 SOP每次部署先curl -I检查三个关键路径/,/js/app.xxx.js,/api/v1/health再看页面。技术没有玄学只有可验证的步骤。希望帮到你。本文还有配套的精品资源点击获取