藍(lán)燕,曾樹洪

（惠州學(xué)院圖書館，惠州516007）

圖書館校園博客服務(wù)WebApp設(shè)計

藍(lán)燕,曾樹洪

（惠州學(xué)院圖書館，惠州516007）

采用H5+AngularJS+CSS3搭建前臺框架，PHP+MySQL數(shù)據(jù)庫+Apache搭建服務(wù)器后臺的方法，設(shè)計了網(wǎng)絡(luò)博客系統(tǒng)架構(gòu)的圖書館移動端的Web應(yīng)用。該博客應(yīng)用為讀者提供圖書館官網(wǎng)的基本服務(wù)基礎(chǔ)上，增加在WebApp上發(fā)布自己的博客，滿足讀者交流圖書知識，讓讀者更準(zhǔn)確地獲取圖書服務(wù)，可提升圖書館的服務(wù)水平和效率。

惠州市科技計劃項目（No.2015B010002005）

0 引言

圖書館藏書量非常巨大，讀者如何找到自己想要的圖書，在不甚了解圖書文獻信息時僅僅通過現(xiàn)有圖書目錄的查詢是非常困難的，而通過借閱過多的圖書一是分散了讀者的閱讀時間，同時也對圖書資源是一種浪費。在互聯(lián)網(wǎng)絡(luò)時代圖書館讀者通過發(fā)表博客，與評論博客朋友們交流探討圖書及相關(guān)知識可以增加對圖書的了解，較好的引導(dǎo)讀者對圖書的借閱，同時促進學(xué)習(xí)與交流，提升校園的文化氛圍。因此，在現(xiàn)有圖書館服務(wù)基礎(chǔ)上開發(fā)圖書館博客系統(tǒng)，可以較好的提升服務(wù)讀者的能力，顯然校園青年學(xué)生以手機移動端的個人博客應(yīng)用能較好的解決青年大學(xué)生讀者透過微博發(fā)布自己對圖書需求存在的問題，交流已閱圖書的見解甚至學(xué)習(xí)交流，可以激發(fā)大學(xué)生的學(xué)習(xí)興趣，提升大學(xué)生對圖書文獻的利用能力等。針對我校校園圖書館網(wǎng)站應(yīng)用以支持PC訪問的校園網(wǎng)站及數(shù)字化Web平臺為中心，無法延伸到手機終端上訪問[1-2]，因此將博客應(yīng)用搭配圖書館官網(wǎng)所提供的基本服務(wù)，再運用WebApp技術(shù)開發(fā)跨平臺App[3]，可以較好彌補目前圖書館對移動終端服務(wù)的功能缺失。

1 系統(tǒng)需求

針對校園圖書館網(wǎng)站應(yīng)用以支持PC訪問的校園網(wǎng)站及數(shù)字化Web平臺為中心，無法延伸到手機終端上訪問，本設(shè)計博客應(yīng)用在本校圖書館官網(wǎng)所提供的基本服務(wù)，再運用WebApp技術(shù)開發(fā)跨平臺App

1.1 主要功能需求

（1）首頁。在首頁增加功能包括：用戶信息的展示（用戶登錄狀態(tài)）、用戶登錄或注冊、圖書館最新消息推送、焦點輪播圖展示、圖書館官網(wǎng)提供的基本的服務(wù)包括找書，查看館藏，查看圖書分布等。

（2）博客。增加博客內(nèi)容功能包括：所有用戶發(fā)表的博客用列表展示、博客關(guān)鍵詞搜索欄進行博客篩選、點擊博客進入博客詳情頁并可對其進行評論、點擊博客進入博客詳情頁并可對其進行收藏、點擊發(fā)布博客進入博客編輯頁面并可按提交可發(fā)布新博客、點擊刪除博客可對自己發(fā)布的博客進行刪除等。

（3）用戶中心。主要包括功能：在用戶登錄狀態(tài)用戶基本信息的全部展示、所有發(fā)表的博客的展示、收藏的博客的展示、關(guān)注的人的展示、退出登錄等。

1.2 系統(tǒng)E-R圖

針對功能需求，所設(shè)計的WebApp圖書館博客服務(wù)系統(tǒng)數(shù)據(jù)庫由博客表、評論表、用戶表、收藏表、關(guān)注表等構(gòu)成，每張表的對應(yīng)關(guān)系如圖1所示。

圖1 系統(tǒng)E-R圖

1.3 系統(tǒng)服務(wù)流程

根據(jù)用戶需求分析，所設(shè)計系統(tǒng)的主流程圖如圖2所示。

圖2 WebApp圖書館博客服務(wù)系統(tǒng)主流程圖

1.3 數(shù)據(jù)流圖

讀者用戶通過瀏覽器與服務(wù)器通信，然后通過數(shù)據(jù)庫獲取數(shù)據(jù)返回給服務(wù)器，服務(wù)器再反饋給瀏覽器，瀏覽器將數(shù)據(jù)展現(xiàn)給用戶。所設(shè)計的WebApp數(shù)據(jù)流圖如圖3所示。

圖3 WebApp圖書館博客服務(wù)數(shù)據(jù)流圖

