基于JSP技術(shù)開發(fā)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)資源庫平臺(tái)

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

【關(guān)鍵詞】資源庫 JSP技術(shù) 軟件開發(fā)

1 項(xiàng)目概述

現(xiàn)在是互聯(lián)網(wǎng)時(shí)代，教育也要與時(shí)俱進(jìn)，向不同學(xué)生群體開放課程，讓學(xué)生進(jìn)行網(wǎng)絡(luò)學(xué)習(xí)，教師在互聯(lián)網(wǎng)上教，學(xué)生在互聯(lián)網(wǎng)上學(xué)，信息在互聯(lián)網(wǎng)上流動(dòng)，教師與學(xué)生的互動(dòng)需要一個(gè)平臺(tái)來支撐，需要一個(gè)網(wǎng)站來作為載體。

本項(xiàng)目主要面向計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)學(xué)生，搭建學(xué)生學(xué)習(xí)的一個(gè)資源庫系統(tǒng)，讓學(xué)生了解本專業(yè)的課程結(jié)構(gòu)，每門課提供教案、課件等供學(xué)生閱讀和下載，同時(shí)為了方便師生交流互動(dòng)，提供了一個(gè)教學(xué)答疑系統(tǒng)，有疑問都可以隨時(shí)向教師提出，當(dāng)教師登錄系統(tǒng)后可以看到學(xué)生向自己提出的問題，進(jìn)行回復(fù)，也可以查看所有問題，了解學(xué)習(xí)動(dòng)態(tài)。

2 項(xiàng)目主要功能介紹

項(xiàng)目主要分為兩大組成部分：第一部分是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)課程資源的閱讀和下載，第二部分是教師和學(xué)生的教學(xué)答疑系統(tǒng)。

2.1 閱讀和下載功能說明

當(dāng)瀏覽者訪問頁面時(shí)，可以在主頁中清楚看到課程資源的分類，共分為基礎(chǔ)課程、網(wǎng)絡(luò)設(shè)備配置、網(wǎng)絡(luò)編程三大類，基礎(chǔ)課程包括計(jì)算機(jī)基礎(chǔ)、計(jì)算機(jī)組裝與維護(hù)、計(jì)算機(jī)數(shù)學(xué)，網(wǎng)絡(luò)設(shè)備配置包括網(wǎng)絡(luò)操作系統(tǒng)、Linux服務(wù)器配置、路由交換技術(shù)、網(wǎng)絡(luò)安全、綜合布線，網(wǎng)絡(luò)編程編程包括C語言程序設(shè)計(jì)、Java程序設(shè)計(jì)、JSP程序設(shè)計(jì)、數(shù)據(jù)庫技術(shù)、綜合課程。每一門課程作為一個(gè)選項(xiàng)卡，當(dāng)用戶點(diǎn)擊每個(gè)選項(xiàng)卡時(shí)可以看到該門課程共享的資源，目前主要提供教案、教材、課件。

教案：主要提供給學(xué)生進(jìn)行閱讀查看

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

課件：由于文件較多，主要方便學(xué)生進(jìn)行下載

2.2 教學(xué)答疑系統(tǒng)功能說明

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

2.2.1 管理員角色

管理員主要負(fù)責(zé)信息的維護(hù)工作，主要包括用戶管理、新聞管理、問題管理、回復(fù)管理，其中用戶管理包括添加用戶和顯示用戶列表，新聞管理包括添加新聞和新聞列表，問題管理包括提問和問題列表，回復(fù)管理則只有回復(fù)列表，列表主要顯示對(duì)應(yīng)表中的所有數(shù)據(jù)。

2.2.2 一般用戶角色

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

3 項(xiàng)目環(huán)境的搭建

項(xiàng)目服務(wù)器Web服務(wù)器使用Tomcat 9.0，數(shù)據(jù)庫選用開源數(shù)據(jù)庫Mysql5.5，集成開發(fā)環(huán)境采用myeclipse2015，展示頁面使用JSP。

4 主要的開發(fā)技術(shù)

