【導(dǎo)讀】校園網(wǎng)站作為學(xué)校高度信息化的平臺，主要用于達到學(xué)校面向大眾的宣傳效。應(yīng)以及日常校園管理中新聞的及時發(fā)布。效率的同時，達到良好的宣傳效應(yīng)。而怎樣利用一項新的技術(shù)構(gòu)建校園網(wǎng)站，加速學(xué)校。名度成為我們亟待解決的一個問題。很好地幫助學(xué)校解決教學(xué)資源管理的許多難題。MyEclipse，以MySqlServer為數(shù)據(jù)庫，Tomcat為web服務(wù)器進行開發(fā)，網(wǎng)站為B/S架。色并賦予不同級別的權(quán)限。設(shè)計過程遵循B/S三層架構(gòu)，保證了系統(tǒng)的可擴展性，降低。此外，在開發(fā)過程中，我們利用JavaScript實現(xiàn)動態(tài)圖片的展示，用。最后，我們通過CSS結(jié)合HTML的精心設(shè)計，在實現(xiàn)基本功能的同時，盡力達到。站的觀賞性，讓人耳目一新。因此，本網(wǎng)站系統(tǒng)涵。在符合需求的同時，我們實現(xiàn)了合理布局以及便捷式的。能夠切實的推動學(xué)校適應(yīng)現(xiàn)代化技術(shù)的發(fā)展，增強學(xué)校資源的利用率，加強。最終，達到了研究目的并實現(xiàn)系統(tǒng)的設(shè)計意

　　

