基于JSP技術開發計算機網絡技術專業資源庫平臺

隨著互聯網應用技術的逐步深入，新型教育理念的提出，傳統的教師講學生聽的授課模式已經凸顯出其不足，讓學生動起來、讓課堂活躍起來、讓授課效果好起來的新型教學模式成為主流。讓學生重視自學，學會合作，充分調動學生的積極性。項目圍繞學生自學，采用JSP技術開發計算機網絡技術專業學生學習本專業知識的資源平臺，借助互聯網，讓學生不受時間、地點的限制，自主學習，學生可以清楚看到本專業的主要課程，可以閱讀相關課程的資源信息，如果在學習過程中，發現不理解的問題，可以登錄教學答疑系統，提出自己的問題，當然也可以作為“學霸”，回復別人提出的問題，實現教師與學生，學生與學生之間的互動。

【關鍵詞】資源庫 JSP技術 軟件開發

1 項目概述

現在是互聯網時代，教育也要與時俱進，向不同學生群體開放課程，讓學生進行網絡學習，教師在互聯網上教，學生在互聯網上學，信息在互聯網上流動，教師與學生的互動需要一個平臺來支撐，需要一個網站來作為載體。

本項目主要面向計算機網絡技術專業學生，搭建學生學習的一個資源庫系統，讓學生了解本專業的課程結構，每門課提供教案、課件等供學生閱讀和下載，同時為了方便師生交流互動，提供了一個教學答疑系統，有疑問都可以隨時向教師提出，當教師登錄系統后可以看到學生向自己提出的問題，進行回復，也可以查看所有問題，了解學習動態。

2 項目主要功能介紹

項目主要分為兩大組成部分：第一部分是計算機網絡技術專業課程資源的閱讀和下載，第二部分是教師和學生的教學答疑系統。

2.1 閱讀和下載功能說明

當瀏覽者訪問頁面時，可以在主頁中清楚看到課程資源的分類，共分為基礎課程、網絡設備配置、網絡編程三大類，基礎課程包括計算機基礎、計算機組裝與維護、計算機數學，網絡設備配置包括網絡操作系統、Linux服務器配置、路由交換技術、網絡安全、綜合布線，網絡編程編程包括C語言程序設計、Java程序設計、JSP程序設計、數據庫技術、綜合課程。每一門課程作為一個選項卡，當用戶點擊每個選項卡時可以看到該門課程共享的資源，目前主要提供教案、教材、課件。

教案：主要提供給學生進行閱讀查看

教材：清楚知道課程使用的教材

課件：由于文件較多，主要方便學生進行下載

2.2 教學答疑系統功能說明

當用戶選擇“教學答疑系統”時，系統將用戶的類型分為管理員、教師和學生，以不同的角色或者身份登錄系統，能夠使用的功能也不一樣，角色主要分管理員和一般用戶，教師和學生都屬于一般用戶，下面分別介紹：

2.2.1 管理員角色

管理員主要負責信息的維護工作，主要包括用戶管理、新聞管理、問題管理、回復管理，其中用戶管理包括添加用戶和顯示用戶列表，新聞管理包括添加新聞和新聞列表，問題管理包括提問和問題列表，回復管理則只有回復列表，列表主要顯示對應表中的所有數據。

2.2.2 一般用戶角色

一般用戶登錄系統后，可以提出自己的問題，同時也有別人指定自己回答的問題，主要有四個功能，“我提過的問題列表”用于顯示自己曾經提過的問題，“查看所有問題”用于顯示截至目前所有的問題，“我要提問”可以提出自己的新問題，“需要回答的列表”則顯示自己需要回復的問題。

3 項目環境的搭建

項目服務器Web服務器使用Tomcat 9.0，數據庫選用開源數據庫Mysql5.5，集成開發環境采用myeclipse2015，展示頁面使用JSP。

4 主要的開發技術

系統的主要分為前臺頁面的顯示和后臺管理，前臺負責信息顯示，后臺負責信息維護，前臺主要的開發技術包括DIV+CSS、框架集，后臺管理的主要開發技術包括Jquery-EasyUI和富文本編輯器。

4.1 DIV+CSS

在傳統的頁面布局中，一般都是使用表格進行布局，使用表格法的優點就是簡單易學，容易理解，但是使用表格布局，搜索引擎在進行搜索時，內容不被篩選，影響網站的優化排名，目前比較熱門的HTML5技術逐漸興起，需要使用DIV+CSS進行頁面布局。

