图书馆校园博客服务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