SpringBoot在線學習系統的開發

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

關鍵詞：SpringBoot；在線學習；學習系統

引言

互聯網以其豐富的信息和互動性，日益融入人們的生活，給學習環境和教學方法帶來了重大變化。在線學習系統引起了很多人的興趣，因為其不受時間和空間的限制，為學習者提供廣泛的現代學習資源，允許學習者個性化學習、主動學習，從而滿足他們的個人學習需求。傳統的線下學習需要更多的時間和路程來學習，而在線學習系統的引入意味著人們不再局限于傳統的線下學習，多媒體學習的好處是還可以鼓勵人們主動從互聯網上獲取個人學習所需的信息，進行個性化學習[1]。

1. 在線學習系統的需求分析

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

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

1.2 課程學習模塊開放共享

由于本系統的課程完全開源免費，所以無論是注冊用戶還是游客均可以進入課程頁面瀏覽課程信息、單擊課程目錄章節進行視頻學習。用戶登錄之后學習課程，可以將課程添加到自己的課程學習列表中。

1.3 搜索引擎模塊實現關聯

傳統的使用搜索引擎的搜索功能在數據量達到一定程度之后，便會出現響應速度慢的情況，極大地影響了用戶體驗。本系統使用ElasticSearch搜索引擎實現課程搜索以及課程目錄關聯視頻搜索功能，這樣即使系統的課程、視頻文件信息不斷增加，也能保證系統課程以及課程目錄關聯視頻信息檢索的速度。

1.4 單點登錄模塊便捷訪問

本系統在設計上是三端分離，即用戶學習端、教學管理端、系統管理端分離。要求管理員用戶登錄三個系統時不需要重復數據用戶名、密碼，在登錄一個系統之后，另外兩個系統也可以直接訪問。學生用戶可以注冊獲得自己的賬號及密碼，而教學方和系統管理員用戶注冊的賬號需要通過管理員的審核。

1.5 系統管理模塊豐富權限

在系統學習端首頁，用戶看到的輪播圖信息、課程分類信息以及熱點課程需要系統后臺進行動態配置。管理員進入系統管理模塊后，管理員可以行使管理員權限，修改頁面信息，對頁面進行增加、刪除和預覽等操作。

2.? SpringBoot在線學習系統的可行性分析

2.1 技術可行性

在線學習系統采用微服務架構，集合Vue.js，Nuxt，elasticSearch等開發技術，由于筆者在實訓、實習以及自我學習期間對這些技術加以學習并使用，因此能夠將其應用到實際開發中。系統同時采用MVC三層架構設計思想，將模型、視圖、控制器區分開來，既提高了代碼的編寫效率，又降低了系統的耦合性，提高了系統的可維護性[2]?？傮w來說，開發該系統技術是可行的。

2.2 操作可行性

在線學習系統具有簡潔的用戶界面，用戶能夠輕松地熟悉各功能模塊并進行使用，通過簡單的單擊、搜索框的搜索便可以實現網頁與后臺數據的交互。同時教學管理員、系統管理員能夠通過后臺操作進行系統服務數據的更新與維護?？傮w來說，該系統具有操作簡單、功能健全的特點，操作方面是合理可行的。

3. SpringBoot在線學習系統的總體設計

3.1 方案設計

目前一些在線學習系統因為使用了傳統的SSM技術進行開發，沒有使用主流的微服務架構、搜索引擎等技術，所以存在系統可擴展性差、可用性低等缺陷。為了解決這些問題，本系統采用以下方案：

（1） 在線學習系統采用SpringBoot微服務架構，實現系統對多種編程語言的兼容以及系統功能服務添加的易操作性，保證系統各微服務之間彼此獨立，一個服務的終止不影響其他服務的運行，實現系統的高可用性。

（2） 針對課程檢索功能上的不足，本系統采用ElasticSearch搜索引擎設計課程檢索功能，進而實現在龐大數據量的情況下，課程搜索服務仍然可以高效工作。

（3）考慮到系統可擴展性，系統采用Maven父子依賴架構，將公用的模型類、Service服務、工具類分別進行封裝，在其需要被使用到的微服務中進行引用。

