基于SpringBoot的教學資源平臺設計與實現

劉超慧 楊雨涵 邢丹陽 解秋寒 李舶永

摘 要：隨著互聯網技術的發展和移動終端設備的普及，在線教學平臺成為教學的重要途徑。設計開發了一個基于SpringBoot框架的富媒體教學資源平臺，利用SpringBoot框架、MongoDB數據庫和富文本編輯器UEditor等技術完成開發，系統界面友好、可擴展性強。論文介紹了系統需求分析，描述了設計和實現的細節。系統的開發有利于提高C語言的學習效果。

關鍵詞：SpringBoot框架;教學資源;UEditor編輯器;教材生成;文本高亮

中圖分類號：TP393文獻標識碼：A

隨著互聯網技術的發展以及個性化學習需求的增多，在線學習成為一種重要的學習方式[1]。將富媒體技術用于在線學習平臺開發能豐富課程資源，提高互動性[2]。C語言是一門學科基礎課程，理論性強、趣味性差、學習難度大。開發C語言學習平臺，有利于提高學習效果，便于實施“因材施教”[3]。

1 關鍵技術

系統開發采用的技術有Spring Boot框架、MongoDB數據庫、UEditor編輯器等。其中，Spring Boot是由Pivotal團隊開發，用于簡化新Spring應用的開發過程，是一些相關庫文件的集合，具有開箱即用、約定優于配置的特征[4]。MongoDB是一個基于分布式文件存儲、面向文檔的數據庫，由C++編寫，是NoSQL數據庫產品中最熱門的一種，支持的數據結構沒有固定的模式，可以快速的存儲復雜的數據類型[5]。富文本編輯器，是一種可內嵌于瀏覽器，所見即所得的文本編輯器，其中UEditor應用較為，由百度公司推出，具有輕量、可定制、用戶體驗優秀等特點[5]。

2 系統分析與設計

2.1 系統需求分析

教學資源平臺設計的目的是使學習過程具有較強的趣味性，并能滿足個性化的學習需求，展開互動交流。其主要用戶有教師和學生兩類?；竟δ苄枨蟀ㄓ脩粜畔⒐芾怼⒏幻襟w教材管理、學習過程管理、線上交流互動管理等，其中教材管理和學習過程管理是系統的關鍵部分;教材管理，用于教學資源的生成、展示等;學習過程管理主要提供學習過程的各類操作功能。非功能性需求包括系統安全性、易用性和可擴展性等三方面。

2.2 系統功能設計

系統分為用戶信息管理、教材書架、教材生成、教材學習、討論區、私信六個功能模塊，如圖1所示。

（1）用戶信息管理模塊，完成用戶基本信息的管理與維護，包括注冊/登錄、信息維護等功能。

（2）教材書架管理模塊，負責向用戶展示平臺所已有的教材概要信息，包括教材瀏覽、教材詳情、教材購買等功能。

（3）教材生成模塊，分為教材創建、目錄創建和教材內容制作等模塊。其中，教材管理模塊提供教師對教材的創建、修改、維護、刪除等管理功能;在目錄管理模塊，教師通過添加單元和小節，設計教材目錄;教材內容制作模塊，教師利用富文本編輯器，對教材內容進行編輯。

（4）教材學習模塊，面向教師和學生，分為教材獲取、文本高亮、筆記、目錄索引等模塊。其中文本高亮模塊，用戶可對需要著重強調的文字部分添加/刪除高亮標注;筆記模塊，可對需標注的文字，實現添加、修改和刪除筆記等操作;前后翻頁，實現前后翻頁功能，并實現跨單元切換。

（5）討論區模塊。討論區為擴展性學習提供了空間，分為發布話題模塊、點贊模塊、評論模塊。

（6）私信模塊。學生可通過私信方式與編者進行交流，分為聯系人管理、消息發送、未讀消息等模塊。

3 系統實現

系統的功能模塊較多，以富媒體教材學習模塊為例詳細介紹系統的實現細節。

3.1 功能效果圖

教材學習模塊的主要功能分為對頁面的操作和對文字內容的操作，對頁面的操作設計在學習頁面左側菜單欄，具體包括目錄索引、前后翻頁、查看高亮、筆記信息等功能;對文字內容的操作設計在內容展示區的右鍵菜單，具體包括復制、百科、詞典、高亮、朗讀、筆記等。效果圖如圖2所示。

3.2 文本高亮功能實現

讀者記錄文本高亮的實現原理，是系統將對應的信息通過HTML代碼的方式保存至個人教材信息表中。用戶選中文本處添加HTML的自定義標簽，通過保存添加后的教材內容HTML代碼，進而保存用戶高亮信息。給該標簽設置鼠標點擊事件，用戶點擊已高亮的地方后出現菜單，可進行高亮的刪除。使用自定義標簽的目的在于區分用戶的操作和教材內容，以防二者發生沖突。為區分用戶做的不同標記信息，為自定義標簽添加id屬性，屬性值為高亮表中該條高亮記錄的id。具體流程：JS定位到高亮文本兩側，控制添加userhighlight標簽和鼠標點擊事件。待高亮信息存入數據庫后，改變標簽的id。流程圖如圖3所示。

JS獲取文本并添加自定義標簽的代碼如下：

r=window.getSelection（）;//獲取選中區域

if（r.rangeCount>0）{

r=r.getRangeAt（0）;//獲取選中位置的起始

var a=document.createElement（′userhighlight′）;

a.id=′asd′;//添加臨時id

a.onclick=function（）{//添加鼠標點擊事件}

r.surroundContents（a）

r.collapse（false）;

}

3.3 翻頁功能實現

用戶可以利用左側菜單欄中翻頁按鈕切換小節，向后翻頁的功能流程是：當前小節編號+1是否超過小節所在單元的小節數，如果未超過，則直接查詢小節編號+1的小節;若超過，則在下一單元進行查詢。如果教材有下一單元，則判斷下一單元是否有第一小節，若有，則成功跳轉;否則，提示當前已經是最后一小節。具體流程圖如圖4所示。

4 結論

論文設計并開發了一個C語言富媒體教學資源平臺，拓寬了學習方式，彌補紙質書籍的不足，有利于促進師生在線交流，能提高學習效率。系統開發利用SpringBoot框架，采取分層思想，易于實現，便于擴展，系統功能完善，運行穩定。

參考文獻：

[1]劉超慧，陶浩武，邢丹陽，等.基于富媒體的在線學習平臺的設計與研究[J].電腦知識與技術，2019，15（15）：176178.

[2]陶玲玲.基于富媒體技術的電子教材開發體系研究[J].中國管理信息化，2015，（8）：244.

[3]劉科楓.《C語言程序設計》課件和教學網站設計與實現[J].電腦知識與技術，2018，14（16）：100101，112.

[4]李孟津，楊丹.基于SpringBoot的在線招聘網站的設計與實現[J].科學技術創新，2020，（26）：9899.

[5]閆四洋，胡昌平，卞德志，等.基于SpringBoot+MongoDB的微服務日志系統的實現[J].計算機時代，2020，（8）：6971，74.

基金信息：本文得到河南省科技攻關項目（182102210447）;河南省高校大學生創新創業訓練計劃項目（202010485020）;河南省教育科學十三五規劃課題（2020YB0149）;教育部高等教育司產學合作協同育人項目（201902060014）資助

作者簡介：劉超慧（1981— ），男，漢族，碩士，副教授，主要研究方向為富媒體資源推薦。