基于微信小程序的课程在线测试系统

张沈梅 孙昊 王玲 成甜甜 祖兆研

摘要：微信小程序是最近兴起的一种程序开发和使用方式，将微信小程序和课程在线测试系统相结合，教师能够在线管理试卷和考试，学生利用微信进入测试系统，查看错题或进行课堂小测，考试提交后，教师获得学生的成绩。该应用前端采用微信自定义组件和样式，后台采用Java语言编写，使用Springboot和Mybatis框架搭建，前后端交互部分使用微信小程序定义的API。数据库使用Mysql平台和workbench图形化界面，SQL语句构建。

关键词：微信小程序；在线测试系统；自定义组件

中图分类号：TP399 文献标识码：A 文章编号：1009-3044（2018）32-0082-03

Abstract：Mini program in the Wechat is a newly developed method of developing and using the program， combining the Mini small program in the Wechat with the online test system of student achievement. Teachers can manage test papers and exams online. Students use WeChat to enter the test system， check the wrong examination questions or do a small test. After the examination is submitted， the teacher gets the students' achievements. This application used WeChats component and styles， the background is written by Java， used springboot and mybatis framework， and the interaction part of the front and back end uses the WeChat small program defined application program interface（API）. The database uses MySQL platform and workbench graphical interface， uses structed query language（SQL） statement construct.

Key words：Mini program in the Wechat；Online Test System；WeChats component

如今微信已是亚洲地区最大用户群体的移动即时社交通信软件，并且微信已不止社交这么简单，它包含了生活、支付、娱乐、媒体等人们生活中经常用到的多种服务。第一个微信小程序于2017年1月问世，便是利用微信官方提供的服务接口而生的最新的应用技术。[1]微信的这项功能是开放申请的，无论是个人还是政府、媒体或其他组织都可以申请注册并开发小程序，并且微信官方提供了一套专门的开发工具给开发者。微信的小程序和订阅号、服务号和公众号是并行体系，它们有些像，但又不一样。微信之父张小龙表示：现在太多人做公众号而非APP，于是导致现在微信公众号变成了一个媒体化的平台，但是我们的本意并非如此，我们想要提供服务而不是传播推广信息，于是就有了小程序。在手机应用层出不穷且手机存储能力有限的今天，微信小程序作为一种轻度云端应用正好符合了目前人们的需求。根据微信官方的说法，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。[2]应用将无处不在，随时可用，但又无须安装卸载。可以说未来随着网络和云的发展，手机应用程序将不再局限于本地模式，而是逐渐向着云端体验进化。[3]

关于在线测试系统，现在的教育方式趨于多元化，不再局限于教室内面对面单一的教学。对学生成绩的评定，也不仅仅用期末考试成绩来衡量，平时成绩和出勤率越来越受到学校的重视。基于微信小程序的课程在线测试系统，方便老师迅速了解学生的学习情况，省去印刷试卷、批阅试卷、汇总成绩这些人工工作；对学生来说，不必安装应用程序，通过微信就可以进行课程在线测试。

1 系统设计

在线测试系统分为教师和学生两部分。除了基本的登录功能，学生可以答题、查看以往做过的试卷的错题。教师可以发布试卷考试、添加试卷、修改试卷题目以及查看学生成绩。

1.1 总体设计

系统整体采用MVC分层，M是model模型层，与数据库交互。V是view视图层，将数据展示给用户，与用户进行交互。C是controller控制层，用于分发控制到来的请求，并调用模型层与数据库进行交互，以及将数据返回给视图层展示。[4]使用MVC分层实现功能很有优势，首先代码会很清晰明了，方便开发和以后的维护。各个部分是松耦合的，更改一个层的代码不会影响其他层的功能的实现。

微信小程序有专门的开发工具，在微信小程序的官方网站上即可下载，称作微信web开发者工具。[5]小程序有专用的开发组件，这是微信官方自定义的，并且配有详细的使用文档，其语言为WXML和WXSS。WXML是微信的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改。[6]新增了尺寸单位，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。小程序底层还是基于Webview来实现的，整个框架体系，比较清晰和简单，基于Web规范，采用HTML、CSS和JS等搭建的一套框架，只需了解框架规范即可使用已有Web技术进行开发。

