江曉慶 楊磊

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

關(guān)鍵詞：微學(xué)習(xí)空間;Vue;SpringBoot;Mybatis

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

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

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

1.1 ?Vue

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

1.2 ?SpringBoot框架

Spring Boot是由Pivotal團(tuán)隊開發(fā)的全新框架，可提供具有控制反轉(zhuǎn)特性的容器，便于對新Spring應(yīng)用搭建及開發(fā)過程進(jìn)行簡化[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)勢。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（10）課程答疑表（T_Question），用于記錄每門課程學(xué)生提出的疑難問題，包括編號、課程id、標(biāo)題、內(nèi)容、學(xué)生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)了課程分類、課程資源在線觀看學(xué)習(xí)（微課、微實驗、學(xué)習(xí)課件等）、學(xué)習(xí)測驗、在線答疑、主題交流、加入課群、通知公告、最新推薦、學(xué)習(xí)筆記、我的討論、課程收藏、資源搜索、歷史查看、個人設(shè)置等功能。

3.1 ?登錄界面

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

3.2 ?學(xué)習(xí)主界面

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

3.3 ?在線課程學(xué)習(xí)頁面

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

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

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

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

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

3.4 ?主題交流頁面

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

4 ?結(jié) ?論

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

參考文獻(xiàn)：

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

[2] 張其亮，王愛春.基于“翻轉(zhuǎn)課堂”的新型混合式教學(xué)模式研究 [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ù)。