课堂考勤系统设计

PAGE20第1章绪论课题开发背景研究表明国内大部分学校还是停留在人工课堂考勤方法中，这种方法繁琐易错，不方便管理，后期统计费时费力，准确度、透明度、实时性差，很大程度上会受到人为因素的影响，由于教师教学时间有限，不可能每节课都点名查验，大幅度的增加了学生代签、代答以及侥幸的心理，导致信息统计不完全，和实际情况有偏差等问题，后期统计时更是繁琐，费时费力。当今技术信息化已经是一种潮流，信息技术革命的发展已经促使工业资本经济向信息经济和知识经济的转变，而利用计算机技术，通讯技术等现代化的技术手段来促进学校走进现代化建设与新型时代化管理，已经是学校当下的紧急任务。随着技术的发展，课堂考勤系统已经是体现学术界发展性的重要一部分。现在学校的考勤技术和方法难以保持数据的准确性和实时性。然而，在国内出现和使用超过十年的考勤系统，不得不说是科技的进步，技术的变化。例如从条形码、接触式IC卡、非接触IC卡到指纹识别再到人脸识别等技术，这不得不说是科技的快速进步。技术的开速发展，引起社会深刻的变化，信息时代的到来，我们学校管理改革的迫切要求，因此，在这种状况下，考勤系统正在越来越受欢迎，这给教师带来了更有效的方法，数据也更加实时。现有高校已经在使用考勤技术，IC卡、指纹打卡和人脸识别是现在应用最广泛的技术，也是现如今公司内部对人员管理的有效措施，课堂考勤系统不得不说是很大程度上打击了学生作弊的心理，更加有利于学校的管理，也促进了学生学习的效率。如今网络已经成为信息传播和交流的重要手段，网络考勤与传统考勤相比具有很大的优点，每个开发者都有针对性的设计与开发，都有自己的目标和实现，如何建立一个完善全面的考勤系统，是我们研究发展的方向。然而我认为无论是IC卡、人脸识别还是指纹识别都需要借助硬件设备，都一定程度的增加了成本，而人脸识别和指纹打卡不仅需要硬件的支持，更是增加了信息录入的工作量，当然它们的也各有优势IC卡方便快捷不用采纳信息，学校学生信息都有录入按人制作就好，指纹技术和人脸识别更是彻底的防范了作弊的可能。但是综合来看，我想用地理定位来实现打卡，这样更加方便快捷，只要打开定位，点击打卡，获取的位置满足距离的条件就可以成功，学生可以完成签到、请假等功能，教师可以登录管理、录入信息等。计算机应用在管理中逐渐普及，利用计算机实现同学的考勤状况势在必行。1.2课题研究意义和目的在21世纪这个信息化的时代，考勤管理系统也有了很大的发展。但是市面上大多数的考勤系统都是针对公司上下班打卡的，例如有些需要依靠硬件支持的系统，比如说一些指纹识别、脸部识别、IC卡等。没有完善的系统来针对课堂。虽然各个高校也逐渐引进网络化管理，例如公众号来查询成绩、在线考试、发布就业招聘信息等，但是校园课堂考勤还是保持着课堂点名，教师手动记录的方式，这样既不环保又占用时间，又不能有效的防止学生代签到、替答到等现象，到期末核实成绩的时候耗时耗力，开发考勤系统可以有效的解决这些实际问题。它可以做到让学校方便管理，教师可以实时有效的看到学生出勤、请假、旷课的情况，可以方便了解每个同学学习状态的情况，做出有效的措施，对于同学来说，可以查看自己课程的打卡记录，估算成绩。在科技发展迅速的时代，计算机网络考勤已经是大势所趋，计算机拥有检索迅速、储存空间大、方便管理、可靠性高、信息传达方便、寿命长、成本低等优点，因此开放这样一个考勤系统非常有必要。1.3课题开发环境操作系统：Windows10；开发环境：JDK1.8.0-31；开发工具：IntelliJIDEA；数据库：MySQL5.7；发布程序：Tomcat8.0.39；1.4课题主要研究内容本次选题课堂考勤系统设计与实现，主要分为三大角色，分别是学生、教师和管理员。在技术上，前端使用VUE+Jquery框架，运用百度地图获取用户坐标焦点，判断用户和目标的距离。后端使用JFinal框架连接MySQL数据库实现数据的记录。项目部署方面使用Tomcat部署项目。将用HBuilder+IDEA作为开发工具，来完成一个由登录、打卡、统计、请假、审批五大模块组成的课堂考勤系统，在这些模块的实现中，力求系统的全面性、通用性。(1)登录登录模块主要包括学生和教师根据学号和工号登录，提供初始密码，可以自行更改，管理员特有的账号密码。用户名密码必须填写，否则会出现提示。(2)打卡打卡模块主要利用百度地图，来获取用户所在的位置来和目标位置进行对比，显示打卡成功或者失败。(3)统计统计模块主要是统计学生每个课程出勤情况，给出具体数字，方便观看，使数据一目了然。教师会看到自己的课，每个班级多少学生旷课，每个学生在本节课旷过多少次课。(4)请假请假模块主要是为了同学们有紧急时间或者生病不能去上课需要请假而服务的，这样有实际的数据记录着方便以后查看。(5)审批审批模块主要是教师对同学请假给予通过或者驳回。学生综合自身情况可以向教师发送请假信息，说明情况。教师看到学生的请假请求综合考量给予批准或不通过。请假成功的同学会有特殊标记。

