劉磊

摘 要： 設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于B/S架構(gòu)的個(gè)人博客管理系統(tǒng)，包括游客瀏覽博客、用戶發(fā)表博客及使用爬蟲抓取網(wǎng)絡(luò)新聞等功能。系統(tǒng)前端使用當(dāng)前流行的響應(yīng)式布局框架Bootstrap開發(fā)，頁面能匹配不同分辨率；后端使用Hibernate、Spring、Struts三大經(jīng)典組合框架開發(fā)，系統(tǒng)擴(kuò)展性強(qiáng)。本文論述了本系統(tǒng)的功能設(shè)計(jì)、流程設(shè)計(jì)、數(shù)據(jù)模型設(shè)計(jì)、效果實(shí)現(xiàn)等軟件開發(fā)關(guān)鍵階段的開發(fā)過程。

關(guān)鍵詞： Web框架； SSH框架； Bootstrap框架； 個(gè)人博客； 網(wǎng)絡(luò)爬蟲

中圖分類號(hào)：TP393.02 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2017）05-20-04

Design and implementation of blog management system based on Web framework

Liu Lei

（The Open University of Guangdong（Guangdong Polytechnic Institute）， Guangzhou， Guangdong 510000， China）

Abstract： In this paper， a personal blog management system based on B/S architecture is designed and implemented， which includes the functions of the visitors browsing the blog， the blog users publishing the blog and the crawler crawling the network news. The front end of the system is developed with Bootstrap， which makes the page can be matched with different resolutions， and the back-end is developed with the classic combination framework combined with Hibernate， Spring and Struts， which makes the system scalable. This paper discusses the developing process of the software development， such as function design， process design， data model design and the realization of the effects.

Key words： Web framework； SSH framework； Bootstrap framework； personal blog； Web crawler

0 引言

博客，又稱網(wǎng)絡(luò)日志，是一種表達(dá)個(gè)體思想、彰顯個(gè)人風(fēng)格的互聯(lián)網(wǎng)工具，通常為個(gè)人自主管理的網(wǎng)站。用戶可以自由的在博客上發(fā)表文章，最新的文章排列在最前顯示，游客可以瀏覽博文；除了提供信息展示的功能，博客還提供評(píng)論、回復(fù)評(píng)論的交互功能，以提高博客的用戶粘連度。一個(gè)典型的博客囊括了文字、圖像、其他博客或網(wǎng)站的鏈接，以及相關(guān)媒體，博客是社會(huì)媒體網(wǎng)絡(luò)的一部分。博客系統(tǒng)是指，使用計(jì)算機(jī)語言編寫、安裝，方便用戶在互聯(lián)網(wǎng)上建立個(gè)人博客的一整套系統(tǒng)[1]。

本文嘗試從軟件工程的角度，詳細(xì)闡述個(gè)人博客管理系統(tǒng)的功能設(shè)計(jì)、流程設(shè)計(jì)和數(shù)據(jù)模型設(shè)計(jì)，技術(shù)選型使用經(jīng)典的J2EE企業(yè)級(jí)開發(fā)框架SSH和響應(yīng)式前端框架Bootstrap，最后分析了系統(tǒng)關(guān)鍵功能實(shí)現(xiàn)。

1 功能結(jié)構(gòu)設(shè)計(jì)

本文設(shè)計(jì)的博客系統(tǒng)主要實(shí)現(xiàn)三個(gè)功能：發(fā)表和瀏覽日志、新聞爬蟲與收藏、內(nèi)容評(píng)論與回復(fù)。

1.1 發(fā)表日志

權(quán)限控制：未注冊(cè)的用戶只能查看公開日志；需要登錄才能增刪改，查看隱藏日志。

