基于SpringBoot的網(wǎng)上在線教育系統(tǒng)的設(shè)計與實現(xiàn)

馬英瑞 陳廉元 李娟 鄒紅 王冬梅

摘要：系統(tǒng)基于MVC模式JavaEE技術(shù)，使用MyEclipse 2017 CI 10 編譯器，采用Mysql關(guān)系型數(shù)據(jù)庫并結(jié)合HTML+CSS的前端技術(shù)進(jìn)行系統(tǒng)開發(fā)，完成用戶管理、新聞資訊管理、學(xué)生管理、教師管理、課程資料管理、留言管理、系統(tǒng)簡介設(shè)置等功能模塊。通過瀏覽器與服務(wù)器通信進(jìn)行數(shù)據(jù)的交互，實現(xiàn)集人性化、高效率、便捷等優(yōu)點(diǎn)于一身的在線教育平臺。

關(guān)鍵詞：在線教育平臺;前端技術(shù);2017 CI 10 編譯器;MVC模式

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

文章編號：1009-3044（2021）13-0077-03

Abstract： The system is based on MVC pattern Java EE Technology， compiled by Myeclipse 2017CI 10 compiler， and developed by Mysql relational database with HTML + CSS front-end technology， complete user management， News Information Management， student management， teacher management， curriculum management， message management， system introduction settings and other functional modules. Through the Browser and server communication for data exchange and change， to achieve a human， efficient， convenient and other advantages of online education platform.

Key words： online education platform; Front-end technology; 2017 CI 10 Compiler; MVC model

1 引言

知識經(jīng)濟(jì)時代的到來，學(xué)習(xí)模式由傳統(tǒng)的線下學(xué)習(xí)模式轉(zhuǎn)變?yōu)榫W(wǎng)絡(luò)化學(xué)習(xí)模式，又稱在線學(xué)習(xí)。學(xué)員通過網(wǎng)上教育平臺，應(yīng)用網(wǎng)絡(luò)進(jìn)行在線學(xué)習(xí)的一種全新方式，這種在線學(xué)習(xí)方式是由多媒體網(wǎng)絡(luò)學(xué)習(xí)資源、網(wǎng)上學(xué)習(xí)社區(qū)及網(wǎng)絡(luò)技術(shù)平臺構(gòu)成的全新的學(xué)習(xí)環(huán)境。相對于傳統(tǒng)學(xué)習(xí)模式來說，它具有尊重學(xué)習(xí)的個性化、互動靈活、激發(fā)學(xué)習(xí)動力以及不受時空限制等優(yōu)勢。2012年起，美國頂尖大學(xué)也陸續(xù)設(shè)立了網(wǎng)絡(luò)學(xué)習(xí)平臺，MOOC（Massive Open Oniline Course，大規(guī)模開放網(wǎng)絡(luò)課程）以教育“平臺”方式在美國爆發(fā)，美國學(xué)術(shù)界對在線教育的態(tài)度也是不斷轉(zhuǎn)變，在美國超過2800所大學(xué)中，有70%以上的學(xué)術(shù)領(lǐng)袖認(rèn)為在線教育與面授教育效果一樣或者更好[1]。

2 相關(guān)技術(shù)分析

本設(shè)計采用MVC模式開發(fā)，主要將代碼分為View層、Model層和Controller層。View層實現(xiàn)用戶的交互，只對數(shù)據(jù)采集、處理和用戶請求進(jìn)行處理，不對業(yè)務(wù)流程進(jìn)行操作[2]。Model層制定業(yè)務(wù)流程或業(yè)務(wù)狀態(tài)的處理和業(yè)務(wù)規(guī)則，在接受了視圖請求的數(shù)據(jù)后，返回處理之后的結(jié)果。MVC 最主要的核心就是業(yè)務(wù)模型的設(shè)計，目前流行的EJB模型就是一個典型的應(yīng)用例子，它從應(yīng)用技術(shù)實現(xiàn)的角度對模型做了進(jìn)一步劃分，以便充分利用現(xiàn)有組件，但是它不能作為應(yīng)用設(shè)計模型的框架[3]。Controller層接受用戶的請求，然后將視圖和模型匹配到一起，然后完成用戶請求，它對控制層進(jìn)行了明確的劃分，可以清晰地顯示出，應(yīng)該選擇怎樣的模型和視圖才能完成用戶的請求，但是控制層不做全部數(shù)據(jù)的處理[4]。

