Design of Campus Class Attendance Management System

Design Description

Because of the rapid development of information technology in the information management system, the realization of personnel information management system has matured rapidly. Basically all colleges and universities in China, the modern management information program is gradually being well improved, and teachers and students have greatly improved the efficiency of work because of the development of such technology. For example, background systems such as the inquiry of student scores, the management of teaching internal affairs, the recruitment of new students and the employment of graduates have sprung up in major universities, which not only brings convenience to the daily life of all teachers and students, but also reflects the level of information development of a university. The purpose of this study is to design a campus class attendance management system, with the aim of providing a perfect solution for domestic and foreign college teachers in class attendance and providing convenience for college attendance. In the current information Internet era, it is particularly important for colleges and universities to design and implement a set of attendance system through Internet technology and thinking as well as information technology. At present, the main way of attendance in domestic colleges and universities is the traditional way of attendance, which occupies a lot of classroom time for teachers and students. As the number of classes increases, this inefficient form of attendance will no longer apply to college classes.

This system is based on Express server, the front-end is written with Vue framework and JavaScript language, the logical layer is written with NodeJS, and the development and debugging is carried out with VSCode. The class attendance is realized through the verification of geographical location information and verification code.

考勤作为监督学生出勤、提高课堂质量的关键环节，在高校的日常教学生活中起着非常重要的作用。在大多数情况下，传统的考勤系统是基于纸张，依靠学生的答案，不能有效地避免学生为他们答题，而且在检查所有学生的完整名单的过程中浪费了大量宝贵的课堂时间。对于学生来说，它不能起到预期的监督效果，而对于学校和教师来说，它是一种需要极大精力和时间的考勤，但准确性无法保证，效率低。随着班级学生人数的不断增加，传统的点名考勤方式变得越来越低效。因此，将信息技术与互联网思维技术相结合，设计并实现一套App上课考勤系统，使其能够方便地应用到高校课堂中就显得越来越有意义。一个简单易用、高效的课堂考勤系统不仅可以有效督促学生按时到课，提高学生的学习质量，还可以帮助学校了解教师的课堂情况，为教学改革提供帮助。

在21世纪当今高校，手机是每一个人都离不开的电子设备，传统的管理系统一般都是基于PC端的，这种对于现代大学生来说，是极为不方便的，没有人会在每一堂课都带着电脑上课，而且电脑携带也极为不便。所以这个时候就应运而生了手机App这种形式的软件，把PC端的种种功能，全部都移交到App上来，就能够解决这一问题。

由于现在越来越多的公司工厂开启人脸识别打卡考勤制度，这一现象能够很好的证明人工智能在各个领域的广泛应用和飞速发展，人脸识别从过去的遥不可及变成现在的随处可见，这些都离不开业界大佬们的辛苦劳作。虽然现在人脸识别打卡已经逐渐普及，但是目前国内的大学校园环境中，现有的设备并不能起到很好的作用。如果能将人脸考勤与移动设备相结合，将极大地解决高校传统考勤效率低下的问题，大大提高课堂考勤的准确性。

考勤管理系统是企业管理中不可或缺的一部分，国内的信息化考勤管理系统已经相当完善，能够帮助员工完成上下班、出差、请假等全过程。然而，与国外相比，国内的考勤管理系统仍有很大的进步空间。指纹识别技术和基于虹膜识别技术是国外考勤范畴比较前沿的技术，这些技术可以在较短的时间内完成认证，防止了弄虚作假的可能。但这些技术也存在生物特性泄漏和变更的风险，需要更加周密的保护措施。此外，这两种方法也存在需要排队考勤和考勤设备成本高等缺点。因此，在选择考勤管理系统时，企业应该根据自身实际情况进行选择，并加强安全措施，以确保企业的信息和员工的隐私得到保护。

目前在中国，有许多的大中小企业事业单位进行考勤已经不再使用基于纸质的签名考勤或者单纯的指纹打卡，有日趋成熟的基于智能办公硬件员工考勤解决方案被广泛应用。然而，目前还没有满足国内高校需求的低成本考勤系统可以在大多数高校中使用。在研究领域，目前高校课堂考勤系统的设计方法主要有以下几类[1]。

