SpringBoot在線學(xué)習(xí)系統(tǒng)的開發(fā)

摘要：在線學(xué)習(xí)系統(tǒng)是以教學(xué)實(shí)踐工作需要為背景，以提高教師教學(xué)效率，改革學(xué)生學(xué)習(xí)模式，推動(dòng)科學(xué)化、信息化和規(guī)范化管理為目的而開發(fā)的軟件系統(tǒng)。為了實(shí)現(xiàn)對(duì)學(xué)生學(xué)習(xí)管理工作的信息化和規(guī)范化，本文在分析高校在線學(xué)習(xí)系統(tǒng)的發(fā)展現(xiàn)狀和趨勢(shì)的基礎(chǔ)上，針對(duì)目前學(xué)習(xí)和管理的主要內(nèi)容和存在的主要問(wèn)題，設(shè)計(jì)開發(fā)了基于SpringBoot的在線學(xué)習(xí)系統(tǒng)，為實(shí)現(xiàn)學(xué)校學(xué)習(xí)及管理工作的信息化和規(guī)范化提供一個(gè)方案。該系統(tǒng)具有以下特點(diǎn)：（1）使用SpringCloud微服務(wù)架構(gòu)，nginx作為服務(wù)器，使本系統(tǒng)成為一個(gè)穩(wěn)定性高、可用性高、技術(shù)兼容性強(qiáng)以及可擴(kuò)展性高的系統(tǒng)。（2）使用ElasticSearch作為搜索引擎，幫助系統(tǒng)以極高的速度去處理大規(guī)模的數(shù)據(jù)。（3）使用RabbitMQ作為消息中間件，在視頻處理、課程發(fā)布等功能中起到了流量削峰、微服務(wù)之間解耦的作用，進(jìn)而提高系統(tǒng)整體的使用體驗(yàn)。

關(guān)鍵詞：SpringBoot；在線學(xué)習(xí)；學(xué)習(xí)系統(tǒng)

引言

互聯(lián)網(wǎng)以其豐富的信息和互動(dòng)性，日益融入人們的生活，給學(xué)習(xí)環(huán)境和教學(xué)方法帶來(lái)了重大變化。在線學(xué)習(xí)系統(tǒng)引起了很多人的興趣，因?yàn)槠洳皇軙r(shí)間和空間的限制，為學(xué)習(xí)者提供廣泛的現(xiàn)代學(xué)習(xí)資源，允許學(xué)習(xí)者個(gè)性化學(xué)習(xí)、主動(dòng)學(xué)習(xí)，從而滿足他們的個(gè)人學(xué)習(xí)需求。傳統(tǒng)的線下學(xué)習(xí)需要更多的時(shí)間和路程來(lái)學(xué)習(xí)，而在線學(xué)習(xí)系統(tǒng)的引入意味著人們不再局限于傳統(tǒng)的線下學(xué)習(xí)，多媒體學(xué)習(xí)的好處是還可以鼓勵(lì)人們主動(dòng)從互聯(lián)網(wǎng)上獲取個(gè)人學(xué)習(xí)所需的信息，進(jìn)行個(gè)性化學(xué)習(xí)[1]。

1. 在線學(xué)習(xí)系統(tǒng)的需求分析

1.1 課程管理模塊功能多樣化

以教學(xué)管理員或者系統(tǒng)管理員身份登錄之后，即可進(jìn)入課程管理模塊。教學(xué)管理員只能查看、修改自己組織的課程信息，系統(tǒng)管理員可以查看、修改所有的課程信息。課程管理模塊主要包括對(duì)課程信息更新，課程的上架、下架，課程信息修改之后對(duì)課程頁(yè)面的預(yù)覽，以及對(duì)視頻文件的上傳或查詢。

1.2 課程學(xué)習(xí)模塊開放共享

由于本系統(tǒng)的課程完全開源免費(fèi)，所以無(wú)論是注冊(cè)用戶還是游客均可以進(jìn)入課程頁(yè)面瀏覽課程信息、單擊課程目錄章節(jié)進(jìn)行視頻學(xué)習(xí)。用戶登錄之后學(xué)習(xí)課程，可以將課程添加到自己的課程學(xué)習(xí)列表中。

