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

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

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

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

文章編號(hào)：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 引言

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

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

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

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

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

3.1 各模塊設(shè)計(jì)

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

1）用戶管理模塊

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

2）課程資料上傳模塊

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

3）課程資料管理模塊

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

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

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

5）新聞資訊管理模塊

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

6）留言信息管理模塊

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

7）評(píng)論信息管理模塊

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

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

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

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

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

1）用戶信息表（allusers表）：包含用戶id、賬號(hào)、密碼、等個(gè)人基本信息。

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

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

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

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

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

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

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

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

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

1）用戶首頁(yè)模塊

2）注冊(cè)模塊

此頁(yè)面實(shí)現(xiàn)普通用戶的注冊(cè)，必須注冊(cè)登錄后才能使用，用戶名不允許重復(fù)，如果重復(fù)將會(huì)注冊(cè)失敗，并彈出相應(yīng)的提示，通過Javascript實(shí)現(xiàn)對(duì)輸入的驗(yàn)證。用戶注冊(cè)關(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 ），返回一個(gè)ArrayList的對(duì)象，在for循環(huán)中使用jsp得到每個(gè)ArrayList對(duì)象的數(shù)據(jù)，然后放入頁(yè)面模板中，用戶點(diǎn)擊我要留言則跳轉(zhuǎn)至留言頁(yè)面（lyb.jsp）。

4）評(píng)論模塊

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

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

1）用戶管理模塊

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

2）個(gè)人資料模塊

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

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

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

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

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

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

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

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

[4] Reese G.JDBC與Java數(shù)據(jù)庫(kù)編程[M].北京：中國(guó)電力出版社，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ì)算機(jī)與數(shù)字工程，2008，36（10）：203-205.

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