【《基于小程序云开发的课堂管理系统设计与实现》16000字（论文）】

/34基于小程序云开发的课堂管理系统设计与实现目录TOC\o"1-3"\h\u12101绪论 284421.1选题背景和意义 219691.2课堂管理系统研究现状和分析 3263871.3研究主要内容 4318841.4论文组织架构 558122相关技术和理论 661922.1微信开发者工具 6176192.2微信客户端运行环境 622642.4云开发 719003系统分析与总体设计 9293053.1系统可行性分析 9268513.2需求可行性分析 9233303.3系统主要功能 10203203.4系统结构设计 11285163.5系统数据库设计 11164014系统详细设计与实现 1518064.1云环境的初始化和配置云函数 15259774.2用户模块 16216994.3签到模块 17146434.4指纹识别模块 21161734.5课程模块 23299054.6答题模块 2763655系统测试 30191415.1系统功能测试 30215275.1.1用户模块测试 30121465.1.2签到模块测试 31312625.1.3指纹识别模块 32316995.1.4课程模块 32106825.1.5答题模块 32159695.2系统界面及窗体测试 33161406结束语 34297226.1结论 3458736.2展望 3429403参考文献 35摘要随着我国科技和互联网的发展，手机在我们生活中的应用无处不在，极大的方便了我们的生活。在校园课堂中更是能借助手机软件来实现高效率的管理课堂，但是传统的手机软件在应用方面存在开发难度大，维护成本高，用户留存率低等缺点。而手机中的微信小程序凭借着触手可及的特点，用完即走的理念，无需安装卸载的便捷，能让用户们拥有良好的应用体验，官方文档中提供的API以及网络上丰富的接口，搭配微信提供的云开发服务，节约开发成本，简化了开发流程，极大的拓展微信小程序应用场景和功能。因此，可以通过微信小程序云开发来编写高校的课堂管理系统，让学生和老师更为方便的使用，规范课堂纪律，提高课堂管理效率。关键词：微信小程序，课堂管理系统，云开发1绪论1.1选题背景和意义当今大学生逃课、代课现象屡见不鲜。针对这种不良现象，传统的应对策略是口头点名和现场签到等，但是这种方式通常会占用课堂时间或是同学下课休息时间，影响了正常的教学活动和学生的休息。再者，对于课堂人数众多的课程，这类传统的方法更是难以实行，收效甚微。而基于微信小程序的课堂考勤签到程序不仅能够有效地让学生注册使用，也能提高学生在课堂考勤的效率，同时也综合了课堂互动答题等内容，在给学生用户和教师用户提供了良好体验感的基础上进一步提高了课堂内容的丰富性。课堂考勤和测试的结果往往可以影响到学生的平时成绩，而且也会直接体现于学生的自我约束能力和自主学习意识。2017年1月9日，第一批微信小程序的正式上线，基于微信客户端的小程序能满足简单的基础应用，不需要下载安装即可使用，真正实现了应用触手可及的理念，用户扫一扫或者搜一搜即可打开应用。用户打开小程序之后，可以直接使用本人的微信账号登录，无需另外注册。对于用户而言，微信小程序不仅使用便利，而且体验到的功能也十分丰富。这得利于微信官方文档中为开发者提供的API接口众多，并且也可以调用互联网上发布的其他API接口，不断丰富完善功能，进行更深入的开发。其中调用API接口是微信开发者工具从2.2.3版本提供云开发能力之后便支持的功能。它提出将服务端的所有功能与数据封装起来，开发人员通过调用API来获取这些功能。其中开发人员不需要完全了解接口的方法和具体内容，就可以直接从外部调用。而云开发技术是相对传统开发模式的一种创新型拓展，它提供了云数据库，云函数，云存储，云调用四大基础能力的支持，能让开发者无需搭建自己的服务器就能云开发开发微信小程序和使用微信的云端能力，很好得解决了之前小程序必须使用HTTPS协议开发的问题。云开发为开发者提供了完整的云端支持，能使开发人员专注于前端开发，相应的弱化了后端和运维的概念。开发人员使用互联网平台提供的API接口进行核心业务的开发，实现了微信小程序的快速上线和更新。与传统APP开发相比，微信小程序+云开发轻量级的移动应用开发，有其快速响应、高效部署等优势，可以大大的减轻开发人员的工作强度，在减少开发成本的同时更能有效的提升开发人员的开发效率。相较于目前市面上各类基于软硬件的签到工具，课堂管理小程序的具体特点及研究意义如下：第一、课堂管理小程序应用场景广泛，极具通用性。第二、高效性。极大地减少使用者和管理员的工作量，实现跨平台、多场景高效应用。以微信小程序这个平台为载体，方便快捷、即走即用、速度快，大大提高工作效率。第三、准确、即时、高可信性。第四、后台数据库分析统计。数据直观可靠。本研究主要针对传统课堂管理的弊端，开发了基于微信小程序的考勤与答题为一体的、具有趣味性的课堂管理系统，基于当前十分流行的微信平台进行开发，使用方便、简捷，维护和升级也很容易，旨在提高学生的学习积极性和激发学生的学习兴趣，以及减轻教师考勤的工作负担。经过对系统反复的测试和应用，系统可靠、稳定，证明该系统达到了课堂考勤和提高学生学习积极性的功能需求。1.2课堂管理系统研究现状和分析但这种传统的点名方式也存在着许多弊端，比如课堂学生人数过多，往往一次点名就需要很长时间才能结束，这样不仅耽误了课堂教学的进程，也极大地浪费了学生的学习时间。目前在中国，有许多的高校的课堂管理已经不再使用基于纸质的签名考勤或者单纯的指纹打卡，日趋成熟的基于智能办公硬件的考勤解决方案被广泛应用，比如将员工的人脸提前录入系统，在考勤时刷脸打卡。然而，目前还没有满足国内高校需求的低成本、高便捷的课堂管理系统可以在大多数高校中使用。在现存的研究领域，目前高校课堂管理系统中的考勤设计方法主要有以下几类[1]。一是以手机服务为主的智能管理：如使用微信公众号服务、位置服务、Wi-Fi、实时二维码等。有研究人员基于微信企业号开发出了微信考勤系统并在高校进行应用[2]，从该系统的反馈分析，使用该系统时需要学生预先在微信中添加企业号，通过企业号的窗口进入打卡，操作较为复杂，同时也没有一个很好的提醒系统，很容易出现漏卡的情况，因此这一系统存在课堂管理效率低的现象以及对上课地点有要求等问题，并不能广泛地应用于课堂考勤。二是以智能卡为主的考勤：有研究人员设计了基于校园一卡通的课堂签到和考试签到系统[3]。这种参与方式更适合纸笔考试和手机无法携带的不同情况。当学生将自己的考勤卡带到特殊的打卡工具中进行检查时，他们可以轻而易举地通过签到打卡。尽管此策略在考试活动中更有用，但与参与相比，还有其他选择。三是以生物特征识别为主进行的考勤：这类考勤主要通过识别人体的生物特征，如指纹和人脸这种能够唯一识别个体特征。有研究人员提出了使用指纹识别技术进行课堂考勤的方法[4]，但该方法的实现基于特定设计的指纹识别设备。基于虹膜识别技术的课堂考勤虽然保证了较高的准确率，但是不仅会带来较高的设备成本，还会耗费一定的准备时间[5]。人脸识别考勤相对来说比较易用，学生只需打开智能手机的摄像头并且联网即可完成签到，降低了系统的使用成本。在生物识别的范畴中，虽然人脸识别已经在飞速发展，相对于指纹识别更加便利，但是在实际的小程序应用中仍存在用户信息隐私性和获取应用资质等诸多问题，所以目前指纹识别还是占据较大的市场。综合考量上述三类考勤的设计优缺点，如果想要在低成本的条件下实现对学生进行准确的课堂考勤，就需要结合硬件设备和生物识别的优点，而目前在人脸识别领域的实践中仍存在一些困难。学校中平日的课堂管理也能借助手机软件，自此迄今，我们常用的软件如学习通、超星尔雅、雨课堂、智慧树等。教师会借用这些应用程序要求同学线上答题。这些平台均有各自的优势和特色，高校教师可以根据课程内容、学习进度等具体情况因材施教，为学生开展对应的教学活动，但是这类手机软件的缺点也很明显：不同的老师由于习惯差异会使用不同的管理平台，作为学生需要在手机中安装多个手机软件来配合教师工作，这势必将占用许多资源。从另一角度来说，如果手机软件没有及更新，学生端的使用就会出现课堂界面登录错误，课堂作业提交失败等情况。1.3研究主要内容以高校课堂智能管理的需求为切入点，本文将微信小程序可以被便捷地获取和传播等优势与基于微信小程序云开发方法，调用相关API接口三者相结合，解决了高校传统课堂管理上纸质考勤，课堂测试答题效率不高的问题，基于微信小程序云开发的课堂管理系统，实现了课堂签到和课堂答题的功能。本文的主要研究内容如下：1、确定系统的设计策略，即系统的需求分析，根据项目开发的需求确认系统所要实现的功能。课堂管理系统是通过使用官方提供的微信开发者工具，后台使用官方提供的云开发技术来搭建开发。通过对功能的需求分析来确认所使用的技术能否完成课堂管理系统的实现。2、在确认好本设计使用到的相关技术之后，完成对使用的用户角色划分，将用户分为学生和教师，并且根据学生和教师的角色划分确定相应的功能模块。3、针对考勤签到：为了对上课学生的身份进行确认，使用口令签到加指纹识别，能在一定程度上确保规避出现学生上课代签到的情况。4、针对课堂管理：教师上通过云端传试卷作为课堂测试，学生从云端上下载在线查看试卷并作答，能在一定程度上确保规避出现学生逃课等情况。5、完成程序及界面的之后，通过具体的测试找出程序和界面中存在的缺陷和问题。并根据出现的缺陷和问题对代码进行优化和修改。如果系统经过测试后没有任何功能问题，就可以将系统上线正式操作使用。6、针对网络通信过程中可能存在的密码等关键信息明文传输被拦截读取的不安全因素，本文在客户端和云端信息交互过程中使用HTTPS和SSL加密传输，有效的防止了信息泄露以及被篡改。1.4论文组织架构本文共分为六章，各章节的内容概述如下：第一章：绪论。介绍了课题的研究背景及研究意义、现状和本文所做的工作等。第二章：相关技术和理论。介绍了所做系统相关知识简介和系统的运行环境。第三章：系统分析与总体设计。介绍了前期所做的系统的需求分析和可行性分析。第四章：系统详细设计与实现。介绍了小程序所用到的用户模块设计，签到模块设计，答题模块设计，课程模块设计，后端数据库设计。第六章：系统测试。介绍了针对系统的测试方法与相应的测试结果。2相关技术和理论2.1微信开发者工具微信小程序遵循传统前端框架开发界面，后端服务器语言提供基础支持的模式。通常微信小程序的前端设计主要有其特有的WXML，WXSS，JavaScript（JS），JSON四个部分。这四个部分中WXML类似于网络编程中的HTML，WXML（WeiXinMarkupLanguage）是小程序的常用语言，结合基础组件、事件系统，可以构建出页面的结构。WXSS近似于网络编程中的CSS。WXSS(WeiXinStyleSheets)是一套样式的语言，能实现一些标签的一些简单替换，和CSS一样都是通过页面调用的方式实现，用于描述WXML的组件样式。JSON是轻量级的数据结构，它基于JavaScript语法的子集，即数据的对象表示。JavaScript的缩写为JS，是一种计算机脚本语言，主要在Web浏览器（也即客户端）解释执行。框架的核心主要是两个视图层和一个逻辑层。视图层使用微信自行开发的WXML和WXSS语言进行开发，基本可以看作是XML和CSS的缩小版。逻辑层使用JS进行开发，提供一系列数据的绑定、传输和事件系统。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。逻辑层对应的是JS文件，在每个页面的JS文件中，系统都提供了一系列的方法。开发步骤也较为便利，配置开发环境，只要下载开发者工具就可以了。安装开发者工具以后，使用微信扫码登录，自行填写相关的条目之后就可以进入开发。2.2微信客户端运行环境微信小程序实现在三端上运行：iOS（iPhone/iPad）、Android和用于调试的开发者工具。这三个终端在脚本的执行环境以及用于渲染非原生组件的环境上存在很大差异：在iOS上，小程序逻辑层的JavaScript代码在JavaScriptCore中运行，视图层是由WKWebView来传递的；而在旧版本的Android上，小程序逻辑层的javaScript代码在X5JSCore中运行，视图层是由X5基于MobileChrome57内核来渲染的，新版本的Android中，小程序逻辑层的Javascript代码在V8中运行，视图层是由自行研发的XWeb引擎基于MobileChrome67的内核来渲染的；在开发工具上，小程序逻辑层的javascript代码是运行在NW.js中，视图层是由Chromium60Webview来渲染的。2.3微信小程序架构虽然微信小程序的表现形式是半NativeApp，半WebApp，但本质上属于C/S架构。在C/S结构中，应用程序分为两部分：服务器部分和客户机部分。服务器部分是多个用户共享的信息与功能，执行后台服务，如控制共享数据库的操作等;客户机部分为用户所专有，负责执行前台功能，在出错提示、在线帮助等方面都有强大的功能，并且可以在子程序间自由切换。C/S架构图如图2.1所示：图2-1C/S架构图与C/S架构相对应的是B/S架构，即浏览器和服务器架构模式。在这种架构下用户的工作界面是通过浏览器来实现，极少部分事务逻辑在前端（Browser）实现，主要的事务逻辑还是在服务器端（Server）实现。其中两种架构的区别在于网络不同，安全性不同和便捷性不同。C/S架构主要用于内网，建立在专用的网络上，小范围里访问；它的安全性较高，封闭式网络不容易收到他人的网络入侵；支持的便捷性较低，需要安装特定的客户端访问。B/S架构主要用于外网，可通过广域网进行访问；它的安全性较低，容易受到他人的网络入侵；支持的便捷性较高，不需要安装特定的客户端，通过网址访问。2.4云开发数据库设计是整个系统中最为基础但是也是最重要的一部分，本系统涉及的数据库主要有两个实体，分别为用户实体和课程实体。其中每一个实体的背后都有一个细分的云端数据库表，所有细分的数据库表汇总构成总体的数据库。在小程序中调用数据库，可以对其数据进行更加高效的管理，基于课堂管理小程序，我们可以利用数据库来储存课程信息、缺勤学生的名单和学生的答题情况。系统采用三层架构模型，分别为UI层：客户端界面显示与用户进行交互业务；逻辑层：UI层与数据层的中间层，用于将数据层的数据传递给UI层，同时对数据进行一定的过滤、处理，使U获得更好的展示效果。数据层：作为UI层的数据源，提供数据支持。微信提供依赖于腾讯云的云服务器，这对用户使用小程序进行后台非常便利。截至目前，云开发已经整合了云数据库，云函数，云存储和云调用。云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的CPU内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。一个云函数的写法与一个在本地定义的JavaScript方法无异，代码运行在云端Node.js中。当云函数被小程序端调用时，定义的代码会被放在Node.js运行环境中执行。我们可以如在Node.js环境中使用JavaScript一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端SDK搭配使用多种服务，比如使用云函数SDK中提供的数据库和存储API进行数据库和存储的操作。云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的openid，开发者无需校验openid的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该openid。云开发提供了一个JSON数据库就是云数据库。顾名思义，数据库中的每条记录都是一个JSON格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个JSON数组，数组中的每个对象就是一条记录，记录的格式是JSON对象。云存储提供了一块存储空间，无需使用者自建存储和CDN，提供了上传文件到云端、带权限管理的云端下载能力。开发者可以在小程序端和云函数端通过API使用云存储功能。并在云开发控制台可视化管理。云调用是云开发所提供的的基于云函数使用小程序开放接口的能力，目前覆盖使用场景由：服务端调用，开放数据调用，消息推送。在本设计中主要使用到了服务端的调用。云开发原理图如图2.3所示：图2.3云开发原理图3系统分析与总体设计3.1系统可行性分析本系统的设计旨在迎合高校日常课堂考勤需求，基于微信小程序结合前端技术和云开发技术，设计出一种更为高效的课堂管理方式。就本系统的设计能否行得通并且有效解决高校课堂管理问题，下面从三个方面进行详细分析。技术可行性：在软件部分，本系统前端部分基于微信小程序开发平台、使用Javascript语言和wxml语言进行开发。使用微信小程序开发工具可以方便的进行代码编辑和编译调试。后端部分使用到的是腾讯提供的云开发技术，同时微信小程序还开放了功能齐全的应用程序开发接口供开发者调用，其中包括了通过小程序对指纹识别模块和答题模块的调用，可以实现认证本机支持的stoer生物识别方式和上传下载文档等本系统需要的功能。硬件方面，本系统基于微信，使用了手机指纹识别模块，使用过程中需要网络连接，保证了本系统的技术可行性。经济可行性：开发过程中无需使用收费开发软件，平台提供的免费服务基本可以满足一百名左右学生的班级考勤。本系统的使用环境只需要是普通的智能手机即可，无特定系统和手机型号要求，无需其他辅助设备。在使用过程中除少量流量消耗外不会有另外的成本产生。操作可行性：使用本系统进行考勤只需教师和学生打开微信扫描小程序二维码，授予小程序所需的权限即可。使用过程中通过教师设置考勤口令以及进行指纹确认即可完成考勤，教师端可以方便的查看签到和缺勤人数和名单。3.2需求可行性分析需求分析是衔接可行性分析与系统设计的重要活动。需求分析环节将阐述本系统所实现的功能需求和非功能需求。本系统的功能设计主要是面向高校师生的、为了解决传统高校课堂考勤效率低和无法避免代答到的难题。使用本系统，高校教师可以通过手机微信开启签到，随时可以停止签到，并且可以方便地查看签到统计结果。课堂考勤是学校教学管理中的一大重要组成部分。学生课堂考勤与企业的考勤的不同之处主要在于出勤的频率不同，学生的课业较为不统一，有别于企业单位朝九晚六并通常地点不会改变的情况，再者学校的学生数量更大，班级繁多，课堂时间也有不同的可能性。比如临时的调课就会使得学生考勤发生更改。因此，课堂管理小程序的系统设计应该满足以下几点需求：（1）考勤系统应该以不同课时的上课时间作为依据来划分考勤时间；（2）实现一键考勤，提高课堂效率；（3）考勤系统的稳定性和识别精度应符合性能测试；（4）学生群体作为课程考勤的主要对象，小程序不应只向学校员工展示考勤信息，考勤签到的结果也应该反馈给学生，从而提高学生的自律意识。进入小程序需要用户选择自己的身份，选择身份之后如果是未注册用户需要先进行注册，注册过程需要输入自己的用户信息。教师身份用户的注册需要有权限限制。教师登录小程序之后进入管理界面，可以开启考勤和关闭考勤、以及分别查看已签到和未签到的学生人数和名单。该系统就是针对课堂考勤的特点设计了一款基于微信小程序的课堂管理系统，只要用户安装了微信客户端，即可方便地进入小程序进行签到，同时小程序又有能与APP比肩的友好的用户体验。3.3系统主要功能该课堂考勤管理系统主要包括教师和学生两类用户。教职工用户：任课教师是考勤过程的主要参与者之一，同时也是作为考勤发起人的角色。除了系统地创建班级以及添加课程外，教师还可以查看每位同学的出勤信息。任课教师主页的课程信息显示了授课的课程信息，教师可以利用系统来根据学生的出勤情况和课堂答题情况统计平时成绩；学生用户学生是课程考勤的签到人员，需要在考勤系统上注册个人信息，确保一人一号，在课程时间登入小程序进行签到，也可以在考勤管理系统上察看自己的出勤情况和课上答题的正确率的查询。学生的主要用例包括课程管理、查看考勤。系统功能结构图如图3.3所示：图3.1系统功能结构图3.4系统结构设计系统的总体架构设计关乎整个系统的开发效率、开发难度、后期运行维护等问题，所以一个系统的框架设计是一个系统开发前必须重视的一方面。本系统采用微信小程序作为客户端，利用微信小程序开发者工具设计一个课堂管理系统小程序，用于课堂考勤和答题。开发一个基于微信的考勤管理系统，有利于实现高效、准确、方便、有序的出勤管理。该系统的用户角色主要是学生和任课教师。开课前，任课教师创建相关课程，并导入该门课程的学生名单。每次上课前，任课教师生成签到口令，包含签到时效以及位置信息；关注课堂管理小程序的学生可以通过小程序输入签到口令，进入到签到状态完成考勤打卡。在课程中，任课教师可以发布试卷以供学生在线答题，答题记录在学生完成试卷后即可查看，实现“即教即查”。课后，学生可通过微信小程序查看课程的签到情况和答题记录，做到数据的公开透明。该小程序的数据需求包括用户信息、课程、课程对应的教师数据、以及每个课程的学生名册数据、签到条目数据集以及签到记录状况等。在功能需求上，课堂管理小程序对学生和教师两个角色分别提供不同的服务，教师发布课程签到，编辑课表，浏览签到记录。学生签到时通过登录小程序进入签到界面，在输入口令正确的情况下成功签到，手机有指纹识别的用户还可以通过指纹签到。任课教师在发布签到前应选择对应的课程考勤名册，在编辑课程界面可以对课程进行添加和删除的操作，从课程界面点击对应课程即可浏览相应的学生名册。用户进行签到点名时，首先由教师在首页发布签到，设置相应的签到信息后学生端口接收签到请求，待签到结束后进行确认。教师发布签到时，选择对应的课程，设置签到的有效时长和签到口令。学生进入签到界面，检测是否为此课程学生，在确认无误后输入相应的口令进行签到，签到成功时记录将暂时添加到考勤记录表中，等待教师确认时进行更。学生进入签到界面完成签到后不可重复提交打卡，在教师设定的时间截止后将关闭签到。首先，对该学生学号进行检测，查看其是否在课程的考勤表中。此段数据由云端数据库记录。学生也可以通过考勤记录查看此次签到情况；教师除查看考勤外还另有更改学生出勤状态的功能。学生在主页点击课程可以浏览自己所参与的课程的缺勤次数；教师在签到界面可选择想查看的课程的学生考勤情况，点击即可自动跳转到该门课程的出勤情况页，包括存在考勤异常的学生的学号、姓名和缺勤次数等关键信息。在记录浏览这一模块中，学生可以在主页点开签到的界面后，将显示课程中每个学生的学号、姓名和出席状态。确认信息后提交，获取页面上的出勤记录数据，最后存储到汇总的签到表中。3.5系统数据库设计数据库是按照数据的结构来进行组织、存储、管理数据等操作的仓库。数据库系统由数据库、数据库管理系统、应用系统和数据库管理员构成。一个功能完善的数据库对于系统有锦上添花的作用，也是一个项目的灵魂，数据库设计得合理，开发工作也会变得简捷有序。编写数据库前端应用程序可以使得人和数据库更有效地交互，增强数据处理的能力。在为系统设计数据库之前，我们需要根据系统功能需求，分析出应该有哪些重要信息需要被存储，最终系统应该包含哪些重要的数据库表。微信小程序自带的云数据库的优点在于，不用搭建服务器或后端就可以直接调用数据库。数据库中的E-R图即实体-关系图，用于描述现实世界的事物及其相互之间的关系，是数据库概念模型设计的主要工具。实体型之间的联系分为一对一、一对多和多对多三种类型。从本系统的数据需求出发，本节将对本系统数据存储设计方法进行介绍。本系统涉及的数据库实体可分为两个部分，用户实体和课程实体。本设计的实体E-R图如下所示：用户E-R图，如图3.2所示：图3.2用户E-R图课程E-R图如图3.3所示：图3.3实体E-R图根据用户实体和课程实体设计两个数据库表，将用户实体设计名为user的表，如表3.1所示：表3.1user表字段名称类型字段说明IdString主键_openidString用户的唯一idNameString用户名称NumString用户学号/工号RoleString用户标识ClistArry课程将课程实体设计名为kecheng的表，如表3.2所示：表3.2kecheng表字段名称类型字段说明_idString主键_openidString用户的唯一idbuilTimeString创建时间kaoqinnumber考勤标识lessonString课程名称listArry课程signKeyString考勤口令siteString授课地点teacherString授课教师timeString上课时间4系统详细设计与实现4.1云环境的初始化和配置云函数本系统是基于小程序云开发所设计，在功能模块中需要用到云开发中功能所以在正式编写功能模块之前先完成云环境的初始化搭建。云环境初始化代码如下所示：onLaunch:function(){//初始化云环境console.log('开始')wx.cloud.init({env:'ceshi-1-7gle2afg900256b5'，traceUser:true})this.getOpenid();},一个云函数的写法与一个在本地定义的JavaScript方法无异，代码运行在云端Node.js中。当云函数被小程序端调用时，定义的代码会被放在Node.js运行环境中执行。我们可以如在Node.js环境中使用JavaScript一样在云函数中进行网络请求等操作，配置云函数代码如下所示：constcloud=require('wx-server-sdk')cloud.init()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext()return{event,openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,}}4.2用户模块用户进入系统之后首先需要在欢迎界面选择自己的身份。选择自己的身份时会触发一个按钮点击事件，未注册的用户将跳转注册界面，对于已注册用户则无需再次注册，并且在下次使用中跳过身份选择直接按所选身份登录。用户登录流程图如图4.1所示：图4.1用户登录流程图学生注册的相关代码为：if((this.data.sname&&this.data.snum)!=''){//判断输入是否有效db.collection('user').add({//向数据建库添加data:{name:this.data.sname,num:this.data.snum,role:2//设置用户标志},success:res=>{//添加成功wx.setStorageSync("identify","student");//设置学生身份wx.switchTab({//跳转学生界面url:'/pages/student_index/student_index'});}})教师注册的关键代码为：if((this.data.tname&&this.data.tnum)!=''){//判断输入是否有效db.collection('user').add({//向数据建库添加data:{name:this.data.tname,num:this.data.tnum,role:1//设置用户标志},success:res=>{//添加成功wx.setStorageSync("identify","teacher");//设置教师身份wx.switchTab({//跳转教师界面url:'/pages/student_index/student_index'});}})该模块利用了云开发在授权微信所提供的数据库和API接口db.collection().add中提供的信息库内容语法。db.collection（）.add是添加到信息库的内容。4.3签到模块教师在创建好课程之后，打开课程页面，可以在课程界面开启考勤，关闭考勤和查看已签到人数和未签到人数。教师需要先输入考勤口令，点击发起考勤，跳转至签到名单界面，表示考勤已成功发起。如果未输入考勤指令直接点击发起考勤，则会提醒教师先输入考勤口令。在签到名单界面中，教师可以随时点击按钮来停止考勤，同时根据数据库中添加此门课的所有同学，显示已签到学生的信息（如姓名，学号，签到时间）和未签到学生信息（如姓名，学号）,教师签到流程图如图4.2所示。图4.2教师签到模块流程图在学生界面中点击某一课程进入课程界面，在教师发起考勤之后先输入考勤指令，点击签到，则提示签到成功，记录为一次签到。如果未输入考勤指令点击签到，会提醒先输入考勤指令。如果教师未发起签到，在点击课程的时候会提醒学生教师尚未发起签到。学生签到流程图如图4.2所示图4.3学生签到模块流程图教师设置考勤口令以及学生输入考勤口令的相关代码如下：if(that.data.signKey!=null&&that.data.signKey!=''){if(that.data.file){constfile=that.data.file[0];varres=awaitthat.upLoadFile(file.path);console.log(res);file.path=res.fileIDdb.collection('kecheng').doc(that.data.lessonid).update({data:{kaoqin:1,file:file,signKey:that.data.signKey},success:ress=>{console.log(ress);wx.redirectTo({url:'../signlist/signlist?lessonid='+that.data.lessonid+''});}})}db.collection('kecheng').doc(that.data.lessonid).update({data:{kaoqin:1,signKey:that.data.signKey},success:ress=>{console.log(ress);wx.redirectTo({url:'../signlist/signlist?lessonid='+that.data.lessonid+''});}})}else{wx.showToast({title:'口令为不能为空',icon:'none'})本模块用到了微信官方文档中云开发所提供的数据库脚本语法db.collection().doc().update。用于更新课程的考勤状态kaoqin：1，和签到口令signKey：that.data.signKey。首先判断教师端设置的考勤口令和学生端输入的考勤口令是否为空，如果为空则调用API接口wx.showToast用于显示消息弹窗，提醒用户口令不能为空。如果不为空就获取用户输入的考勤口令，输入成功后返回到相应的课程页面。4.4指纹识别模块在教师发起签到之后，学生端就可以开始进行签到操作。为保证学生签到的唯一性和准确性，在输入教师设置签到口令之前，点击签到按钮会跳转到指纹识别的界面。学生进行指纹识别操作，指纹识别成功之后才能进入输入签到口令完成签到。指纹识别模块相关代码如下：if(wx.canIUse("checkIsSupportSoterAuthentication")){//判断此接口是否可用wx.checkIsSupportSoterAuthentication({success:function(res){console.log('本机支持的SOTER生物认证',res);varkeys=[];for(varkeyinres){keys.push(res[key])}console.log(res)that.setData({print:keys//页面中输出支持情况})if(res.supportMode=="fingerPrint"){wx.startSoterAuthentication({requestAuthModes:['fingerPrint'],challenge:'123456',authContent:"请用指纹签到",success:function(res){console.log('js',res);//结果集varresult=JSON.parse(res.resultJSON);console.log(result);},fail:function(res){that.setData({c:"用户取消了指纹识别，或调用出现错误"})}})}else{that.setData({b:"当前该设备不支持指纹识别"}本模块使用到了微信官方文档中提供的API接口wx.canIUse，wx.checkIsSupportSoterAuthentication和wx.startSoterAuthentication。其中wx.canIUse是用来判断小程序的API，回调，参数，组件等是否在当前版本可用。wx.checkIsSupportSoterAuthentication是用来获取到本机支持的soter生物认证方式。首先将本机支持的stoer生物认证方式作为作为结果返回，再将页面面中输出支持情况通过for循环赋值到给keys数组中。If判断返回的支持模式是否为指纹识别，如果是，就调用wx.startSoterAuthentication开始stoer生物验证，指纹验证成功之后跳出，输入签到口令完成签到。指纹模块流程图如图4.4所示图4.4指纹模块流程图如果本机不支持指纹识别，则跳出弹框提示用户不支持指纹识别跳出并直接输入签到口令来完成签到。4.5课程模块教师登录小程序后，在我的界面中有添加课程按钮。点击添加课程，教师通过输入课程相关信息来新建课程。添加课程代码如下：db.collection('kecheng').add({data:{lesson:that.data.slesson,time:that.data.stime,teacher:that.data.steacher,site:that.data.ssite,builTime:util.formatTime(newDate()),kaoqin:0,list:[]},其中data所挂载的数据lesson记录课程名称，time记录上课时间，teacher记录授课教师，site记录教师上课地点，builTime为创建本次课程的时间，创建时间并非教师手动输入而是系统传递util.formatTime参数自动记录，kaoqin记录课程是否开启了签到，默认参数0为关闭，参数1为开启。List创建一个新的列表用来存储选择本节课程所有学生的名单。教师新添加的课程会在课程首页中的首页界面中显示，可以查看所有自己所创建的课程，并且可以在我的界面中的历史考勤查看所有自己曾经发起过的考勤。教师也可以选择删除自己所创建的某一课程。在课程界面中长按某一课程会跳出删除课程弹框，会询问是否要删除本课程。点击确认会从数据库中删除此课程相关的所有信息和记录。删除课程相关代码如下：db.collection('kecheng').doc(lessonid).remove({success:ress=>{console.log('进入',ress);db.collection('kecheng').get({success:resss=>{console.log(resss);that.setData({student_lesson:resss.data})},使用数据库脚本db.collection().doc().remove确认要删除的课程id，把课程传递给ress，再通过db.collection().get根据ress获取到相应的学生课程信息，将学生课程信息传递给resss，最后再将课程的全部信息resss从数据库中删除。教师课程模块流程图如下图4.4所示：图4.4教师课程模块流程图在学生登录小程序后，在课程首页中首先会从数据库中查询所有课程信息，如果数据库中有课程信息存在则会全部显示，如果不存在则显示为空。全部课程选项中显示的是所有老师创建的全部课程，点击某一课程可以将课程添加到我的课程中，我的课程选项中显示的是自己所选的全部课程。添加课程相关代码如下：if(this.data.ismine==false){wx.showModal({title:slesson,content:'是否添加到"我的课程"?',success:function(res){if(res.confirm){db.collection('user').where({_openid:app.globalData.openId}).get({success:ress=>{console.log(ress);vardata=ress.data[0];console.log(data);if(data.clist){console.log('进入');for(leti=0;i<data.clist.length;i++){console.log('进入循环');if(data.clist[i]==lessonid){wx.showToast({title:'你已经添加过了',icon:'none'})return;}}首先判断用户是否在教师界面选中的课程，如是不是就能执行下一步添加课程逻辑。添加课程的相关代码使用到了wx.showModal这一API接口，用来显示模态对话框，询问学生是否要将点击的课程添加到我的课程中，如果学生点击确认添加，就会通过数据库脚本语言db.collection().where({}).get获取到课程名单data.clist[]，如果在课程名单中存在了课程id就会提醒学生选中的课程已经添加过了。学生课程模块流程图如下图4.5所示：图4.5学生课程模块流程图4.6答题模块在教师界面中，点击某一课程进入课程界面，再点击上传按钮上传pdf或word文件作为课堂习题或者测试到云数据库中，再次点击即可查看自己上传的文件。上传文件相关代码如下：upLoadFile(e){console.log('upLoadFile接收到的',e);letsuffix=/\.[^\.]+$/.exec(e)[0];console.log(suffix);returnnewPromise((resolve,reject)=>{//上传到云存储wx.cloud.uploadFile({cloudPath:newDate().getTime()+suffix,//在云端的文件名称filePath:e,//临时文件路径success:res=>{//resolve作用提示小程序请求已结束resolve(res)//上传成功后的路径},fail:err=>{reject(err)//上传错误}})});},在学生界面中，进入课程界面点击答题按钮，如果教师暂时并未上传文件，则会提醒学生教师还未上传试卷。如果教师已经上传，会进入答题界面，显示的是本课程中该教师所上传的所有文件，点击其中的文件，小程序就会下载该文件到手机中并被打开查看。下载相关代码如下：openfile(e){letpath=this.data.file.path;wx.cloud.downloadFile({fileID:path,success:ress=>{console.log(ress.tempFilePath)wx.openDocument({filePath:ress.tempFilePath,success:(res)=>{console.log('读取成功',res)},fail:(err)=>{console.log('读取失败',err)}})},fail:err=>{}})},答题模块流程图如图4.6所示：图4.6答题模块流程图本模块使用到了微信官方文档中提供的云开发功能wx.cloud.uploadFile用于将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写，wx.cloud.downloadFile用于将云存储空间上的文件下载至本地资源。调用了微信官方文档中提供的API接口wx.openDocument新开页面打开文档。5系统测试本节将通过人工或自动手段对本系统的功能和界面在运行过程中及运行结果的表现来检验系统是否符合设计需求。根据本系统应用场景和特点，本节系统测试主要使用动态黑盒测试方法进行。将整个系统分为各功能模块进行单元功能测试，单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。如果单元测试通过，说明我们测试的这个函数能够正常工作。如果单元测试不通过，要么函数有bug，要么测试条件输入不正确，总之，需要修复使单元测试能够通过。如果正在使用函数式编程，一个单元最有可能指的是一个函数。单元测试将使用不同的参数调用这个函数，并断言它返回了期待的结果；在面向对象语言里，下至一个方法，上至一个类都可以是一个单元（从一个单一的方法到一整个的类都可以是一个单元）。这种以测试为驱动的开发模式最大的好处就是能够确保一个程序模块的行为符合我们设计的测试用例。这样在将来修改的时候，可以极大程度地保证该模块行为仍然是正确的。单元测试的优势就是可以有效地测试某个程序模块的行为，提供未来重构代码以信心保证。在进行单元测试时，要注意编写的测试用例要覆盖常用的输入组合、边界条件和异常，但是单元测试通过了并不意味着程序就没有bug了，所以在单元测试之后还进行了集成测试。集成测试在单元测试的基础上，将程序模块做进一步的整合来进行集中的测试，集成测试是检验程序单元或部件的接口关系，逐步集成为符合概要设计要求的程序部件或整个系统。5.1系统功能测试5.1.1用户模块测试在进行用户模块测试之前，首先应该明确使用本小程序的用户的角色，以及他们的在使用小程序中的区别和对于小程序的需求，在本小程序中，包含两类角色，即教师和学生。用户能否成功注册并在之后的使用中正确进入相应的模块。对于教师来说，该角色能够添加课程，对相应的课程进行课堂管理的一些相关操作。对于学生来说，该学生能完成的功能有在线签到和答题功能。为了确保课堂考勤签到小程序功能能够正确实现并且有序运行，本系统在设计过程中以微信用户为唯一的标识。通过获取微信用户权限后与后台数据库进行匹配系统与学生的openid进行自动绑定确保页面的自动登录。同时在教师用户与学生用户在第一次登录时需要输入教师工号和密码、学生学号和密码，以此作为“密匙”，在登录之后系统自动形成用户ID并会识别用户，并且设立每个用户的数据库。在这个模块主要测试选择不同的身份进行登录的时候是否能进入到不同的界面，以及用户的个人信息在数据库中的储存情况。用户模块具体测试项目如表5.1所示：表5-1用户模块测试表序号测试内容用例数量测试结果1选择学生或教师身份，能否弹出注册窗口15通过2用户第一次进入小程序，能否打开选择身份页面30通过3用户在第一次成功注册后能否进入相对应的页面15通过4注册界面能否获取用户信息并存入后端数据库与用户名进行绑定30通过5用户再次进入小程序时，是否略过选择身份界面，直接进入相对应的用户界面15通过5.1.2签到模块测试签到模块也要根据登入用户的角色差异区分不同的操作，教师在其登录之后，可以通过匹配课程发起相应的签到，在教师端口发起签到后，学生接收到签到请求，否则小程序会提醒学生教师未发起签到。在签到完成后，教师可以选择停止签到，同时学生在教师停止签到考勤之后就不再能够打卡，这样也能够有效避免学生上课迟到的问题。由于教师学生做到一人一号登录，在以规定签到时间的限制条件下，可以建立有序的考勤打卡，学生代签到的问题也能得到很好的解决。签到模块具体测试项目如表5.2所示：表5.2签到模块测试表序号测试内容用例数量测试结果1教师界面能否正常发起签到20通过2学生界面能否正常输入考勤口令签到20通过3教师界面能否正常停止签到20通过4学生在老师停止签到后能否继续签到20通过5学生在老师未发起签到时能否弹出未发起签到提醒并返回界面20通过6教师在签到的过程中能否实时查看已签到学生和未签到学生的相关信息20通过7教师能否查看所有自己发起的签到记录20通过8学生能否查看所有自己成功签到的记录20通过5.1.3指纹识别模块在本程序设计中，如果学生用户使用的手机支持指纹识别功能，就可以利用指纹确认身份后来完成签到。针对无法完成指纹识别的设备，小程序中也会给出相应的提示，然后跳转至口令输入打卡。指纹识别模块具体测试项目如表5.3所示：表5.3指纹识别模块测试表序号测试内容用例数量测试结果1打开考勤后能否先提示指纹认证20通过2手机不具备指纹识别功能的是否提示不支持20通过3指纹识别是否能够成功20通过4指纹输入成功后是否进入输入考勤口令界面20通过5在提示不支持指纹识别之后是否能正常进入输入考勤口令界面20通过5.1.4课程模块教师对于课程有管理作用，可以对课程进行增删操作。学生可以查看所有课程，也可以查看自己所修的课程。对于本模块的测试主要集中于任课教师的操作是否能正确反映在数据库中，新建或者删除的课程是否实时同步到学生端口。课程模块具体测试项目如表5.4所示：表5.4课程模块测试表序号测试内容用例数量测试结果1教师能否在我的界面中新建课程20通过2教师长按选中的课程能否删除课程20通过3学生点击课程后能否添加课程20通过4学生能否在全部课程界面中查看所有的课程20通过5学生能否在我的课程界面中查看所选的全部课程20通过6学生能否添加已经添加过的课程20通过5.1.5答题模块答题模块主要流程是任课教师将试卷上传到云数据库中，学生可以通过小程序