1.3 搜索引擎模塊實(shí)現(xiàn)關(guān)聯(lián)

傳統(tǒng)的使用搜索引擎的搜索功能在數(shù)據(jù)量達(dá)到一定程度之后，便會(huì)出現(xiàn)響應(yīng)速度慢的情況，極大地影響了用戶體驗(yàn)。本系統(tǒng)使用ElasticSearch搜索引擎實(shí)現(xiàn)課程搜索以及課程目錄關(guān)聯(lián)視頻搜索功能，這樣即使系統(tǒng)的課程、視頻文件信息不斷增加，也能保證系統(tǒng)課程以及課程目錄關(guān)聯(lián)視頻信息檢索的速度。

1.4 單點(diǎn)登錄模塊便捷訪問(wèn)

本系統(tǒng)在設(shè)計(jì)上是三端分離，即用戶學(xué)習(xí)端、教學(xué)管理端、系統(tǒng)管理端分離。要求管理員用戶登錄三個(gè)系統(tǒng)時(shí)不需要重復(fù)數(shù)據(jù)用戶名、密碼，在登錄一個(gè)系統(tǒng)之后，另外兩個(gè)系統(tǒng)也可以直接訪問(wèn)。學(xué)生用戶可以注冊(cè)獲得自己的賬號(hào)及密碼，而教學(xué)方和系統(tǒng)管理員用戶注冊(cè)的賬號(hào)需要通過(guò)管理員的審核。

1.5 系統(tǒng)管理模塊豐富權(quán)限

在系統(tǒng)學(xué)習(xí)端首頁(yè)，用戶看到的輪播圖信息、課程分類信息以及熱點(diǎn)課程需要系統(tǒng)后臺(tái)進(jìn)行動(dòng)態(tài)配置。管理員進(jìn)入系統(tǒng)管理模塊后，管理員可以行使管理員權(quán)限，修改頁(yè)面信息，對(duì)頁(yè)面進(jìn)行增加、刪除和預(yù)覽等操作。

2.? SpringBoot在線學(xué)習(xí)系統(tǒng)的可行性分析

2.1 技術(shù)可行性

在線學(xué)習(xí)系統(tǒng)采用微服務(wù)架構(gòu)，集合Vue.js，Nuxt，elasticSearch等開發(fā)技術(shù)，由于筆者在實(shí)訓(xùn)、實(shí)習(xí)以及自我學(xué)習(xí)期間對(duì)這些技術(shù)加以學(xué)習(xí)并使用，因此能夠?qū)⑵鋺?yīng)用到實(shí)際開發(fā)中。系統(tǒng)同時(shí)采用MVC三層架構(gòu)設(shè)計(jì)思想，將模型、視圖、控制器區(qū)分開來(lái)，既提高了代碼的編寫效率，又降低了系統(tǒng)的耦合性，提高了系統(tǒng)的可維護(hù)性[2]?？傮w來(lái)說(shuō)，開發(fā)該系統(tǒng)技術(shù)是可行的。

2.2 操作可行性

在線學(xué)習(xí)系統(tǒng)具有簡(jiǎn)潔的用戶界面，用戶能夠輕松地熟悉各功能模塊并進(jìn)行使用，通過(guò)簡(jiǎn)單的單擊、搜索框的搜索便可以實(shí)現(xiàn)網(wǎng)頁(yè)與后臺(tái)數(shù)據(jù)的交互。同時(shí)教學(xué)管理員、系統(tǒng)管理員能夠通過(guò)后臺(tái)操作進(jìn)行系統(tǒng)服務(wù)數(shù)據(jù)的更新與維護(hù)?？傮w來(lái)說(shuō)，該系統(tǒng)具有操作簡(jiǎn)單、功能健全的特點(diǎn)，操作方面是合理可行的。

3. SpringBoot在線學(xué)習(xí)系統(tǒng)的總體設(shè)計(jì)

