高校在线课堂微学习空间小程序设计与实现

江晓庆 杨磊

摘  要：随着移动互联网的快速发展，移动学习、碎片化学习逐渐成为高校学习交流的新常态。为摆脱传统在线学习受终端设备、学习时间、地点等限制，满足新时代学习者对“泛在学习”的新需求，设计并开发了一款可支持高校翻转课堂和混合教学的在线课堂微学习空间小程序。该小程序前端采用JavaScript语言和Vue框架开发、后端采用Java+SpringBoot+Mybatis+MySQL联合开发而成，具有操作简易、移动便捷、扩展性强等特点，能够为学习者提供随时随地课堂学习与实时交流的微学习平台。

关键词：微学习空间;Vue;SpringBoot;Mybatis

中图分类号：TP311.1                   文献标识码：A文章编号：2096-4706（2021）13-0009-05

Design and Implementation of Online Classroom Micro Learning Space Applet in Colleges and Universities

JIANG Xiaoqing1， YANG Lei2

（1. Center of Information Network， South China Agricultural University， Guangzhou  510642， China;

2. College of Mathematics and Informatics， South China Agricultural University， Guangzhou  510642， China）

Abstract： With the rapid development of mobile internet， mobile learning and fragmented learning have gradually become the new normal of learning and communication in colleges and universities. In order to get rid of the limitations of traditional online learning such as terminal equipment， learning time and place， and meet the new needs of learners for “Ubiquitous Learning” in the new era， the online classroom micro learning space applet that can support flipped classroom and blended learning in colleges and universities is designed and developed. The front end of the applet is developed with JavaScript language and Vue framework， and the back end is jointly developed with Java+SpringBoot+Mybatis+MySQL. It has the characteristics of simple operation， convenient movement and strong scalability. It can provide learners with a micro learning platform for classroom learning and real-time communication in anytime and anywhere.

Keywords： micro learning space; Vue; SpringBoot; Mybatis

0  引  言

隨着翻转课堂、移动学习在国内的快速发展与广泛应用，高校的教育教学模式、方法也随之发生改变，由此产生了较大的变革。据第47次《中国互联网络发展状况统计报告》数据显示，截至2020年12月，我国网民规模达9.89亿，手机网民规模达9.86亿，手机网民占比99.7%，移动网络使“万物互联”的主导地位不断凸显。在线教育用户规模达到3.42亿，移动在线学习已逐步发展成为一种学习的主流趋势[1]。传统在线教育已难以满足新一代学习者对“泛在学习”的新需求。

当前，高校在不断推进“以学生为主体、以教师为主导”的教育教学改革，在迎合新时代创新人才培养需要的背景下，翻转课堂、混合教学等新型教学模式应运而生[2]。为此，本文以互联网思维为导向，以创新教育教学为目标，研究设计并实现了一款可支持翻转课堂和混合教学的在线课堂微学习空间小程序，以期为高校教育教学质量的提升与创新人才的培养提供一些参考借鉴。

1  主要技术介绍

1.1  Vue

Vue是当前一种流行的用来构建前端页面的渐进式框架，采用自底向上增量开发的设计方式[3]。一方面，具有开放灵活、易学易用、便于优化拓展等特点，适合于开发人员较快掌握且易于与第三方项目库进行整合。另一方面，跟现代化工具链和各种支持类库相结合时，能够为复杂的单页应用提供驱动，其效果比React、Angular、Ploymer框架更优[4]。

1.2  SpringBoot框架

Spring Boot是由Pivotal团队开发的全新框架，可提供具有控制反转特性的容器，便于对新Spring应用搭建及开发过程进行简化[5]。Spring Boot还嵌入Tomcat服务器，可以直接将项目打包成jar包，大大减少了项目部署的工作量。此外，还能够集成大量框架，解决项目之间存在的版本依赖和稳定性问题。

1.3  Mybatis框架

Mybatis是一种支持SQL查询、存储过程和高级映射定制化的优秀持久层框架，可使用简单的XML文件或注解来实现配置和映射，通过映射引擎将接口或JavaBean映射成数据库中的记录[6]。Mybatis提供的映射方式灵活自由且便于SQL语句的修改，能够使程序开发人员将主要精力集中在SQL语句上，因此，相比ORM框架，更适用需求变化频繁的开发项目。

