高校在線課堂微學習空間小程序設計與實現

江曉慶 楊磊

摘 ?要：隨著移動互聯網的快速發展，移動學習、碎片化學習逐漸成為高校學習交流的新常態。為擺脫傳統在線學習受終端設備、學習時間、地點等限制，滿足新時代學習者對“泛在學習”的新需求，設計并開發了一款可支持高校翻轉課堂和混合教學的在線課堂微學習空間小程序。該小程序前端采用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—），男，漢族，河南安陽人，講師，博士研究生，研究方向：教育技術。