需要實(shí)現(xiàn)的模塊有七個(gè)。①用戶登錄：用戶使用帳號(hào)密碼登錄系統(tǒng)，認(rèn)證成功則轉(zhuǎn)入個(gè)人主頁，失敗則顯示錯(cuò)誤信息；②用戶注冊(cè)：填寫用戶名、密碼、個(gè)人信息，提交數(shù)據(jù)庫(kù)保存；③個(gè)人資料：填寫博主基本信息，包括博客名、作者簡(jiǎn)介、性別、郵箱等；④發(fā)表日志：用戶發(fā)表日志，內(nèi)容包括主題主題、正文、圖片、媒體等信息，可以選擇是否公；⑤刪除日志：用戶可以選擇刪除已經(jīng)發(fā)表的日志，系統(tǒng)會(huì)從數(shù)據(jù)庫(kù)刪除這些信息；⑥查看日志：用戶或游客可以瀏覽公開的日志內(nèi)容；⑦修改日志：用戶修改已經(jīng)發(fā)表的日志，系統(tǒng)保存修改內(nèi)容。

1.2 新聞爬蟲與收藏

權(quán)限控制：未注冊(cè)用戶只能查看爬蟲新聞，需要登錄才能設(shè)置爬蟲篩選條件和進(jìn)行收藏。

需要實(shí)現(xiàn)的模塊有二個(gè)。①新聞爬蟲：博客用戶可以設(shè)置篩選條件，爬蟲程序根據(jù)預(yù)定義規(guī)則獲取網(wǎng)絡(luò)信息并存儲(chǔ)到系統(tǒng)數(shù)據(jù)庫(kù)；②收藏：博客用戶可以收藏本網(wǎng)站其他用戶的日志，查看收藏記錄。

1.3 評(píng)論與回復(fù)

權(quán)限控制：允許匿名用戶發(fā)表評(píng)論，只有被評(píng)論的日志作者有權(quán)限回復(fù)、刪除評(píng)論。

需要實(shí)現(xiàn)的模塊有四個(gè)。①發(fā)表評(píng)論：系統(tǒng)允許訪客匿名評(píng)論所閱讀的日志；②回復(fù)評(píng)論：日志作者可以對(duì)日志的評(píng)論進(jìn)行回復(fù)，與訪客進(jìn)行互動(dòng)；③刪除評(píng)論：博客用戶可以指定刪除對(duì)日志的評(píng)論；④自動(dòng)顯示：評(píng)論自動(dòng)顯示在對(duì)應(yīng)日志的下方。

系統(tǒng)總體功能結(jié)構(gòu)設(shè)計(jì)如圖1所示。

2 業(yè)務(wù)流程設(shè)計(jì)

本系統(tǒng)角色包括游客與用戶，游客可以瀏覽博客文章列表、查看博主詳細(xì)資料、查看博文內(nèi)容、發(fā)表匿名評(píng)論等；游客無需登錄，進(jìn)入系統(tǒng)主頁后，點(diǎn)擊菜單即可使用博客功能。用戶注冊(cè)賬號(hào)即成為博主，可以發(fā)表博文、編輯博文、刪除博文、編輯個(gè)人資料；同時(shí)系統(tǒng)提供了從互聯(lián)網(wǎng)抓取最新新聞到博客系統(tǒng)的功能，用戶可以啟動(dòng)新聞爬蟲抓取新聞、刪除新聞內(nèi)容等。系統(tǒng)業(yè)務(wù)流程設(shè)計(jì)如圖2所示。

3 數(shù)據(jù)庫(kù)模型設(shè)計(jì)

個(gè)人博客管理系統(tǒng)主要關(guān)注博客文章的發(fā)表，分析系統(tǒng)需求，博客系統(tǒng)最關(guān)鍵的是用戶實(shí)體、文章欄目實(shí)體和文章內(nèi)容實(shí)體，本系統(tǒng)加入了評(píng)論和新聞爬取功能，所以需要提供評(píng)論和新聞兩個(gè)實(shí)體。數(shù)據(jù)庫(kù)模型設(shè)計(jì)如圖3所示。

4 技術(shù)框架選型

本系統(tǒng)前端選用流行的Bootstrap框架，Bootstrap是目前很受歡迎的HTML、CSS和JS框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目，它簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷，Bootstrap基于HTML5、CSS3、jQuery開發(fā)，Bootstrap內(nèi)置的CSS媒體查詢（Media Query）功能，可以開發(fā)出響應(yīng)式布局的網(wǎng)頁，自動(dòng)適應(yīng)不同分辨率效果；同時(shí)提供了豐富的Web組件，包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁、排版、縮略圖、警告對(duì)話框、進(jìn)度條、媒體對(duì)象等。使用這些組件，可以快速地搭建一個(gè)漂亮、功能完備的網(wǎng)站前端[5-6]。

