宿舍管理系统的前端设计与实现

欧 畅

(广西城市职业大学，广西 崇左 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 结语

本着当下学校对宿舍管理的更便捷化的需求，围绕这一目的，设计出宿舍管理系统的前端部分并开发，其基本功能均能得以实现。在开发过程中，难免遇到难题，难免灵感枯竭，为此，查看了大量的文献，在网上寻求帮助，在此过程中，问题不但得以解决，也提升了自身解决问题的能力。