基于WEB的校報管理系統(tǒng)設(shè)計與實現(xiàn)

◆盛波 宋曉鑌

（江蘇聯(lián)合職業(yè)技術(shù)學(xué)院常州藝術(shù)分院 江蘇 213000）

1 概述

校報是學(xué)校思想宣傳的重要工具，是校園主導(dǎo)媒體之一。在高職校中，它具有獨特的功能，從創(chuàng)建以來一直承擔(dān)著校園文化傳播載體與校園資訊宣傳渠道的重要角色，對于推進(jìn)高職校的發(fā)展與建設(shè)具有重要意義。與其他宣傳渠道相比，校報能夠更廣泛及時宣傳國家的方針、政策等方面的信息，迅速傳達(dá)學(xué)校的重大決策與工作部署，同時也是重要的橋梁紐帶，不僅加強(qiáng)了校園與社會的緊密聯(lián)系，也是校內(nèi)師生吐露心聲，思想交流的平臺。校報報道的內(nèi)容圍繞學(xué)校建設(shè)發(fā)展過程中教學(xué)、科研、創(chuàng)作、交流、音樂會、演出、藝術(shù)實踐等方面，對學(xué)校師生在教與學(xué)方面取得的最新成就及時祝賀與宣傳，大力弘揚(yáng)社會主義核心價值觀，積極傳遞正能量，在促進(jìn)學(xué)校黨風(fēng)、校風(fēng)、教風(fēng)、學(xué)風(fēng)建設(shè)以及引領(lǐng)優(yōu)秀校園文化氛圍方面具有重要作用。

隨著網(wǎng)絡(luò)技術(shù)的不斷進(jìn)步與發(fā)展，各種大眾傳媒在校園興起，新的信息傳播媒體的便利性吸引了大量的群體，改變了人們傳統(tǒng)的閱讀習(xí)慣，傳統(tǒng)的紙質(zhì)校報面臨來自校園網(wǎng)絡(luò)和網(wǎng)絡(luò)媒體的嚴(yán)峻挑戰(zhàn)。在數(shù)字化時代，如何利用信息網(wǎng)絡(luò)技術(shù)，適應(yīng)新形勢，拓展校報的服務(wù)功能，越來越受到校報工作者的重視。將紙質(zhì)校報轉(zhuǎn)為網(wǎng)絡(luò)版校報是適應(yīng)數(shù)字時代發(fā)展的必然選擇，不僅可以節(jié)省印刷成本節(jié)約資金，更能擴(kuò)大宣傳范圍。在校園智慧化建設(shè)的背景下，如何引進(jìn)新數(shù)字時代的科學(xué)技術(shù)進(jìn)行有效的校報信息管理成為校報數(shù)字化所帶來的問題。本文在分析校報信息管理的理論基礎(chǔ)上，借助WEB 技術(shù)和數(shù)據(jù)庫技術(shù)進(jìn)行開發(fā)，設(shè)計并實現(xiàn)校報管理系統(tǒng)，文中以常州藝術(shù)高等職業(yè)學(xué)校校報信息管理系統(tǒng)為例。

2 需求分析

系統(tǒng)主要面向用戶為讀者和校報編輯人員。本著以最小的代價在最短的時間內(nèi)解決問題的原則，對系統(tǒng)進(jìn)行需求分析。利用軟件工程的思想，對校報的文章內(nèi)容、類型以及校報管理過程和方法進(jìn)行分析。需要數(shù)據(jù)庫技術(shù)將不同時期的信息長期保留并供讀者隨時瀏覽查看，查詢以及存取。同時在保證校報版面布局不變的基礎(chǔ)上，盡可能設(shè)計出靈活、便捷、利于讀者和編輯人員使用的平臺。

對于讀者來說，使用要方便快捷，內(nèi)容要一目了然，能夠進(jìn)行閱讀和快速檢索，比如可以直接根據(jù)刊號進(jìn)行期刊選擇，同時預(yù)覽每期刊物內(nèi)的文章目錄，進(jìn)入期刊后，能夠按版面號瀏覽校報不同版面，在每一個版面內(nèi)，可以查看片面的布局、內(nèi)容，對感興趣的內(nèi)容可以點開詳細(xì)閱讀，同時可以PDF 格式下載、存檔校報等。

對于管理員來說，需要考慮到管理員可能是非專業(yè)使用者，操作的時候以功能實用、簡便易行為主，能夠快速對文章、期刊、版面進(jìn)行添加、更新、刪除，同時可在線編輯文章，并設(shè)置文章所在版面的錨點響應(yīng)區(qū)等操作。

在交互性方面，讀者界面需要保留傳統(tǒng)報紙的閱讀習(xí)慣，管理界面要避免復(fù)雜操作，簡單易操作。

3 系統(tǒng)設(shè)計