DIV（DIVision）拆分，主要進行頁面內容的定位，分割顯示區域，將頁面劃分為獨立的、不同的部分，屬于Web前端的開發技術，主流的瀏覽器如IE、360瀏覽器、Google Chrome、Mozilla Firefox等都支持DIV標簽，CSS（Cascading Style Sheets）的中文名稱：層疊樣式表，主要用于對DIV的顯示進行美化，對頁面元素進行修飾和格式化，在CSS中，一個文件的樣式可以從其他文件進行繼承，減少重復代碼的開發，提高代碼的重用性。采用DIV+CSS進行頁面布局，可以是實現將結構和顯示分離開來，便于代碼的維護，當頁面加載時，逐層加載，使頁面載入的速度更快，大部分的HTML內容和樣式寫入CSS文件，便于搜索引擎收錄，提升網站的搜索排名，可以根據不同的瀏覽器進行展示。

4.2 框架集

在展示課程資源時，主要使用框架集進行頁面的拆分，框架集可以將瀏覽器窗口劃分為若干個區域，每個區域就是一個框架，在框架中顯示不用的網頁，在框架中還可以包含框架集，達到不同的展示效果，便于瀏覽和查看。

框架集（frameset），定義了一系列的行和列，行rows或列columns 的值規定了每行或每列占屏幕的大小，但是不能將body標簽與frameset標簽同時使用，框架的主要作用是增強網頁的導航功能，如果瀏覽器版本較低，不支持框架集這個功能，看到的將會是一片空白，可以使用noframes標記，提示用戶升級自己的瀏覽器。

4.3 Jquery-EasyUI

在搭建后臺管理框架時主要使用Jquery-EasyUI，Jquery-EasyUI是一種基于Jquery的用戶界面插件，目前最新版本是jQueryEasyUI 1.4，下載完后解壓，將themes、jquery-1.4a2.min.js、jquery.easyui.min.js引入到頁面文件中。

4.4 富文本編輯器

在開發新聞發布時，使用了富文本編輯器，類似于微軟的Word編輯功能，是一種可內嵌于瀏覽器，所見即所得的文本編輯器，使用戶易于編輯文章或內容，日益被開發者所青睞。目前比較好的富文本編輯器有KindEditor、UEditor等，在項目中，使用KindEditor，目前最新版本4.X。

KindEditor是一個開源的HTML編輯器，主要用于讓用戶在網站上得到所見即所得的編輯效果，開發人員可以用KindEditor把傳統的多行文本輸入框（textarea）替換為可視化的富文本編輯。KindEditor使用JavaScript語言編寫，可以無縫地與Java、.NET、PHP等程序集成，比較適合在商城、論壇、博客、電子郵件等互聯網應用中使用。主要特點是體積小加載速度快、開放源代碼、內置DOM類庫精確操作DOM、支持主流瀏覽器（如IE、Firefox、Safari、Chrome、Opera）。

首先在頁面中創建一個textarea節點，并指定id屬性，引入文件，然后就可以通過JavaScript將textarea轉換為富文本編輯器，代碼如下：

4.5 數據庫設計

本項目主要用到的表如圖1。

“用戶表”中的“角色”表示用戶的類型，0表示管理員，1表示教師，2表示學生，用戶登錄時，根據不同的用戶類型跳轉到不同的頁面。“狀態”表示用戶的狀態，0表示正常，1表示鎖定，狀態正常才能使用系統功能，鎖定狀態需要管理進行解鎖操作。

在新聞表、提問表和回復表中，設置外鍵“用戶ID”關聯用戶表中的“用戶ID”，在回復表中設置外鍵“問題ID”關聯提問表的“問題ID”，這樣，就可以查詢問題對應的回復內容，通過主外鍵建立表之間的聯系，在開發中，將每一張表各自對應一個類，表中的字段對應類的成員，將關系型數據庫和面向對象聯系起來。

5 項目運行結果部分截圖

如圖2所示。

一般用戶登錄教學答疑系統后界面如圖3。

后臺管理員界面如圖4。

6 總結

項目從2015年11月正式啟動，歷時1年，在項目組成員的協調配合下，最終項目按進度順利開發完成，準備進入試運行階段，在開發過程中，由于時間倉促，人員和經費投入不足，只完成了必需的功能，可能在低版本瀏覽器或者分辨率低的顯示設備上呈現的效果會有偏差，今后將逐步完善，進一步改進，使系統更加健壯、穩定。

參考文獻

[1]戴勇.高職院校共享型專業教學資源庫建設核心問題研究[J].中國高教研究，2010.

[2]葉綠.基于JSP技術的網上學習輔導系統的設計與實現[J].計算機工程與設計，2005.

[3]劉銳.高職專業教學資源庫研究綜述[J].職業教育，2013.

作者簡介

朱家全，工程師，現為廣西英華國際職業學院信息教研室主任。

韋海清，講師，現為廣西英華國際職業學院計算機專任教師。

作者單位

廣西英華國際職業學院 廣西壯族自治區欽州市 535000