一、需求分析
为了满足当前学生宿舍管理的各方需求,我们建立了一个数字化+信息化的学生宿舍管理系统。与管理员相对比,学生的操作显然更为简单,因此我们使用了一个用例图来说明系统的各个权限。
该系统由楼层信息管理、充值管理、卫生管理等多个功能模块组成,每个模块都有其独特的需求。其中,管理员权限的级别最高,因此需求量也最大,下面将详细介绍每个权限对应的具体要求。
管理员对应的功能需求如下:
管理员是系统最高权限拥有者,可以对整个系统中的学生、报修、住宿等信息来进行统一的控制与管理。
管理员可以通过添加、编辑、查询等方式,迅速获得学生的详细信息。
管理员可以通过学生宿舍管理系统提供的功能,快速添加、删除宿舍,并且可以根据需要,使用关键字进行搜索查询,从而更好地管理公寓。
管理员可以通过该卫生管理模块来添加或删除、任何与卫生相关的信息,这些卫生信息、也将被显示在系统中,用户是可以通过输入与卫生信息相关字眼来查询这些信息。
管理员可以通过该功能的模块来添加或删除任何与公告有联系的信息,公告信息也是一样会被记录在系统中,并且可以通过关键的词语搜索来获取这些信息。
学生可以在请假申请模块中填写自己的请假信息,系统会显示出来,用户可以通过输入关键词进行查询。管理员还可以更改或删除这些请假请求。
学生可以在出入境登记模块中添加自己的信息,这些信息将显示在系统中,并可以通过输入关键字快速搜索,管理员可以更新或删除信息。
学生宿舍管理系统结构的结构图,如下:
图2-1 学生宿舍管理结构图
登录系统结构图,如下:
图2-2 登陆系统结构图
系统功能结构图,如下:
图2-3 系统功能结构图
我们都知道数据库设计是基于需要设计的系统功能,我们需要建立一个数据库关系模型,用于存储数据信息,这样当我们在程序中时,就没有必要为程序页面添加数据,从而提高系统的效率。数据库存储了很多信息,可以说是信息管理系统的核心和基础,数据库还为系统提供了添加、删除、修改和检查等操作模块,使系统能够快速找到自己想要的信息,而不是在程序代码中找到。数据库中信息表的每个部分根据一定的关系精确地组合,排列和组合成数据表。
通过学生宿舍管理系统的功能进行规划分成几个实体信息,实体信息将通过ER图进行说明,本系统的主要实体图如下:
(1)用户信息E-R图:
图2-4 用户信息E-R图
(2)管理员信息E-R图:
图2-5 管理员信息E-R图
(3)系统E-R图:
图2-6 系统E-R图
将数据库概念设计的E-R图转换为关系数据库。在关系数据库中,数据关系由数据表组成,但是表的结构表现在表的字段上。
图2-7 User用户信息表
图2-8 leaveOne通过请假信息表
图2-9 Dorm宿舍信息表
图2-10 Change学生提交请假,更换宿舍信息表
管理员登录,通过填写账号、密码、后选择登录即可进入学生宿舍管理系统,如下图所示。
图2-11 登陆模块数据字典图
实现登陆的逻辑代码如下:
<div style="margin: 0 auto;width: 600px">
<el-card class="box-card">
<div style="text-align: center"><h3>宿舍管理系统</h3></div>
<div style="text-align: center">
<el-form label-position="left" label-width="80px" :model="user">
<div style="width: 300px;margin: 40px auto">
<el-form-item label="用户名">
<el-input v-model="user.username" ></el-input>
</el-form-item>
</div>
<div style="width: 300px;margin: 0 auto">
<el-form-item label="密码">
<el-input v-model="user.password" ></el-input>
</el-form-item>
</div>
<div style="margin: 40px">
<el-button type="primary" @click="tologin">注册</el-button>
<el-button type="primary" @click="toaddUser">登录</el-button>
</div>
</el-form>
</div>
</el-card>
</div>
前端效果实现:
图2-12登陆图
系统在此页面可以为学生和宿管员添加账户,可以进行查询,删除,添加等操作,如下图所示。
系统用户管理关键代码为:
<div style="margin: 0 auto;width: 600px">
<el-card class="box-card">
<div style="text-align: center"><h3>宿舍管理系统</h3></div>
<div style="text-align: center">
<el-form label-position="left" label-width="80px" :model="user">
<div style="width: 300px;margin: 40px auto">
<el-form-item label="用户名">
<el-input v-model="user.username" ></el-input>
</el-form-item>
</div>
<div style="width: 300px;margin: 0 auto">
<el-form-item label="密码">
<el-input v-model="user.password" ></el-input>
</el-form-item>
</div>
<div style="width: 300px;margin: 0 auto">
<el-form-item label="角色">
<el-radio-group v-model="selectedRole">
<el-radio label="管理员">管理员</el-radio>
<el-radio label="学生">学生</el-radio>
</el-radio-group>
</el-form-item>
</div>
<el-button type="primary" @click="tologin">返回登录</el-button>
<el-button type="primary" @click="toaddUser">提交</el-button>
</el-form>
</div>
</el-card>
</div>
前端效果实现:
图2-13 注册图
学生管理,在此页面可以维护学生入住的楼宇,寝室,负责的宿管信息,并可根据需要进行查询,重置,删除,添加等操作,如下图所示。
图2-14宿舍信息图
关键代码:
<div style="width: 100%;display: flex;margin-top: 20px">
<el-card style="width: 70%">
<div><h3>寝室管理</h3></div>
<div>
<el-table
:data="sutdentData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="宿舍号"
prop="dorm">
</el-table-column>
<el-table-column
label="学生姓名"
prop="sname">
</el-table-column>
<el-table-column
label="学号"
prop="sno">
</el-table-column>
<el-table-column
label="寝室卫生"
prop="hygiene">
</el-table-column>
<el-table-column
label="楼层"
prop="floor">
</el-table-column>
<el-table-column
label="电费余额"
prop="electricity">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<div style="width: 220px;">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</div>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">卫生成绩</el-button>
<el-button
size="mini"
type="danger"
@click="demo(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
前端效果实现:
图2-15宿舍管理图
学生通过输入请假天数,日期等信息提交请假申请,宿管或管理员进行审核答复,如下图所示。
图2-16提交修改状态图
核心代码:
<div style="margin-top: 20px">
<div>提交请假</div>
<div style="margin-top: 20px;display: flex;justify-content: flex-start" >
<div style="width: 120px">
<el-date-picker
style="width: 100%"
v-model="leavedate.applyday"
type="date"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
placeholder="选择日期">
</el-date-picker>
</div>
<div>
<el-input style="width: 100px" v-model="leavedate.destination" placeholder="目的地"></el-input>
</div>
<div style="width: 80px;">
<el-select v-model="leavedate.days" clearable placeholder="天数">
<el-option
v-for="item in dropitems"
:key="item.day"
:label="item.day"
:value="item.day">
</el-option>
</el-select>
</div>
<div style="width: 80px;padding-left: 20px"><el-button @click="addApplyLeave">提交</el-button></div>
</div>
前端效果:
图2-17修改信息图
销假申请,学生休假结束后通过输入销假天数提交申请,宿管或管理员进行审核答复,如下图所示。
核心代码:
<el-card style="width: 100%;">
<div>
<div><h5>请假消息</h5></div>
<div>
<el-table
:data="qingjiadata"
style="width: 100%">
<el-table-column
label="请假日期"
width="110">
<template slot-scope="scope">
<span style="">{{scope.row.applyday}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="70">
<template slot-scope="scope">
<span style="">{{ scope.row.sname }}</span>
</template>
</el-table-column>
<el-table-column
label="请假天数"
width="80">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.days }}</span>
</template>
</el-table-column>
<el-table-column
label="学号"
width="60">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.sno }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="ok(scope.$index, scope.row)">批准</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-card>
前端效果实现:
图2-18销假图
程序设计不能保证没有错误,这是一个开发过程,在错误或错误的过程中都是难以避免的。虽然这是不可避免的,但我们不能使这些错误始终存在于系统中,错误可能会造成无法估量的后果,如系统崩溃,安全信息泄露,系统无法正常启动等,为了避免这些问题,我们需要测试程序,再测试过程中发现问题,并纠正它们,从而使系统更长时间稳定成熟。本章的作用是发现这些问题,并对其进行修改,虽然耗时费力,但对于长期使用而言是非常重要和必要系统的开发。
软件在设计后必须进行测试,调试过程中使用的方法是软件测试方法。在开发新软件时,系统测试是检查软件是否合格的关键步骤,以及是否符合设计目标的参考。测试主要是查看软件中数据的准确性,正确的操作与否,以及操作的结果,还有哪些方面需要改进。
学生宿舍管理系统的实现,对于系统中功能模块的实现及操作都必须通过测试进行来评判系统是否可以准确的实现。在学生宿舍管理系统正式上传使用之前必须做的一步就是系统测试,对于测试发现的错误及时修改处理,保证系统准确无误的供给用户使用。
在对学生宿舍管理系统进行测试的时候在找到问题的情况下必须在第一时间找到解决问题的办法,不要存在侥幸的心理,这样才能让学生宿舍管理系统开发的质量可以过关,并且开发的周期会大大缩短,还有就是在测试时,不要出现重复性的错误,遇到一个错误问题,要将整个学生宿舍管理系统开发所牵扯的该问题都必须一一解决,提高学生宿舍管理系统平台的安全性、稳定性。
白盒测试与黑盒测试是测试中比较常用的两种方法。
①结构测试俗称白盒测试:这种测试是在对程序的处理过程与结构都有详尽谅解的前提下,顺从程序内部的逻辑而完成的系统测试,以确定系统中所有的通路都能够遵照设计要求正常工作,不出现任何偏差。
②功能测试又成黑盒测试:主要是针对程序功能能够按照设计正常实现的一种检测,在程序接口处进行,检测程序手法数据是否正常,与外部信息的交换是否完整。
表3-1 用户登陆测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
登陆模块 | 用户名: Root 密码:1233 | 弹出错误提示,提示密码错误 | 弹出错误提示,提示密码错误 | 通过 |
登陆模块 | 用户名: Demo 密码:1111 | 弹出错误提示,提示密码错误 | 弹出错误提示,提示密码错误 | 通过 |
登陆模块 | 用户名:root 密码:123 | 管理员登录成功 | 管理员登录成功 | 通过 |
删除分类测试:
表3-2 删除分类测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
删除提交请假信息模块 | 请假信息:最新通知 | 删除成功、页面自动刷新 | 删除成功、页面自动刷新 | 通过 |
删除提交请假信息模块 | 请假信息:请假通过 | 删除成功、页面自动刷新 | 删除成功、页面自动刷新 | 通过 |
删除提交请假信息模块 | 请假信息:请假驳回 | 删除成功、页面自动刷新 | 删除成功、页面自动刷新 | 通过 |
提交报修测试:
表3-3 用户报修测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
创建报修任务 | 空调 | 创建成功后端返回200 | 创建成功,后端返回200 | 通过 |
创建报修任 | 椅子 | 创建成功后端返回200 | 创建成功,后端返回200 | 通过 |
创建报修任务 | 床板 | 创建成功后端返回200 | 创建成功,后端返回200 | 通过 |
提交请假测试:
表3-4 用户请假测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
创建请假任务 | 2002-02-22 事假 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
创建请假任务 | 2002-09-22 病假 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
创建请假任务 | 2002-01-22 事假 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
提交换寝测试:
表3-5 用户换寝室测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
创建更换寝室任务 | 209 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
创建更换寝室任务 | 211 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
创建更换寝室任务 | 201 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
修改请假状态测试:
表3-6 修改请假状态测试表
模块名称 | 测试用例 | 预期结果 | 实际结果 | 是否通过 |
修改请假任务 | 已回 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
修改请假任务 | 未回 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
修改请假任务 | 已回 | 提交成功后端返回200 | 提交成功后端返回200 | 通过 |
第四章、心得体会
参与本次学生宿舍管理系统的课程设计项目,不仅让我深刻体会到了软件开发的全过程,也让我对团队协作与技术应用有了更深层次的认识。
项目启动之初,我们面对的是一张白纸,需要将抽象的概念和需求转化为具体的软件系统。我们讨论了当前学生宿舍管理的痛点和需求,这为我们的项目指明了方向。在系统设计阶段,我们深入讨论了系统的功能模块和用户界面设计。我们希望建立一个既满足功能需求又具有良好用户体验的系统。通过多次的头脑风暴和设计迭代,我们最终确定了系统的架构和界面布局。开发过程中,我们分阶段实现系统的功能,在每个阶段结束后,我们都会进行代码审查和功能测试,确保系统的稳定性和可靠性。
在功能实现方面,我们特别注重用户体验。例如,在学生宿舍申请更换模块,我们设计了简洁明了的申请流程,让学生能够轻松地提交申请并跟踪申请状态。在请假信息提交模块,我们提供了直观的日历视图和表单,方便学生快速填写和提交请假信息。
在本次学生宿舍管理系统的开发过程中,技术学习与应用是项目成功的关键。我们面临的第一个技术挑战是选择合适的技术栈。在经过深入的市场调研和技术对比后,我们决定采用vue2构建前端界面,Spring MVC作为后端框架,以及MySQL作为数据库系统。
选择vue2作为前端技术,是因为它们是构建网页的基础,能够提供丰富的标签和样式,使我们的界面既美观又实用。Spring MVC作为后端框架,其轻量级和灵活性满足了我们对RESTful API的需求,同时它的MVC模式也帮助我们实现了业务逻辑、数据模型和用户界面的分离,提高了代码的可维护性和可测试性。MySQL数据库以其稳定性和广泛的社区支持,成为我们存储和管理数据的理想选择。
最终,我们的项目取得了成功。系统不仅满足了所有预定的功能需求,而且在实际使用中也得到了用户的好评。这不仅是对我们技术能力的肯定,更是对我们努力和付出的认可。
通过这次项目体验,我深刻认识到了软件开发的复杂性和挑战性,也体会到了团队合作的力量。我相信,这次经历将对我的未来职业生涯产生深远的影响。
力。