3.1 方案設(shè)計(jì)

目前一些在線學(xué)習(xí)系統(tǒng)因?yàn)槭褂昧藗鹘y(tǒng)的SSM技術(shù)進(jìn)行開發(fā)，沒(méi)有使用主流的微服務(wù)架構(gòu)、搜索引擎等技術(shù)，所以存在系統(tǒng)可擴(kuò)展性差、可用性低等缺陷。為了解決這些問(wèn)題，本系統(tǒng)采用以下方案：

（1） 在線學(xué)習(xí)系統(tǒng)采用SpringBoot微服務(wù)架構(gòu)，實(shí)現(xiàn)系統(tǒng)對(duì)多種編程語(yǔ)言的兼容以及系統(tǒng)功能服務(wù)添加的易操作性，保證系統(tǒng)各微服務(wù)之間彼此獨(dú)立，一個(gè)服務(wù)的終止不影響其他服務(wù)的運(yùn)行，實(shí)現(xiàn)系統(tǒng)的高可用性。

（2） 針對(duì)課程檢索功能上的不足，本系統(tǒng)采用ElasticSearch搜索引擎設(shè)計(jì)課程檢索功能，進(jìn)而實(shí)現(xiàn)在龐大數(shù)據(jù)量的情況下，課程搜索服務(wù)仍然可以高效工作。

（3）考慮到系統(tǒng)可擴(kuò)展性，系統(tǒng)采用Maven父子依賴架構(gòu)，將公用的模型類、Service服務(wù)、工具類分別進(jìn)行封裝，在其需要被使用到的微服務(wù)中進(jìn)行引用。

（4）系統(tǒng)對(duì)外暴露的接口進(jìn)行單獨(dú)封裝，以保證后續(xù)對(duì)接口的增刪改不需要頻繁地改動(dòng)系統(tǒng)業(yè)務(wù)源碼，系統(tǒng)使用swagger技術(shù)對(duì)接口進(jìn)行文檔描述，以保證前后端分離情況下的系統(tǒng)開發(fā)效率。此外，系統(tǒng)對(duì)異常進(jìn)行統(tǒng)一攔截、拋出，以此給用戶更好的使用體驗(yàn)。

如圖1所示，系統(tǒng)的設(shè)計(jì)流程主要包括：系統(tǒng)需求分析、數(shù)據(jù)庫(kù)分析、微服務(wù)框架搭建、前端Vue客戶端開發(fā)、后臺(tái)功能開發(fā)和前后端集成測(cè)試等。

3.2 功能設(shè)計(jì)

基于SpringBoot模式的在線學(xué)習(xí)系統(tǒng)是針對(duì)學(xué)生、校方、企業(yè)以及管理者而設(shè)計(jì)的系統(tǒng)，因此，該系統(tǒng)的角色分為學(xué)生、教學(xué)管理員和系統(tǒng)管理員。學(xué)生用戶作為普通用戶，應(yīng)該具有登錄注冊(cè)、搜索課程、瀏覽課程信息、觀看課程視頻等功能。教學(xué)管理員作為特殊用戶可以發(fā)布課程信息、修改課程信息、上傳視頻文件。而管理員作為管理用戶，可以修改首頁(yè)輪播圖的配置、課程分類、熱點(diǎn)課程、網(wǎng)站頁(yè)面等信息[3]。因此，他們的功能模塊如圖2所示，也各不相同。

（1）學(xué)生端：用戶輸入正確的密碼后，登錄成功，隨即可以單擊頁(yè)面上的課程進(jìn)行預(yù)覽和學(xué)習(xí)，在操作正確并單擊開始學(xué)習(xí)后，相關(guān)保存在數(shù)據(jù)庫(kù)中。

（2）教學(xué)管理端：教學(xué)方在輸入正確的賬號(hào)密碼后，進(jìn)入到教學(xué)系統(tǒng)的管理界面，在該模塊中，可以查看、修改課程信息、發(fā)布課程信息、上傳視頻文件，進(jìn)行課程章節(jié)的更新。

