高校在線課堂微學習空間小程序設(shè)計與實現(xiàn)

江曉慶 楊磊

摘 ?要：隨著移動互聯(lián)網(wǎng)的快速發(fā)展，移動學習、碎片化學習逐漸成為高校學習交流的新常態(tài)。為擺脫傳統(tǒng)在線學習受終端設(shè)備、學習時間、地點等限制，滿足新時代學習者對“泛在學習”的新需求，設(shè)計并開發(fā)了一款可支持高校翻轉(zhuǎn)課堂和混合教學的在線課堂微學習空間小程序。該小程序前端采用JavaScript語言和Vue框架開發(fā)、后端采用Java+SpringBoot+Mybatis+MySQL聯(lián)合開發(fā)而成，具有操作簡易、移動便捷、擴展性強等特點，能夠為學習者提供隨時隨地課堂學習與實時交流的微學習平臺。

關(guān)鍵詞：微學習空間;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 ?引 ?言

隨著翻轉(zhuǎn)課堂、移動學習在國內(nèi)的快速發(fā)展與廣泛應(yīng)用，高校的教育教學模式、方法也隨之發(fā)生改變，由此產(chǎn)生了較大的變革。據(jù)第47次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》數(shù)據(jù)顯示，截至2020年12月，我國網(wǎng)民規(guī)模達9.89億，手機網(wǎng)民規(guī)模達9.86億，手機網(wǎng)民占比99.7%，移動網(wǎng)絡(luò)使“萬物互聯(lián)”的主導(dǎo)地位不斷凸顯。在線教育用戶規(guī)模達到3.42億，移動在線學習已逐步發(fā)展成為一種學習的主流趨勢[1]。傳統(tǒng)在線教育已難以滿足新一代學習者對“泛在學習”的新需求。

當前，高校在不斷推進“以學生為主體、以教師為主導(dǎo)”的教育教學改革，在迎合新時代創(chuàng)新人才培養(yǎng)需要的背景下，翻轉(zhuǎn)課堂、混合教學等新型教學模式應(yīng)運而生[2]。為此，本文以互聯(lián)網(wǎng)思維為導(dǎo)向，以創(chuàng)新教育教學為目標，研究設(shè)計并實現(xiàn)了一款可支持翻轉(zhuǎn)課堂和混合教學的在線課堂微學習空間小程序，以期為高校教育教學質(zhì)量的提升與創(chuàng)新人才的培養(yǎng)提供一些參考借鑒。

1 ?主要技術(shù)介紹

1.1 ?Vue

Vue是當前一種流行的用來構(gòu)建前端頁面的漸進式框架，采用自底向上增量開發(fā)的設(shè)計方式[3]。一方面，具有開放靈活、易學易用、便于優(yōu)化拓展等特點，適合于開發(fā)人員較快掌握且易于與第三方項目庫進行整合。另一方面，跟現(xiàn)代化工具鏈和各種支持類庫相結(jié)合時，能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動，其效果比React、Angular、Ploymer框架更優(yōu)[4]。

1.2 ?SpringBoot框架

Spring Boot是由Pivotal團隊開發(fā)的全新框架，可提供具有控制反轉(zhuǎn)特性的容器，便于對新Spring應(yīng)用搭建及開發(fā)過程進行簡化[5]。Spring Boot還嵌入Tomcat服務(wù)器，可以直接將項目打包成jar包，大大減少了項目部署的工作量。此外，還能夠集成大量框架，解決項目之間存在的版本依賴和穩(wěn)定性問題。

1.3 ?Mybatis框架

Mybatis是一種支持SQL查詢、存儲過程和高級映射定制化的優(yōu)秀持久層框架，可使用簡單的XML文件或注解來實現(xiàn)配置和映射，通過映射引擎將接口或JavaBean映射成數(shù)據(jù)庫中的記錄[6]。Mybatis提供的映射方式靈活自由且便于SQL語句的修改，能夠使程序開發(fā)人員將主要精力集中在SQL語句上，因此，相比ORM框架，更適用需求變化頻繁的開發(fā)項目。

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

2.1 ?系統(tǒng)技術(shù)框架設(shè)計

本系統(tǒng)采用Vue+Spring Boot前后端分離的技術(shù)方案，系統(tǒng)整體技術(shù)框架如圖1所示，主要分為前端、后端和數(shù)據(jù)庫三層體系結(jié)構(gòu)，技術(shù)上具有開發(fā)高效、易于整合、拓展性強等優(yōu)勢。

前端包括用戶層和視圖層，主要用來進行數(shù)據(jù)通信和UI界面的交互作用。用戶通過各類智能終端設(shè)備安裝的微信客戶端軟件，即可訪問該小程序的所有應(yīng)用。采用Vue CLI手腳架進行圖形化交互界面的構(gòu)建，采用VueX進行狀態(tài)管理，采用Vue-router進行路由管理。采用Axios進行統(tǒng)一的GET、POST等交互請求，實現(xiàn)同后端控制層的數(shù)據(jù)通信和WebService調(diào)用。