根據(jù)對常州藝術(shù)高等職業(yè)學(xué)校校報信息管理系統(tǒng)使用者及學(xué)校環(huán)境的分析，本系統(tǒng)采用ASP.NET 技術(shù)，以C#作為編程語言，采用SQL SERVER 數(shù)據(jù)庫作為后臺數(shù)據(jù)庫，基于B/S 結(jié)構(gòu)下形成數(shù)據(jù)驅(qū)動的WEB 應(yīng)用程序。系統(tǒng)大致分為兩大模塊：前臺閱讀模塊、系統(tǒng)管理模塊。

前臺閱讀模塊主要面向讀者用戶，每期報紙以WEB 頁的形式發(fā)布到網(wǎng)絡(luò)。為滿足讀者原有的閱讀習(xí)慣，保留紙質(zhì)校報的版面布局與風(fēng)格，通過點擊鏈接或版面上的圖形熱點區(qū)域，讓讀者快速閱讀感興趣的詳細(xì)內(nèi)容。前臺頁面不僅展示文字內(nèi)容，還結(jié)合圖形、視頻、動畫等形式展現(xiàn)，體現(xiàn)數(shù)字化的優(yōu)越性。

系統(tǒng)管理模塊主要是面向校報編輯人員即系統(tǒng)管理員，管理員通過賬號密碼登錄系統(tǒng)。主要完成用戶、報刊、版面、文章的管理，可以實現(xiàn)新一期報刊的添加、修改、刪除；通過上傳保留紙質(zhì)報刊布局風(fēng)格的PDF 文檔實現(xiàn)各個版面的增加，以及版面的修改與刪除；實現(xiàn)文章的在線編輯，融合圖、文、視頻等多媒體元素實現(xiàn)文章的添加、修改、刪除，并能在版面上設(shè)置讀者響應(yīng)的熱區(qū)，提升讀者閱讀樂趣。

數(shù)據(jù)庫設(shè)計結(jié)合校報實際需求分析，分析用戶的數(shù)據(jù)要求，設(shè)計數(shù)據(jù)庫news.mdf，以及對應(yīng)的表，主要包括管理員表、報刊信息表、版面信息表、文章信息表。管理員表password 字段采用印6 位MD5加密形式存儲。文章信息表中，設(shè)置了文章坐標(biāo)字段，存儲一組4段的矩形坐標(biāo)數(shù)據(jù)，主要是根據(jù)錨點坐標(biāo)定位文章在其版面中的位置，以便與讀者交互查閱文章詳情。

4 系統(tǒng)關(guān)鍵技術(shù)

結(jié)合常州藝術(shù)高等職業(yè)學(xué)校用戶數(shù)量及信息化環(huán)境考慮，系統(tǒng)采用B/S 結(jié)構(gòu)模式，將應(yīng)用程序和數(shù)據(jù)庫部署在服務(wù)器上，減輕客戶端負(fù)載，通過安全防護(hù)的高性能服務(wù)器，保障系統(tǒng)的穩(wěn)定性和數(shù)據(jù)的安全性。在系統(tǒng)結(jié)構(gòu)架構(gòu)中，為提高系統(tǒng)的可擴(kuò)展性，降低各個模塊的數(shù)據(jù)往來，采用數(shù)據(jù)訪問層、業(yè)務(wù)邏輯層、表示層三層架構(gòu)進(jìn)行設(shè)計。數(shù)據(jù)訪問層（DAL）直接對接數(shù)據(jù)庫，通過設(shè)計數(shù)據(jù)訪問層抽象接口，為業(yè)務(wù)層提供數(shù)據(jù)支持。業(yè)務(wù)邏輯層（BBL）主要解決從數(shù)據(jù)訪問層取得數(shù)據(jù)的業(yè)務(wù)數(shù)據(jù)處理及流程實現(xiàn)。表現(xiàn)層（WEB）通過WEB界面，接收用戶需求并輸出數(shù)據(jù)，為用戶提供交互操作的界面。三層架構(gòu)的設(shè)計擴(kuò)展性強(qiáng)，結(jié)構(gòu)清晰，方便維護(hù)，利于報刊管理平臺今后的升級管理。

4.1 登錄模塊的實現(xiàn)

這一模塊主要為實現(xiàn)后臺管理登錄而設(shè)計。管理員通過賬號和密碼進(jìn)行校驗，判斷成功后登錄系統(tǒng)后臺，進(jìn)行報刊相關(guān)內(nèi)容編輯。通過驗證，保障系統(tǒng)安全，禁止無關(guān)用戶的訪問。登錄過程中通過圖形驗證碼驗證功能設(shè)置防止惡意用戶暴力破解登錄。一般來說攻擊程序較難識別圖形驗證字符，無法順利完成登錄，而用戶可以識別并輸入，這在一定程度上實現(xiàn)了阻擋攻擊的作用。對用戶密碼進(jìn)行加密后再存入數(shù)據(jù)庫，可以有效防止用戶資料的泄露。用戶密碼采用MD5 加密與數(shù)據(jù)庫驗證，確認(rèn)無誤成功登錄，否則彈出提示信息，拒絕登錄。