本系統(tǒng)后端選用經(jīng)典的SSH集成框架開發(fā)，SSH集成框架是Hibernate、Spring、Struts三大框架的組合，基于SSH框架的系統(tǒng)從職責(zé)上分為四層：表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)持久層和域模塊層，可以幫助開發(fā)人員在短期內(nèi)搭建結(jié)構(gòu)清晰、可復(fù)用性好、維護(hù)方便的Web應(yīng)用程序。其中使用Struts作為系統(tǒng)的整體基礎(chǔ)架構(gòu)，負(fù)責(zé)MVC的分離，在Struts框架的模型部分，控制業(yè)務(wù)跳轉(zhuǎn)，利用Hibernate框架對(duì)持久層提供支持，Spring做管理，管理Struts和Hibernate。具體做法是：首先用面向?qū)ο蟮姆治龇椒ǎ鶕?jù)需求提出一些模型，將這些模型實(shí)現(xiàn)為基本的Java對(duì)象；然后編寫基本的DAO（Data Access Objects）接口，并給出Hibernate的DAO實(shí)現(xiàn)，采用Hibernate架構(gòu)實(shí)現(xiàn)的DAO類來實(shí)現(xiàn)Java類與數(shù)據(jù)庫(kù)之間的轉(zhuǎn)換和訪問；其次使用Struts連接業(yè)務(wù)邏輯和視圖展現(xiàn)，接收、處理、發(fā)送數(shù)據(jù)并控制流程；最后由Spring做整合，管理Struts和Hibernate，提供IOC容器使代碼松耦合以及AOP框架的切面功能[2-4]。

5 關(guān)鍵功能與實(shí)現(xiàn)

本系統(tǒng)的關(guān)鍵功能包括發(fā)布博客日志、新聞爬蟲等模塊，用戶登錄成功后可以發(fā)表博客、啟動(dòng)新聞爬蟲可以抓取互聯(lián)網(wǎng)上的新聞鏈接和內(nèi)容，下面分析關(guān)鍵功能的實(shí)現(xiàn)。

5.1 發(fā)布博客日志

一篇博客日志可以由文字、圖片、視頻、音頻等元素組成，發(fā)布博客日志功能包括添加日志標(biāo)題、添加發(fā)布時(shí)間、添加日志內(nèi)容等。其中添加日志內(nèi)容最復(fù)雜，需要實(shí)現(xiàn)添加各種元素和布局排版元素，添加日志內(nèi)容通常使用富文本編輯器實(shí)現(xiàn)。本系統(tǒng)使用UEditor編輯器，UEditor是百度公司開發(fā)的所見即所得富文本web編輯器，具有輕量級(jí)、可定制、注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，提供了基本文檔格式化、網(wǎng)絡(luò)圖片、視頻、地圖、表情等豐富的功能，適合于編輯復(fù)雜的圖文內(nèi)容。在JSP頁面嵌入U(xiǎn)Editor的關(guān)鍵代碼如下：

<！-- 加載編輯器的容器 -->

<！-- 配置文件 -->

<！-- 編輯器源碼文件 -->

<！-- 實(shí)例化編輯器 -->

發(fā)布博客日志功能效果如圖4所示。

5.2 獲取網(wǎng)絡(luò)新聞

