https://www.bilibili.com/video/BV1Gt421p7Xr/
演示视频:
5 系统模块界面设计
用户界面的大部分功能都是以管理模块为前提的,因为客户模块所显示的数据大部分需要通过管理模块来添加。因此,我们首先要来介绍管理模块的设计与开发。管理模块相对客户模块要复杂一些,因为在这里需要对所有信息进行维护,包括浏览、增加、修改和删除等操作。为了便于系统维护,页面的命名才用“模块名+功能名”的方式。概括起来,管理模块具有以下功能:
* 学生信息管理。
* 奖惩信息维护。
* 申请记录信息维护。
在每个管理界面当中均直接或间接地才用<!-#include file="checkuser.JSP"-->方法引用了checkuser.JSP文件,这种设计是为了检测管理员是否登录,防止没有管理权限的用户非法篡改系统数据。
下面分别说明这些页面的功能实现方法。
5.1 系统首页登陆界面
系统首页即是系统登陆操作界面。是学生及辅导员等所有用户的入口界面。每种身份的人输入自己的用户名和密码并选择正确的身份登陆,系统会根据他们所填自动识别,如果登陆成功后会记录他们的用户名及权限,并给出他们的应有操作权限。
该模块看似简单,只两个两个文本框,一个下拉框和两个按钮,但其实不然,因为它的安全性最高,其他任何操作(除了学生注册外)都要在本模块之后才能进行。
5.2 学生注册操作界面
若学生未注册,则无法登陆系统进行相关操作,所以,需进行注册操作:
在该页面中,学生输入用户名、密码、性别、电话等必要信息后,点击注册即可完成注册流程,根据注册的用户名密码可进行系统登陆。由于性别只有“男”、“女”两种选择,故设计为下拉选项,以更大程序地方便用户。
5.3 管理员信息管理界面
在模块主要是让管理员可以添加系统中的其他管理员来共同管理本系统,其界面分为两部分,上一半是添加,下一半是将已有的管理员信息以列表的形式列出,同时包括删除功能。非常人性化,便于操作。
但出于考虑到系统人员的泛滥,本模块仅限超级管理员一人使用。
5.4 学生信息管理界面
该模块主要是将所有5.2模块中注册的学生信息以列表的形式列出,让管理员可以一目了然地看出所有已注册学生信息。
在该列表中还包括了查询,修改,删除,统计,打印和审核等一系列功能,非常强大的列表!
其中查询包括两个条件字段供查询,一是学号,一是姓名,两个条件都是模糊查询,即只需要输入字段中若干字符即可,且两个字段间的关系为AND关系,如果两个条件都为空,则表示查询所有数据。
审核部分也非常人性化,默认是未审状态,管理员只需要单击一下即可变成已审状态,再单击一次又变回未审状态,操作非常简单。
5.5 奖惩信息添加页面
该模块主要是让辅导员可以添加学生的奖惩信息,其包知学号,姓名,奖惩,事因,时间和备注信息。
其中比较难实现的是学号信息是从数据库中自动读取的,并且在用户单击它的时候系统会自动再根据学号读取相应的姓名填入姓名文本框中,这样即操作方便又保证学号与姓名是一一对应的,不会出错。
另外一难点是在时间字段采用了一个自制的日期控件,当用户单击该文本框时系统会自动弹出日期控件以供选择日期,这样也即方便操作又可以防止因格式问题而出错。
实现本模块的主要代码如下所示:
5.6 学生成绩添加界面
该模块主要是让辅导员可以添加学生的成绩信息。其界面与添加奖惩信息相似,用到的技术也差不多,在此不再赘述。
5.7 学生成绩查询界面
该模块与学生信息查询界面相似,主要是将学生的成绩信息列出以便查询,同时也包括了查询、修改、删除、统计和打印的功能。
其查询条件有三个,分别是学号,姓名和课程。
其实现代码不再赘述。
5.8 公告信息添加模块
该模块主要是让教务处人员可以添加系统中的公告信息,包括标题、类别、内容和添加人四个字段,其实现的难度在于内容字段用了一个功能非常强、界面似WORD的编辑器,在该编辑器中,不仅可以输入文字信息,还可以输入图片,表格,FLASH甚至影片等信息,功能非常强大。
5.9 申请书提交界面
该模块是本系统的核心模块,它主要是让学生可以提交自己的申请书供管理员们申核。
其界面也用了一个与公告模块一样的编辑器,实现方法不再赘述。