（3）系統(tǒng)管理端：管理員在輸入正確的賬號(hào)密碼后，進(jìn)入到該系統(tǒng)的管理界面，在該模塊中，可以查看、修改頁(yè)面信息，包括輪播圖的配置信息、熱點(diǎn)課程、課程分類信息。整個(gè)系統(tǒng)的功能結(jié)構(gòu)圖如圖2所示。

4. SpringBoot在線學(xué)習(xí)系統(tǒng)的詳細(xì)設(shè)計(jì)

系統(tǒng)的頁(yè)面主要包括主頁(yè)面、課程信息頁(yè)面、課程搜索頁(yè)面以及課程視頻播放頁(yè)面。主頁(yè)面采用Nginx的SSI頁(yè)面包含技術(shù)，實(shí)現(xiàn)頁(yè)面的拆分以及重組。課程信息以及課程視頻播放頁(yè)面使用freemarker技術(shù)實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)填充。課程搜索頁(yè)面采用Vue.js將頁(yè)面進(jìn)行組件化開發(fā)、課程信息為從后臺(tái)獲取的數(shù)據(jù)，并采用nuxt.js技術(shù)將頁(yè)面進(jìn)行靜態(tài)化以便網(wǎng)絡(luò)抓取。

4.1 SpringBoot在線學(xué)習(xí)系統(tǒng)的頁(yè)面設(shè)計(jì)

4.1.1 主頁(yè)面設(shè)計(jì)

在線學(xué)習(xí)系統(tǒng)頁(yè)面使用SSI技術(shù)進(jìn)行設(shè)計(jì)，系統(tǒng)通過(guò)Nginx的SSI技術(shù)，類似于JSP中的靜態(tài)include技術(shù)，將頁(yè)面分成一塊一塊的，最后進(jìn)行合并渲染成HTML頁(yè)面返回給客戶端或用戶。

4.1.2 課程信息頁(yè)面設(shè)計(jì)

課程信息頁(yè)面由主頁(yè)或搜索頁(yè)面的課程圖片單擊操作進(jìn)入。課程信息靜態(tài)頁(yè)面的生成步驟為：首先遠(yuǎn)程請(qǐng)求課程管理服務(wù)獲取數(shù)據(jù)模型信息，然后從GridFS中獲取存儲(chǔ)的課程詳細(xì)頁(yè)面的freemarker模板，接著將數(shù)據(jù)模型信息和freemarker模板進(jìn)行結(jié)合生成一個(gè)HTML靜態(tài)頁(yè)面保存到GridFS中，最后將該HTML頁(yè)面下載到web服務(wù)器中。

4.1.3 課程搜索頁(yè)面設(shè)計(jì)

課程搜索頁(yè)面基于Vue框架，以組件形式拼裝頁(yè)面，課程信息從ElasticSearch索引庫(kù)中獲取，分類信息從MySQL數(shù)據(jù)庫(kù)中獲取，然后通過(guò)nuxt.js技術(shù)將頁(yè)面數(shù)據(jù)進(jìn)行靜態(tài)化，以便網(wǎng)絡(luò)蜘蛛抓取頁(yè)面中的關(guān)鍵字。Nuxt.js的服務(wù)端渲染工作流程為：用戶發(fā)送請(qǐng)求到Node.js服務(wù)器，然后Nuxt.js將后臺(tái)獲取到的數(shù)據(jù)與Vue頁(yè)面進(jìn)行整合，最后將HTML頁(yè)面返回給用戶。

4.2 SpringBoot在線學(xué)習(xí)系統(tǒng)的注冊(cè)登錄設(shè)計(jì)

游客可以通過(guò)注冊(cè)功能注冊(cè)為用戶之后，在個(gè)人中心查看自己的學(xué)習(xí)課程。系統(tǒng)為用戶端、教學(xué)管理端、系統(tǒng)管理端三端分離，使用單點(diǎn)登錄之后，管理員只需要輸入一次用戶名和密碼即可進(jìn)行三端的訪問(wèn)。

4.2.1 用戶注冊(cè)設(shè)計(jì)與實(shí)現(xiàn)