本設(shè)計采用SSM框架即SpringMVC+Spring+Mybatis，應(yīng)用SSM框架的優(yōu)勢在于所設(shè)計的Web應(yīng)用程序具有層次清晰、升級更新操作不影響正常使用、允許多次使用的特點(diǎn)。SpringMVC使各板塊分離，Spring使開發(fā)更靈活方便，使用Mybatis讓開發(fā)者直接對對象進(jìn)行操縱，各層次分工明細(xì)，并實現(xiàn)各個層次間的解耦合，讓代碼更加的靈活精簡[5]。

3 系統(tǒng)設(shè)計

3.1 各模塊設(shè)計

系統(tǒng)能夠?qū)崿F(xiàn)的功能主要分為以下八個功能模塊：其中包含用戶管理模塊、課程資料上傳模塊、課程資料管理模塊、個人創(chuàng)作管理模塊、新聞資訊管理模塊、留言信息管理模塊、評論信息管理模塊以及導(dǎo)出功能模塊。

1）用戶管理模塊

用戶管理模塊是面向所有用戶的，權(quán)限為普通用戶的只能對自己的部分進(jìn)行修改，（例如修改個人資料、刪除評論、修改密碼等）。超級管理員擁有最高權(quán)限，可以對整個系統(tǒng)的數(shù)據(jù)進(jìn)行管理，可以對學(xué)生信息、教師信息、系統(tǒng)資料等進(jìn)行增刪操作。

2）課程資料上傳模塊

上傳功能主要由普通用戶使用，學(xué)生用戶和教師用戶上傳課程資料，根據(jù)課程資料的上傳時間決定上傳順序并生成上傳列表，用戶可以在上傳列表查看歷史上傳，可以對歷史數(shù)據(jù)進(jìn)行管理。

3）課程資料管理模塊

教師用戶創(chuàng)建新的課程資料，點(diǎn)擊課程資料錄入按鈕，依次填寫新增課程資料的名稱、備注以及課程資料在本地的物理地址，點(diǎn)擊提交按鈕，提交的數(shù)據(jù)將保存在數(shù)據(jù)庫中，刷新課程資料頁面，新增的課程資料就會顯示在頁面上，同時上傳的資料右邊有刪除和編輯按鈕，可以對上傳的資料進(jìn)行編輯或刪除。

4）個人創(chuàng)作管理模塊

點(diǎn)擊個人創(chuàng)作錄入按鈕，依次填寫新增個人創(chuàng)作的名稱、備注以及個人創(chuàng)作的內(nèi)容，點(diǎn)擊提交按鈕，提交的數(shù)據(jù)將保存在數(shù)據(jù)庫中，刷新個人創(chuàng)作頁面，新增的個人創(chuàng)作就會顯示在頁面上，同時上傳的資料右邊有刪除和編輯按鈕，可以對上傳的資料進(jìn)行編輯或刪除。

5）新聞資訊管理模塊

管理員點(diǎn)擊新聞添加子菜單下的添加新聞數(shù)據(jù)，填寫新聞標(biāo)題、新聞內(nèi)容、新聞類別、新聞圖片（例如學(xué)校最新的規(guī)章制度），待提交成功后，刷新新聞資訊頁面，新增資訊會顯示在頁面上。

6）留言信息管理模塊

登錄系統(tǒng)的用戶，可在留言板對系統(tǒng)提出意見，管理員在后臺可以查看或鍵入關(guān)鍵字搜索留言信息，對留言信息進(jìn)行管理。