编写后台使用Springboot和Mybatis框架。Springboot框架简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置，简化开发。MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架[7]，它消除了几乎所有JDBC代码和参数的手工设置以及结果集的检索，主要设计目的就是让我们对执行SQL语句时对输入输出的数据管理更加方便，方便地写出SQL和方便地获取SQL的执行结果，为开发人员减负[8]。

1.2 数据库设计

在线测试系统数据库基于MySQL数据库建立，系统数据库包含有选择题表（choice）、填空题表（fillintheblank）、判断题表（judge）、试卷表（paper）、题目试卷关联表（papersubject）如表1所示、学生答案表（paperanswer）如表2所示、学生成绩表（paperhistory）如表3所示、学生信息表（student）和教师信息表（teacher）。其中题目试卷关联表、学生答案表、学生成绩表为核心表格，其他的表格存放的皆为基础信息。

2 详细设计

进入小程序，首页选择学生登录或教师登录。选择教师登录后，教师输入自己的工号和密码，验证成功后进入登录后的页面。教师可以选择发布试卷、历史考试结果、添加试卷和修改试卷功能。选择发布试卷后，有两个关联列表，第一列选择考试学生专业，第二列选择试卷名称。这样对应专业的学生即可看到发布过的试卷，发布成功后自动跳转到教师登录后的界面。选择历史考试结果，这里显示了所有试卷的考试结果，点击后可以看到学生的名字和对应的考试成绩。添加试卷时需要手动输入考试科目和试卷名称，提交后成功添加相应试卷。修改试卷功能中，先选择需要修改的试卷，点击修改试卷后显示该试卷的所有题目，教师可以选择删除相应题目或添加题目，添加题目时须填写题目相关信息，选择题目类型：选择、填空或判断。

选择学生登录后，学生输入自己的学号和密码，验证成功后进入登录成功的页面。学生选择考试试卷，跳转后看到需要考试的试卷，选择相应试卷，试卷内容有三项：选择、填空和判断。学生在规定时间内做完，可以选择交卷，或者等到考试时间结束后自动交卷。交卷后跳转到登录后界面。学生选择历史考试后，跳转到的页面显示出所有已经答过的试卷，选择相应试卷后学生可以看到自己的错题和试卷的分数。

2.1 登录模块

学生和教师登录是不同的界面。学生登录时，前端传递的参数为学生输入的学号和密码，后台调用的是loginStu接口，接口将学号、密码、类型：stu传递给服务方法login，该方法通过类型判断为学生登录。再进行判空、查询用户名密码是否正确，最后将信息返回给前台，前台界面将信息显示出来。

教师登录实现与学生登录相同，只不过后台调用的是loginTea接口，所以类型为tea，服务方法为login，判断为教师登录。

2.2 试卷管理模块

教师通过添加新试卷和对已有的试卷进行修改来管理试卷。

2.2.1 添加试卷

教师添加试卷功能页面将考试科目和试卷名称两个参数传递给后台的添加试卷接口（uppaper），在试卷表（paper）中添加一条数据即可。

2.2.2修改试卷

修改试卷功能需要教师先选择要修改的试卷，该功能与发布试卷功能类似。选择好要修改的试卷后，显示出该试卷所有题目，教师可以选择删除某一题目，点击删除按钮时调用后台delete接口，传递参数为试卷名称和该题目在该试卷中的题号，删除在试卷题目关联表（papersubject）中的数据即可。教师还可选择为该试卷添加题目，传递参数为试卷名称、题干、选项A、选项B、选项C、选项D、答案、题目类型，后台调用修改试卷接口（alterpaper），根据题目类型判断该将题目存放在选择题表（choice）、填空题表（fillintheblank）还是判断题表（judge）中。再将题目和题号对应关系存进试卷题目关联表（papersubject）中。

2.3 考試管理模块

2.3.1 发布试卷

教师发布试卷的页面在显示前，先调用后台接口查询教师未发布过的试卷（queryUnpublished），选择试卷表（paper）中的专业字段（subject）获得数据库中所有专业和对应专业所包含的试卷，最后将所有查询到的信息通过json数据传回前端显示。教师在界面选择专业和试卷，传递的参数为试卷名称，调用后台发布接口（release），将试卷表（paper）中的状态字段（state）从0改为1，则为已经发布。