第2章系统需求分析2.1系统目标本系统产生的目的是为了解决课堂考勤繁琐和不能有效防止学生替答到等问题，其主要使用场景可以简单的概括为：管理员在系统中录入一天的上课时间，教师把自己的课程添加到自己的账户下，学生在上课时间内通过程序进行打卡，系统自动保存学生打卡记录，教师就可以查看学生的打卡情况。本系统要完成的目标功能如下：(1)管理员可以对用户、校区、系别、教师、课程时间进行相关的操作。(2)教师可以对年级、专业、学生、课程的名称、请假的审批、请假统计进行相关的操作。(3)学生可以进行上课打卡和查看自己打卡记录等相关操作。2.2可行性分析和总体设计原则2.2.1可行性分析在进行充分的调研后进入可行性分析阶段，在大背景（校园）的前提下从技术、管理、操作、监控方面进行分析。(1)技术可行性该系统是基于B/S架构实现，使用JFinal+MySQl+VUE+JQuery+H5实现，所有用户只需要使用浏览器访问指定的网址即可访问本系统。JFinal是近几年比较火热的国产轻量级急速开发框架，其摒弃了Spring复杂而繁琐的XML配置，使用程序员更容易接受的“插件”方式配置自己的信息，JFinal作者提倡的“习惯优于配置”与近几年国际流行的SpringBoot的开发理念不谋而合，而JFinal似乎更注重急速开发，所以在很多技术设计上给出了更加简洁优雅的做法，拿AOP来举例，传统AOP实现需要引入大量繁杂而多余的概念。传统意义上的AOP不但学习成本是非常高的，开发的效率也很低，技术人员开发的体验也差，而且还影响系统性能，尤其是在开发阶段造成项目启动缓慢，极大影响开发效率。JFinal采用极速化的AOP设计，专注AOP最核心的目标，将概念减少到极致，仅有三个概念：Interceptor、Before、Clear，并且无需引入IOC也无需使用啰嗦的XML。不仅如此，在数据库操作上，JFinal也提供了更加简洁切优雅的做法，ActiveRecord是JFinal最核心的组成部分之一，通过ActiveRecord来操作数据库，将极大地减少代码量，极大地提升开发效率，其独创的DB+Record也使得开发人员操作数据库有了更加良好的体验，如其提供的Db.find（sql）、Db.findById(tableName,id)等也极大的缩短了程序编写的时间。VUE是现在公司使用最多的一种前端技术，VUE属于MVVM框架，是一套用于构建用户界面的渐进式框架。VUE技术我认为最强大的地方在于数据的双向绑定，还有用户只需要关注视图层不用在进行繁琐的DOM操作，这两点大大的方便了技术人员的使用和理解，这也是越来越多前端技术人员选择它的原因。在VUE技术之前，如果前端工程师需要操作页面中的内容，就不得不适用类似于JQuery之类的JS库，需要频繁的操作DOM,而VUE的出现使得前端工程师不关注前端页面的显示而只关心业务逻辑成为了可能。因此在技术方面，当前系统的设想是可行的。(2)管理可行性本系统主要解决的是学生打卡的监控问题，在当前问题背景下最好有一套简单的或者成熟的管理办法来让我们参考以编写适合的程序，而当前需求的背景下就有一套简单的管理办法来参考。因此在管理方面，当前系统的设想是可行的。(3)操作可行性在当前需求的背景下我们没有发现比较复杂的操作，因此并不需要复杂的界面来支撑用户操作，其主要的打卡界面在程序设计完善的前提下更是一个相对简单的页面，任何人都可以轻松操作，对于管理平台来说，后台需要的功能也都是普通CRUD操作。因此在管理方面，当前系统的设想是可行的。(4)监控可行性监控的主要目的是监控学生的打卡情况，因此需要通过将学生打卡信息记录到数据库，然后通过网页显示在浏览器上就可以清晰的显示出学生打卡信息，并且可以通过各种条件筛选想要查看的信息。因此在监控方面，当前系统的设想是可行的。2.2.2总体设计原则通过分析项目需求，在实现项目的基础上要满足以下几点要：(1)规范网页布局，使得功能明确，在有一套管理网页的模板后直接使用模板开发之后的需求，这样不仅可以提升开发效率，也便于用户对系统的理解，减少用户的误操作。(2)设计数据库时使用建模工具建模分析可行性，减少数据的冗余和耦合，避免重复数据，提高系统的使用效率。(3)系统稳定性好，健壮。能够很好的保存所存入的信息，统计时不会出错。(4)界面设计简单直接，大方美观，充分考录与用户的交互，方便用户理解和操作。2.3用例分析2.3.1管理员用例分析管理员的主要职责就是保证数据的正确性来让系统正常运行，其管理的内容也相对比较宏观，可以操作用户、校区、系别、教师、课程时间的信息，以此保证系统数据的正常，让系统正常运行，可以执行的功能的具体分析如下面3.1的用例图分析所示。图2.1管理员用例图表2.1用户管理描述用例名称用户管理参与者管理员描述管理员根据实际的需要添加用户前置条件管理员成功登录系统后置条件录入的用户能在对应的权限下使用系统主要过程1、管理员输入用户名和密码，成功的登录系统。2、根据需要添加用户名的账号、姓名、手机号码和权限。3、最终成功添加用户。表2.2校区管理描述用例名称校区管理参与者管理员描述管理员根据实际的需要录入学校所有校区前置条件管理员成功登录系统后置条件录入的校区真实存在主要过程1、管理员填写用户名和密码，成功登录系统。2、根据需要添加该学校所有校区的名称。3、最终成功添加校区。表2.3系别管理描述用例名称系别管理参与者管理员描述管理员根据学校所有的校区来对应录入系别前置条件管理员成功登录系统后置条件录入的系别真实存在主要过程1、管理员输入用户名和密码，然后成功登录系统。2、根据原有的校区来为它添加所拥有的系别。3、最终成功添加系别。表2.4教师管理描述用例名称教师管理参与者管理员描述管理员根据所对应的校区系别录入教师前置条件管理员成功登录系统后置条件录入的教师真实存在主要过程1、管理员输入用户名和密码，成功登录系统。2、根据每个校区系别来录入教师的名字。3、最终成功录入名字。表2.5课程时间描述用例名称课程时间参与者管理员描述管理员根据学校情况录入课程时间前置条件管理员成功登录系统后置条件课程时间正确保存在数据库中主要过程1、管理员输入用户名和密码，成功登录系统。2、点击添加课程的数目、每节课的上下课时间和最晚打卡时间。3、最终成功录入课程相应的信息。2.3.2教师用例分析教师就是每个专业对应的各个班级的教师，教师的主要工作就是维护自己所在年级、专业、学生的相关信息和查看学生打卡情况，可以执行的功能的具体分析如下面3.2的用例图分析所示。图2.2教师用例图表2.6年级管理描述用例名称年级管理参与者教师描述教师录入自己所教的年级前置条件教师成功登录系统后置条件年级信息正确保存在数据库中主要过程1、教师输入工号和密码，成功登录系统。2、点击添加自己所在校区对应的年级名称。3、最终成功录入年纪名称。表2.7专业管理描述用例名称专业管理参与者教师描述教师录入自己所教的专业前置条件教师成功登录系统后置条件专业信息正确保存在数据库中主要过程1、教师输入工号和密码，成功登录系统。2、点击添加自己所教年级的专业名称。3、最终成功录入专业名称。表2.8学生管理描述用例名称学生管理参与者教师描述教师录入自己所教的学生信息前置条件教师成功登录系统后置条件学生信息正确保存在数据库中主要过程1、教师输入工号和密码，成功登录系统。2、点击添加自己所教学生的姓名、学号。3、最终成功录入学生信息。表2.9课程管理描述用例名称课程管理参与者教师描述教师录入自己所教的课程名称前置条件教师成功登录系统后置条件课程名称正确保存在数据库中主要过程1、教师输入工号和密码，成功登录系统。2、点击添加自己所教的课程名称。3、最终成功录入课程名称。表2.10打卡监控描述用例名称打卡监控参与者教师描述教师查看学生打卡情况前置条件教师成功登录系统后置条件打卡状况正常显示主要过程1、教师输入工号和密码，成功登录系统。2、点击打卡监控查看自己学生打卡状况。表2.11请假审批描述用例名称请假审批参与者教师描述教师对所请假的同学给予意见前置条件教师成功登录系统后置条件课程名称正确保存在数据库中主要过程1、教师输入工号和密码，成功登录系统。2、教师核实学生实际情况，对请假同学进行审批。3、给予学生请假同意或者驳回。2.3.3学生用例分析学生在本系统中主要使用的部分就是打卡、请假和查看自己的打卡及请假记录，可以执行的功能的具体分析如下面3.3的用例图分析所示。图2.3学生用例图表2.12打卡描述用例名称打卡参与者学生描述学生根据地理定位进行上课打卡前置条件地理位置成功获取后置条件打卡信息成功被数据库保存主要过程1、学生输入学号和密码，成功登录系统。2、学生到达上课地点，打开系统点击打卡。3、系统显示打卡成功。表2.13请假描述用例名称请假参与者学生描述学生根据自己实际情况来请假前置条件学生不能去上课后置条件请假信息成功被数据库保存主要过程1、学生输入学号和密码，成功登录系统。2、学生点击请假按钮进行请假。3、系统显示请假成功。2.4系统活动建模2.4.1管理员活动建模管理员用户管理活动建模，管理员独占用户管理这一权限，拥有添加、修改、删除用户的权限。具体活动图如图2.4所示。图2.4管理员管理用户活动建模2.4.2教师活动建模教师独有的审批学生的请假，如果不同意请假，可以驳回学生的请求，如果同意则点击同意，系统自动刷新状态，具体活动图如图所示。图2.5教师审批活动建模2.4.3学生活动建模 打卡活动建模，打卡是学生专有的权限，学生要根据自己的课程进行上课打卡，系统自动获取其地理位置，具体活动图如图2.6所示。请假活动建模，请假功能是方便学生请假，依据自己实际情况向自己班级的教师请假，需要选择星期几、课程名称和书写自己请假缘由，具体活动图如图2.7所示。图2.6打卡活动建模图2.7请假活动建模