7）評論信息管理模塊

登錄系統(tǒng)的用戶，可以在課程資料詳情頁下方點(diǎn)擊添加評論，管理員可以在后臺查看該評論信息，并擁有對其進(jìn)行管理（包括刪除）的權(quán)限。

8）導(dǎo)出功能模塊

系統(tǒng)的信息詳情頁，信息列表頁可以導(dǎo)出信息，用戶選擇導(dǎo)出格式和保存文件的路徑，導(dǎo)出至Excel中，下載到本地，可以在本地的Excel中隨意編輯。

3.2 數(shù)據(jù)庫設(shè)計

根據(jù)系統(tǒng)分析階段所得出的結(jié)論確定在線教育平臺中存在著多個實體，系統(tǒng)的數(shù)據(jù)庫共包含了用戶信息、留言信息、教師信息、課程資料信息、個人創(chuàng)作、留言、評論等6個數(shù)據(jù)表。

1）用戶信息表（allusers表）：包含用戶id、賬號、密碼、等個人基本信息。

2）個人創(chuàng)作信息表（gerenchuangzuo表）：包含個人id、名稱、圖片、內(nèi)容、發(fā)布人等信息。

3）教師信息表（jiaoshixinxi表）：包括教師id、工號、密碼、姓名、性別、身份證、電話、課程、籍貫、照片信息。

4）課程資料信息表（kechengziliao表）：包含id、資料、內(nèi)容、圖片、視頻、工號、資料簡介等相關(guān)信息。

5）留言信息表（liuyanban表）：包含留言id、昵稱、留言內(nèi)容、回復(fù)內(nèi)容、留言人等信息。

6）評論信息表（pinglun表）：包含評論id、評論內(nèi)容、評分、評論人信息。

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

4.1 登錄模塊的實現(xiàn)

系統(tǒng)的所有資源只有在用戶登錄狀態(tài)下才可以訪問，登錄時用戶提交的表單會和數(shù)據(jù)庫中的用戶信息進(jìn)行比對，各項信息一致才能通過校驗，在系統(tǒng)中進(jìn)行下一步操作。主要步驟為當(dāng)用戶輸入賬號和密碼后，系統(tǒng)先校驗賬號和密碼的格式是否正確，如果格式錯誤提示相關(guān)錯誤，驗證格式無誤后前端的login.jsp頁面會向后端發(fā)送登錄請求，通過調(diào)用代碼中的Mainctrl類里的dopost方法來驗證。驗證成功后，將用戶名顯示在系統(tǒng)首頁上。網(wǎng)站的首頁面實現(xiàn)如圖1所示。

4.2 用戶子系統(tǒng)模塊的實現(xiàn)

1）用戶首頁模塊

2）注冊模塊

此頁面實現(xiàn)普通用戶的注冊，必須注冊登錄后才能使用，用戶名不允許重復(fù)，如果重復(fù)將會注冊失敗，并彈出相應(yīng)的提示，通過Javascript實現(xiàn)對輸入的驗證。用戶注冊關(guān)鍵代碼如下所示。

<%

HashMap ext = new HashMap（）;

ext.put（"issh"，"否"）;

new CommDAO（）.insert（request，response，"userRegister"，ext，true，false，"index.jsp"）;

%>

3）留言模塊

用戶在留言板查看留言信息，先使用sql語句查詢出所有留言表的數(shù)據(jù)，然后調(diào)用PageManager.getPages（url，4，sql， request ），返回一個ArrayList的對象，在for循環(huán)中使用jsp得到每個ArrayList對象的數(shù)據(jù)，然后放入頁面模板中，用戶點(diǎn)擊我要留言則跳轉(zhuǎn)至留言頁面（lyb.jsp）。

4）評論模塊