2  系统设计

2.1  系统技术框架设计

本系统采用Vue+Spring Boot前后端分离的技术方案，系统整体技术框架如图1所示，主要分为前端、后端和数据库三层体系结构，技术上具有开发高效、易于整合、拓展性强等优势。

前端包括用户层和视图层，主要用来进行数据通信和UI界面的交互作用。用户通过各类智能终端设备安装的微信客户端软件，即可访问该小程序的所有应用。采用Vue CLI手脚架进行图形化交互界面的构建，采用VueX进行状态管理，采用Vue-router进行路由管理。采用Axios进行统一的GET、POST等交互请求，实现同后端控制层的数据通信和WebService调用。

后端包括控制层、业务逻辑层和数据持久层。控制层利用Spring MVC、FastJSON等获取用户请求和访问控制，实现从前端接收数据后传递给Service层进行业务逻辑处理。业务逻辑层主要使用Spring定时管理和Spring事务控制，实现各个模块之间的定时处理及信息处理。数据持久层采用Mybatis方式进行数据库访问，利用Mapper接口和Mapper.xml映射配置实现。

数据库采用MySQL数据库，主要负责数据库各类表的存储及操作，包括用户数据、课程数据、资源数据、评论数据、测验数据、系统日志等。

2.2  系统功能模块设计

该在线课堂微学习空间小程序主要包含在线课程、课程学习、学习交流、通知公告、个人中心等主要功能模块，如图2所示。

其中课程学习和学习交流为系统的核心功能模块，能够为高校学习者提供一个集导学指引、视频点播、课件学习、学习测验、在线答疑、学习笔记等移动便捷的学习界面，同时满足教师与学生、学生与学生之间随时随地进行在线课堂的实时交流与学习探究。

2.3  系统数据库设计

系统核心数据库主要涉及11个表，表与表之间的关联关系如图3所示。下面介绍11个表的主要功能：

（1）教师信息表（T_Teacher），用于存储教师个人信息，包括姓名、编号、密码、学院、电话、状态等，该表与课程表相关联。

（2）课程表（T_Course），用于记录在线课堂学习的课程相关信息，包括课程编号、课程名称、课程简介、课程类型、任课教师id、学生选课人数、创建时间等，该表与课程通告表、章节表、学生选课表、课程答疑表、教师信息表相关联。

（3）章节表（T_Chapter），用于记录每门课程的章节信息，包括章节编号、课程id、标题名称、排序、创建时间等，该表与教学资源表、测验表、课程表相关联。

（4）教学资源表（T_Resourse），用于记录每个章节对应的教学视频资源及课件资料，包括资源编号、章节名称、课程id、章节id、视频id、视频名称、文件id、文件名称、创建时间等。

（5）课程通告表（T_Announce），用于存储任课教师所教授课程发布的通知公告内容，包括通告id、任课教师id、课程id、标题、内容、阅读人数、创建时间等。

（6）测验表（T_Exam），用于存储每个章节的自我测验题目相关信息，包括试题编号、章节id、问题、答案、选项内容、答案解析等。

（7）学生信息表（T_Student），用于存储学生个人信息，包括姓名、编号、密码、学院、专业、状态等，该表与学生选课表相关联。

（8）学生选课表（T_StuCourse），用于记录每个学生所选的课程相关信息，包括选课id、课程id、学生id、创建时间等，该表与课程表、学生信息表、课程收藏表相关联。

（9）课程收藏表（T_Collection），用于记录每个学生收藏的课程相关信息，包括编号、学生id、课程id、创建时间等。

（10）课程答疑表（T_Question），用于记录每门课程学生提出的疑难问题，包括编号、课程id、标题、内容、学生id、已读状态、创建时间、更新时间等，该表与课程表、回复讨论表相关联。

（11）回复讨论表（T_Comment），用于记录每个课程疑难问题的回复评论，包括编号、问题id、回复内容、回复者id、回复者姓名、创建时间、更新时间等。

3  系统功能实现