【正文】 根據(jù)架構(gòu)設(shè)計，我們將前臺頁面分為首頁、學(xué)校概況、師資隊伍等是十一個模塊并在后臺設(shè)置一一對應(yīng)的模塊進行維護管理。為保證頁面更新的靈活性以及功能的完備性。我們根據(jù)每一個模塊的不同需求，我們需要設(shè)計不同的實現(xiàn)方式。例如，新聞的發(fā)布及動態(tài)更新要求較高的實時性，且呈現(xiàn)方式簡潔統(tǒng)一即可，因此針對于這一特點，要聞的及時發(fā)布我們將設(shè)計一種獨立的實現(xiàn)方式；下載中心按照其功文件的上傳下載的特殊性進行設(shè)計；其余模塊均為反映學(xué)?；拘畔?，實時性要求低，但可能需要不同的呈現(xiàn)格式，我們將統(tǒng)一設(shè)計一種方式進行實現(xiàn)等等。 我們將在下文中進行詳細說明。 圖片展示部分 圖片展示部分，設(shè)計給定的圖片數(shù)目，進行自動切換播放。首先從數(shù)據(jù)庫中讀取第一張圖片呈現(xiàn)，計時器開始計時，同時監(jiān)聽鼠標(biāo)動作，若監(jiān)聽到鼠標(biāo)動作點擊圖片號，則停止計時，并將鼠標(biāo)所選取的圖片 id 號傳入，從數(shù)據(jù)庫內(nèi)讀取該圖片進行直接呈現(xiàn)；若未監(jiān)聽到鼠標(biāo)動作且計時達到 3 秒，則 id 號自增，讀取數(shù)據(jù)庫中的下一張圖片。我們設(shè)計將采用 javaScript 進行實現(xiàn)。流程圖如下所示： 第 4 章 系統(tǒng) 設(shè)計 17 開 始讀 取 id = i的 圖 片 并展 示 （ i初 始 化 為0 ）i+ + ；i= i% n ( n 為 圖 片 總 數(shù) )鼠 標(biāo) 動 作 ？計 時 是 否 達 到3 sYYNN 圖 圖片展示部分流程圖 身份驗證及登陸認(rèn)證 為保證后臺管理的安全性，我們要對訪問用戶進行身份驗證，要求用戶輸入用戶名以及密碼后，調(diào)用數(shù)據(jù)庫數(shù)據(jù)查看是否匹配，若匹配，則可進入后臺主界面，若不匹配彈出提示信息并返回登錄界面，流程圖如下所示： 開 始輸 入 用 戶 名 amp。 amp。 密碼是 否 匹 配 ？跳 轉(zhuǎn) 至 后 臺 主 頁YN 圖 身份驗證部分流程圖 第 4 章 系統(tǒng) 設(shè)計 18 此外，為提高系統(tǒng)的安全性能，防止用戶直接輸入 URL 進行非法登陸，保證登陸界面的身份驗證是唯一進入后臺管理系統(tǒng)的接口，我們需要在每一個后臺頁面訪問中進行身份認(rèn)證。設(shè)計將采用過濾器進行實現(xiàn)，讀取用戶的 session 信息，提取里面的用戶名密碼，驗證其是否匹配，若匹配則順利跳轉(zhuǎn)至目標(biāo)界面，否則彈出警示框并返回登錄界面。流程圖如下所示： 開 始讀 取 s e s s io n 信 息身 份 驗 證 ？進 入 相 應(yīng) 頁 面Y跳 轉(zhuǎn) 回 登 陸 界 面N 圖 登錄認(rèn)證部分流程圖 要聞發(fā)布 要聞發(fā)布是校園網(wǎng)站最為主要的核心功能之一。當(dāng)需要對要聞進行修改的時候，登陸后臺新聞管理模塊，選擇要進行的操作，包括增、刪、改三種基本操作。對要聞進行相應(yīng)操作，經(jīng)發(fā)布后，系統(tǒng)將數(shù)據(jù)存入數(shù)據(jù)庫中，用戶可以在前臺頁面中可看到最新更新的要聞。 開 始新 聞 管 理模 塊編 輯 新 聞內(nèi) 容更 新 ？刪 除 ？新 增 ？發(fā) 布 ？前 臺 頁 面顯 示NYYYYNNN選 擇 發(fā)布 部 門添 加 新聞 標(biāo) 題數(shù) 據(jù) 庫 圖 要聞發(fā)布 部分流程圖 第 4 章 系統(tǒng) 設(shè)計 19 上傳下載設(shè)計 為方便用戶對相關(guān)文件的上傳下載，我們將該模塊獨立設(shè)置。在后臺上傳文件時，首先選擇要上傳的目的模塊，然后進入本地資源管理器選擇要上傳的文件，點擊確認(rèn)后上傳成功，否則跳回至該模塊主界面。此外，我們設(shè)計將文件的基本信息存入到數(shù)據(jù)庫中，把文件存入到制定文件夾中，保證了數(shù)據(jù)存取的高效性和可維護性。下載為前臺所設(shè)置的功能，其流程實現(xiàn)為上傳文件的逆過程，原理本質(zhì)性相同，因此以上傳為例，流程圖如下所示： 開 始 上 傳 文 件 中 心 選 擇 要 上 傳 的 模 塊 選 擇 要 上 傳 的 文 件 確 認(rèn) ？ 上 傳 文 件YN數(shù) 據(jù) 庫指 定 文件 夾基 本 信 息文 件 圖 上傳下載 部分流程圖 學(xué)校基本信息 學(xué)校概括等 9 個模塊用于反映學(xué)校的基本信息，呈現(xiàn)校園風(fēng)采，這些模塊的共同特征是不需要實時更新，定期進行更新即可，但要求頁面變動可能較大，因此，為使得網(wǎng)站的用戶可以進行自主設(shè)計，我們設(shè)計利用后臺編輯器，供用戶進行模塊內(nèi)容的自主修改，直接將用戶修改內(nèi)容的 html 整個存入數(shù)據(jù)庫，使得維護變的更加靈活，以學(xué)校概況為例，流程圖如下： 學(xué) 校 概 況 修 改 內(nèi) 容 前 臺 頁 面 呈 現(xiàn)發(fā) 布 ？YN開 始數(shù) 據(jù) 庫 圖 學(xué)?；拘畔?部分流程圖 權(quán)限設(shè)計 我們將 用戶類型分為三種：超級管理員、部門管理員、老師、學(xué)生以及游客： 第 4 章 系統(tǒng) 設(shè)計 20 超級管理員：具備網(wǎng)站的最高權(quán)限。包括基本的主頁瀏覽權(quán)限，所有信息的增、刪、改、查操作，注冊用戶的添加以及權(quán)限分配等。 部門管理員：具備網(wǎng)站的較高權(quán)限。包括基本的主頁瀏覽權(quán)限，本部門信息的增、刪、改、查操作，但不能對網(wǎng)站用戶進行操作，只能對自己的個人信息進行修改。 老師：具備網(wǎng)站的一般權(quán)限。包括基本的主頁瀏覽權(quán)限，特定信息的增、刪、改、查操作，個人信息的修改。 學(xué)生：具備網(wǎng)站的一般權(quán)限。包括基本的主頁瀏覽權(quán)限，所有文件的下 載權(quán)限。 游客：具備網(wǎng)站的較低權(quán)限。僅包括基本的主頁瀏覽權(quán)限以及特定文件組的下載。 權(quán)限圖如下所示： 超 級 管 理 員部 門 管 理 員教 師 學(xué) 生 游 客用 戶 登 錄 及 身 份 驗 證網(wǎng) 站 管 理 界 面 部 門 管 理 界 面學(xué) 生 登 錄 界 面教 師 登 陸 界 面游 客 瀏 覽 界 面數(shù) 據(jù) 庫 圖 權(quán)限設(shè)計 部分 示意圖 本章小結(jié) 本章基于需求設(shè)計了系統(tǒng)的整體架構(gòu)，并在此基礎(chǔ)上對數(shù)據(jù)庫進行設(shè)計，包括 ER圖的分析以及數(shù)據(jù)表的詳細設(shè)計。此外，根據(jù)實現(xiàn)流程的不同我們重點對模塊設(shè)計部分的主要幾種邏輯設(shè)計進行了介紹。最后對系統(tǒng)的使用權(quán)限分配進行了說明 第 5 章 系統(tǒng)的實現(xiàn) 及測試 21 第 5 章 系統(tǒng) 的實現(xiàn) 及測試 系統(tǒng)實現(xiàn)環(huán)境 設(shè)備分布圖如下所示，設(shè)置 MYSQL 服務(wù)器以及 web 服務(wù)器，數(shù)據(jù)庫通過 MYSQL服務(wù)器進行訪問，用戶終端通過路由器對應(yīng)用進行訪問。 M Y S Q L 服 務(wù) 器 W E B 服 務(wù) 器路 由 器用 戶 終 端 用 戶 終 端用 戶 終 端 數(shù) 據(jù) 庫 圖 系統(tǒng) 的 實現(xiàn)環(huán)境 所需要的軟硬件環(huán)境如下： ? 存儲類型：硬盤存儲； ? 操作系統(tǒng)： Windows XP 以上版本； ? 數(shù)據(jù)庫： MySQL； ? Web 服務(wù)器： ； ? 瀏覽器： chrome 瀏覽器 、 IE8 以上版本等。 環(huán)境配置 下面介紹本系統(tǒng)所用 的環(huán)境 。 第 5 章 系統(tǒng)的實現(xiàn) 及測試 22 Myeclipse 中 Tomcat 的配置 在 MyEclipse 的菜單欄 中 打 開 Window 一項， 在 下拉菜單 中打開 Preference 進行 配置，如下圖所示。 選中 MyEclipse—— Tomcat—— ，將 Disable 改為 Enable，同時我們將 tomcat 所在包導(dǎo)入，確定即可。 圖 Myeclipse 中 Tomcat 的配置 Myeclipse 中 Mysql 的配置 Mysql 的配置需要進行環(huán)境變量的配置并新建數(shù)據(jù)庫的鏈接，詳細步驟如下： ? 下載安裝文件，我們采用 進行默認(rèn)安裝 下載 將里面的 放在 D:\java\\jre\lib\ext，同時，將里面的 復(fù)制粘貼到 tomcat 的 lib 下面。 ? 環(huán)境變量配置： classpath 中加入 jar 包 路徑： D:\java\\jre\lib\ext\。 Path 中加入 bin 的路徑 ： C:\Program Files\MySQL\MySQL Server \bin ? 項目運行： 右擊所選項目 Build PathConfigure Build PathLibrariesAdd External JARs 選擇 D:\java\\jre\lib\ext\。 ? 新建一個數(shù)據(jù)庫連接 Windows—— Perspective—— My eclipse Database explorer 在左側(cè)點擊新建。如下圖所示 ： 第 5 章 系統(tǒng)的實現(xiàn) 及測試 23 圖 Myeclipse 中 Mysql 的配置 關(guān)鍵技術(shù)的實現(xiàn) 表單的基本操作 在本次校園網(wǎng)站的設(shè)計中，后臺的上傳下載等多處功能都需要利用表單進行實現(xiàn)，為了實現(xiàn)代碼的集成，盡量在同一文件中完成表單的基本操作，我們主要采用以下兩種表單的 action 提交方法： 第一種方案：設(shè)置隱藏的 input 按鈕。我們以后臺管理中個人信息修改功能為例。在表單中添加一個屬性為 hidden 的按鈕，設(shè)置其 name 為 action， value 為自定義，此處user_self， input type=hidden name=action value=user_self/ 則，在文件開始的 jsp 代碼中，用 equals()函數(shù)來判斷動作的來源： if(user_self.equals(action)) { 操作語句； } 第 5 章 系統(tǒng)的實現(xiàn) 及測試 24 第二種方案：用跳轉(zhuǎn)連接參數(shù)來實現(xiàn)。該方案可以同時傳遞多個參數(shù)，因此當(dāng)需要進行多個參數(shù)傳遞時，我們多采用這種方法進行表單操作的實現(xiàn)。我們以后臺新聞批量管理中的刪除功能為例。添加代碼如下： a href=?action=delamp。del_id=%=(id)% 刪除 /a 其中，跳轉(zhuǎn)文件為自身文件名，在文件開端的 jsp 中加入 equals()函數(shù)進行處理 if(del.equals(action)) { 操作語句； } 數(shù)據(jù)庫的基本操作 為了避免 jsp 文件每次都需要重新進行數(shù)據(jù)庫連接操作，節(jié)省開銷。我們采用數(shù)據(jù)庫連接池的原理，用獨立的 java 文件實現(xiàn)數(shù)據(jù)庫連接，則在其他 jsp 頁面中只需要導(dǎo)入該 java 文件所在的包，同時用簡短的代碼創(chuàng)建數(shù) 據(jù)庫連接即可。 我們在 conDB 包中建立 。核心 Java 代碼： public class conDB //get the connection of database { public static Connection createDBconn() throws SQLException, InstantiationException, IllegalAccessException, ClassNotFoundException{ ().newInstance()。//This is important Connection conn=( jdbc: root, admin)。 //School_Database is the name of database , root is user name and admin is the password return conn。 } public static void closeConn(Connection conn) //close the connection of database { try{ ()。 第 5 章 系統(tǒng)的實現(xiàn) 及測試 25 }catch(Exception e){ ()。 } } } 在需要進行數(shù)據(jù)庫連接的 JSP 頁面中，我們首先導(dǎo)入 conDB 包，再建立一個數(shù)據(jù)庫連接對象即可，代碼如下： %@ page import=conDB.* % %Connection conn=()。% 此外，在 jsp 尾部，為保證數(shù)據(jù)安全，需要關(guān)閉數(shù)據(jù)庫鏈接： %(conn)。% 如上所述，我們所采用的方法只需要簡短的三行代碼即可建立一個數(shù)據(jù)庫連接，十分方便。 數(shù)據(jù)庫的基本操作包括增、刪、改、查四個部分，實現(xiàn)原理大同小異，我們以數(shù)據(jù)的更新為例進行說明。 ? 讀取所需要的參數(shù)，對特定數(shù)據(jù)進行更新，需要它的唯一標(biāo)識號。我們利用 request進行操作： String content=(editor1)。 ? 建立 Statement 對象， Statement state=()。 ? 設(shè)置數(shù)據(jù)庫 sql 語句： String sql=null。 sql=update Module5 set headline=39。+headline+39。,content=39。+content+39。, department=39。+department+39。,Moduleid=+Moduleid+ where id=+id。 ? 運行 sql 語句， (sql)。 ckeditor 后臺編輯功能是網(wǎng)站后臺管理最為主要的核心功能之一。 ckeditor 是一款開源的所見即所得的文字編輯器。我們采用該插件技術(shù)實現(xiàn)后臺文本編輯功能，將所形成的 html文件完整的保存至數(shù)據(jù)庫中，并在前臺進行規(guī)范化輸出。該技術(shù)使得網(wǎng)站