第3章系统设计3.1系统功能设计根据系统需求分析设计当前系统的功能模块，当前系统要满足不同的人拥有不同权限，但系统中有很多相同属性的用户，如老师、学生，这种情况下不适合为每一个用户创建不同的权限，只需要创建不用的角色，角色拥有不同的权限，在用角色去绑定不同的用户，这样相同属性的用户就拥有了相同的权限，本系统共分为六大功能，分别为系统管理、校园管理、人员管理、课程管理。其主要的功能在以下列表中体现：(1)系统管理：用户管理(2)校园管理：校区管理、系别管理、年级管理、专业管理(3)人员管理：教师管理、学生管理(4)课程管理：课程时间管理、数目管理、打卡监控、请假审批(5)打卡管理：课堂打卡、查看打卡记录(6)请假管理：课堂请假、查看请假记录具体的功能结构如图3.1所示。图3.1功能结构图3.2系统数据库设计3.2.1概念设计从数据需求分析中得出实体并对实体进行了详细的属性设计，下面对每个实体及属性做了总结，具体如下：管理员(管理员姓名手机号登录密码)教师(教师姓名工号登录密码创建时间)学生(学生姓名学号密码性别创建时间)学校(校区系别专业)课程(课程名称周几课程时间)课程时间(开始时间结束时间最晚打卡时间第几节课)打卡(打卡时间打卡课程名称)请假(请假原因请假科目请假时间)打卡监控(学生姓名学生学号打卡时间课程名称打卡状态)请假审批(学生姓名学生学号班级课程名称请假状态)(1)管理员实体属性图，如图3.2所示。图3.2管理员实体属性图(2)教师实体属性图，如下图3.3所示。图3.3教师实体属性图(3)学生实体属性图，如图3.4所示。图3.4学生实体属性图(4)学校实体属性图，如图3.5所示。图3.5学校实体属性图(5)课程实体属性图，如图3.6所示。图3.6课程实体属性图(6)课程时间实体属性图，如下图3.7所示。图3.7课程时间实体属性图(7)打卡属性图，如图3.8所示。图3.8打卡属性图(8)请假属性图，如图3.9所示。图3.9请假属性图(9)打卡监控实体属性图，如图3.10所示。图3.10打卡监控实体属性图(10)请假审批实体属性图，如下图3.11所示。图3.11请假审批实体属性图从以上实体属性图，对属性之间的依赖关系进行总体总结和分析得到了如下的E-R图，如图3.12所示。图3.12E-R图3.2.2数据库逻辑结构设计(1)用户登录信息表base_user存储所有用户登录相关信息，其中的ID和base_user_info的ID是相同的，rid关联了角色表的ID,这样知道了用户ID就能知道他角色的ID。表3.1用户登录信息表名称类型备注IdInt系统IDloginNamevarchar(20)登录名loginPwdvarchar(50)登录密码ustatusInt用户状态classesInt级别ridInt角色表ID(2)用户信息表base_user_info存储所有用户信息，其中classes存储了Base_class表的当前用户最底层的ID。表3.2用户信息表名称类型备注IdInt系统IDnamevarchar(20)姓名nicknamevarchar(20)昵称mobilevarchar(11)手机号emaiilVarchar(20)邮箱IDcardVarchar(18)身份证号addressVarchar(50)地址classesVarchar(20)Base_classID(3)角色表base_role存储所有角色信息。表3.3角色表名称类型备注IdInt系统IDnameVarchar(20)角色名称(4)菜单表base_menu存储所有菜单信息，其中的Fid代表当前用户的父用户的ID（均在当前表中）。表3.4用户表名称类型备注IdInt系统IDNameVarchar(20)名称AddressVarchar(200)路径Fidint父ID（系统ID）(5)ID记录表base_id_gen存储部分表的ID，通过当前表判断下一个ID。表3.5ID记录表名称类型备注Id_keyVarchar(20)哪张表Id_valueInt下一个ID(6)角色用户表base_menu_role存储所有用户和角色的对应关系，通过获取用户的rid（角色）就可以知道当前用户有哪些用户的权限。表3.6角色用户表名称类型备注RidInt角色IDMidInt用户IDStatusInt状态(7)校园信息表base_class存储所有校园信息（包括学校、校区、系别、年级、班级），其中的Pid是当前校园对象的父级（均在当前表中）。表3.7校园信息表名称类型备注IdInt系统IDNameVarchar(20)名称PidInt父级ID（系统ID）CreatetimeVarchar(20)创建时间ClassesInt级别（0:学校，1：校区，2：系；3：年级；4:专业）(8)学生表base_student存储所有学生信息，其中的classes代表了学生所在班级，使用当前学生的classes，结合Base_class既可以知道当前学生的完整校园信息。表3.8学生表名称类型备注IdInt系统IDnameVarchar(20)姓名sexVarchar(20)性别ageInt年龄IdcardVarchar(10)学号classesInt班级createtimeVarchar(20)创建时间(9)教师表base_teacher存储所有教师信息,其中的campusid，departmentid，gradeid均对应base_class表，以此得出当前教师的所有校园信息。表3.9教师表名称类型备注IdInt系统IDnameVarchar(20)姓名tcidVarchar(20)教师编号createtimeVarchar(20)创建时间campusidInt系别IDdepartmentidInt系idgradeidInt年级iduseridInt用户表ID(10)课程表class存储所有课程信息，其中的time_id代表了当前信息与class_time的关系，以此得出课程的完整时间。表3.10课程表名称类型备注IdInt系统IDclass_nameVarchar(20)名称time_idVarchar(20)Class_time表idweekdayVarchar(20)周几classidInt班级ID(11)课程时间表class_time存储课程的开始时间、结束时间和最晚打卡时间等有关的信息。表3.11课程时间表名称类型备注IdInt系统IDstart_timeVarchar(20)开始时间end_timeVarchar(20)结束时间last_timeVarchar(20)最晚打卡时间class_numVarchar(20)第几节课(12)打卡记录表clockin_log存储所有学生的打卡记录，其中的stuid和classid代表了学生和学生所在的班级，以此得出学生的完整的学校信息，其中的courseid代表了课程id，这养就可以得出完整的学校信息、学生信息和课程信息。表3.12打卡记录表名称类型备注IdInt系统IDstuidInt学生IDclassidInt班级IDstatusInt打卡状态clock_timeVarchar(20)打卡时间weekdayInt周几courseidInt课程ID(13)请假表：leave记录所有学生请假的数据，其中的stuid、courseid、classes_id结合base_class表中的信息，可以得出学生的完整学校信息。表3.13请假表名称类型备注IdInt系统IDstuidInt学生IDcourseidInt班级IDclasses_idInt课程IDcreatetimeVarchar(20)创建时间weekdayVarchar(20)周几timeVarchar(20)请假时间statusInt状态noteVarchar(200)备注3.3系统详细设计3.3.1用户登录用户打开系统，进入首页，输入用户名和密码，点击提交，后台和数据库比对信息，在对应相应的权限给出返回值，最后登陆成功进入系统，或者提示用户名密码错误，如图3.2所示。图3.2用户登录时序图3.3.2学生打卡学生打开主页，输入自己的学号和密码，进入打卡主页面，点击打卡按钮，利用百度地图获取定位，把获取的地址传到后台与事先存储的地理位置名称做比对，去过比对正确则返给前台SUCCESS，界面提示打卡成功，否则返给前台ERROR，提示打卡失败，如图3.3所示。图3.3学生打卡时序图3.3.3学生请假学生打卡系统，输入用户信息点击登录，进入主界面，点击请假按钮，选择星期几哪节课请假，填写自己请假理由，点击提交到，界面有成功提示，如图3.4所示。图3.4学生请假时序图3.3.4添加用户管理员输入自己的账户名和密码，成功登录系统后，鼠标点击用户管理，用户点击添加按钮，添加管理员的时候需要输入姓名和手机号和选择校区管理角色，点击保存，页面自动刷新信息增加一条，添加教师的时候需要另外在选择一下哪个校区，其他和添加管理员操作一致，如图3.5所示。图3.5添加用户时序图3.3.5修改课程时间课程时间管理是管理员根据每个学校上课时间的情况，录入这个校区每节课的实际时间，可以修改时间，操作如下，点击修改按钮，删除原有数据，重新录入开始时间、结束时间、最晚打卡时间和第几节课，如图3.6所示。图3.6修改课程时间时序图3.3.6删除学生对学生的操作是教师的职责，每个教师负责自己所教的学生，教师输入用户名密码成功登录系统后，可以依据实际情况添加删除学生，删除学生时，只需点击要删除学生后边的红色按钮即可，系统西东刷新界面，减少数据，如图3.7所示。图3.7删除学生时序图3.3.7打卡监控打卡监控功能，是为了让教师一目了然的查看到学生的出勤状况，教师可以看到所有学生打卡状况，也可以根据自己的意愿查询某一个学生某节课的状态，只要输入学生姓名，选择某个专业某节课和周几，还有打卡未打卡状态就可以查询，界面自动刷新显示结果，如图3.8所示。图3.8打卡监控时序图3.3.8请假审批请假审批顾名思义学生请假，教师审批，这里是为了教师审核申请请假的同学所创建的功能，教师根据浏览学生信息和学生所描述的请假理由，点击蓝色同意按钮，这位同学的状态就会自动改成已同意状态，同时会隐藏同意按钮，如果教师认为是不符合规矩的请假，则可以点击红色驳回按钮，同学的状态自然就会改成已驳回状态，同样也会隐藏驳回按钮，如图3.9所示。图3.9请假审批时序图