2 系統(tǒng)設(shè)計與實現(xiàn)

2.1 總體設(shè)計

（1）數(shù)據(jù)庫表格設(shè)計

博客系統(tǒng)后天采用了MySQL數(shù)據(jù)庫，數(shù)據(jù)庫my?Blog相關(guān)的表格有：用戶信息表user；博客信息表post；評論信息表comment；收藏信息表collect；關(guān)注的人信息表focus；資訊推送表news。后臺腳本語言采用PHP。

（2）模塊設(shè)計

系統(tǒng)前臺用的是AngularJS框架來構(gòu)建，AngularJS一大特色就是模塊化。模塊化的設(shè)計能夠讓開發(fā)者快速開發(fā)，代碼重復(fù)性降低，提高維護性。WebApp分為了三大模塊來實現(xiàn)，分別是服務(wù)模塊，博客模塊，還有用戶信息模塊。服務(wù)模塊主要是包括新聞的推送，圖書館官網(wǎng)提供的找書，借閱查詢等功能，還有焦點輪播圖的展示，館藏，圖書分布等查看。這部分基本上是靜態(tài)頁面，除了新聞的推送，其他都沒有用到后臺的數(shù)據(jù)[4-5]。用戶可以通過提供的導(dǎo)航訪問官網(wǎng)，不用去打開瀏覽器或者微信公眾號。博客模塊主要用來展示所有用戶的發(fā)表過的博客，提供一個平臺讓用戶可以進行發(fā)布新的博客，對博客進行查詢，評論，收藏，關(guān)注其他用戶，還可以對自己發(fā)布過的博客進行刪除，重新編輯。用戶信息模塊主要是展示用戶的所有基本信息，包括收藏的文章，關(guān)注的人，發(fā)表過的文章。用戶在該模塊還可以對一些基本資料進行修改，最后可以進行登出操作。所設(shè)計的WebApp總體結(jié)構(gòu)框圖如圖4所示。

圖4 WebApp模塊示意圖

2.2 詳細(xì)設(shè)計

（1）用戶模塊設(shè)計

WebApp設(shè)計了用戶注冊、用戶登錄和用戶退出等。其中注冊功能設(shè)計是：讀者在本博客系統(tǒng)進行發(fā)表博客、對博客評論以及博客收藏時，系統(tǒng)需要登錄賬號，若如果沒有賬號，可以進入注冊頁面，且用戶名為關(guān)鍵字，注冊模塊流程如圖5所示。

圖5 圖書館博客系統(tǒng)注冊流程圖

系統(tǒng)的登錄功能設(shè)計采用用戶名登錄和游客未登錄，且當(dāng)游客需要更多的服務(wù)功能時，必須通過登錄方式。用戶進入登錄界面，需要輸入用戶名或者密碼，當(dāng)用戶沒有賬號時，可以返回注冊頁面進行注冊。當(dāng)用戶在輸入信息并提交的時候，userLoginCtrl控制器會對提交的數(shù)據(jù)進行驗證，如果正確則post給后臺，如果不正確就返回錯誤提示信息。后臺userLogin.php會對控制器傳來的數(shù)據(jù)進行驗證然后返回用戶的信息數(shù)據(jù)到前臺進行展示，登錄功能設(shè)計流程圖如圖6所示。

圖6 圖書館博客系統(tǒng)登錄流程圖

系統(tǒng)用戶注銷功能是滿足當(dāng)用戶不想登錄或者想要切換賬號的時候，就需要用到用戶注銷功能。用戶點擊退出登錄按鈕的時候，userCtrl調(diào)取userExit.php，在php里面首先拿到用戶的session，然后對其進行刪除，主要是透過session_start()和session_destroy()函數(shù)完成。

用戶收藏博客和關(guān)注其他用戶是滿足讀者在瀏覽一篇博客時對其進行收藏，以便需要時查看。收藏完畢下次在進入博客時候，會提醒你已收藏。當(dāng)進入某一篇博客詳情的時候，通過postDetailCtrl控制器調(diào)用getCollectPost.php然后對返回來的數(shù)據(jù)進行判斷，如果返回的博客列表里面沒有當(dāng)前的博客ID，則讓前端顯示收藏按鈕，否則提示已收藏并隱藏收藏按鈕。關(guān)注其他用戶的功能和收藏博客功能類似，這里只舉收藏的例子。收藏的流程圖如圖7所示。

圖7 收藏博客流程圖

展示用戶信息功能是當(dāng)用戶處于登錄狀態(tài)時，前臺展示用戶的姓名、性別、手機、地址、簡介等，還有用戶收藏的博客數(shù)、用戶關(guān)注的人、用戶發(fā)表的博客、用戶最近閱讀的博客。設(shè)計中前臺在mine.html加主js里面的mineCtrl控制器用來發(fā)送請求參數(shù)和接受后臺傳來的數(shù)據(jù)渲染到頁面，后臺用getUserInfo.php和exit. php來對數(shù)據(jù)庫進行邏輯操作。如果用戶沒有登錄，界面則提示用戶需要登錄，具體流程圖如圖8所示。

圖8 用戶界面顯示流程圖

（2）博客模塊設(shè)計