1、是以手机服务为主的智能考勤:如使用微信公众号服务、位置服务、Wi-Fi、实时二维码等。有研究人员基于微信企业号开发出了微信考勤系统并在学院进行应用[2]，从该系统的反馈分析，存在难以杜绝代替考勤的现象以及对上课地点有要求等问题。有的研究人员开发出基于Wi-Fi的高校课堂考勤系统[3]，这种考勤系统需要提前架设Wi-Fi热点服务器才能开始考勤。

2、是以智能卡为主的考勤:有研究人员设计了基于校园一卡通的考试签到系统[4]。这类考勤适用于纸质考试等不能携带手机的场景，同时需要专门的读卡设备进行验证。

3、是以蓝牙设备为主的考勤:如物联网、射频识别技术、蓝牙、iBeacon等。有研究人员开发了基于iBeacon定位技术的高校考勤系统[5]，基于蓝牙的考勤方式可以通过微信或移动设备进行签到，但是需要提前布置iBeacon设备，有一定维护成本，通信中也存在安全隐患。

4、是以生物特征识别为主的考勤:这类考勤主要使用人体的生物特征，如指纹和人脸等能够唯一识别一个个体的特征。有研究人员提出了使用指纹识别技术进行课堂考勤的方法[6]，但该方法的实现基于特定设计的指纹识别设备。基于虹膜识别技术的课堂考勤虽然保证了较高的准确率，但是不仅会带来较高的设备成本，还会耗费一定的准备时间。人脸识别考勤相对来说比较易用，学生只需打开智能手机的摄像头并且联网即可完成签到，降低了系统的使用成本。

本系统的开发主要面向高校的教师和学生。使用场景是为大学课程和学生请假。针对当前高校课堂的日常出勤情况，结合高德地图的WebAPI定位技术、二维码技术和微信小程序开发系统，解决课堂出勤系统的空缺。本节将从以下三个方面详细分析该系统在大学课堂中的可行性。

2.1.1技术可行性

软件部分，本系统分为PC和移动端，PC端视图层使用了HTML5、CSS3和Vue2.0框架搭建，逻辑层使用了ES6的JavaScript、和NodeJS16版本搭配Express服务端开发；移动端视图基于微信开发文档的WXML、WXSS，逻辑层使用了ES6的JavaScript、和JNodeJS16版本搭配Express服务端开发。使用Visual Studio Code开发工具进行JavaScript和HTML5前端代码和NodeJS后端代码的编写和调试。同时微信小程序还开放了功能齐全的各种API供开发者调用，其中包括位置获取的API，可以判断考勤者的考勤位置。

硬件部分，本系统PC端最好的体验感还是电脑，当然移动设备也可使用，移动端只需要安装有微信APP的手机（Android、iOS、WP系统都可以），运行过程需要网络连接，目前我国的通信网络信号在高校中已经达到了全面覆盖，这为本系统的实现奠定了基础。

2.1.2经济可行性

本系统的开发过程中不需要使用任何收费软件或其他设备辅助，只需要一部普通智能手机和微信即可。除了流量费用由运营商收取外，不会有其他成本产生。

2.1.3操作可行性

本系统为教师和学生提供了便捷的考勤管理服务。管理员可以在PC端对所有数据进行管理，而教师和学生只需打开微信小程序并授权相应权限即可使用。教师端只需要填写课程及教室号，学生端搜索加入即可，下一次无需重复此步骤。教师端发起签到，学生端进入签到，填写校验码即可签到，操作简单便捷。教师端可以查看出勤名单，并且可以导出考勤名单，方便考核平时成绩。该系统不需要任何额外设备，只需使用微信小程序即可，同时不会产生额外的成本。

需求分析环节是系统开发中的必要环节。在该环节，通过对本系统的功能需求与非功能需求进行分析，来探讨本系统需要实现哪些。

2.2.1功能需求分析

本系统的功能设计主要是面向高校师生的、为了解决传统高校课堂考勤效率低和无法避免代答到的难题。使用本系统，大学教师和导员可以通过手机随时微信开启签到，随时可以停止签到，并且可以方便地查看签到统计结果。学生签到需要定位和老师给出的校验码。

