基于React的在線教學平臺設(shè)計與實現(xiàn)

李曉純 孔文熙 朱景福

摘要：設(shè)計采用React框架和Node.js進行前后端分離開發(fā)，用Ant Design組件庫進行組件化開發(fā)，數(shù)據(jù)庫技術(shù)使用MySQL，設(shè)計開發(fā)基于React的在線教學系統(tǒng)，實現(xiàn)課堂講堂、我的任務(wù)、討論互動等八個主要功能模塊，使得教學行為不再受空間物理特性的約束，實現(xiàn)教學手段科學化，發(fā)揮學生在學習過程中的主體性以及調(diào)動學生的學習積極性和主動性。

關(guān)鍵詞：在線教學平臺;React;主體性

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）30-0095-03

開放科學（資源服務(wù)）標識碼（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年由于要保持社交距離和保護師生健康的原因，在線教學形式被迫流行，這種教學方式讓學生們不至于因為特殊情況而耽誤學業(yè)。同時學習時間地點靈活，學生可以選擇適合自己的課程或老師來學習，可以利用零碎時間學習[1]。在線課程的建設(shè)與應(yīng)用為特殊時期的在線教學奠定了堅實基礎(chǔ);平臺軟件工具、模式方法等多要素疊加優(yōu)勢推進了教學的創(chuàng)新，多數(shù)教師愿意在疫情后繼續(xù)開展在線教學或混合式教學[2]。

在線教學平臺符合時代發(fā)展的需求，也是中國高等教育改革的趨勢所在，基于React的在線教學平臺提供課程相關(guān)的學習資源，如教學視頻、教學課件、測評與作業(yè)等豐富的學習資源。讓學習這一行為突破了傳統(tǒng)教學模式拘于場景與空間等的限制，學生可以根據(jù)自身的薄弱環(huán)節(jié)，展開針對性學習，并且能夠隨時隨地學習，保證了學習的連續(xù)性以及提高學習效率，同時通過互聯(lián)網(wǎng)線上平臺進行信息資源的共享，能有效解決課程資料復(fù)用率低的問題[3]。線下面對面教學根據(jù)線上教學平臺進行設(shè)計相應(yīng)的教學方案，對線上教學進行有力的補充和提升，起到一個相輔相成的作用。

2 系統(tǒng)設(shè)計

基于React的在線教學平臺由課堂講堂、我的任務(wù)、個人中心、討論互動、登錄注冊、我的課堂、任務(wù)、我的八大模塊組成。平臺用戶主要分為學生與教師，根據(jù)不同用戶角色設(shè)置了對應(yīng)的功能模塊，整體功能如圖1所示。

2.1 學生用戶功能模塊

2.1.1 課堂講堂模塊

用戶可以查看課程列表，點擊查看課程詳情并使用課程材料資源（PPT、視頻）進行學習，還可進行課程評價。

2.1.2 我的任務(wù)模塊

在該模塊向?qū)W生用戶展示待完成任務(wù)，用戶可查看已完成試題任務(wù)和課程成績。

2.1.3 個人中心模塊

1）個人信息：用戶可查看編輯個人信息。

2）我的課堂：用戶可查看加入的課堂，點擊進入課堂詳情。

3）學習記錄：用戶可查看自己的歷史學習記錄和進度。

4）反饋：用戶可提交對系統(tǒng)功能的建議反饋。

5）設(shè)置：用戶可進行賬號操作即修改密碼以及退出當前賬號。

2.1.4 討論互動模塊

該模塊可發(fā)表問題尋求他人幫助以及回答其他用戶發(fā)表的問題，起到討論互助作用。

2.1.5 登錄注冊模塊

該模塊是用戶進入系統(tǒng)進行其他功能操作的前提，初始用戶需要進行注冊操作，然后憑借注冊時的用戶名和密碼進行登錄操作才能進入系統(tǒng)。

2.2 教師用戶功能模塊

2.2.1 討論互動模塊

該模塊可發(fā)表問題尋求他人幫助以及回答其他用戶發(fā)表的問題，起到討論互助作用。

2.2.2 登錄注冊模塊

該模塊是用戶進入系統(tǒng)進行其他功能操作的前提，初始用戶需要進行注冊操作，然后憑借注冊時的用戶名和密碼進行登錄操作才能進入系統(tǒng)。

2.2.3 我的課堂

用戶可以查看課程列表，點擊進行課堂管理。

2.2.4 任務(wù)模塊

用戶在該模塊可以進行試題任務(wù)的發(fā)布、批改以及成績的管理。

2.2.5 我的模塊

1）個人信息：用戶可查看編輯個人信息。

2）創(chuàng)建課堂：用戶創(chuàng)建新的課堂。

3）反饋：用戶可提交對系統(tǒng)功能的建議反饋。

4）設(shè)置：用戶可進行賬號操作即修改密碼以及退出當前賬號。