该小程序是基于微信客户端V6.5.8及以上版本开发的，可运行于Android 8.0.1（或iOS 8.0.2）及以上版本系统环境。系统实现了课程分类、课程资源在线观看学习（微课、微实验、学习课件等）、学习测验、在线答疑、主题交流、加入课群、通知公告、最新推荐、学习笔记、我的讨论、课程收藏、资源搜索、历史查看、个人设置等功能。

3.1  登录界面

该小程序可面向任课教師和学生开放，根据不同角色授予不同的权限，分别对应不同的登录界面，如图4所示为默认的学生登录界面。点击登录界面左下角“我是教师”图标，可切换至教师角色登录界面，如图5所示。

3.2  学习主界面

采用Vue的单页面模式设计了用户的交互界面，页面之间的数据交互采用VueX，与后端的数据通信则采用Axios统一发起请求。如图6所示为学生用户的学习主界面，主要功能包括在线课程、加入课群、学习交流、通知公告、通知公告滚动条、我的选课、我的提问答疑、个人中心等。如图7所示为教师用户学习主界面，主要功能包括在线课程、发布通知、我的通知、学习交流、我的课群、我的课程答疑、个人中心等。

3.3  在线课程学习页面

在线课程学习页面是该小程序的主体核心功能，主要包括课程资源学习、学习测验、在线答疑、学习笔记、加入课群、收藏等功能下面简单介绍各个功能页面：

（1）课程资源学习页面。展示了该门课程所有章节及知识点的学习资源，主要包括学习视频在线观看（微课、微实验、Flash等）、课件播放（PPT、Word、Excel等文档），并且支持视频播放进度的拖拉、暂停操作，支持视频的自动旋转和最大化播放功能，如图8所示。

（2）学习测验答题页面。可提供针对不同章节的知识点设计测验题目，测验题目形式包括单项选择题、多项选择题、不定项选择题、判断题等多种题型，并支持在线打分及答案解释功能，如图9所示。

（3）我的在线答疑页面。在线答疑是任课教师在线实时解答学生学习过程中遇到的各种问题的互动交流窗口，学生可以提出任何与课程相关的问题或疑问，由老师或同学一同讨论解答，如图10所示，展示的是某门课程学生提出的一些需要解答的疑问。

（4）学习笔记页面。学习笔记是学生学习课程过程中用于记录和保存个人学习心得的在线笔记本，有助于提升学习成效和自我管理，如图11所示。

3.4  主题交流页面

如图12所示为主题交流页面，主要功能是用作教师与学生或学生与学生之间进行任意主题互动交流的讨论区，是课程在线答疑功能的延伸和拓展，主要包括主页面交流、按话题分类交流、我的交流、创建交流等四部分内容，以及针对交流区的搜索功能。

4  结  论

本文基于“泛在学习”理念，以新一代“数字土著”的新需求为出发点，采用Vue+ Spring Boot的流行框架前后端分离技术，设计并实现了高校在线课堂微学习空间小程序。该小程序具有操作简易、轻量便捷且扩展性强的特点，能够为高校大学生随时随地进行在线课程学习交流提供“微学习空间”，满足个性化、移动化、碎片化学习的需要，可有效支持高校开展翻转课堂教学与混合式教学实践，助力教学质量提升与人才培养模式创新。

参考文献：

[1] 中国互联网络信息中心.第47次《中国互联网络发展状况统计报告》[R/OL].（2021-02-03）.http：//www.cac.gov.cn/2021-02/03/c_1613923423079314.htm.

[2] 张其亮，王爱春.基于“翻转课堂”的新型混合式教学模式研究 [J].现代教育技术，2014，24（4）：27-32.

[3] 肖文娟，王加胜.基于Vue和Spring Boot的校园记录管理Web App的设计与实现 [J].计算机应用与软件，2020，37（4）：25-30.

[4] 朱二华.基于Vue.js的Web前端应用研究 [J].科技与创新，2017（20）：119-121.

[5] 张峰.应用SpringBoot改变web应用开发模式 [J].科技创新与应用，2017（23）：193-194.

[6] 李洋.SSM框架在Web应用开发中的设计与实现 [J].計算机技术与发展，2016，26（12）：190-194.

作者简介：江晓庆（1981—），男，汉族，广东揭阳人，工程师，硕士研究生，研究方向：计算机应用技术;杨磊（1978—），男，汉族，河南安阳人，讲师，博士研究生，研究方向：教育技术。