进入小程序需要用户选择自己的身份，选择身份之后如果是未注册用户需要先进行注册，注册需要使用QQ邮箱进行验证码发送注册。已注册用户则直接在弹窗内输入密码登录即可。教师身份用户的注册是需要管理员手动添加。教师登录之后进入管理界面，可以进行开启考勤和审核假条，以及分别查看已签到和未签到的学生人数和名单。学生登录之后可以选择加入课堂和发起请假，对加入的课堂可以签到打卡，如果有事外出，也可以在本系统上进行请假。

2.2.2非功能需求分析

表 3-1 系统性能需求

3开发环境及相关技术介绍

操作系统：Windows10

开发工具：Visual Studio Code 1.74.3、HBuilder X 3.4.14

数据库：MySQL 5.7

开发语言：JavaScript、微信小程序

JavaScript是一种流行的编程语言，通常用于在Web应用程序中添加交互性和动态性。以下是JavaScript的一些主要特征和用法：

1. 语法：JavaScript的语法与C语言非常相似，包括变量、条件、循环、函数等基本结构。它还包括一些独特的特性，例如闭包和原型继承。
2. 数据类型：JavaScript包括基本数据类型，如数字、字符串、布尔值、null和undefined，以及复杂数据类型，如对象和数组。
3. 对象和原型：JavaScript的核心是对象，它是一种键值对的集合。每个对象都有一个原型，它定义了对象的属性和方法。
4. 函数：JavaScript中的函数是一等公民，可以像变量一样使用。它们可以被传递给其他函数作为参数，也可以从其他函数中返回。
5. 事件处理程序：JavaScript的一个主要用途是为Web页面添加交互性和动态性。它可以用来处理用户事件，例如单击、滚动和拖放。
6. AJAX：JavaScript可以使用AJAX技术从服务器异步加载数据，而无需刷新整个页面。
7. 框架和库：JavaScript有大量的框架和库可供使用，例如jQuery、React、Angular等。这些工具可以帮助开发人员更轻松地构建Web应用程序。
8. Node.js：Node.js是一个运行JavaScript的平台，它可以用于服务器端开发。
9. 异步编程：JavaScript支持异步编程，可以使用回调函数、Promise和async/await等技术来处理异步任务，例如网络请求和文件读取。
10. DOM操作：JavaScript可以用来操作文档对象模型（DOM），包括添加、删除和修改页面元素。这使得开发人员可以通过JavaScript动态地更改页面内容和样式。
11. Canvas和WebGL：JavaScript可以使用Canvas和WebGL技术来创建互动性和动画效果的图形，例如游戏和数据可视化。
12. 模块化：JavaScript支持模块化编程，可以将代码拆分成独立的模块，使得代码更易于维护和重用。
13. 测试：JavaScript有许多测试框架和工具，例如Mocha和Jasmine。这些工具可以帮助开发人员编写和运行单元测试和集成测试，以确保代码的质量和稳定性。
14. 前端框架：JavaScript有许多流行的前端框架，例如React、Angular和Vue。这些框架可以帮助开发人员更轻松地构建和管理大型Web应用程序。
15. 后端框架：JavaScript也有许多流行的后端框架，例如Express和Koa。这些框架可以帮助开发人员构建高效和可靠的服务器端应用程序。

总的来说，JavaScript是一种功能强大、灵活和广泛应用的编程语言，它在Web开发、移动应用程序、桌面应用程序等方面都有广泛的应用。

MySQL是一种开源的关系型数据库管理系统，是Web应用程序和其他应用程序常用的数据库之一。MySQL的最新版本是MySQL 8，但在介绍MySQL 5.7之前，先了解一下关系型数据库的基本概念。

关系型数据库是指使用表格来存储和管理数据的数据库。每个表格包含一些有关特定实体的数据，例如用户、订单或产品。表格由行和列组成，每个行代表一个实体，每个列代表一个属性。关系型数据库使用SQL（Structured Query Language）来查询和操作数据。

MySQL 5.7是MySQL的一个重要版本，它增加了一些新的功能和改进，包括：

