本科毕业设计（论文）
基于Node.js + Express框架的高校宿舍管理系统设计和实现 Design and implementation of dormitory Management system based on node.js + Express framework ；
水电单的录入；
处理欠费宿舍等操作功能。学生主要是水电单的缴费，报修单的填写和公告的查看等操作功能。本文将重点介绍系统实现的思想和整个过程。
关键字：管理系统 Node.js Express MongoDB ECHARTS LAYUI Abstrace This system＇s design achievement is the colleges and universities Dormitory Management System which has been refer to many Universitario Dormitory Management System. In order to help the administrative staff and student to use the system glidingly, cut down some messy process and simplify the fussy operation. This research design is based on the Node.js as the Backend Development and use its Express frame for rapid, open and simple Web development. The data base is the MongoDB, the visual tools is ECHARTS, and the development environment is Visual Studio Code. This system mainly to satisfy the request of administrative staff, and realize the mainly function of dormitory management, and exhibit the design and realization process of the system. The system mainly contain three the models: administer , dorm supervisor and student. The administrators can boost, alter, query and remove dormitory buildings＇, student’s basics information, deal with the service request, distribute students＇ dormitory and other operate. The dorm supervisor mainly can distribute students＇ dormitory, the expense input and statistic and make operation to the dormitory which are arrearage and other operate. The dorm supervisor mainly can distribute students＇ dormitory, the expense input and statistic and make operation to the dormitory which are arrearage and other operate. The student mainly can pay the fees ,fill in the service request and watch the announcement and other operate. Key words: management system Node.js Express MongoDB ECHARTS LAYUI 目录 第一章 绪论 1 1.1 课题背景与必要性 1 1.2 研究现状 1 1.3 开发的目的与意义 2 第二章 主要技术的介绍 3 2.1 Node.js 3 2.2 Express 3 2.3 Layui 3 2.4 MongoDB 3 2.5 AJAX 4 2.6 jQUERY 4 2.7 Echarts 4 2.8 本章小结 4 第三章 系统分析 5 3.1系统需求分析 5 3.1.1 系统可行性分析 5 3.1.2 可行性分析结论 5 3.1.3 功能需求 5 3.2 系统总体分析 7 3.2.1 系统模块分析 7 3.2.2 系统用例分析 9 3.3 数据库设计 16 3.3.1 数据库实体设计的E-R图 17 3.3.2 数据表 22 第四章 系统详细分析 27 4.1类图和活动图 27 4.1.1 类图 27 4.1.2 活动图 28 第五章 网站系统描述与实现 31 5.1 登陆模块 31 5.2 宿舍管理模块 33 5.3 学生住宿模块 35 5.4 水电单管理模块 39 5.5 报修管理模块 42 5.6 统计管理模块 45 第六章 系统测试 48 6.1 用户登陆模块测试 48 6.1.1 用户登陆模块测试与操作 48 6.1.2 测试评价 48 6.2 宿舍管理模块测试 49 6.2.1 宿舍管理模块测试与操作 49 6.2.2 测试评价 50 6.3 学生管理模块测试 50 6.3.1 学生管理模块测试与操作 50 6.3.2 测试评价 51 6.4 水电单管理模块测试 51 6.4.1 水电单管理模块测试与操作 51 6.4.2 测试评价 52 6.5 报修管理模块测试 52 6.5.1 报修管理模块测试与操作 52 6.5.2 测试评价 52 6.6 本章小结 53 第七章 总结 54 参考文献 56 致 谢 57 第一章 绪论 1.1 课题背景与必要性 当今大校园内的学生公寓，其数据量大，各种信息管理内容复杂，查询和管理学生信息和校园内的公寓信息等工作由人工完成将是很累的，不仅仅浪费许多人力物力资源，而且还很容易出现差错，所以为了解决这个问题我们就需要依靠计算机技术优势了。
随着计算机技术的快速发展和普及,在现代社会信息管理系统已经深入到各个领域,信息管理系统是一个由人与计算机等组成的可以进行信息录入，操作，采集和维护的系统。学生宿舍管理系统就是一个典型的信息管理系统,它的实现让人们的生产生活更加方便。它让管理部门的工作效率大大提高；
充分利用资源；
减少不必要的人力，物力损失；
方便宿舍管理部门的工作人员全面地掌握学生住宿情况等目的；
为宿舍管理部门，开发设计专用系统一高校学生宿舍信息管理系统来进行管理学生宿舍情况，使得学生宿舍信息实现标准的管理和规范化的制度是十分必要的。专用系统是一个信息管理系统，它将实现检索迅速和查找方便；
信息录入，修改个删除功能；
以及对新入校学生进行宿舍安排等功能。
1.2 研究现状 因今年二胎政策的实施,大学生学生人数逐年增多,公寓作为学生生活、住宿、学习的重要场所,保障学生拥有安全、舒适的宿舍环境,做好宿舍管理工作就显得尤为重要。目前,已经有越来越多的高校开始将计算机科学技术应用到宿舍管理工作中去,实现了无纸化办公,并取得了比较良好的使用效果。可见,高校宿舍管理系统的开发与应用已经成为高校管理工作的必然趋势。
1.3 开发目的和意义 本高校管理系统的开发的目的和意义是高校的宿舍管理一直都是十分频繁且繁琐的，高校学生的基数是十分巨大的，在管理层面上，每一年都有大量的新旧学生的进出，每一个月各个宿舍都有水电单的生成，每一天都可能有不少的报修需要解决。本系统都将会一一解决上述的问题，它的实现能大大减轻高校在宿舍管理上的压力，节约入手，时间，减轻负担。对学生良好的安排让其顺利的在宿舍中正常生活，高校宿舍管理系统的产生无疑对高校和学生的成长有很大的促进作用。
第二章 主要技术的介绍 2.1 Node.js Node.js是能够在服务器上运行JavaScript的运行环境。采用的是Google开发的V8运行代码，具有事件驱动、非阻塞和异步输入输出模型等技术。Node.js大部分基本模块都用JavaScript语言编写。本来JavaScript的运行是在浏览器上的，Node.js的出现使JavaScript也能用于服务端编程。Node.js含有一系列内置模块作为独立服务器运行。它作为我的后端支持我整个的项目，我的各种包都在这里获得。
2.2 Express框架 Express框架是基于Node.js的web框架，它能够提供一系列强大特性用于快速的创建web应用。强大而灵活的中间件响应HTTP请求，通过模板传递参数来动态渲染各种HTML页面，我的后端路由都在这里完成，包括各种http请求，数据库的连接和操作，跨域请求。
2.3 LAYUI框架 LAYUI是一套采用前端模块化规范编程写的前端UI框架，遵循原则原生HTML/CSS / JS的书写，内置了十分丰富的模块，通过模块化的方式进行按需加载。用于PC端后台系统的前台的速成开发。
2.4 MongoDB数据库 MongoDB数据库是属于非关系型数据库，属于文档型数据库。在适量级的内存中性能非常迅速，它将热数据存储在物理内容中，使得热数据的读写变得十分快。MongoDB的Json格式数据十分适合文档格式的储存与查询。
2.5 AJAX Ajax能异步请求服务器数据，可以做到局部更新网页数据而不用数据的每一次变动都要刷新整个网页。它的存在让我的前端网页可以有更好更快的展示和改变数据，交互性十分友好。在这次项目中它是我每时每刻都在使用的关键技术，AJAX的熟练运用也会让我更好的对接后端接口，对接口理解更加深入。
2.6 jQuery jQuery是一个JavaScript框架，它倡导以最少的代码实现更多的事情，它具有独特的链式语法和短小清晰的多功能接口，并且兼容大部分主流浏览器。它的存在让我的前端代码更加简洁，易读性强。
2.7 ECHARTS ECHARTS是一个纯JavaScript的图标库，可以流畅的运行在pc和移动设备上，兼容大部分浏览器，许多丰富的交互功能以及可视化效果。它在我项目中的数据统计充分应用上了。
2.8 本章小结 当前项目所使用的框架都是比较主流的，我专注与前端开发，后端比较专业的技术我也不太熟悉，所以我采用了Node.js作为我的后台基础，因为它作为后台对前端人员是比较友好的。而Express框架是基于Node.js的可以快速架构Web项目。它附带强大的中间件和包装过的网络请求让我的开发事半功倍。LAYUI框架是16年出来的，是比较新颖的框架。它主要针对项目后台前端的快速开发设计。而我的项目作为管理系统用它也是十分的适合的。
后面的技术都是前端最标准的技术，我的网站的设计和实现都离不开他们。以上强大的技术辅助让我的项目有了扎实的根基，我将尽力的在我的项目中把它们的优点体现出来，往后我将学习更多技术，希望我在其他项目可以做到游刃有余。
第三章 系统分析 3.1系统需求分析 3.1.1 系统可行性分析 （1）经济可行性：此项目是我的毕业设计项目，全部框架的技术都不用购买或者租借，开发完全使用本机和流行稳定的开发工具，经济成本很低。
（2）技术可行性：此项目使用的技术均是市面上比较流行和稳定的。并且他们之间都有相辅相成，能快速进行开发设计。
3.1.2可行性分析结论 此项目是管理系统，管理系统在市面上是十分多的，使用的技术没有太大的要求，网上可以找到各种管理系统的雏形进行参考，对于高校宿舍管理模式的知识也可以通过翻找各种资料掌握到，为系统的设计提供了便利，系统的实现也会方便管理员和学生的住宿生活，很大程度上的节约了时间和成本。综上所述，方案实施是可行的。
3.1.3功能需求 本次设计中主要实现一下的系统功能：
个人管理系统：这个系统主要包括舍监，管理员和学生的登陆和修改密码的功能。登录功能是用户通过输入账号和密码进行登陆操作，系统连接数据库进行数据校验判断。修改密码需要用户登陆后进行两次的密码输入，通过系统修改密码。
学院管理系统：这个系统主要包括管理学生学号规则和管理专业号列表的功能。管理学生学号规则是通过规定学生学号的长度和届级，专业号，班级，排名的学号映射。管理专业号列表是管理专业号代表专业名称集合。两者的结合用于进行搜索学生的功能。
宿舍管理系统：这个系统是对宿舍和宿舍的集合进行管理，宿舍的集合在这个项目中名为栋，宿舍的添加需要选择栋才能完成，舍监也可以根据宿舍欠费情况对宿舍进行断电和通电处理。
学生调宿系统：这个系统主要包括了学生的基本信息管理和对学生的调试操作，管理员录入学生信息后可以进行调宿操作，管理员将学生调配到所属的栋后，该栋的舍监再对学生分配有空余床位的宿舍。
水电单系统：这个系统主要包括了水电单的管理和水电单交付的功能。舍监对自己栋宿舍的水电单进行录入，管理员进行管理，学生进行水电单交付。
报修系统：这个系统主要包括了报修单的填写和报修单的处理功能。学生进行报修单的填写，管理员接收到待处理报修单后安排维修，维修员维修完毕后通知管理员进行相关信息录入，进而完成报修流程。
公告系统：管理员通过发布公告信息来传递公告，通过设置公告的对象，舍监和学生都能收到特定的信息。
系统框架分层图如下：
图3-1系统框架分层图 3.2 系统总体分析 3.2.1系统模块分析 高校宿舍管理系统主要分有三个次级子系统模块组成。分别是管理员后台管理子系统模块，舍监管理子系统模块和学生宿舍子系统模块。在管理员后台管理子系统模块中，管理员进行登陆进入管理页面，在里面可以设置学院的学号，水电收费规则，对学生住宿状态，学生的报修单，学院宿舍公告，学生水电单进行管理。在舍监管理子系统模块中，舍监通过管理员分配的学生进行二次调宿，对学生的水电单，学生宿舍的电闸和公告进行管理。在前端学生宿舍子系统模块中，学生进行查看公告，水电单付费，报修单的填写等功能。
图3-2总功能系统模块图 图3-3管理员管理子系统模块 图3-4舍监管理子系统模块 图3-5学生前台子系统模块 3.2.3系统用例分析 图3-6高校管理系统系统用例图(管理员) 图3-7高校管理系统系统用例图(舍监) 图3-8高校管理系统系统用例图(学生) 用例总表如下：
表3-1用例总表 编号 参与者 用例名称 用例说明 000 管理员 用户登陆 管理员进入登陆页面后输入用户名和密码，点击登陆，进入主页 001 管理员 管理员修改学号规则 管理员登陆后点击学院管理内的学号标准表，点击修改，按照流程输入学号长度，通过系统虚拟的学号进行届号，专业号，班级号和班级排名的设置。
002 管理员 管理员添加系别表 管理员登陆后点击学院管理内的系别表，点击添加后输入系别号和系别名完成添加操作。
003 管理员 管理员添加管理员 管理员登陆后点击用户管理，点击添加输入用户名和密码后点击确认完成管理员添加操作。
004 管理员 管理员添加栋 管理员登陆后点击宿舍管理的栋列表，点击添加，输入栋名字，栋负责人的电话，名字后点击添加完成添加栋操作。
005 管理员 管理员添加宿舍 管理员登陆后点击宿舍管理的宿舍列表，点击添加按钮后选择所属的栋和填写宿舍名字点击添加完成添加宿舍操作。
006 管理员 管理员调配学生 管理员登陆后点击学生管理，对添加学生的产物进行分配栋操作，选择栋点击完成完成调配学生操作。
007 管理员 重置学生密码 管理员登陆后点击学生管理的已入住学生列表，点击相应学生的重置密码按钮，输入密码和确认密码点击重置完成修改学生密码操作。
008 管理员 管理员修改水电单收费标准 管理员登陆后点击水电单管理的水电标准表，点击修改输入挡位电费和挡位水费的内容后点击修改完成水电单收费标准修改操作。
009 管理员 管理员添加维修员 管理员登陆后点击报修管理的维修员列表，点击添加按钮后输入维修员名字和电话后点击添加完成维修员添加操作。
010 管理员 管理员处理报修单 管理员登陆后点击报修管理的报修单表，选择需要处理的单，点击处理按钮，选择维修员和收费对象，输入价钱和备注点击完成完成报修单处理操作。
011 管理员 管理员发布公告 管理员登陆后点击公告管理后点击添加按钮，选择发布对象和输入公告内容，点击发布完成发布公告操作。
012 舍监 舍监修改栋公告 舍监登陆后点击公告管理，点击修改后对栋公告进行修改，点击修改完成修改栋公告操作。
013 舍监 舍监为学生分配宿舍 舍监登陆后点击宿舍管理，选择学生后点击分配宿舍，选择宿舍后点击分配完成学生分配宿舍操作 014 舍监 舍监添加水电单 舍监登陆后点击水电单管理的水电单列表，点击添加后选择年月和输入水电稍耗点击添加完成水电单添加操作 015 舍监 舍监对欠费宿舍进行断电 舍监登陆后点击水电单管理的欠费宿舍列表，在表中相应的宿舍点击断电按钮，完成对欠费宿舍的断电操作 016 学生 修改密码 学生登陆后点击右上角名字展开列表点击修改密码，输入新密码和确认密码，点击修改完成修改密码操作 017 学生 缴费水电单 学生登陆后在主页可以看到水电单列表，学生选择需要缴费的水电单点击缴费，点击确认缴费完成缴费水电单操作 018 学生 报修单填写 学生登陆后在主页可以看到报修单表，学生点击报修按钮后选择报修项目，填写备注，上传图片，点击完成完成报修单填写操作 对主要用例图进行详细描述：
表3-2管理员登录用例图详细描述表 用例编号：000 用例名称：管理员用户登录 简要说明：管理员进入登陆页面后输入用户名和密码，点击登陆，进入主页 参与者：管理员 前置条件：无 后置条件：进入管理员主页，本地保存用户信息 基本事件流：
1. 输入用户名 2. 输入密码 3. 输入验证码 4. 点击登陆 5. 验证验证码 6. 验证用户名 7. 验证密码 8. 登陆成功，进入主页 其他事件流：无 异常事件流：
5a：验证码错误 5a1：提示验证码错误 6a：用户名不存在 6a1：提示用户名或密码错误 7a：密码错误 7a1：提示用户名或密码错误 补充说明：无 表3-3管理员添加系别用例图详细描述表 用例编号：004 用例名称：管理员添加系别 简要说明：管理员登陆后点击学院管理内的系别表，点击添加后输入系别号和系别名完成添加操作。
参与者：管理员 前置条件：管理员登陆主页 后置条件：系别表添加新数据，搜索框可更新到新数据 基本事件流：
1. 输入专业号 2. 输入专业名称 3. 点击添加 4. 系统验证专业名称 5. 系统验证专业号 6. 专业号添加完成，刷新页面 其他事件流：无 异常事件流：
4a：专业名称长度不符合标准 1a1：提示正确填写专业名称 5a：专业号不匹配学好标准 1a1：提示专业号标准长度 补充说明：无 表3-4舍监分配宿舍用例图详细描述表 用例编号：013 用例名称：舍监分配宿舍 简要说明：舍监登陆后点击宿舍管理，选择学生后点击分配宿舍，选择宿舍后点击分配完成学生分配宿舍操作 参与者：舍监 前置条件：舍监登陆主页，管理员调配学生 后置条件：宿舍现住人数字段添加 基本事件流：
1. 选择需要分派宿舍的学生 2. 点击分配按钮 3. 选择宿舍 4. 系统校验宿舍床位 5. 分派宿舍成功 其他事件流：
4a：选择的学生数超过宿舍可住人数 4a1：提示错误，分配失败 异常事件流：
无 补充说明：
无 表3-5学生填写报修单用例图详细描述表 用例编号：018 用例名称：学生填写报修单 简要说明：学生登陆后在主页可以看到报修单表，学生点击报修按钮后选择报修项目，填写备注，上传图片，点击完成完成报修单填写操作 参与者：学生 前置条件：学生登陆主页 后置条件：管理员处理报修单 基本事件流：
1. 点击报修按钮 2. 填写备注 3. 选择维修项目 4. 上传图片 5. 点击提交 6. 系统检验备注 7. 系统检验图片 8. 报修单提交成功 其他事件流：
1a：学生当前宿舍严重欠费中 1a1：提示欠费，无法进行报修服务 6a：没有提交图片 6a1:提示必须提交图片 7a：没有写备注 7a1：提示必须填写备注 异常事件流：
无 补充说明：
无 3.4数据库设计 3.4.1数据实体设计的E-R图 图3-9管理员库 图3-10学号标准库 图3-11栋库 图3-12宿舍库 图3-13公告库 图3-14水电标准库 图3-15维修项目库 图3-16专业号库 图3-17维修员库 图3-18学生库 图3-19报修单库 图3-20水电单库 图3-21数据表关系 3.4.2数据表 表名：admin 表3-6管理员表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 管理员id 2 admin String 10 管理员账号 3 password String 20 账号的密码 表名：build 表3-7栋表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 栋id 2 admin Object 10 连接管理员表 3 build varchar 20 栋名称 4 user String 20 舍监名字 5 phone String 20 舍监电话 6 now Int 32 现有宿舍 7 password String 50 舍监密码 表名：dorm 表3-8宿舍表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 宿舍id 2 dorm String 10 连接宿舍表 3 max Int 20 床位 4 now Int 20 现住学生 5 break Int 20 电闸 表名：idrule 表3-9学号标准表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 学号标准id 2 size Int 32 学号长度 3 grade String 20 届号 4 system String 20 专业号 5 class String 20 班级号 6 rank String 20 班级排名号 表名：notices 表3-10公告表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 公告id 2 flag Int 32 发布对象 3 notice String 20 公告内容 4 date Double 20 发布日期 表名：repairman 表3-11维修员表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 维修员id 2 rmname String 20 维修员名字 3 rmphone String 20 维修员电话 4 rmpooto String 20 维修员头像图片 表名：repairs 表3-12维修单表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 维修单id 2 build Object 30 连接栋表 3 dorm Object 30 连接宿舍表 4 type Object 30 连接维修项目表 5 sremark String 50 学生备注 6 sphoto String 20 图片 7 sno String 20 学生学号 8 sphone Double 32 学生电话 9 time Double 32 提交时间 10 flag Int 32 维修状态 11 dpay Int 32 学生付款 12 flag2 Int 32 付款对象 13 oktime Double 32 维修时间 14 repairman Object 30 连接维修员表 15 rremark String 50 维修员备注 16 spay Int 32 学校付款 表名：student 表3-13学生表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 学生id 2 build Object 20 连接栋表 3 dorm Object 20 连接宿舍表 4 sno Double 20 学生学号 5 sname String 20 学生名字 6 ssex Int 32 学生性别 7 sphone String 20 学生电话 8 spwd String 20 学生密码 9 flag Int 32 学生住宿状态 表名：system 表3-14专业号表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 专业号id 2 num String 20 专业号 3 system String 20 专业名称 表名：type 表3-15维修项目表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 维修项目id 2 type String 20 维修项目名称 表名：werule 表3-16水电单标准表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 水电单标准id 2 erelief Int 32 电费减免 3 wrelief Int 32 水费减免 4 efirst Double 32 一档电费 5 esecond Double 32 二档电费 6 ethird Double 32 三档电费 7 wfirst Int 32 一档水费 8 wsecond Double 32 二档水费 9 wthird Double 32 三档水费 10 et1 Int 32 最大一档耗电 11 et2 Int 32 最大二档耗电 12 wt1 Int 32 最大一档耗水 13 wt2 Int 32 最大二档耗水 表名：we 表3-17水电单表 序号 列名 数据类型 长度 主键 说明 1 _id Object 30 是 水电单id 2 year Int 32 年 3 month Int 32 月 4 build Object 32 连接栋表 5 dorm Object 32 连接宿舍表 6 electric Double 32 耗电 7 water Double 32 耗水 8 efee Double 32 电费 9 wfee Double 32 水费 序号 列名 数据类型 长度 主键 说明 10 total Double 32 总计 11 flag Int 32 支付状态 第四章 系统详细分析 4.1类图和活动图 4.1.1 类图 系统类图体现出了各个类之间的关系，如下图所示：admin类对build类，dorm类，student类，notices类，type类，repairman类进行管理，dorm类关联build类，student类，we类，repair类关联dorm类，repair类关联type类和repairman类。
图4-1系统主要类图 4.1.2 活动图 活动图的实现能更好的对系统的功能进行展示，以下将展示系统主要的活动图。
（1）用户登陆活动图 图4-2用户登陆活动图 用户进入登陆页面进行登陆操作，输入账号和密码，如果账号或密码判断失败，将会有错误提示，提示完毕或密码成功操作完毕。
（2）学生住宿活动图 图4-3学生住宿活动图 学生的住宿活动流程是管理员进行学生的录入后或者操作已经入住的学生让学生进入等待调配的状态，管理员进行调配学生后，舍监能对调配到之间方的学生进行学生入住操作，管理员也可以直接对待入住学生进行宿舍分配，如果宿舍床位不足，调配失败，如果宿舍床位足够则学生入住完成。
（3）学生报修活动图 图4-4学生报修活动图 学生登陆页面后可以进行报修单的填写，当学生水电单欠费超过3个月时无法开启填写页面，相反则可以正常填写报修单，管理员登陆页面后可以进行报修单的处理，每张报修单选择好维修员和其他信息则可以完成处理报修单的操作。
第五章 网站系统描述与实现 5.1 登录模块 登陆主要有三个角色，一个是管理员，一个是舍监，还有一个是学生。他们的登陆都有相同的特点，他们的登陆账号都是固定的，舍监和学生的初始密码都是固定的，舍监的账号和密码初始都为手机号，学生的账号是他的学号，密码为他的手机，舍监和学生的密码都可以后期进行重置。关于登陆的页面，选择比较传统的登陆模型，一个背景图片，一个半透明框，里面分别都是账号，密码，和验证码。用户进行输入账号密码和验证码进行验证后完成登陆。登陆成功进入主页后点击右上角用户名可以选择退出登陆退回登陆页如图5-1所示：
图5-1用户登陆页面 为了更好的安全性，我使用token验证，服务器验证成功后，服务端会发出专属的token给客户端，客户端接收后储存下来，往后每次的请求都带着token这个字段，服务器只接受有对应token请求头的请求如图5-2所示：
图5-2token的设置和登陆路由 客户端的登陆除了储存token外，为了往后更好的页面操作，我也将把一些用户数据存在local storage中，管理员我会存放管理员名字，舍监登陆会存放舍监名字和所属栋的id，学生的话我会存入名字，所属栋id，所属宿舍id。如图5-3所示：
图5-3页面存储效果 5.2 宿舍管理模块 宿舍管理是管理员专属的，管理员按照高校的宿舍情况进行操作，栋是宿舍的集合，因为我设计栋和舍监是一对一的关系，所以我直接把舍监和栋绑定成一个表。在栋的添加中同时录入舍监的信息。宿舍的录入需要先选择栋，宿舍表是关联栋表的。栋和宿舍的删除都需要判断其中的一个字段，栋的删除需要判断属于该栋的宿舍是否存在，如果存在则无法删除。宿舍的删除也是同理，存在学生的宿舍也无法删除，宿舍管理模块页面如图5-4，5-5所示：
图5-4栋管理页面 图5-5宿舍管理页面 系统为宿舍的添加，删除，修改，查找创建了接口，以查找接口为例，通过判断是否有请求的字段，实现两种查找build表的方式。宿舍管理查找接口及其他接口如图5-6所示：
图5-6宿舍管理查找接口及其他接口 栋的删除和宿舍的删除都需要判断本身表的一个字段来实现，这里以宿舍作为例子。无法删除存在学生的宿舍，就是让学生分配好宿舍后对宿舍表的now字段自增，删除宿舍时判断now字段从而判断当前宿舍是否可删，如图5-7所示：
图5-7前台删除宿舍逻辑判断 5.3 学生住宿模块 学生住宿管理模块是最为重要的一个，它的实现才是高校宿舍管理系统的核心，也是我主要创新的部分，针对于高校经常遇到的宿舍管理问题进行的创新实施开发。每一年都有大量的学生住宿流动，如果全部由管理员来操作的话是十分麻烦且效率低下的。而每个宿舍都有舍监这个职位，完全可以延伸一下，管理员直接按批次的分配下去给每栋的舍监。舍监对分配给自己栋的学生进行宿舍安排。这样会大大减轻管理员的负担，而且舍监能减轻管理员负担的地方还有每个月的水电单录入。管理员调配学生页面和舍监分配宿舍页面如图5-8，5-9所示：
图5-8管理员调配学生页 图5-9舍监分配宿舍页 工作的流程是管理员添加完学生后可以批量调配学生到各个栋中，每一栋的舍监对分配到的学生进行入住宿舍处理，当然管理员同样能直接把学生调配到具体的宿舍，入住学生页面和入住宿舍接口如图5-10，5-11所示：
图5-10分配宿舍页面展示 图5-11入住宿舍接口 出于逻辑性和安全性考虑，舍监的权利只要安排学生入住的功能，而管理员能对学生进行修改，删除，重置密码，重新调配操作。而在删除和重新调配这两个操作可以完成的条件是当前学生所在宿舍没有欠费的水电单。代码实现如图5-12，5-13所示：
图5-12前端删除学生逻辑代码 图5-13后端处理学生删除接口 学生添加是管理学生的来源，学生添加主要需要学号的不重复性，前端提交数据，后端对数据进行处理，将数据添加到学生表中。添加学生页面和后端接口实现如图5-14，5-15所示：
图5-14添加学生页面 图5-15添加学生后端接口实现 5.4 水电单管理模块 水电单的管理是高校宿舍管理系统中比较突出多用的模块，同样的高校旁边人数都是很可观的，单单一个管理员是无法很快速的完成每一个月一次的水电单录入操作，而能唯一有可能分摊这个重任的就是每一栋的舍监。舍监完全可以每一个月对自己有限的宿舍进行水电单录入。而管理员只需要规定好当前时间段中的水单收费标准就可以了，舍监通过输入当年月的用水用电，后台读取水单收费标准进行计算就可以完成水电单的生成。
水电单不是单独的功能，它能影响系统的其他功能，比如学生的报修功能，如果超过一定张数的水电单没交付，则该宿舍无法享受到学院的报修服务。而这个条件的判断来自己于舍监的操作，超过一定月份没交水电费的学生会出现在舍监的欠费宿舍管理列表中，舍监对宿舍可以进行断电操作，当舍监对宿舍进行了断电操作，宿舍的一个字段就会发生变化，学生点击报修功能会判断这个字段，从而判断是否宿舍是否可以享用报修服务。这样的设计是比较性能高的，我放弃了后台搜索宿舍超过三张的水电单的方法。直接给宿舍多一个字段来判断它自己是否是欠费的，这样就能大大节约了服务器的处理时间。这种方式我也在栋，宿舍和学生的删除操作中体现了出来。
管理员对水电收费标准进行修改设置，水电单的生成将会以它为标准进行费用的生成，水电收费标准修改页面和水电收费标准修改接口如图5-16，5-17所示：
图5-16水电收费标准修改页面 图5-17水电收费标准修改后台接口 舍监可以对水电单进行录入，现在好年份和月份，选择好宿舍，输入用电量和用水量就可以进行添加水电单操作，舍监录入水电单页面和水电单添加后端接口如图5-18，5-19所示：
图5-18舍监录入水电单页面 图5-19水电单添加后端接口逻辑 舍监可以对严重欠费宿舍进行断电处罚操作，通过多表查询组合成新的数据展示在页面上，舍监系统宿舍欠费和断电页和后端多表查询逻辑接口如图5-20，5-21所示：
图5-20舍监系统宿舍的欠费和断电页面 图5-21欠费宿舍列表的代码实现 5.5 报修管理模块 学生会以宿舍为单位进行报修，学生填写报修单，输入备注，选择报修的项目，上传图片就可以完成报修单的提交，管理员查看报修单分配维修员进行上门维修服务，维修完成后，维修员按照维修的内容进行收费，如果不属于学生付款的范围就不用收费，维修员工作完毕后会跟管理员打招呼，管理员就可以选择维修员，输入费用，选择付费对象和输入维修结果完成对报修单的处理。学生填写报修单页面如图5-22所示：
图5-22学生填写报修单页面 后台系统使用上传专用的模块，每次上传都把图片存储在服务器文件中，上传图片逻辑实现如图5-23所示：
图5-23图片上传实现代码 学生点击添加后系统会把数据都添加到维修单表中，图片字段采用服务器文件的路径进行保存，如图5-24所示：
图5-24报修单添加后端接口实现 维修员完成报修单后，管理员在报修单页面进行对报修单的处理，如图5-25所示：
图5-25管理员处理报修单页面 管理员点击处理按钮，实现处理报修单后端接口，如图5-26所示：
图5-26管理员处理报修主要接口 5.6 统计管理模块 统计管理模块是ECHARTS库使用的主要地方，统计主要针对的是住宿情况，水电单每月的平均费用，维修项项目所占维修单的数量和维修单付费状态。住宿情况主要通过栋表和宿舍表进行逻辑分析，水电单每月的平均费用通过年份的搜索进行观看一到十二月的平均水电单费用，维修项目所占维修单的数量需要通过维修单关联的维修项目单进行多表查询得到的数据进行操作，维修付费状态通过维修单的付费对象判断进行统计。页面效果如图5-27所示：
图5-27管理员统计分析页面 主要对各年份的个月份平均水电费的实现进行介绍，后台接收请求数据，查找到对应需要展示的年份数据，进行两次的循环，分别获取各个月份的水电单价钱总数和各月份水电单个数。最后返回平均水电费的数组，如图5-28所示：
图5-28统计分析模块后端接口设计 前端请求获取数据后，按照ECHARTS库的标准进行数据的填写，如图5-29所示：
图5-29平均水电单统计费用前端代码 第六章 系统测试 6.1 用户登陆模块测试 6.1.1用户登陆模块测试与操作 表 5-1用户登录主要功能测试 用例描述 测试步骤 预期结果 实际结果 测试是否通过 用户输入正确的用户名，密码和验证码 进入页面，输入用户名和密码，验证码，点击登陆 登陆成功，进入主页 登陆成功，进入主页 是 用户输入正确的用户名和密码，输入错误的验证码 进入页面，输入用户名和密码，验证码，点击登陆 登陆失败，进入主页，提示验证码错误。
登陆成功，进入主页，提示验证码错误。
是 用户输入正确的用户名和验证码，输入错误的密码 进入页面，输入用户名和密码，验证码，点击登陆 登陆失败，进入主页，提示用户名或密码。
登陆失败，进入主页，提示用户名或密码。
是 用户输入正确的验证码和密码，输入错误的用户名 进入页面，输入用户名和密码，验证码，点击登陆 登陆失败，进入主页，提示用户名或密码。
登陆失败，进入主页，提示用户名或密码。
是 6.1.2测试评价 登陆检测比较严谨的，功能较为完善，数据的传递比较有安全性，实现逻辑也是比较清晰严谨的。
6.2 宿舍管理模块测试 6.2.1宿舍管理模块测试与操作 表 5-2宿舍管理主要功能测试 用例描述 测试步骤 预期结果 实际结果 测试是否通过 管理员进入主页后进行宿舍管理，添加栋时，信息输入完全 打开栋添加按钮，填写名称，负责人和电话 栋添加成功，页面刷新 栋添加成功，页面刷新 是 管理员进入主页后进行宿舍管理，添加栋时，信息输入不完全 打开栋添加按钮，填写名称，负责人，没有填写电话 栋添加失败，提示错误信息 栋添加失败，提示请输入完全信息。
是 管理员进入主页后进行宿舍管理，添加栋时，信息输入不标准 打开栋添加按钮，填写名称，负责人，在电话框中填写超过11位字符 栋添加失败，提示错误信息 栋添加失败，提示请正确填写电话号 是 管理员进入主页后进行宿舍管理，正确填写宿舍信息 管理员进入主页后进行宿舍管理，添加宿舍时，选择栋，填写宿舍名字和床位限制 宿舍添加成功，页面刷新 宿舍添加成功，页面刷新 是 管理员进入主页后进行宿舍管理，填写宿舍信息不完全 管理员进入主页后进行宿舍管理，添加宿舍时，选择栋，填写宿舍名字，没有填写床位号 宿舍添加失败，提示错误信息 宿舍添加失败，提示错误信息 是 管理员删除存在宿舍的栋 管理员点击删除栋按钮 栋删除失败，提示错误信息 栋删除失败，提示错误信息 是 管理员删除不存在宿舍的栋 管理员点击删除栋按钮 栋删除成功，页面刷新 栋删除成功，页面刷新 是 管理员删除存在学生的宿舍 管理员点击删除宿舍按钮 宿舍删除失败，提示错误信息 宿舍删除失败，提示错误信息 是 管理员删除不存在学生的宿舍 管理员点击删除宿舍按钮 宿舍删除成功，页面刷新 宿舍删除成功，页面刷新 是 管理员修改宿舍床位数少于等于当前宿舍学生现住数 管理员点击修改宿舍按钮，修改当前宿舍床位 修改宿舍成功，刷新页面 修改宿舍成功，刷新页面 是 管理员修改宿舍床位数大于当前宿舍学生现住数 管理员点击修改宿舍按钮，修改当前宿舍床位 修改宿舍失败，提示失败信息 修改宿舍失败，提示失败信息 是 6.2.2测试评价 该模块对很多地方都做好了限制，操作过程中没有因为误操作造成数据的错误，在重点的添加，修改，删除宿舍中的操作中有稳定的提示。
6.3学生管理模块测试 6.3.1学生管理模块测试与操作 表 5-3学生管理主要功能测试 用例描述 测试步骤 预期结果 实际结果 测试是否通过 管理员添加学生输入已存在的学生学号 点击添加按钮，输入学号，性别，电话，名字 添加学生失败，显示错误提示 添加学生失败，提示学号已存在 是 管理员添加学生输入不存在的学生学号 点击添加按钮，输入学号，性别，电话，名字 添加学生成功，刷新页面 添加学生成功，刷新页面 是 选择学生进行调配学生 点击调配按钮 调配失败，提示错误信息 调配失败，提示选择学生 是 选择学生进行调配学生 选择学生，点击调配按钮 调配页面显示 调配页面显示 是 选择不同栋学生进行入住宿舍 选择学生，点击入住宿舍按钮 学生入住失败，提示错误信息 学生入住失败，提示需要选择同栋学生 是 选择同栋学生进行入住满人的宿舍 选择学生，点击入住宿舍按钮 学生入住失败，提示错误信息 学生入住失败，提示当前宿舍床位不够 是 选择同栋学生进行入住不满人的宿舍 选择学生，点击入住宿舍按钮 学生入住成功，刷新页面 学生入住成功，刷新页面 是 对已入住的学生进行重新调配 点击一键调配按钮 一键调配失败，提示错误信息 一键调配失败，提示选择学生进行调配 是 对已入住的学生进行重新调配 选择不同宿舍学生，点击一键调配按钮 一键调配失败，提示错误信息 一键调配失败，提示需要相同宿舍的进行调配 是 对已入住的学生进行重新调配 选择相同宿舍学生，点击一键调配按钮 点击成功，打开调配页面 点击成功，打开调配页面 是 6.3.2测试评价 该模块用最少的逻辑，做着比较完善的流程，分层式地对数据操作，每一层都有一定的限制和重点校验，让这个很大的模块实现和操作都比较明了。
6.4水电单管理模块测试 6.4.1水电单管理模块测试与操作 表 5-4水电单管理主要功能测试 用例描述 测试步骤 预期结果 实际结果 测试是否通过 舍监添加水电单输入不完全 选择年月，宿舍，填写用水量，没有填写用电量 添加水电单失败，提示错误信息 添加水电单失败，提示请输入用电量 是 舍监添加水电单输入完全 选择年月，宿舍，填写用水量，用电量 添加水电单成功，页面刷新 添加水电单成功，页面刷新 是 舍监删除已付款水电单 点击删除，点击确认删除 删除失败，显示错误信息 删除失败，显示无权力删除 是 舍监删除未付款水电单 点击删除，点击确认删除 删除成功，刷新页面 删除成功，刷新页面 是 6.4.2测试评价 该模块主要设置在源头上杜绝功能的错误步骤，也因为可变因素比较小，模块出错的概率不大。
6.5报修管理模块测试 6.5.1报修管理模块测试与操作 表 5-5报修管理主要功能测试 用例描述 测试步骤 预期结果 实际结果 测试是否通过 欠费宿舍进行报销申请 学生进入主页，点击报修申请 报修申请失败，提示错误信息 添加水电单失败，提示请输入用电量 是 不欠费宿舍进行报销申请 学生进入主页，点击报修申请 显示报修申请页面 显示报修申请页面 是 报修页面填写不完整 选择维修项目，填写备注点击添加按钮 添加失败，提示错误信息 添加失败，提示需要上传图片 是 报修页面填写完整 选择维修项目，填写备注，上传图片，点击添加按钮 添加成功，刷新页面 删除成功，刷新页面 是 6.5.2测试评价 该模块规定了输入的值都为必选，对长度和类型都做了规定，欠费用户在点击报修按钮就开始校验，不用用户填写完才知道功能已经关闭。这样的设计比较人性化，而且校验起来页比较方便。
6.6 本章小结 高校宿舍管理系统测试主要为重点的模块内容进行测试，分别是用户登陆模块测试、宿舍管理模块测试、水电单管理模块测试、报修管理模块测试和学生管理模块测试。通过比较严格的方式进行测试，测试进行完毕的瞬间也代表了这个系统的良好交互和稳定性的高度。
第七章总结 我的高校宿舍管理系统是自己实习之前通过自己仅有的技术判断出来的，学校之前是有个小学期的，我的指导老师也是我小学期的老师，在假期前给了我一个星期的思考准备，目的是为了小学期的产物能够直接应用在毕业设计中。最终我确定了这个题目。通过假期的不断学习，我做好了一个雏形用来完成了小学期，小学期完成后，我就参加了实习工作。在工作后，我接触了更多的东西，包括UI库，对接口的理解，对网络请求的理解，还有更好的基础铺垫，我决定放弃雏形直接从头开始，并且添加更多的内容在我的项目中。
说说我选择的技术用在这个高校宿舍管理系统里面的理由把，我在大三下学期开始才是正式的确认好方向，我的方向是前端开发，我学习的东西都是关于前端的，而后端的java那些我是以前是没有学好，如果为了项目而花大量时间去学的话就比较麻烦，我在机缘巧合下认识到了node.js，它作为后端是十分适合我这个搞前端的，因为它使用的都是JavaScript，这是我能看得懂并且十分熟悉的语言。对代码的实现和后端的建设我是十分有自信的。对于数据库的选择，我虽然在大二下学期的时候学SQL数据库学得不错，但是直接用还是有点虚得，想找个容易点得数据库，以完成项目为目的，能做比较简单得功能就可以了。抱着这样的态度我在一个教程上学习到了MongoDB数据库。因为它封装性的完善让我毫不犹豫的选择了它。对于ECHARTS这个数据可视化我也是道听途说来的。我在实习中完成了一个前端网页后，突然来了需求让我用ECHARTS这个框架来显示一些数据关系。我就按照这学来弄了，最后我完成了他们的功能，也很高兴的能在自己的项目中用到它。
说说我对项目的看法把，我这个项目我考虑了很久的，我一开始的定位是比较低的管理系统，这是我阅历较低的时候想出来的，虽然现住我的阅历也是不高。对于设计和创新的东西，都在上面有了很详细的介绍，我就说说我是怎么想出来的把。在我准备小学期的时候，老师给我一周的时间，我当时是十分害怕的，用了几天时间拼命的思考，晚上睡觉做梦也在工作来着。然后在宿舍上想着想着就想到了宿舍这个东西，然后按照自己的逻辑来想象自己的系统如何操作宿舍的日常管理。结合自己的技术我发现我做这个项目的可行性是有的。然后我百度了很久，也思考了很久终于想到了各种各样的方案，其中遇到的问题更是层出不穷，其中就包括了数据库如何关联表最好，做着做着又忘了一点东西，我又重新的做数据库，前端后端的逻辑又一轮大改。画的图一张又一张，一座做到困难的地方就拼命的找资料，解决完了又是一个凌晨来了。
总的来说，宿舍管理系统是我做的第一个比较完善的项目，毕竟是我大学的最后一个大作品，虽然过程崎岖而长远，但是挺过来了，学的东西是十分客观的，对自己未来行业的铺垫是很足的，感谢陪我奋斗的伙伴，给我指导的老师，也感谢默默支持我的家人，我将不断学习争取更好的成绩，谢谢！ 参考文献 [1] 王新礼.高校学生公寓管理系统的设计与实现[D],上海: 同济大学软件学院, 2009 ,47-50. [2] 萨师煊,王珊着.数据库系统概论[M],高等教育出版社, 2005,67-71. [3] 钱新杰,胡桂香,张怀宇.基于B/S学生宿舍管理系统的设计与实现[J],计算机与现代化, 2009,23-35. [4] 尤克,常敏慧.网页制作[M],北京：机器工业出版社,2010,1-95. [5] 徐绪松.信息系统原理[M],北京：科学出版社,2006,69-70. [6] 徐秀春.如何建立学生宿舍管理系统[J],职业,2009,35-47. [7] 李向阳.基于Web的智能化管理系统的构建[J],农业网络信息,2009,22-35. [8] 周雷,常津义.基于.NET的高校宿舍管理系统的设计于实现[J],计算机与现代化,2009,20-90. [9] Jeremy Keith , Jeffrey Sambells. JavaScript DOM编程艺术(第二版)[M],北京：人民电邮出版社,2011,1-60. [10] Nicholas. JavaScript高级程序设计(第三版)[M],北京：人民邮电出版社,2006,3-270.