（4）系統對外暴露的接口進行單獨封裝，以保證后續對接口的增刪改不需要頻繁地改動系統業務源碼，系統使用swagger技術對接口進行文檔描述，以保證前后端分離情況下的系統開發效率。此外，系統對異常進行統一攔截、拋出，以此給用戶更好的使用體驗。

如圖1所示，系統的設計流程主要包括：系統需求分析、數據庫分析、微服務框架搭建、前端Vue客戶端開發、后臺功能開發和前后端集成測試等。

3.2 功能設計

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

（1）學生端：用戶輸入正確的密碼后，登錄成功，隨即可以單擊頁面上的課程進行預覽和學習，在操作正確并單擊開始學習后，相關保存在數據庫中。

（2）教學管理端：教學方在輸入正確的賬號密碼后，進入到教學系統的管理界面，在該模塊中，可以查看、修改課程信息、發布課程信息、上傳視頻文件，進行課程章節的更新。

（3）系統管理端：管理員在輸入正確的賬號密碼后，進入到該系統的管理界面，在該模塊中，可以查看、修改頁面信息，包括輪播圖的配置信息、熱點課程、課程分類信息。整個系統的功能結構圖如圖2所示。

4. SpringBoot在線學習系統的詳細設計

系統的頁面主要包括主頁面、課程信息頁面、課程搜索頁面以及課程視頻播放頁面。主頁面采用Nginx的SSI頁面包含技術，實現頁面的拆分以及重組。課程信息以及課程視頻播放頁面使用freemarker技術實現數據的動態填充。課程搜索頁面采用Vue.js將頁面進行組件化開發、課程信息為從后臺獲取的數據，并采用nuxt.js技術將頁面進行靜態化以便網絡抓取。

4.1 SpringBoot在線學習系統的頁面設計

4.1.1 主頁面設計

在線學習系統頁面使用SSI技術進行設計，系統通過Nginx的SSI技術，類似于JSP中的靜態include技術，將頁面分成一塊一塊的，最后進行合并渲染成HTML頁面返回給客戶端或用戶。

4.1.2 課程信息頁面設計

課程信息頁面由主頁或搜索頁面的課程圖片單擊操作進入。課程信息靜態頁面的生成步驟為：首先遠程請求課程管理服務獲取數據模型信息，然后從GridFS中獲取存儲的課程詳細頁面的freemarker模板，接著將數據模型信息和freemarker模板進行結合生成一個HTML靜態頁面保存到GridFS中，最后將該HTML頁面下載到web服務器中。

4.1.3 課程搜索頁面設計

課程搜索頁面基于Vue框架，以組件形式拼裝頁面，課程信息從ElasticSearch索引庫中獲取，分類信息從MySQL數據庫中獲取，然后通過nuxt.js技術將頁面數據進行靜態化，以便網絡蜘蛛抓取頁面中的關鍵字。Nuxt.js的服務端渲染工作流程為：用戶發送請求到Node.js服務器，然后Nuxt.js將后臺獲取到的數據與Vue頁面進行整合，最后將HTML頁面返回給用戶。

4.2 SpringBoot在線學習系統的注冊登錄設計

游客可以通過注冊功能注冊為用戶之后，在個人中心查看自己的學習課程。系統為用戶端、教學管理端、系統管理端三端分離，使用單點登錄之后，管理員只需要輸入一次用戶名和密碼即可進行三端的訪問。

4.2.1 用戶注冊設計與實現

注冊的用戶身份只能為學生，注冊信息包括userName（用戶賬號）、password（密碼）、birthday（出生日期）和userpic（頭像）等。學生輸入注冊信息后，客戶端首先判斷表單檢驗是否通過、然后從服務端獲取數據判斷用戶是否已經存在，接著執行頭像圖片上傳到圖片服務器操作，并將圖片所在服務器中的地址返回給前端，前端將全部注冊信息添加到請求中發送給服務端，服務端會自動將用戶密碼進行加密，并以密文形式將密碼存儲到數據庫中。

4.2.2 單點登錄設計與實現

