圖書館校園博客服務WebApp設計

藍燕,曾樹洪

（惠州學院圖書館，惠州516007）

圖書館校園博客服務WebApp設計

藍燕,曾樹洪

（惠州學院圖書館，惠州516007）

采用H5+AngularJS+CSS3搭建前臺框架，PHP+MySQL數據庫+Apache搭建服務器后臺的方法，設計了網絡博客系統架構的圖書館移動端的Web應用。該博客應用為讀者提供圖書館官網的基本服務基礎上，增加在WebApp上發布自己的博客，滿足讀者交流圖書知識，讓讀者更準確地獲取圖書服務，可提升圖書館的服務水平和效率。

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

0 引言

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

1 系統需求

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

1.1 主要功能需求

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

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

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

1.2 系統E-R圖

針對功能需求，所設計的WebApp圖書館博客服務系統數據庫由博客表、評論表、用戶表、收藏表、關注表等構成，每張表的對應關系如圖1所示。

圖1 系統E-R圖

1.3 系統服務流程

根據用戶需求分析，所設計系統的主流程圖如圖2所示。

圖2 WebApp圖書館博客服務系統主流程圖

1.3 數據流圖

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

圖3 WebApp圖書館博客服務數據流圖

2 系統設計與實現

2.1 總體設計

（1）數據庫表格設計

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

（2）模塊設計

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

圖4 WebApp模塊示意圖

2.2 詳細設計

（1）用戶模塊設計

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

圖5 圖書館博客系統注冊流程圖

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

圖6 圖書館博客系統登錄流程圖

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

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

圖7 收藏博客流程圖

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

圖8 用戶界面顯示流程圖

（2）博客模塊設計

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

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

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

（3）首頁服務模塊設計

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

圖9 首頁界面圖

3 結語

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

參考文獻：

[1]閆新惠.基于HTML5技術混合式應用開發解決方案[J].文理導航,2015，9:33-27.

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

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

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

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

[6]藍燕.惠州學院數字圖書館個性化服務建設初探[J].廣東醫學院學報,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

藍燕（1982-），女，廣東肇慶人，大學，館員，從事領域為圖書文獻檢索與管理工作；曾樹洪（1979-），男，四川瀘州人，研究生，高級實驗師，從事領域為網絡技術研究工作；

2017-05-25

2017-07-15

WebApp設計；圖書館服務；網絡服務

WebApp Design;Library Services;Internet Service