【文章內(nèi)容簡介】 點(diǎn)擊查看鏈接查看新聞詳細(xì)信息 性能需求 （ 1） 操作應(yīng)方便、靈活。 （ 2） 系統(tǒng)應(yīng)有較高的穩(wěn)定性。 （ 3） 系統(tǒng)應(yīng)有較高 的安全性。 （ 4） 系統(tǒng)應(yīng)有較高的容錯(cuò)性。 （ 5） 速度上要求前臺要能夠很快地反應(yīng)用戶，后臺操作不能出現(xiàn)超時(shí)現(xiàn)象。 10 第 3 章 概要設(shè)計(jì) 系統(tǒng)體系結(jié)構(gòu) 系統(tǒng)采用基于 MVC 模式的多層 B/S 結(jié)構(gòu)， 如圖 31 所示。 視圖層采用 JSP 和 JavaScript技術(shù)實(shí)現(xiàn)，用來實(shí)現(xiàn)與用戶的交互?？刂茖硬捎?JSP 和 Servlet 實(shí)現(xiàn)，作用是根據(jù)用戶操作來調(diào)用業(yè)務(wù)層提供的功能 [4]。模型層又細(xì)分為業(yè)務(wù)層和數(shù)據(jù)服務(wù)層。業(yè)務(wù)層提供應(yīng)用領(lǐng)域的業(yè)務(wù)邏輯，數(shù)據(jù)服務(wù)層提供對數(shù)據(jù)庫的訪問。 J S PJ a v a S c r i p tm y s q l應(yīng) 用 服 務(wù) 器數(shù) 據(jù) 庫服 務(wù) 器瀏覽器客 戶 端視 圖 層J S PS e r v l e t控 制 層J a v a B e a n業(yè) 務(wù) 層實(shí) 體數(shù) 據(jù) 訪 問服 務(wù)數(shù) 據(jù) 服 務(wù) 圖 31 系統(tǒng)體系結(jié)構(gòu)圖 模塊設(shè)計(jì) 根據(jù)許昌學(xué)院人事處網(wǎng)站的性質(zhì)將該網(wǎng)站分為六大模塊，分別是前臺新聞查看，新聞檢索；后臺新聞?lì)悇e管理、新聞管理、用戶管理、文件管理。新聞查看功能主要實(shí)現(xiàn)進(jìn)入前臺查看人事處網(wǎng)站最近發(fā)布的新聞，根據(jù)不同類別的新聞標(biāo)題查看不同的新聞內(nèi)容。新聞檢索則是根據(jù)所輸入的關(guān)鍵字進(jìn)行模糊查詢。管理員登陸后臺對新聞進(jìn)行新聞?lì)悇e管理，添加、修改或者刪除新聞?lì)悇e，新聞管理有新聞發(fā)布和新聞瀏覽兩個(gè)模塊，新聞發(fā)布實(shí)現(xiàn)的是添加新聞操作，新聞瀏覽里面可以實(shí)現(xiàn)新聞查看，新聞修改、新聞刪除操作。 用戶管理模塊包括用戶添加和用戶查看兩個(gè)模塊，用戶查看可以實(shí)現(xiàn)用戶的信息查看、修改和刪除操作，而普通管理員只可以修改個(gè)人密碼操作，沒有添加用戶的權(quán)限；文件管理模塊有四個(gè)子模塊組成分別是文件上傳、圖片上傳、文件管理、圖片管理四個(gè)模塊，完成對圖片和文件的增、刪、改、查操作。 在對系統(tǒng)進(jìn)行功能模塊劃分之后可畫出該系統(tǒng)的數(shù)據(jù)流程圖，該數(shù)據(jù)流程圖說明了用戶 11 對數(shù)據(jù)表的操作與存儲。用戶打開許昌學(xué)院人事處網(wǎng)站新聞查看流程圖， 如圖 32 所示。 普 通 用 戶查 看 新 聞新 聞 內(nèi) 容 報(bào) 表 新 聞 類 型 表檢 索 新 聞新 聞 信 息新 聞 信 息普 通 用 戶新 聞 信 息新 聞 信 息 圖 32 查看新聞、檢 索新聞流程圖 如圖 33 所示人事處網(wǎng)站后臺流程圖。 總 管 理 員身 份 驗(yàn) 證 管 理 界 面 新 聞 管 理新 聞 類 別 管理用 戶 管 理 文 件 管 理新 聞 內(nèi) 容 報(bào) 表新 聞 類 別 報(bào) 表用 戶 報(bào) 表 文 件 報(bào) 表用 戶 名 密 碼用 戶 名 密 碼用 戶 信 息用 戶 信 息文 件 信 息文 件 信 息新 聞 類 別 信 息新 聞 信 息新 聞 信 息新 聞 類 別 信 息 圖 33 管理員登陸后臺流程圖 數(shù)據(jù)庫設(shè)計(jì) 數(shù)據(jù)庫設(shè)計(jì)是該網(wǎng)站的核心部分，因?yàn)閿?shù)據(jù)庫設(shè)計(jì)直接決定著該網(wǎng)站的功能流程和運(yùn)行 12 效率，因此數(shù)據(jù)庫設(shè)計(jì)要做到深思熟慮，務(wù)求做到人事處網(wǎng)站的各項(xiàng)功能 [5]。 數(shù)據(jù)庫設(shè)計(jì)經(jīng)過多日的探討研究，有如下數(shù)據(jù)項(xiàng)： （ 1）新聞：新聞 ID、新聞標(biāo)題、新聞發(fā)布時(shí)間、新聞內(nèi)容、新聞?lì)悇e ID、新聞狀態(tài)、新聞點(diǎn) 擊數(shù)、新聞附件、新聞圖片。 （ 2）新聞?lì)悇e：新聞?lì)悇e ID、新聞?lì)悇e名、新聞子類別名。 （ 3）用戶：用戶 ID、用戶名、密碼、用戶類型。 （ 4）文件：文件 ID，文件、圖片、文件名稱、文件描述。 經(jīng)過以上分析很顯然可以畫出該人事處網(wǎng)站的數(shù)據(jù)庫 ER 圖，許昌學(xué)院人事處網(wǎng)站的數(shù)據(jù)庫 ER 圖如圖 34 所示。 圖 34 人事處網(wǎng)站數(shù)據(jù)庫 ER 圖 該人事處網(wǎng)站一共設(shè)計(jì)了四個(gè)數(shù)據(jù)表分別是新聞表、新聞?lì)愋捅?、文件表和用戶表?如 表 31所示。 13 表 31 數(shù)據(jù)表列表 序號 表名 實(shí)體 /關(guān)系名 說明 1 用戶表 用戶實(shí)體 保存用戶信息 2 新聞表 新聞實(shí)體 保存新聞信息 3 新聞?lì)悇e表 新聞?lì)悇e 保存新聞?lì)悇e信息 4 文件表 文件實(shí)體 保存文件信息 各表詳細(xì)說明如下： 用戶表如表 32 所示。 表 32 用戶表 字段名稱 含義 數(shù)據(jù)類型 是否主鍵 是否外鍵 其他約束 用戶名 用戶登錄名 Varchar(40) 是 否 不能超過 10個(gè)字符，且只能用漢字、字母和數(shù)字 密 碼 用戶密碼 Varchar(40) 否 否 密碼不能少于 6個(gè)字符，且只能為數(shù)字和字母 用戶類型 用戶權(quán)限控制 Int 否 否 0為總管理員 1為普通管理員 新聞表如表 33 所示。 表 33 新聞表 字段名稱 含義 數(shù)據(jù)類型 是否主鍵 是否外鍵 其他約束 新聞編號 唯一標(biāo)識新聞 Int 是 否 只能為數(shù)字 不能重復(fù) 新聞標(biāo)題 新聞標(biāo)題 Varchar(40) 否 否 不能重復(fù) 發(fā)布時(shí)間 發(fā)布時(shí)間 Date 否 否 只能為日期類型 新聞?lì)悇e編號 唯一標(biāo)識新聞?lì)悇e Int 否 是 不能為負(fù)值 新聞內(nèi)容 新聞內(nèi)容 Text 否 否 只能為字符 點(diǎn)擊數(shù) 新聞被點(diǎn)擊數(shù) Int 否 否 只能為數(shù)字 新聞附件 新聞附件 Varchar(40) 否 否 只能為字符 新聞圖片 新聞圖片 Varchar(40) 否 否 只能為字符 新聞狀態(tài) 新聞狀態(tài) Varchar(40) 否 否 只能為字符 14 新聞?lì)愋捅砣绫?34 所示。 表 34 新聞?lì)愋捅? 字段名稱 含義 數(shù)據(jù)類型 是否主鍵 是否外鍵 其他約束 新聞?lì)愋途幪? 新聞?lì)愋途幪? Int 是 否 只能為數(shù)字，設(shè)置為自增 新聞?lì)愋? 新聞?lì)愋? Varchar(40) 否 否 只能為字符或者漢字 新聞子 類型 新聞子 類型 Varchar(40) 否 否 只能為字符或者漢字 文件表如表 35 所示。 表 35 文件表 字段名稱 含義 數(shù)據(jù)類型 是否主鍵 是否外鍵 其他約束 文件編號 標(biāo)識文件 Int 是 否 只能為數(shù)字且自動(dòng)增 1 文件 文件路徑 Varchar(40) 否 是 只能為字符 圖片 圖片路徑 Varchar(40) 否 否 只能為字符 文件名 銷售價(jià)格 Varchar(40) 否 否 只能為字符或漢字 文件描述 文件描述 Varchar(40) 否 是 只能為字符或漢字 15 第 4 章 詳細(xì)設(shè)計(jì) 界面設(shè)計(jì) 系統(tǒng)后臺主界面 的布局如圖 41所 示， 其 中系統(tǒng)圖標(biāo)及簡介區(qū)對所有頁面都一樣，使用人和功能菜單區(qū)根據(jù)登錄人的不同而不同 [6]。選擇功能菜單項(xiàng)后，在功能處理區(qū)打開相應(yīng)的處理頁面。 系 統(tǒng) 圖 標(biāo) 及 簡 介使 用 人 姓 名功 能 菜 單功 能 處 理 區(qū) 圖 41 系統(tǒng)后臺主界面布局 系統(tǒng)前臺主界面的布局如圖 42所示， 其中系統(tǒng)圖標(biāo)導(dǎo)航欄對所有頁面都一樣， 功能菜單區(qū)根據(jù)導(dǎo)航欄點(diǎn)擊的新聞分類的不同而不同。選擇功能菜單項(xiàng)后，在功能處理區(qū)打開相應(yīng)的處理頁面。 系統(tǒng)圖標(biāo)與導(dǎo)航欄 功能菜單 功能處理區(qū) 圖 42 系統(tǒng)前臺主界面 16 界面設(shè)計(jì) 根據(jù)系統(tǒng)要求的功能，系統(tǒng)包含的 JSP 文件及其他附屬文件如 表 41 所示。 表 41 系統(tǒng)包含的文件列表 序號 文件名 簡要說明 目錄 1 frame. jsp 人事處網(wǎng)站主頁，采用框架技術(shù)，包含 人事處前臺界面設(shè)計(jì) 2 looknews. jsp 查看新聞詳細(xì)信息頁面 3 新聞列表信息頁面 4 新聞附件下載頁面設(shè)計(jì) 5 檢索新聞的新聞頁面 6 success. jsp 操作成功頁面 7 Error. jsp 操作失敗頁面 8 根據(jù)用戶名密碼以及用戶類型登陸后臺界面 人事處后臺界面設(shè)計(jì) 9 添加用戶信息的頁面設(shè)計(jì) 10 查看用戶列表的頁面設(shè)計(jì) 11 修改用戶信息的頁面 12 admin_frame 管理員的后臺主界面 ， 采用框架技術(shù) ， 包含, 13 修改密碼的后臺處理頁面 14 添加新聞分類的頁面 15 新聞?lì)悇e列表的頁面 16 修改新聞?lì)悇e的頁面 17 新聞發(fā)布的頁面 18 查看新聞詳細(xì)信息的頁面 19 修改新聞信息的頁面 20 修改新聞附件的頁面 21 上傳文件的頁面 22 上傳圖片頁面 23 查看文件列表的頁面 24 文件下載的頁面 25 普通管理員登錄時(shí)的后臺主界面 26 包含 27 檢索符合關(guān)鍵字的新聞頁面 28 修改普通管理員密碼 17 前臺顯示頁面說明 人事處前臺主界面 如圖 43 是許昌學(xué)院人事處網(wǎng)站首頁，該頁面的功能有人事處簡介、規(guī)章制度、機(jī) 構(gòu)設(shè)置、人才招聘、師資隊(duì)伍、勞資福利、師資管理、人事管理、文件下載等，用戶點(diǎn)擊相應(yīng)的鏈接會進(jìn)入相應(yīng)的功能頁面，此人事處網(wǎng)站首頁除了以上功能外還有工作動(dòng)態(tài)和通知公告、熱點(diǎn)新聞等并支持模糊查詢，根據(jù)關(guān)鍵字查詢到新聞標(biāo)題中包含關(guān)鍵字的新聞列表顯示出來，并采用分頁技術(shù)。 圖 43 人事處網(wǎng)站的前臺界面 18 分類瀏覽新聞界面 根據(jù)主頁的欄目導(dǎo)航，我們可以點(diǎn)擊規(guī)章制度，點(diǎn)擊以后會彈出以新聞?lì)愋蜑橐?guī)章制度的相關(guān)新聞，選擇規(guī)章制度下的子類，會彈出屬于該子類的所有新聞， 如圖 44 所示。在彈出的新聞列表中若想查看新聞詳細(xì)信息 ，點(diǎn)擊 “新聞標(biāo)題 ”超鏈接即可查看操作 ,新聞詳細(xì)信息如圖 45 所示。 圖 44 分類瀏覽新聞界面 圖 45 新聞詳細(xì)信息頁面 新聞檢索界面 新聞檢索可以大大提高新聞的瀏覽速度，用戶查詢新聞時(shí)只需要在相應(yīng)的新聞檢索欄中輸入所要查詢的關(guān)鍵字然后點(diǎn)擊查詢圖標(biāo)，即可得到相應(yīng)的新聞頁面，如圖 46 添加一個(gè)新聞的關(guān)鍵字，點(diǎn)擊查詢按鈕，便得到如圖 47 所示的檢索新聞列表。 19 圖 46 所示添加新聞關(guān)鍵字 圖 47 新聞檢索列表頁面 后臺顯示頁面說明 后臺登陸界面 限制用戶的權(quán)限，用戶登錄模 塊是必不可少的，在正常用戶名和密碼、用戶類型都正確的情況下可以正常登陸，如圖 48 所示即為用戶登陸界面。 20 圖 48 用戶登陸界面 后臺 功能 主界面 根據(jù)正確的用戶名和密碼登陸進(jìn)入人事處后臺管理進(jìn)入后臺管理主要由四大功能模塊組成分別是新聞?lì)愋凸芾砟K、新聞管理模塊、用戶管理模塊、和文件管理模塊。 （ 1）新聞?lì)愋凸芾砟K：添加新聞?lì)愋?、查看新聞?lì)愋汀? （ 2）新聞管理模塊：新聞發(fā)布模塊、新聞瀏覽模塊。 （ 3）用戶管理模塊：添加用戶模塊、查看用戶模塊。 （ 4）文件管理模塊：文件上傳模塊、圖片上傳主界面、文件管理模 塊、圖片管理模塊。 系統(tǒng)登陸后的后臺 功能 界面如圖 49 所示，登陸后可以進(jìn)行一系列的后臺操作，以便前臺進(jìn)行瀏覽。 圖 49 后臺 功能 主界面 新聞發(fā)布界面 如圖 410 所示是本人事處網(wǎng)站的新聞發(fā)布頁面，新聞 ID 數(shù)據(jù)庫自動(dòng)添加不需要用戶手動(dòng)添加，發(fā)布時(shí)間采用 javascript 腳本語言生成 JS 特效，防止用戶輸入的日期格式不正確， 21 而導(dǎo)致的異常錯(cuò)誤，使得數(shù)據(jù)庫無法完成添加操作，其中發(fā)布時(shí)間、新聞標(biāo)題、新聞?lì)愋秃托侣剝?nèi)容則是用戶必須編輯的內(nèi)容，其中新聞內(nèi)容編輯采用 tinymce 在線編輯器組建，可以對所要發(fā)布的新聞進(jìn)行編輯格式、插入圖片，插入表格、粘貼 word 文檔等等，操作極其簡便，使得發(fā)布的新聞更美觀，而所添加的新聞附件和新聞圖片是可選項(xiàng)，根據(jù)需要來選擇，當(dāng)必填項(xiàng)填寫完整后點(diǎn)擊提交按鈕，便可進(jìn)行新聞發(fā)布操作，新聞發(fā)布成功后會給出提示。其中新聞附件和新聞圖片牽扯到文件的上傳操作。 圖 410 新聞發(fā)布頁面 新聞 管理 界面 管理員用戶登陸以后點(diǎn)擊新聞瀏覽鏈接，出現(xiàn)如圖 411 所示的頁面，此頁面給予的權(quán)限是最高的，可以瀏覽、修改新聞、刪除新聞、修改新聞附件，瀏覽需要修改的新聞內(nèi)容，點(diǎn)擊操作類型 中的修改、刪除、查看或修改附件鏈接，進(jìn)入相應(yīng)的操作界面，如果選擇修改則進(jìn)入新聞修改界面，如圖 412 所示即為新聞修改頁面，如果用戶是選擇刪除操作，即點(diǎn)擊操作類型中的刪除鏈接，會提示你是否刪除如圖 413 所示