第4章系统的实现4.1系统登录界面(1)用户进入页面，填写登录名称和登录密码，系统通过连接数据库查询是否存在当前用户名，如图4.1。图4.1登录界面(2)如果不存在，直接将错误状态返回到前端，前端接到返回的错误状态，提示用户输入错误。(3)如果存在则根据用户名从数据库中查询出加密后的密码A，使用MD5加密用户当前输入的密码B，如果密码A和密码B相等，则说明当前用户是合法的，这时将系统系需要的信息保存在SESSION中，并将状态返回给前端，前端接受到返回的状态，使用JS跳转到欢迎页面。(4)进入欢迎页面后使用Ajax发送查询权限的请求，系统从SESSION中获取用户的相关信息，得到用户的角色ID，通过角色ID查询当前角色拥有的用户权限结合用户表得到当前用户可以使用的所有用户，将用户数据整合后返回前端，前端使用JS拼接权限列表如图4.2。图4.2登陆成功界面4.2打卡界面打卡界面为学生操作的主界面，其功能包括打卡和跳转到其他页面中，当前页面使用百度地图作为背景，使用BootStrap生成页面UI，进入页面后程序将自动定位学生当前位置，并使用经纬坐标通过百度地图的方法获取位置详细信息，学生点击打卡按钮后程序使用Ajax将当前位置信息、学生信息和课程信息发送到服务器接口以完成打卡操作。如图4.3。为了学生可以查看自己的打卡记录，项目提供查看打卡记录页面，页面使用BootStrap的表格系统生成页面UI，在学生登录后系统使用JS将学生ID保存在缓存中，进入当前页面后学生无需任何操作就可以查看自己的打卡记录，记录中的信息包括打卡的星期、课程和打卡时间。如图4.4。图4.3打卡界面图4.4打卡记录界面4.3请假界面请假界面的功能相对简单，用于学生提交请假申请，使用BootStrap生成页面UI，学生进入页面后选择要请假的日期和课程并点击按钮，程序使用Ajax将学生信息和请假信息同意发送到后台接口，以此完成请假申请。如图4.5。请假记录是为了方便学生查看自己的请假历史，页面同样使用BootStrap的表格系统生成页面UI，其实现原理与打卡记录页面相同，学生进入点击查看请假记录信息按钮页面后无需任何操作就可以查看所有的请假记录。如图4.6。图4.5请假界面图4.6请假记录界面4.4用户管理界面添加用户：用户点击添加按钮调用JS，JS调用JQueryUI中的dialog将对应的form表单显示出来，用户在表单中填写相关信息，填写完毕后点击保存信息按钮调，用JQuery.form.js将当前表单的数据以Ajax的方式发送到后台，后台接到请求后将数据封装成SQL语句发送到数据库，数据库执行SQL语句后向后台返回执行的结果，后台接到结果后判断结果并返回相应的数据给前端，前端接收到返回的数据后根据数据判断是否刷新网页或提示添加失败，如图4.7。图4.7添加用户界面4.5课程时间管理界面(1)课程时间列表：用户点击“课程时间管理”进入相应页面，页面中使用JQuery的Ajax向后台发送请求，后台接受到请求后连接数据库查询相应数据表，获取所有信息并封装数据，返回到前端JS中，前端JS（VUE）接到结果后开始在内存中渲染页面，渲染完毕后将页面挂载到网页中，这时用户就可以看到所有的相关信息，如图4.8。图4.8课程时间列表界面(2)修改课程时间：用户点击某一条信息的“修改”按钮，VUE将当前记录的ID传出到JS中，JS接受到调用请求，使用JQuery封装的Ajax向后台发送请求，后台接收到请求后连接数据库进行查询，获取当前记录的相关信息，封装数据，并以JSON的方式返回到前端JS，前端JS接受到返回的数据后开始渲染隐藏的修改信息专用的form表单，渲染完毕后将表单显示出来，这时用户就可以看见完整的相关信息，用户在form表单中修改相关信息，然后点击保存按钮，前端使用JQuery.Form.js将表单数据已Ajax的方式发送到后台，后台接受请求后根根据ID修改当前信息，修改完成后返回处理结果，后台接受到数据库返回的结果后将信息返回前端，前端JS接收到返回的结果后根据结果判断是否刷新网页或提示修改失败，如图4.9。图4.9修改课程时间界面4.6学生管理界面(1)学生列表：用户点击“学生管理”进入相应页面，页面中使用JQuery的Ajax向后台发送请求，后台接受到请求后连接数据库查询相应数据表，获取所有信息并封装数据，返回到前端JS中，前端JS（VUE）接到结果后开始在内存中渲染页面，渲染完毕后将页面挂载到网页中，这时用户就可以看到所有的相关信息，如图4.10。图4.10学生列表界面(2)删除学生：用户点击某条记录的删除按钮，JS接受当前记录的ID，使用JQuery封装的Ajax向后台接口发送数据，接口接到数据后将数据解析成SQL语句到数据库中执行，后台解析数据库返回的执行结果并向前端返回相应的执行状态，前端根据返回的状判断是否刷新网页或提示删除失败。4.7打卡监控界面(1)打卡列表：用户点击“课程管理”进入相应页面，页面中使用JQuery的Ajax向后台发送请求，后台接受到请求后连接数据库查询相应数据表，获取所有信息并封装数据，返回到前端JS中，前端JS（VUE）接到结果后开始在内存中渲染页面，渲染完毕后将页面挂载到网页中，这时用户就可以看到所有的相关信息，如图4.11。图4.11打卡列表界面(2)条件筛选：用户在页面中选择自己想要查看的打卡信息的筛选条件，点击“查询”按钮，调用JS方法，JS使用JQuery获取所有筛选条件的值并携带所有值以Ajax的方式访问后台接口，接口接收到请求后对参数进行非空判断和生成对应SQL语句，将SQL语句发送到数据库执行，数据库执行后将结果返回给后台，后台拿到结果后对结果集进行非空判断并向前端返回相应的数据，前端接受到返回的数据后判断返回的数据，以此来判断是否刷新网页或提示错误，如图4.12。图4.12筛选的打卡列表界面4.8请假审批界面(1)请假列表：用户点击“请假管理”进入相应页面，页面中使用JQuery的Ajax向后台发送请求，后台接受到请求后连接数据库查询相应数据表，获取所有信息并封装数据，返回到前端JS中，前端JS（VUE）接到结果后开始在内存中渲染页面，渲染完毕后将页面挂载到网页中，这时用户就可以看到所有的相关信息，如图4.13。(2)审核信息：用户对请假信息进行审核，点击同意或驳回，此时调用JS携带当前信息的ID和审批结果以Ajax的形式请求后台接口，后台接口接到值后根据ID修改当前信息并返回执行结果，前端Ajax获得返回结果，使用JS判断返回的结果以决定刷新页面或提示错误，如图4.13。图4.13请假列表界面

第5章系统测试5.1登录测试用例表5.1登录测试用例用例编号A001测试模块登录系统重要级别高预置条件系统正常打开输入输入非数据库中存储的用户名或密码预期输出都无法登入，显示用户名或密码错误实测结果与预期输出相同输入输入相应的用户名和密码点击登录，预期输出进入首页实测结果与预期输出相同5.2打卡测试用例表5.2打卡测试用例用例编号A003测试模块打卡重要级别高预置条件系统正常打开打卡输入点击打卡按钮获取地理位置信息预期输出和数据库中位置比对通过实测结果与预期结果相