通用網絡教學平臺的設計與實現＊

張北賢，劉美玲，陳鍵，王宏輝

通用網絡教學平臺的設計與實現＊

張北賢，劉美玲，陳鍵，王宏輝

（廣西民族大學 軟件與信息安全學院，廣西 南寧 530006）

研究了一套通用網絡教學平臺的設計原理與實現過程，闡述了使用Html5、CSS3、JavaScript、Ajax等前端技術開發系統前端頁面的過程與方法，重點闡述了服務器端的設計模式。系統主要使用JSP、Servlet、JavaBean技術進行后臺開發，并結合Struts 2的開發框架進行請求的轉發和處理。系統的總體架構采用MVC模式，采用Apache Shiro進行權限管理。

互聯網教育；JSP；Servlet；軟件設計模式

1 前言

隨著互聯網科技的發展，互聯網思維改變了人們的教育方式，互聯網教育便應運而生。為了突破教育活動在地域和時間上的限制，開發出一套通用的網絡教學平臺。在這個平臺上，學生是教學的主體，教師起主導作用，系統的通用性體現在任何教師都可以申請開通其所任課程的網絡教學空間，自主管理與維護其網絡課程。通過該網絡教學平臺輔助課堂教學，以達到擴充課堂內容、共享教學資源與最佳利用的目的，方便學生學習、師生交流，減輕教師教學工作強度，提高教師工作效率與學生學習效率。

2 系統功能

通用網絡教學平臺具有教師、學生和管理員三類用戶，主要功能模塊包括在線課堂、教學資源上傳與更新、布置作業、批改作業、在線交流、在線考試平臺等；學生通過該平臺可在線學習、下載教學資源、在線測試、查看作業、上傳作業、與教師和學生交流、在線考試等。

系統功能如圖1所示。

圖1 系統功能結構圖

3 系統開發的原則

3.1 項目原則

本系統開發時嚴格遵循軟件項目開發的標準，經調研先后制定了《用戶需求文檔》《軟件需求規格說明書》《設計文檔》，采用增量式模型的生存期模型將需求分段成一系列增量產品，每一增量可以分別開發。首先構造本系統核心功能，然后逐步增加和完善功能。各個階段并不交付一個可運行的完整產品，而是交付滿足需求的子集可運行產品，最后各個構件并入已有的軟件體系結構。

3.2 軟件設計原則及模式

3.2.1 面向對象設計原則

本項目的數據庫連接應用里氏代換、依賴倒轉和開閉原則。Action類依賴于抽象耦合，而具體數據庫連接類從抽象連接類繼承（或實現接口），使得任何調用連接類基類的引用都可以替換成具體連接類。本項目數據引擎采用MySql，若更換項目數據庫引擎為Oracle，只需創建一個繼承連接類基類的Oracle連接類，并在Action中使調用連接類基類的引用指向Oracle連接類即可。以下為代碼實現：

class MysqlBaseDao implements

ConnectBaseBiz{}ConnectBaseBiz cbb

=new MysqlBaseDao();Connection conn=cbb.getConnection();

本項目客戶端調用對象的層次順序是Action層、Biz層、Dao層。Action是系統的控制器（Controller），層配置于struts.xml文件，負責調用Biz層。Biz層為抽象業務邏輯層，定義了具體實現層Dao的所有接口，而Dao層則負責具體實現業務功能。Action層針對Biz層進行編程，任何調用Biz層的引用均由Dao層的具體實現類代換，不但有益系統的維護，更使項目具有很好的拓展性。

3.2.2 觀察者模式

一個對象行為發生變化可能導致其他對象的行為發生變化，觀察者模式用于實現這種對象間的依賴關系。在課程帖子交流模塊中，當用戶發表評論后應立即更新被評論者的交流情況，此時解決的方法有采取命令模式和觀察者模式。

本項目采用觀察者模式，當CommentBiz對象執行addOneComment方法后，觀察CommentBiz對象的UserBiz對象應立即調用updateCommentCount等一系列方法。

CommentDao類中，代碼實現如下：

UserBiz ub=new UserDao()；

notify(){ub.updateCommentCount();}

