基于React的在线教学平台设计与实现

李晓纯 孔文熙 朱景福

摘要：设计采用React框架和Node.js进行前后端分离开发，用Ant Design组件库进行组件化开发，数据库技术使用MySQL，设计开发基于React的在线教学系统，实现课堂讲堂、我的任务、讨论互动等八个主要功能模块，使得教学行为不再受空间物理特性的约束，实现教学手段科学化，发挥学生在学习过程中的主体性以及调动学生的学习积极性和主动性。

关键词：在线教学平台;React;主体性

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）30-0095-03

開放科学（资源服务）标识码（OSID）：

Design and Implementation of Online Teaching Platform Based on React

LI Xiao-chun， KONG Wen-xi， ZHU Jing-fu

（College of Science， Guangdong University of Petrochemical Technology， Maoming 525000， China）

Abstract： The design adopts React framework and node.js to develop the front and back end separately， ant design component library to develop the component， MySQL to design and develop the online teaching system based on React， which realizes eight main functional modules， such as classroom， my task， discussion interaction， etc.， so that the teaching behavior is no longer constrained by the physical characteristics of space， To realize the scientific teaching means， give full play to students' subjectivity in the learning process， and mobilize students' learning enthusiasm and initiative.

Key words： online teaching platform;React;subjectivity

1 背景

2020年由于要保持社交距离和保护师生健康的原因，在线教学形式被迫流行，这种教学方式让学生们不至于因为特殊情况而耽误学业。同时学习时间地点灵活，学生可以选择适合自己的课程或老师来学习，可以利用零碎时间学习[1]。在线课程的建设与应用为特殊时期的在线教学奠定了坚实基础;平台软件工具、模式方法等多要素叠加优势推进了教学的创新，多数教师愿意在疫情后继续开展在线教学或混合式教学[2]。

在线教学平台符合时代发展的需求，也是中国高等教育改革的趋势所在，基于React的在线教学平台提供课程相关的学习资源，如教学视频、教学课件、测评与作业等丰富的学习资源。让学习这一行为突破了传统教学模式拘于场景与空间等的限制，学生可以根据自身的薄弱环节，展开针对性学习，并且能够随时随地学习，保证了学习的连续性以及提高学习效率，同时通过互联网线上平台进行信息资源的共享，能有效解决课程资料复用率低的问题[3]。线下面对面教学根据线上教学平台进行设计相应的教学方案，对线上教学进行有力的补充和提升，起到一个相辅相成的作用。

2 系统设计

基于React的在线教学平台由课堂讲堂、我的任务、个人中心、讨论互动、登录注册、我的课堂、任务、我的八大模块组成。平台用户主要分为学生与教师，根据不同用户角色设置了对应的功能模块，整体功能如图1所示。

2.1 学生用户功能模块

2.1.1 课堂讲堂模块

用户可以查看课程列表，点击查看课程详情并使用课程材料资源（PPT、视频）进行学习，还可进行课程评价。

2.1.2 我的任务模块

在该模块向学生用户展示待完成任务，用户可查看已完成试题任务和课程成绩。

2.1.3 个人中心模块

1）个人信息：用户可查看编辑个人信息。

2）我的课堂：用户可查看加入的课堂，点击进入课堂详情。

3）学习记录：用户可查看自己的历史学习记录和进度。

4）反馈：用户可提交对系统功能的建议反馈。

5）设置：用户可进行账号操作即修改密码以及退出当前账号。

2.1.4 讨论互动模块

该模块可发表问题寻求他人帮助以及回答其他用户发表的问题，起到讨论互助作用。

2.1.5 登录注册模块

该模块是用户进入系统进行其他功能操作的前提，初始用户需要进行注册操作，然后凭借注册时的用户名和密码进行登录操作才能进入系统。

2.2 教师用户功能模块

2.2.1 讨论互动模块

该模块可发表问题寻求他人帮助以及回答其他用户发表的问题，起到讨论互助作用。

2.2.2 登录注册模块

该模块是用户进入系统进行其他功能操作的前提，初始用户需要进行注册操作，然后凭借注册时的用户名和密码进行登录操作才能进入系统。

2.2.3 我的课堂

用户可以查看课程列表，点击进行课堂管理。

2.2.4 任务模块

用户在该模块可以进行试题任务的发布、批改以及成绩的管理。

2.2.5 我的模块