本項目包含多個子項目，例如個人學習平臺、教學后臺、系統管理后臺等。項目采用單點登錄的方案，保證用戶只需要輸入一次用戶名和密碼即可訪問多個子項目。項目采用Spring Security和Oauth2技術解決用戶登錄子系統需要多次認證的問題，其將用戶令牌存儲在Redis中，作為實現單點功能的基礎。用戶信息以采用非對稱加密算法的JWT令牌的形式進行存儲，使Keytool工具生成認證系統所需的私鑰證書，使用openssl導出公鑰信息。

4.3 SpringBoot在線學習系統的ElasticSearch搜索引擎設計

ElasticSearch把數據庫中的數據通過logstash加載到索引庫中，以達到高效的檢索效率，ElasticSearch 通過集群化操作，保證索引庫的高可用狀態。通過訪問 GET/_cluster/health來查看ElasticSearch的集群健康狀況。

4.3.1 logstash的設計

系統使用Logstash將數據庫中的數據讀取到ES中，讀取時ES索引對象的mapping模板文件。本系統的模板文件包括課程詳細信息模板、課程視頻信息模板。

4.3.2 課程基本信息檢索設計

課程基本信息的檢索通過單擊課程分類或關鍵字輸入發送Http請求到服務端，接著服務端在ES索引庫中將滿足條件的課程信息反饋到前端中。

4.3.3 課程視頻播放地址檢索設計

課程媒資信息的檢索通過獲取頁面路由中的課程id和課程章節id，然后根據課程id和章節id從ES索引庫中獲取到媒資文件的播放地址，并將視頻播放地址與課程章節進行關聯。

4.4 SpringBoot在線學習系統的系統管理設計

系統管理設計包括對首頁輪播圖等采用SSI技術包含的頁面信息修改以及對整個系統頁面的管理。

4.4.1 首頁輪播圖的設計

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

4.4.2 頁面管理設計

管理員打開系統管理頁面后看到的是系統的全部頁面列表，在系統管理頁面，管理員可以對系統頁面進行預覽、編輯、新增、刪除等操作，可以通過站點名稱以及頁面別名查詢頁面信息。

4.5 SpringBoot在線學習系統的數據交互設計

系統的文件上傳包括圖片文件上傳和視頻文件上傳，其中圖片文件上傳到FastDFS分布式服務器中，視頻文件經過轉碼、分片放到nginx服務器中。圖片服務器采用分布式文件系統FastDFS服務器，其以中小文件為載體，同時平臺配合nginx，兩者作為圖片服務器提供對應的在線服務，客戶端使用API讀寫文件，基本解決了大容量存儲的問題，并且這套高性能的文件服務器可以提供文件上傳、下載等操作。

結語

本文基于Intellij IDEA、WebStorm等開發工具和SpringCloud微服務、ElasticSearch搜索引擎、Nginx負載均衡、RabbitMQ消息中間件和Oauth2等技術，開發了一套在線學習系統。其主要功能包括單點登錄、視頻轉碼切片與斷點續傳、文件上傳、課程學習、頁面管理和課程管理等。該系統是一個可用性高、高內聚低耦合、可擴展性高的微服務架構系統。首先，對于用戶個人中心頁面的功能補充，用戶可以查看課程的學習進度，下一階段學習時自動加載到視頻上次播放的位置。其次，對于系統管理功能的補充，增加系統管理員對人員權限的設定。再者，在課程學習系統中，可以擴展課程評價功能、課程模擬測試功能以及對課程章節介紹內容的顯示。

參考文獻：

[1]付志文，吳東醒，賀超波.可視化在高校在線教學系統數據挖掘中的應用研究[J].現代計算機，2022，（11）：112-116.

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

[3]陶銘，謝仁平.基于SpringBoot的在線教育系統研發及應用實踐[J].軟件導刊，2022，（7）：170-174.

作者簡介：王琪，碩士，講師，主要研究方向：計算機應用。

基金項目：江蘇省現代教育技術研究2022年度立項課題——高職院校數字媒體專業圖像處理課程的混合教學模式研究（編號：2022-R-100016）。