addOneComment(){***;notify ();}

4 JS渲染頁面數據

本項目前端的數據獲取及分頁均采用自行研發的JavaScript腳本，該腳本以Ajax異步獲取數據，并可以在預先定義好CSS樣式的情況下動態生成數據顯示項，并將其分頁。具體方法為：①給Html元素板塊的最外層及其內部相關元素加上id屬性，并結合數字標識，給每個Html元素板塊生成唯一標識，例如消息板塊的id為Notice_i(i=0，1.2，…n)；②采用Json格式數據，將Json數據封裝成對象。腳本動態生成的Html元素綁定自定義方法，經計算映射出每個板塊需要顯示的數據。

5 具體設計規約

5.1 權限管理

系統的權限管理采用Apache Shiro，將系統的權限管理分為角色管理和權限管理兩個粒度。系統的每一個接口（功能）或頁面在被調用之前都要經過Shiro的認證，只有符合特定角色或擁有特定權限的用戶才有資格進行操作。Shiro將用戶抽象為Subject對象，支持多個用戶同時登錄一個瀏覽器且權限不會紊亂，且它的配置十分簡單，只需加載shiro.ini的配置即可，使權限管理模塊實現低耦合。

此外，系統在服務器端跳轉到不同頁面，使瀏覽器無法了解進入的頁面的具體文件名，提高了系統安全性。

5.2 加載文件

經服務器跳轉的頁面會出現無法找到CSS及JS文件的問題，因為瀏覽器保留的當前頁路徑是未跳轉前的路徑，所以，需要用絕對路徑鏈接文件，代碼如下：

basePath=request.getScheme()+"：//"+request.getServer Name()+"："+request.getServerPort()+request.getContextPath()+"/";

5.3 項目的配置

項目源碼的所有配置均集中在struts.properties文件，例如struts.encoding=UTF-8。Dao層讀取配置信息時采用Properties versionProperties = new Properties();InputStream in =ReadProperties.class.getClassLoader().getResourceAsStream("struts.properties");配置信息=(versionProperties.load(in)). getProperty(“配置名稱，例如struts.encoding”)即可。

5.4 上傳文件

文件的上傳均采用異步上傳，form表單添加enctype="multipart/form-data"屬性將文件轉化為二進制流，引用jquery.form.js，并通過$("#f表單id").ajaxSubmit()進行文件的提交，保證頁面不跳轉，增強了用戶體驗效果。

6 部分模塊設計

6.1 管理在線課堂

主要參與者：教師。

描述：教師可以在課程發布頁面發布新課程、修改和刪除不滿意的課程。

主事件流：①發布課程。教師用戶進入個人中心→點擊“課程管理”按鈕→點擊“新增課程”按鈕→選擇課程圖片及填寫相關信息→點擊“發布”按鈕→發布成功。②刪除課程。教師用戶進入個人中心→點擊“課程管理”按鈕→顯示所有任課課程的列表→選擇待刪除的課程，點擊“刪除”按鈕→刪除成功。③修改課程。教師用戶進入個人中心→點擊“課程管理”按鈕→顯示所有任課課程的列表→點擊“待修改的課程”→進入修改狀態→可選重新擇課程圖片及填寫相關信息→點擊“修改”按鈕→修改成功。

異常事件流：未登錄執行操作，提示“尚未登錄，暫無權限”。

業務規則：非該課程的教師用戶無法管理該課程信息。

6.2 管理在線測試

主要參與者：教師。

描述：教師管理自身任教課程的在線測試的題目，包括對試題的增、刪、查改。

主事件流：①新增試題。教師用戶進入任教課程的課程中心→點擊“在線測試”按鈕→課程中心顯示所有課程待考試題，試題按時間排序，最新的試題應優先顯示→點擊新增試題，點擊進入在線測試的考試中心的新增頁面→在題庫選擇或手動填寫題目，選擇考試時間→點擊“保存”或“發布”按鈕→保存成功或發布成功→發布成功后立即發消息給該課程的學生用戶。②刪除試題。教師用戶進入任教課程的課程中心→點擊“在線測試”按鈕→課程中心顯示所有課程待考試題，試題按時間排序，最新的試題應優先顯示→選擇試題，點擊進入在線測試的考試中心→點擊“刪除”按鈕→刪除成功。③修改試題。教師用戶進入任教課程的課程中心→點擊“在線測試”按鈕→課程中心顯示所有課程待考試題，試題按時間排序，最新的試題應優先顯示→點擊試題→進入在線測試的試題中心→點擊“修改”按鈕→進入修改模式→修改試題并點擊“保存”按鈕→保存成功。

