https://www.bilibili.com/video/BV1Dz421973q/
演示视频:
第5章 系统的实现
3.1前台页面的实现
本网站设计的是一个驾照考试管理系统。该网站总共分为网站首页、驾考资讯、图片信息、驾考专题、理论学习等多个模块。通过对此系统的开发,达到了用户对驾照考试的了解。实现网站的实用性和易管理性。主页面如下图所示。
图3-1系统主界面
前台首页集成了普通用户的注册页面,注册的独立页面为userreg.jsp,通过框架嵌入网站前台首页,用户填写好注册信息后,通过Post方式提交表单,会通过javasrciprt验证格式,如果格式有错误,则用户小窗口提示错误的地方,如果格式都正确,则跳转至userreg_post.jsp,提示注册成功,并将注册的信息加入用户表中。
图3-1用户注册界面
3.2登录模块的实现
用户登录与后台的用户管理模块相关联,可以对用户(管理员)进行添加、删除、修改等操作。登录模块界面如下图所示,登录提示密码错误界面如下图所示。 登录成功提示界面如下图。
图3-1登录流程图
图3-2管理员登录界面
图3-3密码错误提示框界面
图3-4 用户登陆成功界面
随着网站规模的壮大,系统发布更新的信息及对普通用户量会越来越多,只有超级管理员负责网站后台恐怕任务艰巨,本网站考虑到这一问题后开发了超级管理员有权限可以增加管理员的模块。管理员角色不同对应权限亦不相同。添加管理员操作界面如下图所示。
图3-5 管理员管理界面
3.3考生成绩查询模块的实现
系统还提供了查询考生成绩的功能,管理人员可以查询班级内指定的多个考生成绩,但是当需要查询单个考生成绩时,只需要输入考生的学号,就可以实现查询单个考生的成绩,考生用户可以登录系统查询个人考试成绩,查询界面如下图所示。
成绩查询界面设计效果如下图所示。
图3-12 成绩查询界面
3.4题目管理模块的实现
题目管理包括单选题管理。管理员可以点击“添加题目”超级链接,既可跳转到timuxinxi_add.jsp页添加题目。题目添加成功后,教师用户可以登录到个人中心查询个人的题目的信息。管理员在timuxinxi_list.jsp进行题目管理,timuxinxi_ list.jsp通过查询数据库的题目表列出所有题目管理信息,每条题目对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除题目信息,并重定向当前页面,当管理员选择点击修改,则进入timuxinxi_update.jsp页面,进行题目信息的修改。
试题录入界面采用ajax实现,客户端的下拉框的响应事件的响应函数为select_ttype(),通过这个函数显示指定题型的录入界面。“提交”按钮的响应函数为SubmitTimu()。服务器函数InsertTiMu()返回数据,由函数dis_result()处理。试题插入数据库流程如下图所示:
图3-2 试题插入数据库流程示意图
单选题信息添加页面设计效果如下图所示。
图3-12 单选题信息添加界面
单选题信息管理页面效果如下图所示。
图3-12 单选题信息管理界面
3.5在线考试模块的实现
考生开始考试后,系统要显示考生信息、试卷、交卷。这个界面的功能使用的是Ajax框架,通过客户端的Jspscript和服务器端脚本实现。选择项和填空项都设置了单击事件。考生答过该题后,系统就把该题答案传送到服务器并保存起来。当考生重新登录时,试题仍然存在。另外,也防止考生集中交卷的时候因系统反应不及而导致答案丢失。
提交答案由客户端函数SelectAnswer()来实现,服务器端函数send_user_answer()把答案保存到数据库中。函数SelectAnswer()实时地把答案提交给服务器,也使得二次登录成为可能。
结束考试有两个部分的功能,当考试答完试卷但是交卷时间未到时,可以提前交卷,但是当考试结束时间已到,考生仍未交卷,系统则会强制收卷。函数SetTitle()在考试结束时,自动转向处理考试结束的文件endexam.jsp,完成自动收卷。
在线考试界面如下图所示。
图3-12 在线考试界面
3.6本章小结
本章节主要论述了登录模块、系统用户管理、单选题管理、试卷管理、考生信息管理、成绩管理、图片管理等功能模块的设计与代码的编写,以及最终实现的步骤。