系統(tǒng)的主要分為前臺(tái)頁面的顯示和后臺(tái)管理，前臺(tái)負(fù)責(zé)信息顯示，后臺(tái)負(fù)責(zé)信息維護(hù)，前臺(tái)主要的開發(fā)技術(shù)包括DIV+CSS、框架集，后臺(tái)管理的主要開發(fā)技術(shù)包括Jquery-EasyUI和富文本編輯器。

4.1 DIV+CSS

在傳統(tǒng)的頁面布局中，一般都是使用表格進(jìn)行布局，使用表格法的優(yōu)點(diǎn)就是簡(jiǎn)單易學(xué)，容易理解，但是使用表格布局，搜索引擎在進(jìn)行搜索時(shí)，內(nèi)容不被篩選，影響網(wǎng)站的優(yōu)化排名，目前比較熱門的HTML5技術(shù)逐漸興起，需要使用DIV+CSS進(jìn)行頁面布局。

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

4.2 框架集

在展示課程資源時(shí)，主要使用框架集進(jìn)行頁面的拆分，框架集可以將瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域就是一個(gè)框架，在框架中顯示不用的網(wǎng)頁，在框架中還可以包含框架集，達(dá)到不同的展示效果，便于瀏覽和查看。

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

4.3 Jquery-EasyUI

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

4.4 富文本編輯器

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

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

首先在頁面中創(chuàng)建一個(gè)textarea節(jié)點(diǎn)，并指定id屬性，引入文件，然后就可以通過JavaScript將textarea轉(zhuǎn)換為富文本編輯器，代碼如下：

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

本項(xiàng)目主要用到的表如圖1。

“用戶表”中的“角色”表示用戶的類型，0表示管理員，1表示教師，2表示學(xué)生，用戶登錄時(shí)，根據(jù)不同的用戶類型跳轉(zhuǎn)到不同的頁面?！盃顟B(tài)”表示用戶的狀態(tài)，0表示正常，1表示鎖定，狀態(tài)正常才能使用系統(tǒng)功能，鎖定狀態(tài)需要管理進(jìn)行解鎖操作。

在新聞表、提問表和回復(fù)表中，設(shè)置外鍵“用戶ID”關(guān)聯(lián)用戶表中的“用戶ID”，在回復(fù)表中設(shè)置外鍵“問題ID”關(guān)聯(lián)提問表的“問題ID”，這樣，就可以查詢問題對(duì)應(yīng)的回復(fù)內(nèi)容，通過主外鍵建立表之間的聯(lián)系，在開發(fā)中，將每一張表各自對(duì)應(yīng)一個(gè)類，表中的字段對(duì)應(yīng)類的成員，將關(guān)系型數(shù)據(jù)庫和面向?qū)ο舐?lián)系起來。

5 項(xiàng)目運(yùn)行結(jié)果部分截圖

如圖2所示。

一般用戶登錄教學(xué)答疑系統(tǒng)后界面如圖3。

后臺(tái)管理員界面如圖4。

6 總結(jié)

項(xiàng)目從2015年11月正式啟動(dòng)，歷時(shí)1年，在項(xiàng)目組成員的協(xié)調(diào)配合下，最終項(xiàng)目按進(jìn)度順利開發(fā)完成，準(zhǔn)備進(jìn)入試運(yùn)行階段，在開發(fā)過程中，由于時(shí)間倉促，人員和經(jīng)費(fèi)投入不足，只完成了必需的功能，可能在低版本瀏覽器或者分辨率低的顯示設(shè)備上呈現(xiàn)的效果會(huì)有偏差，今后將逐步完善，進(jìn)一步改進(jìn)，使系統(tǒng)更加健壯、穩(wěn)定。

參考文獻(xiàn)

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

[2]葉綠.基于JSP技術(shù)的網(wǎng)上學(xué)習(xí)輔導(dǎo)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2005.

[3]劉銳.高職專業(yè)教學(xué)資源庫研究綜述[J].職業(yè)教育，2013.

作者簡(jiǎn)介

朱家全，工程師，現(xiàn)為廣西英華國際職業(yè)學(xué)院信息教研室主任。

韋海清，講師，現(xiàn)為廣西英華國際職業(yè)學(xué)院計(jì)算機(jī)專任教師。

作者單位

廣西英華國際職業(yè)學(xué)院 廣西壯族自治區(qū)欽州市 535000