用戶登錄之后可以選擇進入博客列表頁，前臺postsCtrl控制器會調(diào)用postList.php,把所有文章返回給前臺。但是如果返回來的博客太多的話，用戶查找起來會非常困難，所以需要實現(xiàn)分頁和查詢功能。而分頁和查詢前臺無法做太多的事，只能交給后臺去做。postListByPage.php和postListByKeyword.php分別用來對博客進行分頁和按關(guān)鍵詞搜索。博客列表有分頁和按關(guān)鍵字查詢，按標(biāo)簽查詢和按條件查詢。分頁用concat,關(guān)鍵字用模糊，后臺先把空格replace成逗號然后用explode函數(shù)進行分割，最后foreach每個關(guān)鍵詞。標(biāo)簽和條件一樣，由傳參type/name按字段查詢，然后用ng-repeat循環(huán)渲染視圖。

用戶進點擊閱讀全文按鈕之后進入博客詳情頁，前臺主要展示三部分，第一部分是該篇博客的作者和寫作日期的展示，并顯示你是否已經(jīng)關(guān)注他。若你是游客身份，默認(rèn)是未關(guān)注，并且你點擊關(guān)注時候，會提示你去登錄后再關(guān)注。

第二部分是博客的標(biāo)題，博客的內(nèi)容，博客的瀏覽人數(shù)以及收藏人數(shù)。最后一部分則是該篇博客的評論列表。用戶可以對博客進行評論或者收藏，若用戶是該博客的所有者，那么他還可以對博客進行刪除或者重新編寫。博客詳情用控制器是postDetailCtrl來對用戶的各項操作進行處理，把相應(yīng)的請求數(shù)據(jù)發(fā)送到后臺的postDetail.php進行處理并返回相應(yīng)數(shù)據(jù)。

（3）首頁服務(wù)模塊設(shè)計

用戶進入WebApp就會跳轉(zhuǎn)到首頁來。首頁主要是由logo圖片，輪播圖，新聞滾動推送，圖書館基本服務(wù)來實現(xiàn)。除了新聞推送和熱門推送需要用到后臺來推送之外，其他都是靜態(tài)資源。圖書館基本服務(wù)包括查看圖書分布，查看圖書館地圖，查看館藏，還有官網(wǎng)找書。輪播圖則是展示校園的美景，新聞推送則是校內(nèi)的一些人文趣事。具體界面圖如圖9所示。

圖9 首頁界面圖

3 結(jié)語

本文設(shè)計的圖書館博客服務(wù)WebApp為讀者提供圖書館官網(wǎng)的基本服務(wù)基礎(chǔ)上，增加在WebApp上發(fā)布自己的博客，滿足讀者交流圖書知識，為圖書館增加更好的、更方便的校內(nèi)圖書服務(wù)服務(wù)，通過博客的方式，構(gòu)建了圖書館找書、看書、討論圖書等服務(wù)的讀書氛圍，提升圖書館的服務(wù)水平和效率[6],甚至個性化服務(wù)。

參考文獻：

[1]閆新惠.基于HTML5技術(shù)混合式應(yīng)用開發(fā)解決方案[J].文理導(dǎo)航,2015，9:33-27.

[2]趙鶴芹.設(shè)計動態(tài)網(wǎng)站的最佳方案:Apache+PHP+MySQL[J].計算機工程與設(shè)計，2007，28(4):933-934.

[3]薛彥俊.移動圖書館App應(yīng)用的探討[J].電子測試，2016(1):55-56.

[4]陳員義,李藝志.基于Bootstrap響應(yīng)式Web前端研究[J].福建電腦，2015(12):72-73.

[5]曾昭江,湯懷.WebApp在校園網(wǎng)站移動化應(yīng)用中的研究與實踐[J].計算機光盤軟件與應(yīng)用，2015(2):293-295.

[6]藍(lán)燕.惠州學(xué)院數(shù)字圖書館個性化服務(wù)建設(shè)初探[J].廣東醫(yī)學(xué)院學(xué)報,2013(4)：471-473.

Design of Campus Blog Service WebApp for Library

LAN Yan,ZENG Shu-hong

（Library,Huizhou University,Huizhou 516007）

Uses the H5+AngularJS+CSS3 for the foreground framework construction,and PHP+MySQL+Apache for the background server construc?tion,designs a WebApp of blog system framework as a mobile library terminal.Besides the basic services of the library website,the user of this blog application can also post his or her blog,so that the readers can exchange their library knowledge,and obtain the library service more precisely,so as to improve the service and efficiency of the library.

1007-1423（2017）21-0074-05

10.3969/j.issn.1007-1423.2017.21.015

藍(lán)燕（1982-），女，廣東肇慶人，大學(xué)，館員，從事領(lǐng)域為圖書文獻檢索與管理工作；曾樹洪（1979-），男，四川瀘州人，研究生，高級實驗師，從事領(lǐng)域為網(wǎng)絡(luò)技術(shù)研究工作；

2017-05-25

2017-07-15

WebApp設(shè)計；圖書館服務(wù)；網(wǎng)絡(luò)服務(wù)

WebApp Design;Library Services;Internet Service