尧图网页设计 
简介一套面向毕业设计的微信小程序小区物业管理系统资源包涵盖完整前后端源码和毕业论文适合计算机相关专业学生快速搭建项目、完成论文写作。系统围绕管理员、物业管理员、业主三类角色展开覆盖用户管理、停车位查询、维修报修、缴费管理、公告查看、满意度反馈等完整业务闭环其中业主报修还支持上传图片管理员处理维修与缴费功能覆盖度较高。资源共402个文件、压缩包仅726KB包含117个wxss样式文件、95个xml配置、40个js脚本与31个wxml页面结构等前端部分以及67个java后端源码和SQL数据库脚本便于直接导入IDE运行和二次开发。内容预览中RepairApi、UserApi、PersonApi等接口展示了小程序与后端之间的数据交互设计配套的物业.doc毕业论文则可帮助读者理解数据库表结构、接口实现与模块分工。现已有380人学习下载适合需要系统设计与实现参考、快速复用同类业务的毕业生或初级开发者。1. 微信小程序物业管理系统一份能跑通的毕业设计源码包毕业设计时间紧又要演示效果这套基于微信小程序的小区物业管理系统把系统管理员、物业管理员、业主三个角色的工作台都收进了一个小程序。后端是Java工程附带论文文档覆盖用户管理、园区卫生记录、停车位查询、维修报修、物业缴费、业主需求、公告管理、安保人员信息这些典型模块。它适合两类人一是做毕业设计的学生拿到后可以直接跑通改数据库再按自己的需求换皮二是想快速搭一套小区物业原型做课程设计的开发者。下文按后端工程拆解、小程序端联调、常见坑、论文与答辩的顺序把这份资源的实际使用路径完整捋一遍。2. 后端Java工程拆解实体、接口与数据库是怎么咬合的2.1 从Repair.java和User.java看懂三类实体的字段设计先看资源里的Java文件清单wuye.iml是IntelliJ IDEA的模块文件Repair.java、User.java是实体类Vote.java和QueAndOpt.java对应满意度调查里的投票与问卷选项RepairApi、UserApi、PersonApi是以Api结尾的接口类这种命名风格在Java后端里比较常见实体类不带后缀Api类负责暴露HTTP接口。打开Repair.java核心字段基本是这样// Repair.java 报修实体 public class Repair { private Integer id; // 报修单主键 private Integer userId; // 提交报修的业主ID关联user表 private String type; // 报修类型水、电、门窗、其他 private String description; // 文字描述 private String imagePath; // 图片地址相对路径如/upload/repair/xx.jpg private Integer status; // 0待处理 1处理中 2已完成 3驳回 private Date createTime; // 提交时间 // 对应的getter/setter省略 }这段代码里最关键的是status字段。很多毕业设计只把报修做成提交后查看没有状态流转这套源码里status能支撑物业管理员在处理流程中改状态答辩时这就是一个区分度。imagePath存的是相对路径前端拿到后必须拼接服务器IP或域名才能显示完整图片这是一个必踩的坑后面避坑章会细说。User.java是业主和管理员共用的账号表靠role字段区分身份// User.java 中与权限相关的字段 private Integer id; private String username; // 登录名 private String password; // 建议存MD5或BCrypt源码里常见是MD5 private String realName; // 姓名 private Integer role; // 1系统管理员 2物业管理员 3业主 private String phone; // 手机号 private String avatar; // 头像role字段是整个权限管理的钥匙。小程序端请求接口时后端根据role判断能否执行对应操作。比如业主调用维修列表接口时SQL里要拼上userId做过滤只返回自己的报修单物业管理员能查全部。毕业设计评委会问“怎么防止业主查别人的报修”答案就在这里不是前端藏按钮而是后端接口里带了用户身份限制。2.2 API类与方法映射RepairApi、UserApi、PersonApi的职责边界Api类在Spring MVC里就是Controller。RepairApi负责报修相关入口UserApi负责登录、注册、个人信息维护PersonApi负责安保人员信息查询。看方法名也能猜出大致功能// RepairApi.java 方法映射示意 RestController RequestMapping(/repair) public class RepairApi { Autowired private RepairDao repairDao; PostMapping(/submit) public JsonResult submitRepair(RequestBody Repair repair) { // 1. 校验业主角色 // 2. 插入报修单status默认0 // 3. 返回自增id return JsonResult.success(repair.getId()); } GetMapping(/listByUser) public JsonResult listByUser(RequestParam Integer userId) { // 只查当前业主的报修单按create_time倒序 ListRepair list repairDao.findByUserId(userId); return JsonResult.success(list); } GetMapping(/listAll) public JsonResult listAll(RequestParam Integer page, RequestParam Integer limit) { // 物业管理员专用分页查询全部报修 return JsonResult.successWithPage(repairDao.findPage(page, limit)); } }JsonResult是统一返回体毕业设计里常见的是{code: 200, message: ok, data: {...}}。前端小程序里wx.request的成功回调里先判断code再取data。不包一层的话前端每个接口都要处理异常很容易漏。我一般会要求后端任何异常都返回code500前端统一弹toast这样联调效率高很多。UserApi里的登录逻辑值得单独看。微信小程序端传的是wx.login()拿到的code后端拿到code后调用微信接口换openid再拿openid查user表。查不到就自动注册一个业主账号密码用默认值或让用户补填。这种“先登录后注册”的体验很适合小区物业场景业主第一次进小程序看到公告就行不需要先注册。代码示意如下// UserApi.java 微信登录绑定 PostMapping(/wxLogin) public JsonResult wxLogin(RequestBody WxLoginRequest req) { // 1. req.getCode()是wx.login()拿到的临时凭证 String url https://api.weixin.qq.com/sns/jscode2session?appid appid secret secret js_code req.getCode() grant_typeauthorization_code; // 2. 用HttpClient请求这个url拿到openid // 3. 查user表有则更新sessionKey无则创建默认业主账号 // 4. 生成自定义token返回给前端 }注意这里用的https链接是微信官方接口不需要任何额外网络措施。appid和secret要填成小程序后台的真实值否则会返回invalid code。后端用RestTemplate或OkHttp都行关键是把openid和用户id的映射缓存下来避免每次页面打开都调微信接口。2.3 数据库表设计与初始化数据这套系统的表结构不会太多核心有六张user、repair、parking、fee、notice、survey。用一张表整理字段和用途方便对照源码建库表名关键字段用途userid, username, password, role, phone, avatar业主/物业/管理员统一账号表repairid, user_id, type, description, image_path, status报修单status做状态流转parkingid, area_no, position_no, status车位信息status0空闲 1占用feeid, user_id, fee_type, amount, status, deadline物业费/水电费fee_type区分noticeid, title, content, create_time公告按时间倒序展示surveyid, user_id, score, suggestion, create_time满意度调查对应Vote/QueAndOpt初始化数据时我一般会在user表里插三条不同role的账号admin/123456管理员manage/123456物业owner/123456业主。这样小程序端就能登录三个角色演示。停车位表插至少十条状态一半空闲一半占用这样“剩余车位查询”才有数据可看。notice表插三条公告不然首页空荡荡的。每张表保证每个角色登录后都有内容能点。2.4 配置与启动application.yml里的关键参数如果后端是Spring Boot配置主要在application.yml若是不带Boot的老项目则在web.xml和jdbc.properties里。拿到源码后先看wuye.iml旁边的pom.xml或lib目录确认是Maven还是普通工程。常见配置像这样server: port: 8080 servlet: context-path: /wuye spring: datasource: url: jdbc:mysql://localhost:3306/wuye_db?useUnicodetruecharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver wx: appid: wx1234567890abcdef secret: abcdef1234567890abcdef1234567890这里最坑的是characterEncodingutf8。如果漏掉中文报修描述和公告会全部变成问号。MySQL连接串在8.x驱动下必须加serverTimezone否则会报SQLException。端口和context-path前后端要对齐小程序里的请求地址如果写的是https://localhost:8080/wuye那么后端context-path也要是/wuye少一层路径就会404。启动流程通常是先用Navicat执行sql文件建库再改application.yml里的数据库账号密码然后启动Spring Boot主类。看到Tomcat started on port 8080后先用浏览器访问一下接口地址比如GET /wuye/repair/listAll能返回JSON再往下联调小程序。很多同学第一步就跑在这里小程序请求了接口但后端根本没启动报网络异常。3. 微信小程序端对接从登录到报修的完整链路3.1 小程序目录结构与Page/Component组织小程序端的工程里pages目录一般按角色或按功能拆。常见结构是pages/login、pages/owner/repair、pages/owner/fee、pages/staff/parking、pages/admin/notice等。每个页面四个文件wxml、wxss、js、json。js里最关键的是Page({ data: {...}, onLoad() {...} })。用报修页的js片段说明请求习惯// pages/owner/repair.js const app getApp(); Page({ data: { typeList: [水, 电, 门窗, 其他], typeIndex: 0, description: , imagePath: }, submitRepair() { const token wx.getStorageSync(token); wx.request({ url: app.globalData.baseUrl /repair/submit, method: POST, header: { token: token }, data: { type: this.data.typeList[this.data.typeIndex], description: this.data.description, imagePath: this.data.imagePath }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 提交成功 }); this.setData({ description: , imagePath: }); } else { wx.showToast({ title: res.data.message, icon: none }); } } }); } });这里header里带的token是登录时后端返回的后端根据token识别业主身份。submitRepair接口不传userId因为后端能从token里解析如果源码里接口还要求传userId说明它没有做完整的token校验此时要自己往data里塞userId不过答辩时老师会追问安全性。我一般建议把全局域名baseUrl放在app.js里真机调试时改成局域网IP或线上域名不要写死在页面里。3.2 登录鉴权openid换取会话的常见做法微信小程序的登录流程不能用用户名密码直接登录因为小程序没有Cookie机制。标准做法三步// app.js 登录流程 wx.login({ success: (res) { wx.request({ url: app.globalData.baseUrl /user/wxLogin, method: POST, data: { code: res.code }, success: (loginRes) { wx.setStorageSync(token, loginRes.data.data.token); wx.setStorageSync(userInfo, loginRes.data.data.userInfo); } }); } });wx.login()拿到的是临时code有效期五分钟只能用一次。后端拿code换openid后结合数据库用户记录生成自己的token字符串。这个token推荐用UUID或时间戳加随机数后端存到Redis或内存map里过期时间设7天。小程序端每次请求带这个token后端再查一次它对应哪个用户。这里有一个很常见的翻车点开发者工具里勾选了“不校验合法域名”真机上却连不上后端。真机调试必须在小程序后台配置request合法域名必须是https且域名有备案。如果没有域名可以在开发者工具里关闭校验用局域网IP联调但手机和电脑要连同一个WiFi。用抓包工具能看到请求内容但要在手机上安装证书并信任这是网络抓包基础操作抓包完记得关闭代理。3.3 报修提交与图片上传RepairApi的调用细节报修功能的核心除了文字还有图片。小程序端选择图片用wx.chooseMedia上传用wx.uploadFile// 选择图片后上传 chooseImage() { wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [camera, album], success: (res) { const tempPath res.tempFiles[0].tempFilePath; wx.uploadFile({ url: app.globalData.baseUrl /repair/upload, filePath: tempPath, name: file, formData: { userId: this.userId }, success: (upRes) { const data JSON.parse(upRes.data); this.setData({ imagePath: data.data.path }); } }); } }); }uploadFile的name要和后端接口里MultipartFile参数名一致。比如后端写RequestParam(file) MultipartFile file那么前端name就写file否则后端取不到文件。返回的data.path是相对于upload目录的路径比如/upload/repair/20250615_xxx.jpg。前端提交报修时data里传imagePath这个相对路径后端存库。页面显示图片时要用{{baseUrl}}{{item.imagePath}}拼接。我在很多毕设源码里看到图片显示不了十有八九是拼接问题要么忘记加baseUrl要么路径带了反斜杠。统一用正斜杠后端用“/”拼路径。Windows下File.separator是反斜杠如果后端用了它返回给前端的路径在小程序里会被当成特殊字符所以上传保存时强制把“\”替换成“/”。3.4 数据渲染与滚动加载列表页的翻车点小区公告、报修记录、缴费记录都是列表。小程序的列表页不能一次加载几百条一般是分页加载每页10条滚动到底部再请求下一页。常见写法// 列表页js 分页加载 data: { list: [], page: 1, limit: 10, hasMore: true, loading: false }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.setData({ page: this.data.page 1 }); this.loadList(); } }, loadList() { this.setData({ loading: true }); wx.request({ url: app.globalData.baseUrl /repair/listByUser, data: { userId: this.data.userId, page: this.data.page, limit: this.data.limit }, success: (res) { const newList res.data.data; this.setData({ list: this.data.list.concat(newList), hasMore: newList.length this.data.limit, loading: false }); } }); }后端要做好分页参数校验page不能小于1limit不要超过100。这里有个细节列表项要用wx:key绑定id否则setData时渲染会闪烁。如果滚动加载时出现数据重复多半是page自增和请求并发乱了在loadList开头用loading锁住等请求回来再解锁。上拉到最后一页时把hasMore置false滚动到底部不再发请求。小程序顶部导航栏高度在不同机型不一样通常用wx.getSystemInfoSync()拿到statusBarHeight和navBarHeight在自定义导航栏页面里动态设置占位。如果源码里用的是原生导航栏则不需要处理但要做沉浸式体验就要自己算高度这块也是答辩时能讲两句的细节。4. 避坑手册毕业设计跑不起来和答辩被问倒的五个常见问题4.1 现象小程序请求http接口直接失败开发者工具里报url not in domain list真机上报网络异常。原因是微信对request域名有强制校验。解决在小程序后台的“开发管理-服务器域名”里添加request合法域名且只能是https。本地联调时在开发者工具右上角“详情-本地设置”勾选“不校验合法域名”就能用http://localhost:8080。真机调试不能关校验必须配域名。如果没有服务器可以用内网穿透把本地8080端口映射到一个https域名但要注意这类工具本身只是在电脑上开一个进程不涉及任何网络访问措施不要混淆。4.2 现象数据库中文全部变成问号连接串缺了characterEncodingutf8导致客户端和MySQL之间的字符集不一致。解决在jdbc url末尾加useUnicodetruecharacterEncodingutf8。另外MySQL建库时要把编码设成utf8mb4CREATE DATABASE wuye_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;。表里的VARCHAR字段也要是utf8mb4否则emoji会存不进去。改完连接串后要重启后端最好在Navicat里先执行一条INSERT试试中文。4.3 现象图片上传成功但页面不显示报修单能提交列表里图片位置是空白或者显示破图标。原因通常是前端没有拼接完整图片URL。比如后端返回imagePath/upload/repair/a.jpg前端在wxml里写了那请求的是相对路径当然打不开。解决在js里构造完整地址或在小程序里定义一个baseUrl常量在数据返回时做一层mapitem.imageUrl app.globalData.baseUrl item.imagePath。我一般会在后端返回的DTO里直接加一个imageUrl字段省得前端每个页面都拼。4.4 现象修改完个人信息再请求接口返回401很多源码的token有效期只有几小时或者修改密码时把用户记录里的token字段清空了。解决后端在修改密码接口里不要直接删除token而是让前端拿到新密码后重新调wxLogin流程。如果用的是Redis存会话修改密码后主动删除旧key并生成新token返回。前端在请求401时做一个统一拦截调用wx.showToast后跳转到登录页不要卡在当前页面。4.5 现象答辩时老师问“怎么实现用户管理的增删改查”源码里UserApi有简单的CRUD但老师更关注权限边界。如果你的回答只有“调delete接口把用户删掉”那肯定挂。正确理解是系统管理员能管理物业管理员和业主物业管理员只能改业主资料不能删除管理员。后端的Mapper里delete语句要带上role条件比如DELETE FROM user WHERE id? AND role!1防止管理员把自己删了。我还会在Service层加一行校验判断当前操作者的role是否大于被操作者的role。这套逻辑虽然是两行代码但讲出来就是加分项。5. 论文和答辩把物业.doc改成立得住的技术文档5.1 论文结构从功能需求到系统测试的衔接物业.doc这份毕业论文结构是典型的需求分析-设计-实现-测试。我在调整毕设论文时会按“两块五”来改项目背景和意义写半页可行性分析写半页需求分析写两页用例图用例描述表系统设计写五页架构图、数据库设计、接口设计实现写五页每个角色的核心界面截图关键代码测试写三页测试用例表测试结论。重点是把第2章的数据库表设计搬到论文第三章把第3章的接口调用截图搬到论文第四章。老师最看重的是“数据流能不能闭环”比如业主提交报修后物业管理员能看到并改状态这个流程要讲清楚。5.2 演示验收脚本五分钟讲完三个角色答辩演示不要三个角色来回切换十分钟。更高效的顺序是先以管理员登录删掉一个测试业主再新建一个说明用户管理退出后用业主登录演示提交带图片的报修、查看公告、查看缴费、提交满意度调查再用物业管理员登录处理刚才那条报修把状态改成处理中查询空闲车位发布一条公告。这样一条业务链走完正好能覆盖“管理、使用、处理”三端。每打开一个页面先截一张图插到论文里答辩时投屏看不清楚可以在关键页面放大字体。最后说一个我的习惯拿到任何毕设源码第一件事不是打开IDE而是先用文本编辑器读一遍.sql文件把数据库账号密码和端口号记下来再启动后端。这个动作能避开八成的连接失败。第二件事是全局搜索“http://”把所有接口地址替换成自己的baseUrl。这两步做完工程基本就能跑起来了。这套物业系统当年我也踩过图片不显示和token失效的坑从那以后我每次做小程序联调都强制先抓包看一遍请求响应再谈业务逻辑。希望帮到你。本文还有配套的精品资源点击获取 微信小程序物业管理系统毕业设计：后端Java源码与小程序端联调全攻略
简介一套面向毕业设计的微信小程序小区物业管理系统资源包涵盖完整前后端源码和毕业论文适合计算机相关专业学生快速搭建项目、完成论文写作。系统围绕管理员、物业管理员、业主三类角色展开覆盖用户管理、停车位查询、维修报修、缴费管理、公告查看、满意度反馈等完整业务闭环其中业主报修还支持上传图片管理员处理维修与缴费功能覆盖度较高。资源共402个文件、压缩包仅726KB包含117个wxss样式文件、95个xml配置、40个js脚本与31个wxml页面结构等前端部分以及67个java后端源码和SQL数据库脚本便于直接导入IDE运行和二次开发。内容预览中RepairApi、UserApi、PersonApi等接口展示了小程序与后端之间的数据交互设计配套的物业.doc毕业论文则可帮助读者理解数据库表结构、接口实现与模块分工。现已有380人学习下载适合需要系统设计与实现参考、快速复用同类业务的毕业生或初级开发者。1. 微信小程序物业管理系统一份能跑通的毕业设计源码包毕业设计时间紧又要演示效果这套基于微信小程序的小区物业管理系统把系统管理员、物业管理员、业主三个角色的工作台都收进了一个小程序。后端是Java工程附带论文文档覆盖用户管理、园区卫生记录、停车位查询、维修报修、物业缴费、业主需求、公告管理、安保人员信息这些典型模块。它适合两类人一是做毕业设计的学生拿到后可以直接跑通改数据库再按自己的需求换皮二是想快速搭一套小区物业原型做课程设计的开发者。下文按后端工程拆解、小程序端联调、常见坑、论文与答辩的顺序把这份资源的实际使用路径完整捋一遍。2. 后端Java工程拆解实体、接口与数据库是怎么咬合的2.1 从Repair.java和User.java看懂三类实体的字段设计先看资源里的Java文件清单wuye.iml是IntelliJ IDEA的模块文件Repair.java、User.java是实体类Vote.java和QueAndOpt.java对应满意度调查里的投票与问卷选项RepairApi、UserApi、PersonApi是以Api结尾的接口类这种命名风格在Java后端里比较常见实体类不带后缀Api类负责暴露HTTP接口。打开Repair.java核心字段基本是这样// Repair.java 报修实体 public class Repair { private Integer id; // 报修单主键 private Integer userId; // 提交报修的业主ID关联user表 private String type; // 报修类型水、电、门窗、其他 private String description; // 文字描述 private String imagePath; // 图片地址相对路径如/upload/repair/xx.jpg private Integer status; // 0待处理 1处理中 2已完成 3驳回 private Date createTime; // 提交时间 // 对应的getter/setter省略 }这段代码里最关键的是status字段。很多毕业设计只把报修做成提交后查看没有状态流转这套源码里status能支撑物业管理员在处理流程中改状态答辩时这就是一个区分度。imagePath存的是相对路径前端拿到后必须拼接服务器IP或域名才能显示完整图片这是一个必踩的坑后面避坑章会细说。User.java是业主和管理员共用的账号表靠role字段区分身份// User.java 中与权限相关的字段 private Integer id; private String username; // 登录名 private String password; // 建议存MD5或BCrypt源码里常见是MD5 private String realName; // 姓名 private Integer role; // 1系统管理员 2物业管理员 3业主 private String phone; // 手机号 private String avatar; // 头像role字段是整个权限管理的钥匙。小程序端请求接口时后端根据role判断能否执行对应操作。比如业主调用维修列表接口时SQL里要拼上userId做过滤只返回自己的报修单物业管理员能查全部。毕业设计评委会问“怎么防止业主查别人的报修”答案就在这里不是前端藏按钮而是后端接口里带了用户身份限制。2.2 API类与方法映射RepairApi、UserApi、PersonApi的职责边界Api类在Spring MVC里就是Controller。RepairApi负责报修相关入口UserApi负责登录、注册、个人信息维护PersonApi负责安保人员信息查询。看方法名也能猜出大致功能// RepairApi.java 方法映射示意 RestController RequestMapping(/repair) public class RepairApi { Autowired private RepairDao repairDao; PostMapping(/submit) public JsonResult submitRepair(RequestBody Repair repair) { // 1. 校验业主角色 // 2. 插入报修单status默认0 // 3. 返回自增id return JsonResult.success(repair.getId()); } GetMapping(/listByUser) public JsonResult listByUser(RequestParam Integer userId) { // 只查当前业主的报修单按create_time倒序 ListRepair list repairDao.findByUserId(userId); return JsonResult.success(list); } GetMapping(/listAll) public JsonResult listAll(RequestParam Integer page, RequestParam Integer limit) { // 物业管理员专用分页查询全部报修 return JsonResult.successWithPage(repairDao.findPage(page, limit)); } }JsonResult是统一返回体毕业设计里常见的是{code: 200, message: ok, data: {...}}。前端小程序里wx.request的成功回调里先判断code再取data。不包一层的话前端每个接口都要处理异常很容易漏。我一般会要求后端任何异常都返回code500前端统一弹toast这样联调效率高很多。UserApi里的登录逻辑值得单独看。微信小程序端传的是wx.login()拿到的code后端拿到code后调用微信接口换openid再拿openid查user表。查不到就自动注册一个业主账号密码用默认值或让用户补填。这种“先登录后注册”的体验很适合小区物业场景业主第一次进小程序看到公告就行不需要先注册。代码示意如下// UserApi.java 微信登录绑定 PostMapping(/wxLogin) public JsonResult wxLogin(RequestBody WxLoginRequest req) { // 1. req.getCode()是wx.login()拿到的临时凭证 String url https://api.weixin.qq.com/sns/jscode2session?appid appid secret secret js_code req.getCode() grant_typeauthorization_code; // 2. 用HttpClient请求这个url拿到openid // 3. 查user表有则更新sessionKey无则创建默认业主账号 // 4. 生成自定义token返回给前端 }注意这里用的https链接是微信官方接口不需要任何额外网络措施。appid和secret要填成小程序后台的真实值否则会返回invalid code。后端用RestTemplate或OkHttp都行关键是把openid和用户id的映射缓存下来避免每次页面打开都调微信接口。2.3 数据库表设计与初始化数据这套系统的表结构不会太多核心有六张user、repair、parking、fee、notice、survey。用一张表整理字段和用途方便对照源码建库表名关键字段用途userid, username, password, role, phone, avatar业主/物业/管理员统一账号表repairid, user_id, type, description, image_path, status报修单status做状态流转parkingid, area_no, position_no, status车位信息status0空闲 1占用feeid, user_id, fee_type, amount, status, deadline物业费/水电费fee_type区分noticeid, title, content, create_time公告按时间倒序展示surveyid, user_id, score, suggestion, create_time满意度调查对应Vote/QueAndOpt初始化数据时我一般会在user表里插三条不同role的账号admin/123456管理员manage/123456物业owner/123456业主。这样小程序端就能登录三个角色演示。停车位表插至少十条状态一半空闲一半占用这样“剩余车位查询”才有数据可看。notice表插三条公告不然首页空荡荡的。每张表保证每个角色登录后都有内容能点。2.4 配置与启动application.yml里的关键参数如果后端是Spring Boot配置主要在application.yml若是不带Boot的老项目则在web.xml和jdbc.properties里。拿到源码后先看wuye.iml旁边的pom.xml或lib目录确认是Maven还是普通工程。常见配置像这样server: port: 8080 servlet: context-path: /wuye spring: datasource: url: jdbc:mysql://localhost:3306/wuye_db?useUnicodetruecharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver wx: appid: wx1234567890abcdef secret: abcdef1234567890abcdef1234567890这里最坑的是characterEncodingutf8。如果漏掉中文报修描述和公告会全部变成问号。MySQL连接串在8.x驱动下必须加serverTimezone否则会报SQLException。端口和context-path前后端要对齐小程序里的请求地址如果写的是https://localhost:8080/wuye那么后端context-path也要是/wuye少一层路径就会404。启动流程通常是先用Navicat执行sql文件建库再改application.yml里的数据库账号密码然后启动Spring Boot主类。看到Tomcat started on port 8080后先用浏览器访问一下接口地址比如GET /wuye/repair/listAll能返回JSON再往下联调小程序。很多同学第一步就跑在这里小程序请求了接口但后端根本没启动报网络异常。3. 微信小程序端对接从登录到报修的完整链路3.1 小程序目录结构与Page/Component组织小程序端的工程里pages目录一般按角色或按功能拆。常见结构是pages/login、pages/owner/repair、pages/owner/fee、pages/staff/parking、pages/admin/notice等。每个页面四个文件wxml、wxss、js、json。js里最关键的是Page({ data: {...}, onLoad() {...} })。用报修页的js片段说明请求习惯// pages/owner/repair.js const app getApp(); Page({ data: { typeList: [水, 电, 门窗, 其他], typeIndex: 0, description: , imagePath: }, submitRepair() { const token wx.getStorageSync(token); wx.request({ url: app.globalData.baseUrl /repair/submit, method: POST, header: { token: token }, data: { type: this.data.typeList[this.data.typeIndex], description: this.data.description, imagePath: this.data.imagePath }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 提交成功 }); this.setData({ description: , imagePath: }); } else { wx.showToast({ title: res.data.message, icon: none }); } } }); } });这里header里带的token是登录时后端返回的后端根据token识别业主身份。submitRepair接口不传userId因为后端能从token里解析如果源码里接口还要求传userId说明它没有做完整的token校验此时要自己往data里塞userId不过答辩时老师会追问安全性。我一般建议把全局域名baseUrl放在app.js里真机调试时改成局域网IP或线上域名不要写死在页面里。3.2 登录鉴权openid换取会话的常见做法微信小程序的登录流程不能用用户名密码直接登录因为小程序没有Cookie机制。标准做法三步// app.js 登录流程 wx.login({ success: (res) { wx.request({ url: app.globalData.baseUrl /user/wxLogin, method: POST, data: { code: res.code }, success: (loginRes) { wx.setStorageSync(token, loginRes.data.data.token); wx.setStorageSync(userInfo, loginRes.data.data.userInfo); } }); } });wx.login()拿到的是临时code有效期五分钟只能用一次。后端拿code换openid后结合数据库用户记录生成自己的token字符串。这个token推荐用UUID或时间戳加随机数后端存到Redis或内存map里过期时间设7天。小程序端每次请求带这个token后端再查一次它对应哪个用户。这里有一个很常见的翻车点开发者工具里勾选了“不校验合法域名”真机上却连不上后端。真机调试必须在小程序后台配置request合法域名必须是https且域名有备案。如果没有域名可以在开发者工具里关闭校验用局域网IP联调但手机和电脑要连同一个WiFi。用抓包工具能看到请求内容但要在手机上安装证书并信任这是网络抓包基础操作抓包完记得关闭代理。3.3 报修提交与图片上传RepairApi的调用细节报修功能的核心除了文字还有图片。小程序端选择图片用wx.chooseMedia上传用wx.uploadFile// 选择图片后上传 chooseImage() { wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [camera, album], success: (res) { const tempPath res.tempFiles[0].tempFilePath; wx.uploadFile({ url: app.globalData.baseUrl /repair/upload, filePath: tempPath, name: file, formData: { userId: this.userId }, success: (upRes) { const data JSON.parse(upRes.data); this.setData({ imagePath: data.data.path }); } }); } }); }uploadFile的name要和后端接口里MultipartFile参数名一致。比如后端写RequestParam(file) MultipartFile file那么前端name就写file否则后端取不到文件。返回的data.path是相对于upload目录的路径比如/upload/repair/20250615_xxx.jpg。前端提交报修时data里传imagePath这个相对路径后端存库。页面显示图片时要用{{baseUrl}}{{item.imagePath}}拼接。我在很多毕设源码里看到图片显示不了十有八九是拼接问题要么忘记加baseUrl要么路径带了反斜杠。统一用正斜杠后端用“/”拼路径。Windows下File.separator是反斜杠如果后端用了它返回给前端的路径在小程序里会被当成特殊字符所以上传保存时强制把“\”替换成“/”。3.4 数据渲染与滚动加载列表页的翻车点小区公告、报修记录、缴费记录都是列表。小程序的列表页不能一次加载几百条一般是分页加载每页10条滚动到底部再请求下一页。常见写法// 列表页js 分页加载 data: { list: [], page: 1, limit: 10, hasMore: true, loading: false }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.setData({ page: this.data.page 1 }); this.loadList(); } }, loadList() { this.setData({ loading: true }); wx.request({ url: app.globalData.baseUrl /repair/listByUser, data: { userId: this.data.userId, page: this.data.page, limit: this.data.limit }, success: (res) { const newList res.data.data; this.setData({ list: this.data.list.concat(newList), hasMore: newList.length this.data.limit, loading: false }); } }); }后端要做好分页参数校验page不能小于1limit不要超过100。这里有个细节列表项要用wx:key绑定id否则setData时渲染会闪烁。如果滚动加载时出现数据重复多半是page自增和请求并发乱了在loadList开头用loading锁住等请求回来再解锁。上拉到最后一页时把hasMore置false滚动到底部不再发请求。小程序顶部导航栏高度在不同机型不一样通常用wx.getSystemInfoSync()拿到statusBarHeight和navBarHeight在自定义导航栏页面里动态设置占位。如果源码里用的是原生导航栏则不需要处理但要做沉浸式体验就要自己算高度这块也是答辩时能讲两句的细节。4. 避坑手册毕业设计跑不起来和答辩被问倒的五个常见问题4.1 现象小程序请求http接口直接失败开发者工具里报url not in domain list真机上报网络异常。原因是微信对request域名有强制校验。解决在小程序后台的“开发管理-服务器域名”里添加request合法域名且只能是https。本地联调时在开发者工具右上角“详情-本地设置”勾选“不校验合法域名”就能用http://localhost:8080。真机调试不能关校验必须配域名。如果没有服务器可以用内网穿透把本地8080端口映射到一个https域名但要注意这类工具本身只是在电脑上开一个进程不涉及任何网络访问措施不要混淆。4.2 现象数据库中文全部变成问号连接串缺了characterEncodingutf8导致客户端和MySQL之间的字符集不一致。解决在jdbc url末尾加useUnicodetruecharacterEncodingutf8。另外MySQL建库时要把编码设成utf8mb4CREATE DATABASE wuye_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;。表里的VARCHAR字段也要是utf8mb4否则emoji会存不进去。改完连接串后要重启后端最好在Navicat里先执行一条INSERT试试中文。4.3 现象图片上传成功但页面不显示报修单能提交列表里图片位置是空白或者显示破图标。原因通常是前端没有拼接完整图片URL。比如后端返回imagePath/upload/repair/a.jpg前端在wxml里写了那请求的是相对路径当然打不开。解决在js里构造完整地址或在小程序里定义一个baseUrl常量在数据返回时做一层mapitem.imageUrl app.globalData.baseUrl item.imagePath。我一般会在后端返回的DTO里直接加一个imageUrl字段省得前端每个页面都拼。4.4 现象修改完个人信息再请求接口返回401很多源码的token有效期只有几小时或者修改密码时把用户记录里的token字段清空了。解决后端在修改密码接口里不要直接删除token而是让前端拿到新密码后重新调wxLogin流程。如果用的是Redis存会话修改密码后主动删除旧key并生成新token返回。前端在请求401时做一个统一拦截调用wx.showToast后跳转到登录页不要卡在当前页面。4.5 现象答辩时老师问“怎么实现用户管理的增删改查”源码里UserApi有简单的CRUD但老师更关注权限边界。如果你的回答只有“调delete接口把用户删掉”那肯定挂。正确理解是系统管理员能管理物业管理员和业主物业管理员只能改业主资料不能删除管理员。后端的Mapper里delete语句要带上role条件比如DELETE FROM user WHERE id? AND role!1防止管理员把自己删了。我还会在Service层加一行校验判断当前操作者的role是否大于被操作者的role。这套逻辑虽然是两行代码但讲出来就是加分项。5. 论文和答辩把物业.doc改成立得住的技术文档5.1 论文结构从功能需求到系统测试的衔接物业.doc这份毕业论文结构是典型的需求分析-设计-实现-测试。我在调整毕设论文时会按“两块五”来改项目背景和意义写半页可行性分析写半页需求分析写两页用例图用例描述表系统设计写五页架构图、数据库设计、接口设计实现写五页每个角色的核心界面截图关键代码测试写三页测试用例表测试结论。重点是把第2章的数据库表设计搬到论文第三章把第3章的接口调用截图搬到论文第四章。老师最看重的是“数据流能不能闭环”比如业主提交报修后物业管理员能看到并改状态这个流程要讲清楚。5.2 演示验收脚本五分钟讲完三个角色答辩演示不要三个角色来回切换十分钟。更高效的顺序是先以管理员登录删掉一个测试业主再新建一个说明用户管理退出后用业主登录演示提交带图片的报修、查看公告、查看缴费、提交满意度调查再用物业管理员登录处理刚才那条报修把状态改成处理中查询空闲车位发布一条公告。这样一条业务链走完正好能覆盖“管理、使用、处理”三端。每打开一个页面先截一张图插到论文里答辩时投屏看不清楚可以在关键页面放大字体。最后说一个我的习惯拿到任何毕设源码第一件事不是打开IDE而是先用文本编辑器读一遍.sql文件把数据库账号密码和端口号记下来再启动后端。这个动作能避开八成的连接失败。第二件事是全局搜索“http://”把所有接口地址替换成自己的baseUrl。这两步做完工程基本就能跑起来了。这套物业系统当年我也踩过图片不显示和token失效的坑从那以后我每次做小程序联调都强制先抓包看一遍请求响应再谈业务逻辑。希望帮到你。本文还有配套的精品资源点击获取