基于SpringBoot的網上在線教育系統的設計與實現

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

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

關鍵詞：在線教育平臺;前端技術;2017 CI 10 編譯器;MVC模式

中圖分類號：TP311? ? ? ? 文獻標識碼：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 引言

知識經濟時代的到來，學習模式由傳統的線下學習模式轉變為網絡化學習模式，又稱在線學習。學員通過網上教育平臺，應用網絡進行在線學習的一種全新方式，這種在線學習方式是由多媒體網絡學習資源、網上學習社區及網絡技術平臺構成的全新的學習環境。相對于傳統學習模式來說，它具有尊重學習的個性化、互動靈活、激發學習動力以及不受時空限制等優勢。2012年起，美國頂尖大學也陸續設立了網絡學習平臺，MOOC（Massive Open Oniline Course，大規模開放網絡課程）以教育“平臺”方式在美國爆發，美國學術界對在線教育的態度也是不斷轉變，在美國超過2800所大學中，有70%以上的學術領袖認為在線教育與面授教育效果一樣或者更好[1]。

2 相關技術分析

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

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

3 系統設計

3.1 各模塊設計

系統能夠實現的功能主要分為以下八個功能模塊：其中包含用戶管理模塊、課程資料上傳模塊、課程資料管理模塊、個人創作管理模塊、新聞資訊管理模塊、留言信息管理模塊、評論信息管理模塊以及導出功能模塊。

1）用戶管理模塊

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

2）課程資料上傳模塊

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

3）課程資料管理模塊

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

4）個人創作管理模塊

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

5）新聞資訊管理模塊

管理員點擊新聞添加子菜單下的添加新聞數據，填寫新聞標題、新聞內容、新聞類別、新聞圖片（例如學校最新的規章制度），待提交成功后，刷新新聞資訊頁面，新增資訊會顯示在頁面上。

6）留言信息管理模塊

登錄系統的用戶，可在留言板對系統提出意見，管理員在后臺可以查看或鍵入關鍵字搜索留言信息，對留言信息進行管理。

7）評論信息管理模塊

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

8）導出功能模塊

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

3.2 數據庫設計

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

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

2）個人創作信息表（gerenchuangzuo表）：包含個人id、名稱、圖片、內容、發布人等信息。

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

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

5）留言信息表（liuyanban表）：包含留言id、昵稱、留言內容、回復內容、留言人等信息。

6）評論信息表（pinglun表）：包含評論id、評論內容、評分、評論人信息。

4 系統實現

4.1 登錄模塊的實現

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

4.2 用戶子系統模塊的實現

1）用戶首頁模塊

2）注冊模塊

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

<%

HashMap ext = new HashMap（）;

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

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

%>

3）留言模塊

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

4）評論模塊

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

4.3 管理員子系統模塊的實現

1）用戶管理模塊

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

2）個人資料模塊

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

密碼修改關鍵代碼如下所示。

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（！（（（String）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）課程資料管理模塊

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

4）個人創作管理模塊

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

刪除個人創作時，選擇需要刪除的個人創作進行刪除，把主鍵的uId傳到GerenchuangzuoController控制器，再調用控制器的deleteGerenchuangzuo方法，數據經過GerenchuangzuoService業務層解析和處理，請求GerenchuangzuoMapper持久層調用deleteByPrimaryKey方法操作數據庫將個人創作數據從數據庫中刪除。

4.4 文件上傳模塊的實現

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

4.5 文件下載模塊的實現

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

5 結束語

本系統能夠實現在線教學模式，為學生提供網絡自學平臺，為教師提供新的多媒體網絡教學手段，能讓學生不在實體課堂也能體驗到學校的學習氛圍，打破時空的局限性。當下在線教育學習現狀轉變了人們陳舊的學習思維方式，通過開發本系統對網絡在線教育系統的分析與設計，完成了一個實用、便捷的在線教育學習系統，但它仍有許多可以改進之處，功能之間的過渡還可以更加自然。

參考文獻：

[1]? 李旭光. 翻轉課堂的設計與實現[D].濟南：山東大學，2019.

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

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

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

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

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

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

【通聯編輯：王力】