系統(tǒng)使用sql語句查詢出所有課程資料表的數(shù)據(jù)展示在課程資料頁，用戶在課程資料頁查看課程資料信息和評論信息，點(diǎn)擊評論按鈕，跳轉(zhuǎn)至添加評論頁面，點(diǎn)擊添加評論則將編輯好的評論數(shù)據(jù)封裝在HashMap中，通過調(diào)用CommDAO的insert方法將提交的評論內(nèi)容插入數(shù)據(jù)庫的評論信息表中，評論管理頁面則調(diào)PageManager.getPages（url，4，sql， request ）方法，返回一個ArrayList類型的對象，最后通過for循環(huán)，讓jsp得到每個ArrayList對象的數(shù)據(jù)，放入到頁面模板中。

4.3 管理員子系統(tǒng)模塊的實現(xiàn)

1）用戶管理模塊

用戶登錄后，在后臺管理中查看用戶信息，后臺通過sql語句查詢用戶表中所有數(shù)據(jù)，通過調(diào)用PageManager.getPages（url，4，sql， request ）方法，返回一個ArrayList類型的對象，使用for循環(huán)，讓jsp得到每個對象的數(shù)據(jù)，在for循環(huán)里，使用jsp得到每個ArrayList對象的數(shù)據(jù)，在前端的jsp頁面中解析接收到的ArrayList類型的對象，得到其各個鍵值對的值。用戶管理界面如圖2所示。

2）個人資料模塊

用戶點(diǎn)擊登錄填寫賬號信息登錄后，會切換內(nèi)容為“某某用戶歡迎您”和歷史訂單，并給出注銷鏈接。當(dāng)用戶登錄成功后會將個人信息保存在session作用域中，點(diǎn)擊自己的用戶名時，會跳轉(zhuǎn)到個人詳細(xì)信息頁面，由后臺通過Freemarker取出session作用域中的用戶信息進(jìn)行動態(tài)渲染。同時頁面上會顯示修改個人信息和修改密碼的按鈕，這時客戶可以修改自己的登錄密碼以保障賬號的安全性，防止被人竊取賬號，通過UserController.java的updatePassword（）實現(xiàn)，也可以根據(jù)自己的個人信息是否變動做出相應(yīng)的修改，通過updateUserInfo（）實現(xiàn)。

密碼修改關(guān)鍵代碼如下所示。

if（ac.equals（"uppass"））

{

String olduserpass = request.getParameter（"ymm"）;

String userpass = request.getParameter（"xmm1"）;

String copyuserpass = request.getParameter（"xmm2"）;

HashMap m = dao.getmaps（"userName"，（String）request.getSession（）.getAttribute（"username"）， "userRegister"）;? ?if（?。ǎǎ⊿tring）m.get（"pwd"））.equals（olduserpass）））{

request.setAttribute（"error"， ""）;

go（"mod2.jsp"， request， response）;

}else{

String id = （String）user.get（"id"）;

String sql = "update userRegister set pwd='"+userpass+"' where userName='"+（String）request.getSession（）.getAttribute（"username"）+"'";

dao.commOper（sql）;

request.setAttribute（"suc"， ""）;

go（"mod2.jsp"， request， response）;

}

}

3）課程資料管理模塊

添加課程資料信息時，輸入必填字段后，表現(xiàn)層的KechengziliaoController接受傳過來的課程資料信息參數(shù)，再調(diào)用KechengziliaoController類的addKechengzi-liao方法，經(jīng)過KechengziliaoService業(yè)務(wù)層到KechengziliaoMapper持久層的處理，完成對整個添加課程資料信息的操作。addKechengziliao方法也和用戶管理中的addUser方法類似，同時做添加和修改工作。

4）個人創(chuàng)作管理模塊

查找個人創(chuàng)作時，輸入需要查找的個人創(chuàng)作名，調(diào)用getData方法獲取所有數(shù)據(jù)并且進(jìn)行分頁，把獲取到的所有數(shù)據(jù)顯示到視圖上，這時候只需要用腳本方法便能快速查找，不涉及對數(shù)據(jù)庫操作。