異常事件流：未登錄執行刪除操作，提示“尚未登錄，暫無權限”。

業務規則：①非該課程的教師用戶無法管理該課程的在線測試題目；②不論該課程的學生用戶是否在線，對于已經在線的用戶應立即向其推送最新測試消息。

7 系統實現

本系統的前端采用Html5、CSS3、JavaScript、Ajax等前端技術對系統前端頁面進行開發。系統后端（服務器端）采用JSP、Servlet、JavaBean技術對系統服務器端進行開發，并結合Struts 2的開發框架，對前端請求進行轉發和處理。系統的總體架構采用MVC模式，采用Apache Shiro進行權限管理。數據庫采用Mysql對數據進行儲備和管理。以下列舉了新增在線課堂的實現代碼。

7.1 前端實現

前端實現程序如下：

/*異步上傳課程圖片*/

$("#coursePhoto").on("change"，function(){

var $file = $(this);

var fileObj = $file[0];

var windowURL = window.URL || window.webkitURL; var dataURL;

var $img = $("#personphoto");

if (fileObj && fileObj.files && fileObj.files[0]) {

dataURL = windowURL.createObjectURL(fileObj.files[0]);

$("#course_photo").attr("src"，dataURL);

} else {

dataURL = $file.val();

}

});

$("#submitCourseButton").on("click"，function(){

$("#coursePhotoForm").ajaxSubmit({

type：'post'，

url：'upload_course_photo'，

success：function(data){

……

/*上傳文字信息*/

function submitCourseMessage(coursePhotoPath){

$("#addCourseForm").ajaxSubmit({

type：'post'，

url：'add_course'，

success：function(data){ ……

7.2 后端實現

后端實現程序如下：

result

result

public String addCourse(){

CourseBiz cb=new CourseDao();

courseNumber=(String) ActionContext.getContext().getSession().get("courseNumber");

coursePhotoPath=(String) ActionContext.getContext().getSession().get("coursePhotoPath");

course.setC_number(courseNumber);

course.setC_photo_path(coursePhotoPath);

course.setC_state("等待開課");

result=cb.addCourse(course);

return SUCCESS;

}

8 總結

通用網絡教學平臺最大的特點在于其通用性，該平臺課程的類型不限，可適用于任何課程，任何課程的教師都可以在該平臺上開設課程并自主管理課程及其班級學生信息。該系統具有友好的用戶界面，功能強大，可操作性強，具有較高的數據安全性和可拓展性。

［1］劉偉.設計模式［M］.北京：清華大學出版社，2011：345-348.

［2］韓萬江.軟件項目管理案例［M］.3版.北京：機械工業出版社，2015：41-42.

［3］王宇軒.軟件工程教學網站的開發與設計研究［J］.軟件導刊（教育技術），2018，17（4）：48-50.

［4］黃志強.軟件工程教學網站的開發與設計［J］.吉林省教育學院學報（中旬），2014，30（4）：59-60.

［5］李曉薇.JavaScript在動態網頁設計中的應用研究［J］.信息系統工程，2019（1）：87.

G434

A

10.15913/j.cnki.kjycx.2019.19.001

2095－6835（2019）19－0001－03

張北賢（1996—），男，研究方向為軟件工程。劉美玲（1979—），女，研究方向為軟件工程/數據挖掘。陳鍵（1996—），男，研究方向為軟件工程。王宏輝（1996—），男，研究方向為軟件工程。

廣西大學生創新創業訓練計劃項目（編號：201710608119）；廣西高等教育本科教學改革工程項目（編號：2018JGB166）；廣西民族大學校級教改項目

〔編輯：張思楠〕