注冊(cè)的用戶身份只能為學(xué)生，注冊(cè)信息包括userName（用戶賬號(hào)）、password（密碼）、birthday（出生日期）和userpic（頭像）等。學(xué)生輸入注冊(cè)信息后，客戶端首先判斷表單檢驗(yàn)是否通過(guò)、然后從服務(wù)端獲取數(shù)據(jù)判斷用戶是否已經(jīng)存在，接著執(zhí)行頭像圖片上傳到圖片服務(wù)器操作，并將圖片所在服務(wù)器中的地址返回給前端，前端將全部注冊(cè)信息添加到請(qǐng)求中發(fā)送給服務(wù)端，服務(wù)端會(huì)自動(dòng)將用戶密碼進(jìn)行加密，并以密文形式將密碼存儲(chǔ)到數(shù)據(jù)庫(kù)中。

4.2.2 單點(diǎn)登錄設(shè)計(jì)與實(shí)現(xiàn)

本項(xiàng)目包含多個(gè)子項(xiàng)目，例如個(gè)人學(xué)習(xí)平臺(tái)、教學(xué)后臺(tái)、系統(tǒng)管理后臺(tái)等。項(xiàng)目采用單點(diǎn)登錄的方案，保證用戶只需要輸入一次用戶名和密碼即可訪問(wèn)多個(gè)子項(xiàng)目。項(xiàng)目采用Spring Security和Oauth2技術(shù)解決用戶登錄子系統(tǒng)需要多次認(rèn)證的問(wèn)題，其將用戶令牌存儲(chǔ)在Redis中，作為實(shí)現(xiàn)單點(diǎn)功能的基礎(chǔ)。用戶信息以采用非對(duì)稱加密算法的JWT令牌的形式進(jìn)行存儲(chǔ)，使Keytool工具生成認(rèn)證系統(tǒng)所需的私鑰證書，使用openssl導(dǎo)出公鑰信息。

4.3 SpringBoot在線學(xué)習(xí)系統(tǒng)的ElasticSearch搜索引擎設(shè)計(jì)

ElasticSearch把數(shù)據(jù)庫(kù)中的數(shù)據(jù)通過(guò)logstash加載到索引庫(kù)中，以達(dá)到高效的檢索效率，ElasticSearch 通過(guò)集群化操作，保證索引庫(kù)的高可用狀態(tài)。通過(guò)訪問(wèn) GET/_cluster/health來(lái)查看ElasticSearch的集群健康狀況。

4.3.1 logstash的設(shè)計(jì)

系統(tǒng)使用Logstash將數(shù)據(jù)庫(kù)中的數(shù)據(jù)讀取到ES中，讀取時(shí)ES索引對(duì)象的mapping模板文件。本系統(tǒng)的模板文件包括課程詳細(xì)信息模板、課程視頻信息模板。

4.3.2 課程基本信息檢索設(shè)計(jì)

課程基本信息的檢索通過(guò)單擊課程分類或關(guān)鍵字輸入發(fā)送Http請(qǐng)求到服務(wù)端，接著服務(wù)端在ES索引庫(kù)中將滿足條件的課程信息反饋到前端中。

4.3.3 課程視頻播放地址檢索設(shè)計(jì)

課程媒資信息的檢索通過(guò)獲取頁(yè)面路由中的課程id和課程章節(jié)id，然后根據(jù)課程id和章節(jié)id從ES索引庫(kù)中獲取到媒資文件的播放地址，并將視頻播放地址與課程章節(jié)進(jìn)行關(guān)聯(lián)。

4.4 SpringBoot在線學(xué)習(xí)系統(tǒng)的系統(tǒng)管理設(shè)計(jì)

系統(tǒng)管理設(shè)計(jì)包括對(duì)首頁(yè)輪播圖等采用SSI技術(shù)包含的頁(yè)面信息修改以及對(duì)整個(gè)系統(tǒng)頁(yè)面的管理。

4.4.1 首頁(yè)輪播圖的設(shè)計(jì)

