溫馨提示本人主頁置頂文章(點我)開頭有 CSDN 平臺官方提供的學長聯(lián)系方式的名片1. 項目背景與意義隨著高校信息化建設(shè)的不斷深入傳統(tǒng)宿舍管理模式在報修、查寢、通知傳達、水電查詢等環(huán)節(jié)存在效率低、信息滯后、溝通成本高等問題。本項目基于 SpringBoot3 與 Vue3 技術(shù)棧設(shè)計并實現(xiàn)一款校園智能宿舍小程序旨在為在校學生、宿管人員和輔導員提供統(tǒng)一的宿舍管理服務(wù)平臺提升宿舍管理效率與學生居住體驗。小程序端面向?qū)W生提供宿舍報修、衛(wèi)生檢查、通知公告、水電查詢、意見反饋等功能管理端面向宿管與輔導員提供樓棟管理、房間分配、報修處理、查寢記錄、數(shù)據(jù)統(tǒng)計等能力。前后端分離架構(gòu)結(jié)合小程序輕量入口能夠較好地滿足校園場景下的高頻、移動化使用需求。2. 技術(shù)選型與架構(gòu)設(shè)計2.1 技術(shù)棧概覽層次技術(shù)選型說明后端框架SpringBoot 3.x基于 JDK17提供 RESTful API 與統(tǒng)一異常處理持久層MyBatis-Plus簡化 CRUD 操作內(nèi)置分頁插件數(shù)據(jù)庫MySQL 8.x存儲用戶、宿舍、報修、查寢等業(yè)務(wù)數(shù)據(jù)前端框架Vue3 Vite管理后臺采用組合式 API 與 Element Plus小程序端uni-app一套代碼編譯到微信小程序兼顧多端復用接口文檔Knife4j基于 OpenAPI3 自動生成在線調(diào)試文檔2.2 系統(tǒng)架構(gòu)分層系統(tǒng)整體采用前后端分離架構(gòu)小程序端與管理后臺通過 HTTP 請求訪問后端統(tǒng)一接口。后端按 Controller、Service、Mapper 三層組織配合統(tǒng)一返回結(jié)果封裝、全局異常攔截與 JWT 身份認證保證接口的規(guī)范性與安全性。flowchart TD A[小程序端 uni-app] -- B[Nginx 反向代理] C[管理后臺 Vue3] -- B B -- D[SpringBoot3 后端服務(wù)] D -- E[MySQL 數(shù)據(jù)庫] D -- F[Redis 緩存] D -- G[文件存儲服務(wù)]3. 數(shù)據(jù)庫設(shè)計3.1 核心實體關(guān)系系統(tǒng)核心實體包括用戶、宿舍樓、宿舍房間、報修單、查寢記錄、通知公告與意見反饋。學生與宿舍房間為多對一關(guān)系報修單與宿舍房間為多對一關(guān)系查寢記錄與宿舍房間為多對一關(guān)系。3.2 主要數(shù)據(jù)表結(jié)構(gòu)表名字段示例說明sys_userid, username, password, role, student_no用戶表區(qū)分學生、宿管、輔導員角色dorm_buildingid, name, address, manager_id宿舍樓信息表dorm_roomid, building_id, room_no, bed_count, status宿舍房間表repair_orderid, room_id, user_id, type, description, status報修工單表check_recordid, room_id, checker_id, result, remark, check_time查寢記錄表notice_infoid, title, content, publisher_id, publish_time通知公告表4. 后端核心模塊實現(xiàn)4.1 統(tǒng)一返回結(jié)果封裝為保證前后端數(shù)據(jù)交互格式一致定義統(tǒng)一返回結(jié)果類包含狀態(tài)碼、提示信息與業(yè)務(wù)數(shù)據(jù)三個字段。業(yè)務(wù)異常通過全局異常處理器統(tǒng)一捕獲并轉(zhuǎn)換為標準響應(yīng)格式。Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }4.2 報修工單模塊報修模塊是系統(tǒng)的核心業(yè)務(wù)之一。學生提交報修單后系統(tǒng)根據(jù)宿舍樓自動分配對應(yīng)宿管人員宿管可查看待處理工單并更新處理狀態(tài)。關(guān)鍵接口包括提交報修、分頁查詢、狀態(tài)更新與進度跟蹤。Service public class RepairOrderServiceImpl implements RepairOrderService { Resource private RepairOrderMapper repairOrderMapper; Override public PageResultRepairOrderVO pageQuery(RepairQueryDTO dto) { PageRepairOrder page new Page(dto.getPageNum(), dto.getPageSize()); LambdaQueryWrapperRepairOrder wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(dto.getStatus()), RepairOrder::getStatus, dto.getStatus()) .eq(dto.getBuildingId() ! null, RepairOrder::getBuildingId, dto.getBuildingId()) .orderByDesc(RepairOrder::getCreateTime); PageRepairOrder result repairOrderMapper.selectPage(page, wrapper); return PageResult.of(result); } }4.3 JWT 身份認證系統(tǒng)采用 JWT 實現(xiàn)無狀態(tài)身份認證。用戶登錄成功后后端簽發(fā)包含用戶 ID 與角色信息的 Token小程序端在后續(xù)請求頭中攜帶 Token后端通過攔截器統(tǒng)一校驗并解析用戶身份。Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (!StringUtils.hasText(token) || !JwtUtils.validateToken(token)) { throw new BusinessException(401, 登錄狀態(tài)已失效請重新登錄); } Long userId JwtUtils.getUserId(token); UserContext.set(userId); return true; } }5. 小程序端功能設(shè)計5.1 頁面結(jié)構(gòu)小程序端采用 uni-app 開發(fā)底部導航包含首頁、報修、消息、我的四個 Tab。首頁展示通知公告與快捷入口報修頁支持提交工單與進度查詢消息頁展示系統(tǒng)通知與處理結(jié)果我的頁面包含個人信息、我的報修、意見反饋等功能。5.2 報修提交流程學生進入報修頁面后選擇報修類型、填寫問題描述并上傳現(xiàn)場圖片提交后生成報修單。小程序端通過 uni.request 調(diào)用后端接口攜帶 Token 完成身份校驗提交成功后跳轉(zhuǎn)到報修進度頁。async function submitRepair(formData) { const token uni.getStorageSync(token); const res await uni.request({ url: /api/repair/submit, method: POST, header: { Authorization: token }, data: formData }); if (res.data.code 200) { uni.showToast({ title: 提交成功, icon: success }); uni.navigateTo({ url: /pages/repair/progress }); } else { uni.showToast({ title: res.data.message, icon: none }); } }6. 管理后臺功能設(shè)計6.1 功能模塊劃分管理后臺基于 Vue3 Element Plus 構(gòu)建主要模塊包括樓棟管理、房間管理、報修處理、查寢管理、通知發(fā)布與數(shù)據(jù)統(tǒng)計。宿管人員可對報修工單進行派單與完結(jié)操作輔導員可查看所轄樓棟的查寢匯總數(shù)據(jù)。6.2 報修處理界面報修處理頁面以表格形式展示工單列表支持按狀態(tài)、樓棟、時間篩選。點擊處理按鈕彈出對話框填寫處理意見并更新工單狀態(tài)同時系統(tǒng)自動向?qū)W生推送處理結(jié)果通知。template el-table :datarepairList v-loadingloading el-table-column proproomNo label房間號 width120 / el-table-column proptype label報修類型 width120 / el-table-column propdescription label問題描述 / el-table-column propstatus label狀態(tài) width100 template #default{ row } el-tag :typestatusMap[row.status].type{{ statusMap[row.status].text }}/el-tag /template /el-table-column el-table-column label操作 width140 template #default{ row } el-button typeprimary link clickhandleProcess(row)處理/el-button /template /el-table-column /el-table /template7. 系統(tǒng)測試與部署7.1 測試方案系統(tǒng)測試覆蓋接口層與頁面功能層。后端使用 JUnit 與 MockMvc 編寫核心接口測試用例前端通過手工測試驗證關(guān)鍵業(yè)務(wù)流程。重點驗證報修提交、狀態(tài)流轉(zhuǎn)、權(quán)限控制與數(shù)據(jù)統(tǒng)計等核心場景。7.2 部署方案后端服務(wù)打包為可執(zhí)行 Jar 包部署在 Linux 服務(wù)器上通過 Nginx 反向代理統(tǒng)一入口。小程序端通過微信開發(fā)者工具上傳審核后發(fā)布管理后臺構(gòu)建為靜態(tài)資源部署至 Nginx前后端通過配置的 API 地址進行通信。8. 總結(jié)與展望本項目基于 SpringBoot3 與 Vue3 完成了校園智能宿舍小程序的設(shè)計與實現(xiàn)覆蓋報修、查寢、通知、水電查詢等核心業(yè)務(wù)場景形成了小程序端、管理后臺與后端服務(wù)三位一體的完整解決方案。后續(xù)可在智能門禁對接、水電表自動采集、宿舍評分算法與消息推送優(yōu)化等方向持續(xù)迭代進一步提升宿舍管理的智能化水平。