通過新聞爬蟲程序獲取網(wǎng)絡(luò)新聞，新聞爬蟲是一種按照一定的規(guī)則，自動(dòng)地抓取互聯(lián)網(wǎng)新聞的程序。新聞爬蟲程序通常包括控制器、解析器、資源庫(kù)三部分?？刂破髦饕?fù)責(zé)給多線程中的各個(gè)爬蟲線程分配工作任務(wù)；解析器主要負(fù)責(zé)下載網(wǎng)頁，進(jìn)行頁面的處理，主要是將規(guī)則外的JS腳本標(biāo)簽、CSS代碼內(nèi)容、HTML標(biāo)簽、空格字符等內(nèi)容處理掉，解析器是爬蟲程序的主要部分；資源庫(kù)用于存儲(chǔ)下載到的網(wǎng)頁資源[7]。本系統(tǒng)使用HttpClient實(shí)現(xiàn)了一個(gè)輕量級(jí)新聞爬蟲，主要包括四個(gè)類。①CrawlBase類：模擬http請(qǐng)求的基類；②CrawlListPageBase類：CrawlBase的子類，實(shí)現(xiàn)了從頁面中獲取鏈接的URL信息基類；③DoRegex類：封裝的一些基于正則表達(dá)式字符串匹配查找類；④CharsetUtil類：編碼方式檢測(cè)類。部分關(guān)鍵代碼如下：

public void crawl（）throws Throwable {

while（continueCrawling（）） {

CrawlerUrl url=getNextUrl（）；

//獲取待爬取隊(duì)列中的下一個(gè)URL

if（url！=null） {

printCrawlInfo（）；

String content=getContent（url）； //獲取URL的文本信息

//聚焦爬蟲，只爬取與主題內(nèi)容相關(guān)的網(wǎng)頁，這里采用正則匹配簡(jiǎn)單處理

if（isContentRelevant（content，this.regexpSearchPattern）） {

saveContent（url，content）； //保存網(wǎng)頁至本地

//獲取網(wǎng)頁內(nèi)容中的鏈接，并放入待爬取隊(duì)列中

Collection urlStrings=extractUrls（content，url）；

addUrlsToUrlQueue（url，urlStrings）；

} else {

程序System.out.println（url+"舍棄"）；

}

//延時(shí)防止被對(duì)方屏蔽

Thread.sleep（this.delayBetweenUrls）；

}

}

closeOutputStream（）；

}

6 結(jié)束語

博客是互聯(lián)網(wǎng)發(fā)表信息的重要工具，本文以發(fā)表博客、新聞獲取的需求為出發(fā)點(diǎn)，設(shè)計(jì)并實(shí)現(xiàn)了通用的個(gè)人博客管理系統(tǒng)，技術(shù)方案選用SSH框架開發(fā)后端，具有穩(wěn)定、高效、可擴(kuò)展性強(qiáng)得優(yōu)點(diǎn)；使用Bootstrap框架開發(fā)前端，頁面簡(jiǎn)潔大方，兼容性強(qiáng)，能自動(dòng)響應(yīng)匹配不同終端設(shè)備的分辨率。本文實(shí)現(xiàn)的個(gè)人博客管理系統(tǒng)能方便的發(fā)布到互聯(lián)網(wǎng)，供不同用戶注冊(cè)使用，且基于成熟框架，系統(tǒng)運(yùn)行穩(wěn)定，相信對(duì)于讀者進(jìn)行軟件開發(fā)有一定的參考意義，但系統(tǒng)的安全性本文沒有涉及，這些還需要進(jìn)一步研究。

參考文獻(xiàn)（References）：

[1] 谷巖.博客系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)初探[J].電腦知識(shí)與技術(shù)，2013.35.

[2] 李雷孝，劉志強(qiáng)，杜慧敏，冀強(qiáng).Struts和Hibernate整合框架研究與應(yīng)用[J].內(nèi)蒙古工業(yè)大學(xué)學(xué)報(bào)（自然科學(xué)版），2010.3.

[3] 屠曉云.基于SSH的學(xué)生學(xué)習(xí)交流平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2012.25.

[4] 周利江.基于SSH框架的J2EE應(yīng)用研究[J].電腦編程技巧與維護(hù)，2012.12.

[5] 李金亮，李春青.基于BootStrap的Web開發(fā)設(shè)計(jì)研究[J].中小企業(yè)管理與科技（中旬刊），2014.5.

[6] 張子杰，莊育飛.基于Bootstrap和SSH的求職招聘系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2016.10.

[7] 孫立偉，何國(guó)輝，吳禮發(fā).網(wǎng)絡(luò)爬蟲技術(shù)的研究[J].電腦知識(shí)與技術(shù)，2010.15.