基于SpringBoot的教學(xué)資源平臺設(shè)計與實現(xiàn)

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

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

關(guān)鍵詞：SpringBoot框架;教學(xué)資源;UEditor編輯器;教材生成;文本高亮

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A

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

1 關(guān)鍵技術(shù)

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

2 系統(tǒng)分析與設(shè)計

2.1 系統(tǒng)需求分析

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

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

系統(tǒng)分為用戶信息管理、教材書架、教材生成、教材學(xué)習(xí)、討論區(qū)、私信六個功能模塊，如圖1所示。

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

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

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

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

（5）討論區(qū)模塊。討論區(qū)為擴展性學(xué)習(xí)提供了空間，分為發(fā)布話題模塊、點贊模塊、評論模塊。

（6）私信模塊。學(xué)生可通過私信方式與編者進(jìn)行交流，分為聯(lián)系人管理、消息發(fā)送、未讀消息等模塊。

3 系統(tǒng)實現(xiàn)

系統(tǒng)的功能模塊較多，以富媒體教材學(xué)習(xí)模塊為例詳細(xì)介紹系統(tǒng)的實現(xiàn)細(xì)節(jié)。

3.1 功能效果圖

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

3.2 文本高亮功能實現(xiàn)

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

JS獲取文本并添加自定義標(biāo)簽的代碼如下：

r=window.getSelection（）;//獲取選中區(qū)域

if（r.rangeCount>0）{

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

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

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

a.onclick=function（）{//添加鼠標(biāo)點擊事件}

r.surroundContents（a）

r.collapse（false）;

}

3.3 翻頁功能實現(xiàn)

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

4 結(jié)論

論文設(shè)計并開發(fā)了一個C語言富媒體教學(xué)資源平臺，拓寬了學(xué)習(xí)方式，彌補紙質(zhì)書籍的不足，有利于促進(jìn)師生在線交流，能提高學(xué)習(xí)效率。系統(tǒng)開發(fā)利用SpringBoot框架，采取分層思想，易于實現(xiàn)，便于擴展，系統(tǒng)功能完善，運行穩(wěn)定。

參考文獻(xiàn)：

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

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

[3]劉科楓.《C語言程序設(shè)計》課件和教學(xué)網(wǎng)站設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2018，14（16）：100101，112.

[4]李孟津，楊丹.基于SpringBoot的在線招聘網(wǎng)站的設(shè)計與實現(xiàn)[J].科學(xué)技術(shù)創(chuàng)新，2020，（26）：9899.

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

基金信息：本文得到河南省科技攻關(guān)項目（182102210447）;河南省高校大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目（202010485020）;河南省教育科學(xué)十三五規(guī)劃課題（2020YB0149）;教育部高等教育司產(chǎn)學(xué)合作協(xié)同育人項目（201902060014）資助

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