1. JSON支持：MySQL 5.7开始支持存储和查询JSON格式的数据。JSON是一种轻量级的数据交换格式，常用于Web应用程序中。
2. 改进的性能：MySQL 5.7引入了许多性能改进，包括更快的查询执行和更快的索引扫描。
3. 改进的安全性：MySQL 5.7增加了一些新的安全功能，包括更强的密码加密、更严格的权限管理和更好的SSL支持。
4. 改进的复制：MySQL 5.7增加了一些新的复制功能，包括更高效的并行复制和更好的复制监控。
5. 改进的GIS支持：MySQL 5.7增加了一些新的GIS功能，包括更好的空间索引支持和更多的空间函数。
6. 存储引擎：MySQL 5.7包括多个存储引擎，包括InnoDB、MyISAM和Memory等。InnoDB是MySQL的默认存储引擎，它支持ACID事务和行级锁定等特性。
7. 外键支持：MySQL 5.7支持外键约束，可以确保表格之间的引用完整性。
8. 存储过程和触发器：MySQL 5.7支持存储过程和触发器，可以在数据库中实现更高级别的逻辑。
9. 分区表格：MySQL 5.7支持分区表格，可以将大型表格分割成更小的表格，提高查询性能和管理能力。
10. 备份和恢复：MySQL 5.7包括多种备份和恢复工具，例如mysqldump和MySQL Enterprise Backup。这些工具可以帮助管理员保护数据并在需要时快速恢复数据。
11. 性能调整器：MySQL 5.7包括性能调整器（Performance Schema），可以帮助管理员诊断和调整数据库的性能问题。
12. MySQL Workbench：MySQL 5.7包括MySQL Workbench，这是一种可视化工具，可以帮助管理员管理和维护数据库。
13. 分布式事务：MySQL 5.7支持XA（eXtended Architecture）分布式事务，可以在多个数据库之间进行事务处理。
14. 多语言支持：MySQL 5.7支持多种语言，包括英语、中文、日语、法语等。管理员可以选择适合自己的语言界面。
15. 社区支持：MySQL是一种开源软件，拥有一个活跃的社区，可以提供支持、文档和示例代码等资源。

总的来说，MySQL 5.7是一种功能强大、灵活和高性能的数据库管理系统，广泛应用于Web应用程序、企业应用程序和其他应用程序。MySQL 5.7的功能和用法非常丰富，需要管理员深入了解和掌握，才能更好地管理和维护数据库。

Vue.js前端框架是国内目前非常流行的前端框架之一，用于构建交互式Web界面。Vue.js的最新版本是Vue.js 3，但在介绍Vue.js 2.0之前，先了解一下前端框架的基本概念。前端框架是指一组工具、库和最佳实践，用于帮助开发人员更高效地构建Web应用程序。前端框架通常包括一个组件系统、路由、状态管理和构建工具等功能。

Vue.js 2.0是Vue.js的一个重要版本，它增加了一些新的功能和改进，包括：

1. 虚拟DOM：Vue.js 2.0使用虚拟DOM来提高渲染性能。虚拟DOM是一种轻量级的JavaScript对象，用于描述真实DOM的层次结构。
2. 渐进式框架：Vue.js 2.0是一种渐进式框架，可以根据需要逐步引入其功能。这使得开发人员可以使用Vue.js来构建小型应用程序或大型应用程序。
3. 模板语法：Vue.js 2.0的模板语法类似于Angular和React，可以在HTML中直接使用。这使得开发人员可以更容易地编写和维护模板。
4. 组件系统：Vue.js 2.0的组件系统非常强大，可以将应用程序拆分成多个小组件，每个组件都有自己的状态和行为。
5. 响应式数据绑定：Vue.js 2.0支持响应式数据绑定，可以自动更新视图中的数据。这使得开发人员可以更容易地管理和更新应用程序的状态。
6. 路由：Vue.js 2.0包括Vue Router，它可以帮助开发人员管理应用程序的路由。
7. 状态管理：Vue.js 2.0包括Vuex，它是一个状态管理库，可以帮助开发人员更好地管理应用程序的状态。
8. 过渡和动画：Vue.js 2.0包括过渡和动画的支持，可以帮助开发人员为应用程序添加更好的用户体验。
9. 插件：Vue.js 2.0有许多插件可用，例如Vue CLI、Vue DevTools和Vue Test Utils等。这些插件可以帮助开发人员更好地构建、调试和测试应用程序。
10. 计算属性和侦听器：Vue.js 2.0支持计算属性和侦听器，可以帮助开发人员处理复杂的逻辑和数据变化。
11. 自定义指令：Vue.js 2.0支持自定义指令，可以扩展Vue.js的基本功能，并为应用程序添加新的行为。
12. 生命周期钩子：Vue.js 2.0包括生命周期钩子，可以帮助开发人员管理组件的生命周期和行为。
13. 单文件组件：Vue.js 2.0支持单文件组件，可以将组件的代码、模板和样式放在一个文件中，方便管理和维护。
14. 服务器端渲染：Vue.js 2.0支持服务器端渲染（SSR），可以在服务器端生成HTML，提高网页的性能和SEO。
15. 插槽：Vue.js 2.支持插槽，可以帮助开发人员更好地控制组件的结构和布局。