1）个人信息：用户可查看编辑个人信息。

2）创建课堂：用户创建新的课堂。

3）反馈：用户可提交对系统功能的建议反馈。

4）设置：用户可进行账号操作即修改密码以及退出当前账号。

2.3 数据库设计

概念模式定义了数据库中的实体、实体的属性以及各个实体之间的联系。数据库概念模式设计的目标是产生显示实体和关系的，反映应用环境信息需求的ER图[4]。系统主要功能的数据库概念模型如图2所示。

根据系统的概念模型图可知用户可以查看管理评价课程，每个课程包含着对应的章节与子章节。用户还可以发表问题讨论和问题回复。同时用户可进行任务试题的发布、提交以及批改，任务试题类型包含简答题和选择题。用户还能够提交反馈信息。

3 系统实现

3.1系统搭建

采用CRA脚手架来搭建React前端项目，首先安装好脚手架，然后在cmd中执行如下命令，可以新建并运行搭建好的前端项目：

[npm install -g create-react-app

npm i -g typescript

npx create-react-app Web --template typescript

yarn start ]

在输入命令“yarn start”并执行之后，在浏览器输入http：//localhost：3000就会显示系统初始页面。此时，初始的React项目构建完成。

后端项目搭建首先安装node.js[5]，然后创建一个项目文件夹，对该项目文件夹进行初始化，在该项目根目录下新建js文件，然后就可以进行对应功能代码书写以及其他配置的完善。

3.2 模块实现

用户进入系统的主界面显示课堂列表如图3所示，通过ajax异步请求获取数据，再使用Ant Design的Pagination分页组件将后端返回的json数据进行分页显示，可切换页码查看更多数据，课堂详情页面使用Layout布局进行整体布局设置，点击进入查看课堂详情，课堂详情数据是使用数据库语句通过课堂id查询返回的，课堂详情包括课堂概述、授课目标、教师团队以及课程占分比例。課堂占分比例是调用highcharts的饼图进行显示的。点击在线教程查看课程章节，章节目录信息显示是将函数封装完进行递归调用显示返回的目录数组数据，可以点击查看该章节的PPT进行预习，同时可点击该章节的学习视频进行自主学习。对应课程的课程评价信息也是以分页形式显示。

讨论互动模块给用户提供了一个讨论互助的平台，用户可以在此发表自己的问题疑惑请求他人解疑，也可查看其他用户发表的讨论问题及其回复，实现知识巩固以及思路共享。当用户点击进入该模块界面时在页面的加载时调用接口，获取后台返回的json数据显示讨论互动信息，具体实现效果如图4所示。

学生用户进入我的任务模块可查看任务试题，点击对未完成状态的试题进行完成，点击查看已完成的试题任务列表，查看完成情况。用户还可进行课程成绩的查看，查看课程成绩详细信息。

教师用户进入任务模块可进行试题任务的发布，给学生用户进行测评以及学习成果检验的机会。用户还可以对学生提交的试题任务进行查阅批改，了解学生的学习吸收效果。教师用户还能管理课程成绩，即编辑发布学生成绩。

4 结束语

本系统实现了集在线课程学习、测评反馈、师生互动于一体的在线教学平台，促进师生之间点对点的交流互动以及以学生为主体的自主化学习，更加有助于解决教育中“满堂灌”问题，促使教师进行课堂设计的改进，引导学生进行自主学习以及探究式学习，极大地增强学生的学习兴趣。

参考文献：

[1] 疫情与教育浅析[EB/OL].[2020-12-20].https：//zhuanlan.zhihu.com/p/121676288.

[2] 中国教育网.疫情期间，在线教育成效如何？[EB/OL].[2020-12-20].http：//www.chinaedunet.com/news/zyjsjy/2020/5/content_240630.shtml.

[3] 李梅芳.高职数字化教学资源应用问题与对策研究[J].通讯世界，2017（15）：281-282.

[4] 牛荣，陈纪龙，杜义君.数据库设计中ER模型设计的一些基本问题探讨[J].信息技术与信息化，2019（7）：189-192.

[5] Liang L，Zhu L G，Shang W Q，etal.Express supervision system based on NodeJS and MongoDB[C]//2017 IEEE/ACIS 16th International Conference on Computer and Information Science （ICIS）.May24-26，2017，Wuhan，China.IEEE，2017：607-612.

【通联编辑：谢媛媛】