后端包括控制層、業(yè)務(wù)邏輯層和數(shù)據(jù)持久層。控制層利用Spring MVC、FastJSON等獲取用戶請求和訪問控制，實現(xiàn)從前端接收數(shù)據(jù)后傳遞給Service層進行業(yè)務(wù)邏輯處理。業(yè)務(wù)邏輯層主要使用Spring定時管理和Spring事務(wù)控制，實現(xiàn)各個模塊之間的定時處理及信息處理。數(shù)據(jù)持久層采用Mybatis方式進行數(shù)據(jù)庫訪問，利用Mapper接口和Mapper.xml映射配置實現(xiàn)。

數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫，主要負責數(shù)據(jù)庫各類表的存儲及操作，包括用戶數(shù)據(jù)、課程數(shù)據(jù)、資源數(shù)據(jù)、評論數(shù)據(jù)、測驗數(shù)據(jù)、系統(tǒng)日志等。

2.2 ?系統(tǒng)功能模塊設(shè)計

該在線課堂微學習空間小程序主要包含在線課程、課程學習、學習交流、通知公告、個人中心等主要功能模塊，如圖2所示。

其中課程學習和學習交流為系統(tǒng)的核心功能模塊，能夠為高校學習者提供一個集導(dǎo)學指引、視頻點播、課件學習、學習測驗、在線答疑、學習筆記等移動便捷的學習界面，同時滿足教師與學生、學生與學生之間隨時隨地進行在線課堂的實時交流與學習探究。

2.3 ?系統(tǒng)數(shù)據(jù)庫設(shè)計

系統(tǒng)核心數(shù)據(jù)庫主要涉及11個表，表與表之間的關(guān)聯(lián)關(guān)系如圖3所示。下面介紹11個表的主要功能：

（1）教師信息表（T_Teacher），用于存儲教師個人信息，包括姓名、編號、密碼、學院、電話、狀態(tài)等，該表與課程表相關(guān)聯(lián)。

（2）課程表（T_Course），用于記錄在線課堂學習的課程相關(guān)信息，包括課程編號、課程名稱、課程簡介、課程類型、任課教師id、學生選課人數(shù)、創(chuàng)建時間等，該表與課程通告表、章節(jié)表、學生選課表、課程答疑表、教師信息表相關(guān)聯(lián)。

（3）章節(jié)表（T_Chapter），用于記錄每門課程的章節(jié)信息，包括章節(jié)編號、課程id、標題名稱、排序、創(chuàng)建時間等，該表與教學資源表、測驗表、課程表相關(guān)聯(lián)。

（4）教學資源表（T_Resourse），用于記錄每個章節(jié)對應(yīng)的教學視頻資源及課件資料，包括資源編號、章節(jié)名稱、課程id、章節(jié)id、視頻id、視頻名稱、文件id、文件名稱、創(chuàng)建時間等。

（5）課程通告表（T_Announce），用于存儲任課教師所教授課程發(fā)布的通知公告內(nèi)容，包括通告id、任課教師id、課程id、標題、內(nèi)容、閱讀人數(shù)、創(chuàng)建時間等。

（6）測驗表（T_Exam），用于存儲每個章節(jié)的自我測驗題目相關(guān)信息，包括試題編號、章節(jié)id、問題、答案、選項內(nèi)容、答案解析等。

（7）學生信息表（T_Student），用于存儲學生個人信息，包括姓名、編號、密碼、學院、專業(yè)、狀態(tài)等，該表與學生選課表相關(guān)聯(lián)。

（8）學生選課表（T_StuCourse），用于記錄每個學生所選的課程相關(guān)信息，包括選課id、課程id、學生id、創(chuàng)建時間等，該表與課程表、學生信息表、課程收藏表相關(guān)聯(lián)。

（9）課程收藏表（T_Collection），用于記錄每個學生收藏的課程相關(guān)信息，包括編號、學生id、課程id、創(chuàng)建時間等。

（10）課程答疑表（T_Question），用于記錄每門課程學生提出的疑難問題，包括編號、課程id、標題、內(nèi)容、學生id、已讀狀態(tài)、創(chuàng)建時間、更新時間等，該表與課程表、回復(fù)討論表相關(guān)聯(lián)。

（11）回復(fù)討論表（T_Comment），用于記錄每個課程疑難問題的回復(fù)評論，包括編號、問題id、回復(fù)內(nèi)容、回復(fù)者id、回復(fù)者姓名、創(chuàng)建時間、更新時間等。

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

該小程序是基于微信客戶端V6.5.8及以上版本開發(fā)的，可運行于Android 8.0.1（或iOS 8.0.2）及以上版本系統(tǒng)環(huán)境。系統(tǒng)實現(xiàn)了課程分類、課程資源在線觀看學習（微課、微實驗、學習課件等）、學習測驗、在線答疑、主題交流、加入課群、通知公告、最新推薦、學習筆記、我的討論、課程收藏、資源搜索、歷史查看、個人設(shè)置等功能。