总的来说，Vue.js 2.0是一种功能强大、灵活和易于学习的前端框架，它广泛应用于Web应用程序中。Vue.js 2.0的功能和用法非常丰富，需要开发人员深入了解和掌握，才能更好地构建高质量的应用程序。

图4-3移动端系统框图-教师

首页：学生端可以进行班级的加入，以及请假申请；教师端可以进行课堂的新建以及学生假条的审批。

班级：学生端在班级下可以查看我的班级，也可以加入课堂之后进行签到打卡；教师端可以查看自己所创建的所有课堂信息。

我的：用户可以完善自己的个人信息。

4.2系统流程

系统移动端流程图如下所示，用户首次打开直接进入登录页，新用户要先进行账号注册，才能登陆。该系统支持多种用户角色，用户可以根据自己的身份进行登录，并在个人中心查看或修改个人信息。用户信息会被存储到后台数据库中，并向不同角色的用户展示不同的界面。

系统移动端登录流程图如下所示，用户登录时会根据所选身份不同，系统会展示不同的页面和功能。

图4-4系统移动端登录流程图

系统移动端学生签到流程图如下所示，学生首先要加入指定老师的课堂，在规定的时间内输入教师给的签到码并且成功定位后，才可以签到成功。

图4-5 学生签到流程图

系统移动端学生请假流程图如下所示，学生填写请假申请，等待教师端审批，如通过审批则请假成功，否则请假失败。

 图4-6 学生请假流程图

4.3数据库设计

4.3.1概念设计

本系统中设计的数据库主要有以下八张表，包含了每张表所需的字段。

1. 班级信息表：包括班级的ID、名称、人数、所属学院等信息，班级ID为主键，用于识别唯一的班级。
2. 教师信息表：包括教师的ID、姓名、工号、密码、手机号和所属学院等信息，ID是主键，用来识别唯一教师。
3. 学生信息表：包括学生的ID、姓名、邮箱、密码、手机号、签到状态等信息，学生ID为主键，用来识别唯一的学生。
4. 管理员信息表：包括管理员ID、姓名、密码和头像。
5. 请假信息表：包括请假ID、请假时间、请假状态，ID为主键，用来识别唯一的请假信息。
6. 学生签到信息表：包括签到ID、签到时间、签到状态、请假状态等信息，ID为主键，用来识别唯一的学生签到信息。
7. 签到课程信息表：包括ID、签到时间段、签到课程名、所属学院和所有班级等信息，ID为主键，用来识别唯一的签到课程。
8. 教师身份表：包括ID和身份信息。

4.3.2 E-R图

图4-7总体E-R图

4.3.3逻辑设计

 图4-8数据库关系图

1. 班级信息表，用来存储班级信息，表名class，如表4-1所示。

表4-1班级信息表

1. 教师信息表，用来存储教师信息，表名user_teacher，如表4-2所示

表4-2教师信息表

1. 学生信息表，用来存储学生信息，表名user_stu，如表4-3所示

表4-3学生信息表

1. 请假信息表，用来存储请假信息，表名application，如表4-4所示

表4-4请假信息表

1. 签到课程信息表，用来存储签到课程信息，表名sign，如表4-5所示

表4-5签到课程信息表

1. 学生签到表，用来存储学生的签到信息，表名stusign，如表4-6所示