2.3.2 学生成绩管理

成绩页面在显示前，先调用后台queryHistoryTea接口，将试卷表（paper）中状态字段（state）为1（意为已发布）的试卷名称返回给前台并显示。教师点击试卷，前端跳转并将试卷名称同时发送给成绩界面，成绩界面在显示前先将参数试卷名称传递给后台queryScoreTea接口，将paperhistory（存放学生成绩和对应学生id）表和student（学生基本信息）表通过学生id连接，并选择相应试卷名称的学生姓名和学生成绩返回前端界面并显示。

2.3.3 学生答题

学生选择要答的试卷，该页面在显示前调用后台query接口，传递参数为学生id和学生专业。返回教师发布过且学生未答过的试卷名称并显示在页面上。

学生选择试卷后，页面跳转并将试卷名称发送到答题界面，页面在显示前调用querySubject接口，传递参数为试卷名称，分别将试卷题目关联表（papersubject）与选择题表（choice）、试卷题目关联表（papersubject）与填空表（fillintheblank）、试卷题目关联表（papersubject）与判断表（judge）连接查询题目所有信息并返回给前端界面并显示。

当学生答完题点击提交时，调用后台上传答案接口（answer），传递参数为答案、试卷名称和学生id。遍历answer中的答案并保存在学生答案表（paperanswer）中，在每次遍历时调用打分函数（mark），该函数将学生的答案与正确答案做对比，无误则在总分基础上加该题目的分值。遍历结束后得到学生成绩最后存入学生成绩表（paperhistory）中。

2.3.4 学生查看错题

学生选择要查看的试卷，该页面在显示前调用queryHistory接口，传递参数为学生id，查询学生成绩表（paperhistory）表，将试卷名称返回前台并显示。

学生选择试卷后，页面跳转并将试卷名称发送到显示错题界面，该页面在显示前调用queryHistoryData接口，传递参数为学生id和试卷名称，先在学生成绩表（paperhistory）中获取该试卷的分数，再将选择题表（choice）、学生答案表（paperanswer）、试卷题目关联表（papersubject）连接，查询学生错题信息，包括题干、答案、学生答案，填空和判断与该方法相同。最后将查询到的结果返回并显示在界面上。

3 结束语

在线测试系统基于微信小程序平台开发，使用MVC开发模式，各模块之间松耦合，方便运行和维护。微信小程序是最近新兴的开发和使用方式，也是以后程序推广和开发的潮流，微信小程序的使用很方便，无需下载，搜索小程序名称或扫一扫即可。

目前本应用满足了学生和教师的基本使用需求，不仅有助于教师及时掌握学生学习情况，而且有助于学生及时自测学习的效果，但还可以增加一些功能，将程序更加完善。如可以将成绩导出成excel表格，教师可以选择、筛选、排序，更加方便教师了解学生的成绩的分布。学生答完题目之后，只能看到自己的错题，并且不能重新做一遍卷子进行自我测验。若要完善学生功能部分，可以添加学生自测的功能，将学生的错题重新组合，学生可以选择自己测验，或者选择以前做过的试卷，重新做一遍，加深印象。

参考文献：

[1] 易伟.微信小程序快速开发：视频指导版[M].北京：人民邮电出版社，2017：2-3.

[2] 刘刚.微信小程序开发图解案例教程[M].北京：人民邮电出版社，2017：2-3.

[3] 張帆.微信小程序开发零基础入门[M].北京：电子工业出版社，2017：18-20.

[4] 张雪云，牟艳，申红伟.基于微信小程序的电源监测管理系统设计[J].计算机与现代化，2017（12）：98-102.

[5] 微动天下.微信小程序和微信公众号有什么区别[N/OL].知乎，2017.

[6] 微信官方.微信小程序开发简易教程之WXSS教程[EB/OL].https：//mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/file.html#wxss-样式.

[7] 于亮.Mybatis简介与原理[EB /OL]. （2015-04-28）.http：//jiuqiyuliang.iteye.com/blog/2216123.

[8] 赖均.软件工程[M].北京：清华大学出版社，2016：85-87.

【通联编辑：王力】