首頁(yè)輪播采用Nginx的SSI頁(yè)面包含技術(shù)，在主頁(yè)面中通過(guò)使用<！-- #include virtual=”/include/index_banner.html”>引入輪播圖頁(yè)面。頁(yè)面的修改邏輯與課程頁(yè)面預(yù)覽邏輯相同。

4.4.2 頁(yè)面管理設(shè)計(jì)

管理員打開系統(tǒng)管理頁(yè)面后看到的是系統(tǒng)的全部頁(yè)面列表，在系統(tǒng)管理頁(yè)面，管理員可以對(duì)系統(tǒng)頁(yè)面進(jìn)行預(yù)覽、編輯、新增、刪除等操作，可以通過(guò)站點(diǎn)名稱以及頁(yè)面別名查詢頁(yè)面信息。

4.5 SpringBoot在線學(xué)習(xí)系統(tǒng)的數(shù)據(jù)交互設(shè)計(jì)

系統(tǒng)的文件上傳包括圖片文件上傳和視頻文件上傳，其中圖片文件上傳到FastDFS分布式服務(wù)器中，視頻文件經(jīng)過(guò)轉(zhuǎn)碼、分片放到nginx服務(wù)器中。圖片服務(wù)器采用分布式文件系統(tǒng)FastDFS服務(wù)器，其以中小文件為載體，同時(shí)平臺(tái)配合nginx，兩者作為圖片服務(wù)器提供對(duì)應(yīng)的在線服務(wù)，客戶端使用API讀寫文件，基本解決了大容量存儲(chǔ)的問(wèn)題，并且這套高性能的文件服務(wù)器可以提供文件上傳、下載等操作。

結(jié)語(yǔ)

本文基于Intellij IDEA、WebStorm等開發(fā)工具和SpringCloud微服務(wù)、ElasticSearch搜索引擎、Nginx負(fù)載均衡、RabbitMQ消息中間件和Oauth2等技術(shù)，開發(fā)了一套在線學(xué)習(xí)系統(tǒng)。其主要功能包括單點(diǎn)登錄、視頻轉(zhuǎn)碼切片與斷點(diǎn)續(xù)傳、文件上傳、課程學(xué)習(xí)、頁(yè)面管理和課程管理等。該系統(tǒng)是一個(gè)可用性高、高內(nèi)聚低耦合、可擴(kuò)展性高的微服務(wù)架構(gòu)系統(tǒng)。首先，對(duì)于用戶個(gè)人中心頁(yè)面的功能補(bǔ)充，用戶可以查看課程的學(xué)習(xí)進(jìn)度，下一階段學(xué)習(xí)時(shí)自動(dòng)加載到視頻上次播放的位置。其次，對(duì)于系統(tǒng)管理功能的補(bǔ)充，增加系統(tǒng)管理員對(duì)人員權(quán)限的設(shè)定。再者，在課程學(xué)習(xí)系統(tǒng)中，可以擴(kuò)展課程評(píng)價(jià)功能、課程模擬測(cè)試功能以及對(duì)課程章節(jié)介紹內(nèi)容的顯示。

參考文獻(xiàn)：

[1]付志文，吳東醒，賀超波.可視化在高校在線教學(xué)系統(tǒng)數(shù)據(jù)挖掘中的應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)，2022，（11）：112-116.

[2]張俊.基于Java的公務(wù)員備考微信小程序[J].電腦知識(shí)與技術(shù)：學(xué)術(shù)版，2022，（4）：112-114.

[3]陶銘，謝仁平.基于SpringBoot的在線教育系統(tǒng)研發(fā)及應(yīng)用實(shí)踐[J].軟件導(dǎo)刊，2022，（7）：170-174.

作者簡(jiǎn)介：王琪，碩士，講師，主要研究方向：計(jì)算機(jī)應(yīng)用。

基金項(xiàng)目：江蘇省現(xiàn)代教育技術(shù)研究2022年度立項(xiàng)課題——高職院校數(shù)字媒體專業(yè)圖像處理課程的混合教學(xué)模式研究（編號(hào)：2022-R-100016）。