宿舍管理系統的前端設計與實現

歐 暢

(廣西城市職業大學，廣西 崇左 532200)

宿舍管理是以Hbuilder作為開發平臺，使用MUI高性能前端框架，完成宿舍管理系統app。該系統以科學、全面、易操作的理念進行開發，在網上參考許多不同學校的宿舍管理理念，對目前我們國內宿舍的管理情況進行分析，實用而科學。集查詢與輸入操作為一體，自動化功能強大，操作靈活。

1 系統的預期要求

該系統主要包括基本功能、信息查詢與修改、系統維護：(1)基本功能部分應實現調換宿舍、充值水電費，學生信息的增加、刪除、修改、報修和查看通告的功能；(2)信息查詢與修改應包括學生查詢個人信息并對其數據進行修改或刪除的基本途徑；(3)系統技術可行性分析：在系統維護中包括使用時對ID進行識別、登陸與退出處理。

2 系統功能說明

2.1 用戶登錄模塊

用戶登錄模塊包括學生登錄、注冊賬號、忘記密碼三大部分。學生登陸：通過該系統學生可登陸，充值水電費、調換宿舍、查看宿舍樓通告、修改個人信息、報修宿舍家電等操作。注冊賬戶：學生可通過填寫姓名、學號、宿舍號、密碼、確認密碼和郵箱信息等進行注冊。忘記密碼：用戶可通過填寫注冊郵箱找回密碼。

2.2 首頁模塊

首頁模塊包括宿舍文明照片、充值水費、充值電費、保障制度、充值、支付記錄、更多功能、宿管通告版8個部分。宿舍文明照片：該部分使用圖片輪播的特效去展示文明宿舍的照片。充值水費：學生可以通過選擇宿舍號，填寫充值金額進行充值水費。充值電費：學生可以通過選擇宿舍號，填寫充值金額進行充值電費。保障制度：學生可通過該功能了解詳細的宿舍制度條款。充值：學生可通過填寫充值金額完成充值操作，金額可用于繳納水電費。支付記錄：學生可通過該功能查看支付記錄與憑證。更多功能：該功能模塊包括調換宿舍與報修功能，學生可通過填寫自己的宿舍號、聯系方式，與調換人的姓名與宿舍號進行申請調換宿舍。學生可進行選擇維修師傅，并填寫姓名、維修地址與損壞情況進行宿舍維修。舍管通告版：學生可查看社管發布的最新通告。

2.3 朋友管理模塊

朋友管理模塊包括：查詢好友、最近聯系人、管理人員、我的朋友4個部分。查詢好友：用戶可以在查詢框內輸入朋友的相關信息快速查找已有的好友。最近聯系人：學生可以查看最近有過對話的人。管理人員：該部分分為宿舍管理員與維修人員，學生可直接與宿舍管理員、維修人員進行對話。我的朋友：該部分包括舍友與好友，學生可直接與舍友、好友進行聊天。

2.4 個人設置模塊

個人設置包括個人信息、錢包、賬單、收藏、設置5個部分。個人信息：學生可在該部分進行修改個人頭像、名字。錢包：學生可在該部分中查詢余額、添加銀行卡、打開收付碼。賬單：學生可在該部分中查看自己已支付的水電費記錄。收藏：學生可在該部分中查看收藏內容，并可以在搜索框內快速查找已收藏內容。設置：在設置中可查看賬戶與安全、通用設置、新消息通知、幫助與反饋、關于宿舍之家與退出登錄操作。

3 系統詳細設計與實現

3.1 序言及目標

此章節為宿舍管理系統的詳細設計說明書，主要為了實現系統功能所進行的系統詳細設計說明，詳細描述系統里各軟件模塊的實現流程、功能內容，以便實現對系統編碼的約束與指導。本文檔供項目開發人員、程序員閱讀。

3.2 工具及環境

(1)研發語言及編譯器：開發本系統使用的是HTML5語言，開發的IDE工具是HbuilderX。(2)其他工具：開發使用墨刀、Process on等工具。

3.3 用戶界面設計

3.3.1 系統首頁界面

3.3.2 登錄界面

圖1 首頁界面

圖2 登陸界面

3.3.3 聯系人界面

圖3 聯系人界面

3.3.4 個人中心界面

圖4 個人中心界面

3.3.5 個人信息管理界面

圖5 個人信息管理界面

4 結語

本著當下學校對宿舍管理的更便捷化的需求，圍繞這一目的，設計出宿舍管理系統的前端部分并開發，其基本功能均能得以實現。在開發過程中，難免遇到難題，難免靈感枯竭，為此，查看了大量的文獻，在網上尋求幫助，在此過程中，問題不但得以解決，也提升了自身解決問題的能力。