表4-6学生签到信息表

1. 平台管理员信息表，用来存储管理员信息，表名che，如表4-7所示

表4-7平台管理员信息表

1. 教师身份信息表，用来存储教师身份信息，表名iden，如表4-8所示

表4-8教师身份类型信息表

4.4服务器设计

系统服务器的设计流程如下所示，根据流程完成后端接口的编写及测试。

图4-9 创建服务器流程图

服务器安装依赖如下表所示：

表4-9 服务器安装依赖表

5系统实现

5.1系统前端的实现

        微信小程序是一种基于JavaScript语言的开发平台，使用微信开发者工具进行开发，与普通的WEB开发非常相似。然而，小程序与WEB开发之间存在很多区别。在WEB开发中，渲染线程和脚本线程是相互排斥的，但在小程序中，两者是分开的，分别在不同的线程中运行。小程序的逻辑层和视图层分开运行，逻辑层运行在JSCore中，缺少相关的DOM API和BOM API。因此，前端开发人员需要对一些库非常了解，而在小程序中，无法使用JQuery、Zepto等库，并且部分NPM包也无法运行。这一区别直接导致了小程序开发人员需要具有一定的专业知识和技能。

        WEB开发人员需要面对多种不同的浏览器环境，需要兼容各种不同的浏览器。但是，在小程序的开发过程中，只需要面对两大操作系统iOS和Android的微信客户端。除了在开发者工具中，小程序的三种运行环境也是不同的。因此，小程序的开发人员需要具备针对不同操作系统的开发技能和经验，以及对小程序的运行环境有深入的了解。

        WEB开发人员需要面对多种不同的浏览器环境，需要兼容各种不同的浏览器。但是，在小程序的开发过程中，只需要面对两大操作系统iOS和Android的微信客户端。除了在开发者工具中，小程序的三种运行环境也是不同的。因此，小程序的开发人员需要具备针对不同操作系统的开发技能和经验，以及对小程序的运行环境有深入的了解。

5.1.1总体页面的实现

        PC端后台管理系统的实现是采用VSCode开发工具，JavaScript语言，Vue2.0前端框架实现，非常方便的实现单页面应用的开发，把所有管理页面都使用VueRouter路由管理来配置好，就可以在页面上非常快捷的进行跳转，PC端和移动端的API接口都是使用NodeJS+Express服务器来编写。

        在开发微信小程序时，只需要在app.json文件中的pages对象下写入小程序所需页面代码的路径。系统会自动在pages文件夹中生成开发所需的页面文件夹。如表5-1所示。

表5-1 首页页面路径表

表5-2 班级页页面路径

表5-3 我的页面路径

5.1.2登录页面的实现

如果用户是第一次使用本系统，则会提示请先登录。其前端核心代码如下：

登录
登录没有账号？立即注册学生老师学生登录：router.post("/user/login", (req, res) => {    let { emile, pwd } = req.bodylet sql = `select * from user_stu where us_emil=? and us_pwd=?`pool.query(sql, [emile, pwd], (err, result) => {if (err) {next(err)return}if (result.length == 0) {res.send(Response.error("用户登录失败！"))} else {const token = generateToken(result[0]?.u_id, 1)res.send(Response.success({id: result[0].us_id,name: result[0].us_name,token: "Bearer " + token}, "用户登录成功"))}})})教师登录：router.post("/teacher/login", (req, res) => {let { emile, pwd } = req.bodylet sql = `select * from user_teacher where u_empno=? and u_pwd=?`pool.query(sql, [emile, pwd], (err, result) => {if (err) {next(err)return}if (result.length == 0) {res.send(Response.error("老师登录失败！"))} else {const token = generateToken(result[0]?.u_id, 1)res.send(Response.success({id: result[0].u_id,name: result[0].u_name,token: "Bearer " + token}, "老师登录成功"))}})})

用户登录的时候，使用setStorage()方法把后端返回的用户名保存起来，然后在我的页面，在onShow()生命周期函数中，使用getStorage()方法获取用户名，并修改data中的uname变量，就可以在页面展示用户名了。效果图如图5-1所示

图5-1 登录效果图

5.1.3注册功能的实现