2.3 數(shù)據(jù)庫設(shè)計

概念模式定義了數(shù)據(jù)庫中的實體、實體的屬性以及各個實體之間的聯(lián)系。數(shù)據(jù)庫概念模式設(shè)計的目標是產(chǎn)生顯示實體和關(guān)系的，反映應(yīng)用環(huán)境信息需求的ER圖[4]。系統(tǒng)主要功能的數(shù)據(jù)庫概念模型如圖2所示。

根據(jù)系統(tǒng)的概念模型圖可知用戶可以查看管理評價課程，每個課程包含著對應(yīng)的章節(jié)與子章節(jié)。用戶還可以發(fā)表問題討論和問題回復(fù)。同時用戶可進行任務(wù)試題的發(fā)布、提交以及批改，任務(wù)試題類型包含簡答題和選擇題。用戶還能夠提交反饋信息。

3 系統(tǒng)實現(xiàn)

3.1系統(tǒng)搭建

采用CRA腳手架來搭建React前端項目，首先安裝好腳手架，然后在cmd中執(zhí)行如下命令，可以新建并運行搭建好的前端項目：

[npm install -g create-react-app

npm i -g typescript

npx create-react-app Web --template typescript

yarn start ]

在輸入命令“yarn start”并執(zhí)行之后，在瀏覽器輸入http：//localhost：3000就會顯示系統(tǒng)初始頁面。此時，初始的React項目構(gòu)建完成。

后端項目搭建首先安裝node.js[5]，然后創(chuàng)建一個項目文件夾，對該項目文件夾進行初始化，在該項目根目錄下新建js文件，然后就可以進行對應(yīng)功能代碼書寫以及其他配置的完善。

3.2 模塊實現(xiàn)

用戶進入系統(tǒng)的主界面顯示課堂列表如圖3所示，通過ajax異步請求獲取數(shù)據(jù)，再使用Ant Design的Pagination分頁組件將后端返回的json數(shù)據(jù)進行分頁顯示，可切換頁碼查看更多數(shù)據(jù)，課堂詳情頁面使用Layout布局進行整體布局設(shè)置，點擊進入查看課堂詳情，課堂詳情數(shù)據(jù)是使用數(shù)據(jù)庫語句通過課堂id查詢返回的，課堂詳情包括課堂概述、授課目標、教師團隊以及課程占分比例。課堂占分比例是調(diào)用highcharts的餅圖進行顯示的。點擊在線教程查看課程章節(jié)，章節(jié)目錄信息顯示是將函數(shù)封裝完進行遞歸調(diào)用顯示返回的目錄數(shù)組數(shù)據(jù)，可以點擊查看該章節(jié)的PPT進行預(yù)習，同時可點擊該章節(jié)的學習視頻進行自主學習。對應(yīng)課程的課程評價信息也是以分頁形式顯示。

討論互動模塊給用戶提供了一個討論互助的平臺，用戶可以在此發(fā)表自己的問題疑惑請求他人解疑，也可查看其他用戶發(fā)表的討論問題及其回復(fù)，實現(xiàn)知識鞏固以及思路共享。當用戶點擊進入該模塊界面時在頁面的加載時調(diào)用接口，獲取后臺返回的json數(shù)據(jù)顯示討論互動信息，具體實現(xiàn)效果如圖4所示。

學生用戶進入我的任務(wù)模塊可查看任務(wù)試題，點擊對未完成狀態(tài)的試題進行完成，點擊查看已完成的試題任務(wù)列表，查看完成情況。用戶還可進行課程成績的查看，查看課程成績詳細信息。

教師用戶進入任務(wù)模塊可進行試題任務(wù)的發(fā)布，給學生用戶進行測評以及學習成果檢驗的機會。用戶還可以對學生提交的試題任務(wù)進行查閱批改，了解學生的學習吸收效果。教師用戶還能管理課程成績，即編輯發(fā)布學生成績。

4 結(jié)束語

本系統(tǒng)實現(xiàn)了集在線課程學習、測評反饋、師生互動于一體的在線教學平臺，促進師生之間點對點的交流互動以及以學生為主體的自主化學習，更加有助于解決教育中“滿堂灌”問題，促使教師進行課堂設(shè)計的改進，引導(dǎo)學生進行自主學習以及探究式學習，極大地增強學生的學習興趣。

參考文獻：

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

[2] 中國教育網(wǎng).疫情期間，在線教育成效如何？[EB/OL].[2020-12-20].http：//www.chinaedunet.com/news/zyjsjy/2020/5/content_240630.shtml.

[3] 李梅芳.高職數(shù)字化教學資源應(yīng)用問題與對策研究[J].通訊世界，2017（15）：281-282.

[4] 牛榮，陳紀龍，杜義君.數(shù)據(jù)庫設(shè)計中ER模型設(shè)計的一些基本問題探討[J].信息技術(shù)與信息化，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.

【通聯(lián)編輯：謝媛媛】