4.2 報刊、版面、文章管理模塊的實現(xiàn)

新的一期報刊，可以在報刊管理模塊添加和管理。通過設(shè)定刊號、日期、以及各版面的縮略圖，生成新一期報刊，存儲在報刊列表內(nèi)。報刊的縮略圖能夠方便用戶查找、預(yù)覽本期刊物。

通過傳遞報刊ID 值，進(jìn)入相應(yīng)報刊的版面管理模塊。版面管理模塊主要管理報刊的各個版面，包括版面名稱、版面縮略圖、以及對應(yīng)的PDF 文件。

每個版面內(nèi)包含多篇文章，在文章管理模塊，可以對各個版面的文章進(jìn)行添加、刪除、修改，主要包括文章標(biāo)題、內(nèi)容、所屬報刊、所屬版面的，以及具有交互功能的熱點區(qū)域坐標(biāo)的設(shè)定。文章管理模塊調(diào)用kindeditor 編輯器對文章的文字、圖片、視頻等元素的排版，實現(xiàn)了校報系統(tǒng)核心內(nèi)容的顯示，并且通過熱區(qū)定位與用戶交互，給讀者較好的閱讀體驗。

圖1 版面管理

4.3 WEB 圖形熱區(qū)模塊的實現(xiàn)

圖形熱區(qū)是校報管理系統(tǒng)中向讀者展示報刊版面內(nèi)容的一個重要的交互模塊。讀者在瀏覽報刊版面的時候，可以通過鼠標(biāo)在版面圖片上移動，激活圖片熱區(qū)交互，動態(tài)預(yù)覽熱區(qū)標(biāo)題，點擊熱區(qū)可以新開WEB 頁瀏覽文章詳細(xì)信息。這種方式既能大大簡化讀者讀報的流程，又能保留讀者的傳統(tǒng)閱讀習(xí)慣。

這部分的核心在于熱點區(qū)域的坐標(biāo)定位，即熱區(qū)的捕捉。根據(jù)熱區(qū)坐標(biāo)范圍，判斷鼠標(biāo)的位置是否在該區(qū)域內(nèi)，產(chǎn)生響應(yīng)。

首先，在文章編輯頁創(chuàng)建框架IFRAME，并在框架內(nèi)顯示校報版面圖片，用JS 腳本輸出方形蒙版圖形框來創(chuàng)建熱點區(qū)域，根據(jù)版面縮略圖上文章的位置，用鼠標(biāo)拖動確定熱點區(qū)域的大小與坐標(biāo)，在記錄文章信息的同時，將該文章所在版面上的坐標(biāo)數(shù)據(jù)記入數(shù)據(jù)庫。

其次，前臺瀏覽報刊時，在其對應(yīng)的版面縮略圖上，定義客戶端圖像映射標(biāo)簽image-map，生成可點擊區(qū)域的版面縮略圖，并通過系統(tǒng)函數(shù)將鼠標(biāo)當(dāng)前位置坐標(biāo)，與數(shù)據(jù)庫中已經(jīng)存在的熱點區(qū)域坐標(biāo)比對，判斷鼠標(biāo)所在的熱區(qū)區(qū)域，將該區(qū)域?qū)?yīng)文章的標(biāo)題信息顯示出來。版面圖上的熱區(qū)與對應(yīng)文章形成鏈接，點擊熱區(qū)即可瀏覽文章全部信息。

圖2 版面圖上的熱區(qū)與對應(yīng)文章形成鏈接

5 系統(tǒng)安全

本系統(tǒng)雖然是小型報刊管理平臺，但也是運行在互聯(lián)網(wǎng)上的數(shù)據(jù)庫系統(tǒng)，有一定的覆蓋面和影響力，因此在發(fā)布時需綜合考慮了網(wǎng)絡(luò)、網(wǎng)站以及數(shù)據(jù)的安全性。硬件方面學(xué)校配備了綠盟WAF 網(wǎng)絡(luò)防火墻及入侵檢測系統(tǒng)保護(hù)服務(wù)器安全，使用UPS 保證服務(wù)器的不間斷運行，并配備備份一體柜防止數(shù)據(jù)丟失，確保數(shù)據(jù)的安全。軟件方面B/S 架構(gòu)的平臺，避免用戶直接訪問服務(wù)器，同時管理員對平臺的核心功能的訪問必須通過登錄驗證才能進(jìn)入。在后臺還增加了登錄時間、IP 地址等日志統(tǒng)計信息的查閱，以便有突發(fā)情況能及時處理，確保系統(tǒng)的安全。

6 結(jié)束語

本文設(shè)計的基于WEB的校報管理系統(tǒng)易用，實用并成本低廉，操作簡單，解決了學(xué)校內(nèi)紙質(zhì)報刊與互聯(lián)網(wǎng)結(jié)合的問題，能滿足學(xué)校的需求，通過上線運行測試，達(dá)到了預(yù)期效果。