注册功能的实现只针对于学生来说，没有账号的学生可以主动去注册账号，注册的流程是：用户输入邮箱后点击发送验证码，然后在邮箱获取道验证码之后输入，后台会发送请求去校验是否正确，然后输入密码等信息才能注册成功。

前端代码实现：

 图5-2 用户注册界面

图5-3 邮箱发送验证码代码

图5-4 校验验证码是否正确

5.1.4首页页面的实现

“首页”的页面分为上下两部分，上面部分主要是一个轮播图展示，用户可以点击跳转到对应页面，点击图片后会通过标签中的url参数跳转到对应的页面，下面是‘新建课堂’，‘假条审批’之后可在跳转后的页面进行需要的操作，通过点击按钮来获取对应的功能，按钮简洁，界面友好，用户能够快速找到相应的功能，符合课堂上的使用场景。“首页”的上部分前端核心代码如下：

签到打卡假条审批

5.1.5课堂签到功能的实现

学生课堂签到的页面包括了学生信息，签到按钮，签到码输入以及定位打卡的展示，以下是部分重要代码：

图5-5 地图的创建及定位

5.2系统逻辑层的实现

逻辑层在收到前端发来的登录请求后，会收到含有用户登录账号和密码，后台会在数据库中查找对比是否存在，返回对应msg提示，在进行校验之后会返回响应口令（Token）。以下为登录功能主要逻辑代码：