3.1 ?登錄界面

該小程序可面向任課教師和學生開放，根據(jù)不同角色授予不同的權(quán)限，分別對應(yīng)不同的登錄界面，如圖4所示為默認的學生登錄界面。點擊登錄界面左下角“我是教師”圖標，可切換至教師角色登錄界面，如圖5所示。

3.2 ?學習主界面

采用Vue的單頁面模式設(shè)計了用戶的交互界面，頁面之間的數(shù)據(jù)交互采用VueX，與后端的數(shù)據(jù)通信則采用Axios統(tǒng)一發(fā)起請求。如圖6所示為學生用戶的學習主界面，主要功能包括在線課程、加入課群、學習交流、通知公告、通知公告滾動條、我的選課、我的提問答疑、個人中心等。如圖7所示為教師用戶學習主界面，主要功能包括在線課程、發(fā)布通知、我的通知、學習交流、我的課群、我的課程答疑、個人中心等。

3.3 ?在線課程學習頁面

在線課程學習頁面是該小程序的主體核心功能，主要包括課程資源學習、學習測驗、在線答疑、學習筆記、加入課群、收藏等功能下面簡單介紹各個功能頁面：

（1）課程資源學習頁面。展示了該門課程所有章節(jié)及知識點的學習資源，主要包括學習視頻在線觀看（微課、微實驗、Flash等）、課件播放（PPT、Word、Excel等文檔），并且支持視頻播放進度的拖拉、暫停操作，支持視頻的自動旋轉(zhuǎn)和最大化播放功能，如圖8所示。

（2）學習測驗答題頁面。可提供針對不同章節(jié)的知識點設(shè)計測驗題目，測驗題目形式包括單項選擇題、多項選擇題、不定項選擇題、判斷題等多種題型，并支持在線打分及答案解釋功能，如圖9所示。

（3）我的在線答疑頁面。在線答疑是任課教師在線實時解答學生學習過程中遇到的各種問題的互動交流窗口，學生可以提出任何與課程相關(guān)的問題或疑問，由老師或同學一同討論解答，如圖10所示，展示的是某門課程學生提出的一些需要解答的疑問。

（4）學習筆記頁面。學習筆記是學生學習課程過程中用于記錄和保存?zhèn)€人學習心得的在線筆記本，有助于提升學習成效和自我管理，如圖11所示。

3.4 ?主題交流頁面

如圖12所示為主題交流頁面，主要功能是用作教師與學生或?qū)W生與學生之間進行任意主題互動交流的討論區(qū)，是課程在線答疑功能的延伸和拓展，主要包括主頁面交流、按話題分類交流、我的交流、創(chuàng)建交流等四部分內(nèi)容，以及針對交流區(qū)的搜索功能。

4 ?結(jié) ?論

本文基于“泛在學習”理念，以新一代“數(shù)字土著”的新需求為出發(fā)點，采用Vue+ Spring Boot的流行框架前后端分離技術(shù)，設(shè)計并實現(xiàn)了高校在線課堂微學習空間小程序。該小程序具有操作簡易、輕量便捷且擴展性強的特點，能夠為高校大學生隨時隨地進行在線課程學習交流提供“微學習空間”，滿足個性化、移動化、碎片化學習的需要，可有效支持高校開展翻轉(zhuǎn)課堂教學與混合式教學實踐，助力教學質(zhì)量提升與人才培養(yǎng)模式創(chuàng)新。

參考文獻：

[1] 中國互聯(lián)網(wǎng)絡(luò)信息中心.第47次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》[R/OL].（2021-02-03）.http：//www.cac.gov.cn/2021-02/03/c_1613923423079314.htm.

[2] 張其亮，王愛春.基于“翻轉(zhuǎn)課堂”的新型混合式教學模式研究 [J].現(xiàn)代教育技術(shù)，2014，24（4）：27-32.

[3] 肖文娟，王加勝.基于Vue和Spring Boot的校園記錄管理Web App的設(shè)計與實現(xiàn) [J].計算機應(yīng)用與軟件，2020，37（4）：25-30.

[4] 朱二華.基于Vue.js的Web前端應(yīng)用研究 [J].科技與創(chuàng)新，2017（20）：119-121.

[5] 張峰.應(yīng)用SpringBoot改變web應(yīng)用開發(fā)模式 [J].科技創(chuàng)新與應(yīng)用，2017（23）：193-194.

[6] 李洋.SSM框架在Web應(yīng)用開發(fā)中的設(shè)計與實現(xiàn) [J].計算機技術(shù)與發(fā)展，2016，26（12）：190-194.

作者簡介：江曉慶（1981—），男，漢族，廣東揭陽人，工程師，碩士研究生，研究方向：計算機應(yīng)用技術(shù);楊磊（1978—），男，漢族，河南安陽人，講師，博士研究生，研究方向：教育技術(shù)。