刪除個人創(chuàng)作時，選擇需要刪除的個人創(chuàng)作進(jìn)行刪除，把主鍵的uId傳到GerenchuangzuoController控制器，再調(diào)用控制器的deleteGerenchuangzuo方法，數(shù)據(jù)經(jīng)過GerenchuangzuoService業(yè)務(wù)層解析和處理，請求GerenchuangzuoMapper持久層調(diào)用deleteByPrimaryKey方法操作數(shù)據(jù)庫將個人創(chuàng)作數(shù)據(jù)從數(shù)據(jù)庫中刪除。

4.4 文件上傳模塊的實現(xiàn)

把上傳文件單獨(dú)編寫成一個FilesUpload.類，在該類中定義一個具體實現(xiàn)上傳文件的方法，該方法接收兩個參數(shù)，通過ServletActionContext獲取上傳到服務(wù)器的文件路徑，通過封裝的FileUtils的copyFile（）方法將用戶上傳的文件拷貝到目標(biāo)文件中即實現(xiàn)了文件上傳到服務(wù)器。返回保存文件的相對路徑，選定的文件上傳后存放在代碼中WEB-INF文件下的upload文件夾，先檢測該文件夾是否存在，如果不存在就先創(chuàng)建。

4.5 文件下載模塊的實現(xiàn)

通過JSP頁面?zhèn)魅胛募穆窂?，如果該文件路徑包含中文名。需要通過getBytes方法以ISO-8859-1編碼格式接收頁面?zhèn)魅氲膮?shù)，在把傳入的參數(shù)轉(zhuǎn)換成UTF-8的編碼格式解決中文亂碼。通getResourceAsStream方法獲取文件的下載流，在該類中也同時編寫一個獲取下載文件的文件名，使用substring方法獲取文件名后轉(zhuǎn)換編碼格式防止輸出的文件名是一群亂碼，返回該文件名。用戶在頁面點(diǎn)擊下載鏈接后彈出下載文件提示框，在彈出的提示框中點(diǎn)擊下載就可以下載文件。

5 結(jié)束語

本系統(tǒng)能夠?qū)崿F(xiàn)在線教學(xué)模式，為學(xué)生提供網(wǎng)絡(luò)自學(xué)平臺，為教師提供新的多媒體網(wǎng)絡(luò)教學(xué)手段，能讓學(xué)生不在實體課堂也能體驗到學(xué)校的學(xué)習(xí)氛圍，打破時空的局限性。當(dāng)下在線教育學(xué)習(xí)現(xiàn)狀轉(zhuǎn)變了人們陳舊的學(xué)習(xí)思維方式，通過開發(fā)本系統(tǒng)對網(wǎng)絡(luò)在線教育系統(tǒng)的分析與設(shè)計，完成了一個實用、便捷的在線教育學(xué)習(xí)系統(tǒng)，但它仍有許多可以改進(jìn)之處，功能之間的過渡還可以更加自然。

參考文獻(xiàn)：

[1]? 李旭光. 翻轉(zhuǎn)課堂的設(shè)計與實現(xiàn)[D].濟(jì)南：山東大學(xué)，2019.

[2] HorstmannW S. 最新Java2核心技術(shù)卷工：原理[M].李如豹，剛冬梅，張雪蓮，等譯.北京：機(jī)械工業(yè)出版社，2012.

[3] Oaks S.JavaTM安全[M].北京：中國電力出版社，2002.

[4] Reese G.JDBC與Java數(shù)據(jù)庫編程[M].北京：中國電力出版社，2002.

[5] Knuth D.The Art of Computer Programming[M].北京：清華大學(xué)出版社，2012.

[6] Smith E A.Java Server Pages[M].北京：電子工業(yè)出版社，2010.

[7] 高張，康小軍.提高Tomcat服務(wù)器運(yùn)行性能的研究[J].計算機(jī)與數(shù)字工程，2008，36（10）：203-205.

【通聯(lián)編輯：王力】