1. 学生登录：router.post("/user/login", (req, res) => {let { emile, pwd } = req.bodylet sql = `select * from user_stu where us_emil=? and us_pwd=?`pool.query(sql, [emile, pwd], (err, result) => {if (err) {next(err)return}if (result.length == 0) {res.send(Response.error("用户登录失败！"))} else {const token = generateToken(result[0]?.u_id, 1)res.send(Response.success({id: result[0].us_id,name: result[0].us_name,token: "Bearer " + token}, "用户登录成功"))}})})2. 教师登录：router.post("/teacher/login", (req, res) => {let { emile, pwd } = req.bodylet sql = `select * from user_teacher where u_empno=? and u_pwd=?`pool.query(sql, [emile, pwd], (err, result) => {if (err) {next(err)return}if (result.length == 0) {res.send(Response.error("老师登录失败！"))} else {const token = generateToken(result[0]?.u_id, 1)res.send(Response.success({id: result[0].u_id,name: result[0].u_name,token: "Bearer " + token}, "老师登录成功"))}})})3. 发送邮箱代码：router.post("/user/sendCode", (req, res, next) => {let code = Math.floor(Math.random() * 8889 + 1000)let { email } = req.bodylet sql = `insert into user_code (u_code,u_email) value(?,?)`pool.query(sql, [ code,email], (err, data) => {if (err) {next(err)return}let transporter = nodemailer.createTransport({host: "smtp.163.com",secureConnection: true,port: 465,auth: {user: "17342961230@163.com",pass: "QOBVOGBFRRWKETOA"}})let options = {from: "17342961230@163.com",  //发送者to: `${email},17342961230@163.com`,  //接收者subject: "睿智考勤",html: `
尊敬的用户您好：
欢迎您注册睿智考勤，您的注册验证码是：${code},请注意查收
`}transporter.sendMail(options, (err, msg) => {if (err) {res.send(Response.error(err))} else {res.send(Response.success(null, msg))}})})})

6系统测试

6.1测试目的

系统测试是项目过程中必不可少的重要组成部分，它试图通过系统测试来了解系统在现阶段的缺陷，并对系统漏洞进行详细检查，以便在商业使用前及时维护和更新系统，并避免用户体验差的问题。因此，在这个阶段，将对管理应用程序进行测试，以确保该应用程序为用户提供高度的体验。系统测试是对软件开发各个阶段的功能和内部代码结构设计进行的测试。测试人员会使用测试账号输入正常和非法数据，评估软件是否能够达到预期效果，并及时发现可能存在的错误和漏洞。通过测试，可以找出预期效果和实际效果的差异，发现系统中的bug，并用来评估软件是否满足设计的需求。

6.2测试计划

为保证本次系统测试工作顺利进行，现阶段制定严谨的系的测试计划。首先确定开发人员兼任测试人员，进而编写测试用例对本系统进行是单元测试，在这里以系统的添加、删除、修改、查找信息、登录、注册、个人信息、新建课堂、新建假条等功能模块为例，进行测试。

6.3系统功能测试

1. 注册登录功能测试

表6-1注册登录功能测试

1. 前后端交互请求测试

表6-2前后端交互请求测试

1. PC端功能测试

表6-3 PC端功能测试

1. 移动端首页功能测试

表6-4 移动端首页功能测试

6.4系统界面及窗体测试

表6-5系统界面及窗体测试

7结论

        本篇文章介绍了移动端app和地理位置信息打卡签到的校园班级考勤系统的开发。相比传统的课堂点名方式，该系统具有更高的准确性和效率。之后的课堂考勤系统开发可以在本系统的基础上进行优化和拓展，以满足高校日常考勤中可能出现的其他问题。

本次毕业设计的的重点主要有以下几点：

(1) 系统整体分为PC端和移动端

        PC端主要是管理员对教师信息，学生信息，班级信息，学生假条以及班级打卡信息的管理，各部分都包括增删查改等操作。

移动端分为教师和学生两个身份，默认展示的是教师端页面，然后根据用户登录的身份来展示不同的页面和功能。

(2) 移动端用户注册与登录模块

        本系统用户分为教师和学生，教师不需要注册，管理员在后台主动添加教师信息就可以了，这样教师就可以直接登录了。学生如果没有账号需要先注册，本系统使用的是邮箱发送验证码是方式来进行注册。在登陆时，选择身份，根据学生和教师的不同身份，系统自动展示不同界面已经赋予不同权限，并且是必须选择身份才可以进行后续使用。在选择身份之后不可更改。

(3) 定位和签到码结合的方式打卡

        该模块主要实现了基于地理位置信息结合课堂签到码的学生签到功能。当老师发起课堂签到后，系统会根据老师发起签到的地理位置信息与学生签到的位置信息进行比对，并且老师为学生提供系统生成的签到码，从而确定是否允许学生签到成功。该功能的实现提高了签到的准确性和安全性，同时也提高了教学效率。

1. 李钟石，蔡珉官．“互联网+”环境下高校课堂的快速签到应用研究[J]．延边大学学报(社会科学版)，2019，5(02)：83-90．
2. 李湘勤，黄晨华，门戈阳．微信考勤管理系统在高校课堂中的应用——以韶关学院为例[J]．教育教学论坛，2018，37(17)：8-11．
3. 杨永平，曾艺，刘世兴．基于WIFI的高校课堂考勤系统设计实现[J]．信息技术与信息化，2017，11(Z1)：102-10．
4. 郑莹,孟安宁,孙久舒.基于校园一卡通的考试签到系统的设计与实现[J].计算机时代,2017(12):96-99.
5. 彭毅弘．基于iBeacon定位技术的高校考勤系统设计[J]．福建电脑，2018，34(11)：36-37．
6. 吴海龙，柏正尧，武文强．基于STM32和C#的学生考勤系统设计[J]．国外电子测量技术，2017，36(12)：113-116．
7. 方冠男．基于视频流人脸识别的课堂考勤系统的设计与实现[D]．湖北：华中师范大学，2018．
8. 葛偲涵，刘毅，陈健．BLE技术在智能公寓门锁微信小程序中的开发与实现[J]．工业控制计算机，2018，31(06)：112-113．
9. 腾讯公司．2018微信数据报告[EB/OL]．https://support.weixin.qq.com/cgi-bin/mmsupport-bin/getopendays，2019-01-10．
10. 庄鹏．课堂考勤技术的发展历史与未来趋势研究[J]．福建电脑，2019，35(2)：98-100．
11. 张小龙．微信小程序入口在哪？有什么用？[J]．计算机与网络，2017，1(4)：50-51．
12. 蔡海群．微信小程序界面生成的方法及装置[P]．中国专利：CN109710258A，2019-05-03
13. 钱康．对HTTPS加密通信技术的信息安全监管研究[J]．电信技术，2018，19(7)：25-27．
14. 薛云兰，郑海锋，黄嘉浩．基于Spring Boot框架的网络教学管理系统[J]．软件导刊，2020，19(9)：146-151