基于HTML5的电子报刊阅览系统的设计与实现
网络天地
191
基于HTML5的电子报刊阅览系统的设计与实现
◆徐  亮  沈  茜  芮文艳
（苏州工业职业技术学院  江苏  苏州  215104）
摘要：随着手机平板等移动设备的普及，人们获取资讯的途径也发生了很大的转变，阅读也开始走向了电子化，许多报业都出版了自己的电子报，例如：扬子晚报数字报、法治晚报等。基于HTML5技术设计的电子报刊阅览系统，利用“网络爬虫”的技术抓取各大主流报社的PDF 格式电子报纸，将其转换成高清HTML 格式，最后以HTML5响应式设计技术动态展现报纸内容。无论移动设备是横屏还是竖屏，都有良好的显示效果。
关键词：电子报刊；自适应；多线程下载；网络爬虫
一、前言
中国互联网络信息中心(CNNIC)在国家网信办新闻发布厅发布的第38次《中国互联网络发展状况统计报告》显示，截至2016年6月，中国网民规模达7.10亿，互联网普及率达到51.7%；手机网民规模达6.56亿，由90.1%提升至92.5%，网民上网设备进一步向移动端集中。伴随着“互联网+”战略的实施，如今新媒体的发展越发蓬勃，、微博的高速发展已经成为移动互联网的前驱，而人们传统的阅读方式也在慢慢地发生着变化，特别是使用手机、平板等移动终端进行阅读的方式越来越普遍，有些公共场合也会使用数字大屏让人们方便获取资讯信息。
二、发给、系统设计
1.系统总体设计
电子报刊阅览系统通过数据采集在各大报刊杂志媒体网站收集报刊杂志的PDF 文件，并将其转换成体积小、和报纸排版一致、字体清晰、可放大不失真的HTML 文件，支持多终端、多分辨率，同时还可以进行检索、分享和浏览，可自动进行版面缩略图的轮换。系统充分利用互联网技术将报纸、杂志等刊物实现在线阅读，提供良好的阅读体验，让人们体会到随时随地都可以看报纸的便捷。具体功能如下：
■系统每隔一段时间自动抓取各类报刊杂志资源，采集版面PDF 文件并且多线程下载到本地硬盘，将版面名称与文件路径存入数据库。
■系统能够将采集到的每个版面PDF 文件转换为HTML 文件与JPG 版面缩略图。支持最大16倍放大时图片和文字不失真。 ■实现报刊书架功能，陈列各种报纸方便用户的选择。
■对不同的报刊资源生成的HTML 资源库建立报刊在线阅读系统，用户可根据不同报社查看报刊，并根据日期、版面及版面类别进行筛选。
■版面切换时，实现多种类似幻灯片效果，如淡出淡入。 ■用户可以对报社进行评论，并且可以看到别人的评论。 ■管理员能够对报社进行增删查改、对报纸进行添加和删除 ■数据统计折线图每10秒钟更新一次每家报社当天的报纸数目。
2.系统功能设计
系统分成客户端和管理端两部分。客户端即用户浏览端，提供报社、版面缩略图、版面HTML 的展示、版面目录的快速选择、页面过渡动画效果的选择、版面的筛选、版面名称的模糊/精确检索、报社的评论等功能。用户可以从报社视图点击相应的按钮进入报社浏览报纸版面内容，也可以自行搜索版面名称。
管理端即后台，提供管理员登录界面、报社的管理界面、版面的管理界面、报纸的管理界面。其主要实现报社的添加、删除、查询、修改，版面的模糊查询、折线图，报纸的更新、查询、删除。
三、系统功能的实现
1.爬虫的设计实现
电子报刊阅览系统中的报刊需要时时更新，这里用到了“爬虫”，利用爬虫实现从执行开始每隔四个小时自动从URL 地址集合取出网页地址遍历网页，然后执行正则表达式抓取pdf 报纸文件。由于有些网页内的文件目录是非常隐蔽的，因此“网络爬虫”是通过遍历网页
的所有字符将网页的资源名称与设置的正则表达式规则相比较，若匹配则将资源文件下载下来。
根据对扬子晚报数字报、法治晚报、现代快报等报社的电子报路径进行分析，大部分报纸在网页中是以pdf 的格式存放的，其具体的html 格式为：
“<a href=”../../../images/2017-03/09/A01/20170309A01_pdf.pdf”>”
与其匹配的正则表达式规则设计为： “([^<>\"]*.pdf)”。 此外，通过DOM 结构发现版面名称和pdf 文件有一一对应关系，因此根据关系设计出抓取版面名称的正则表达式规则为：“<a id=[^>]*>([^<]*)</a>”。
电子报刊制作
2.多线程下载
利用爬虫获取到pdf 报纸文件后需要对其进行下载，在实现中发现单线程的下载速度比较慢，因此改为多线程下载，当所有下载的线程都完成之后，就能获得一个完整的文件。多线程断点下载需要文件操作非常灵活的类，实际实施中系统选择用的是RandomAccessFile 类，它可以随机对文件进行读写操作，而且速度非常快。
在项目中设置pdf 文件夹，其下为各家报社的文件夹，每个文件夹下则是对应报纸的pdf 文件。pdf 文件的存储结构，以扬子晚报为例，其下载时的路径为：wb/images/2017-03/08/A01/20170308A01_pdf.pdf。存储在该报文件夹下的pdf 文件的文件名为：20170308A01_pdf.pdf。可以发现存储时只将报纸的代号提取出来，而不需知道报纸的名字，然后将版面ID 号和报纸路径一同放在数据表里，就可以通过版面名称定位到报纸pdf 文件。
3.前端页面设计
首页可展示12家报社，以3D 书架的形式展示，每家报社即为一本书，鼠标放在书上，书会倾斜。点击报社，书本慢慢打开至完全打开，即可看到报社的介绍。当点击查看其他报社的信息时，当前报社就会自动合上，确保每次只查看一家。
报纸显示页面用的是HTML5中的frame 框架，上下两部分是固定的。底部导航栏显示的是当天的报纸版面缩略图，可以进行报纸的选择。顶部日期选择控件可以查某天该报社的版面。根据版面名称和所选择的时间，还可以进行全报社模糊搜索、全报社精确搜索、本报社模糊搜索。如果不选择日期，则默认为今天。评论可以看到其他用户对当前报社的评论，也可以自己输入评论信息。
4.基于HTML5响应式功能
随着人们使用手机等移动设备的普遍，系统不能仅满足于PC 端的呈现，鉴于各移动设备尺寸等因素，系统采用响应式的设计来实现在各种分辨率的显示器下运行，并且放大十六倍报纸依然不失真，无论是横屏还是竖屏，都有良好的显示效果。
5.折线图数据统计
管理员功能除了登录和增删改查外还有数据统计的功能。在系统中使用折线图来统计执行“爬虫”后各家报社报纸每天的更新情况。
折线图使用的是Ajax 异步刷新配合JavaScript 的图表插件highchats ，实现每十秒钟刷新数据一次，如图3-1所示。
图3-1 执行“爬虫”后的结果
（下转第196页）
网络天地
196 浅谈主要的Java 设计模式
◆杜增毅
(曲阜师范大学  山东日照  276826)
摘要：当下社会，计算机网络成为了我们必不可少的工具。智能手机、电脑等智能工具极大地方便了我们的日常生活。网上购物、电影、网上教育都离不开软件。一个出的主流软件，都离不开Java 来实现。所以，Java 可以说是一个软件的大脑，控制着整个软件的运营，Java 的设计模式，也就起到了举足轻重的作用。本论文就是介绍当下Java 的比较主流的设计模式，以及这些设计模式的好处与作用。
关键词：软件；Java；设计模式
正文：想要让读者真正认识并理解Java 的设计模式，就必须要从里到外地对Java 的设计模式进行解读。所以，请允许笔者带您去Java 的设计模式的海洋里进行遨游。
1 什么是设计模式：一个设计模式是针对某一个或某一类问题的最佳解决方案，而且这个设计模式已经被成功地应用在许多系统的设计与问题解决中，解决了某个特定情境中发生的某个或某类问题。因此，我们可以这样定义Java 设计模式（pattern）：“设计模式是从许多优秀的软件系统中总结出成功的可复用的设计方案。”[1]
2 主要模式：现在，让我们来探讨Java 的主要设计模式吧。 2.1迭代器模式：假设这么一个情景：有一个鸡笼，鸡笼内有各种各样的小鸡，他们有的长得一样，有的长得不一样，有的高，有的矮。但是我想对这些小鸡进行统一的规划，对他们进行统一操作。这时就不能让我们手工去把它们一一操作，而是把这整个鸡笼交给一个机器来做。对于迭代器模式，这个机器我们可以对应地叫做”迭代器”。迭代器，是指对一个数组或者集合的操作工具。它可以对指定数组或者集合的每一个或者某一个特定元素进行操作。而迭代器所在的宏观设计模式，就是迭代器模式。迭代器模式包括四个角：集合、具体集合、迭代器、具体迭代器。集合，是一个接口，来规范集合需要做的操作；具体集合，是集合的实现类，它是来实现集合这个接口的，真正来做操作的；迭代器：它也是一个接口，它用来规范迭代器对集合所要做的操作；具体迭代器：它是迭代器的实现类，是真正来操作集合的。
一个迭代器一般要做什么操作呢：迭代器内有指针，指针会指向元素的空上方，比如hasNext()方法是对集合中的指针位置判断是否还有下一个元素，或者next()方法是取到当前集合中的指针位置的下一个元素，而remove()方法是删除集合中当前指针位置的下一个元素。
那么迭代器模式有什么好处呢：它可以对集合进行实际操作。而这是我们手动不能实现的。一个集合，它有成千上万个元素，但是我们就不能对这个集合有具体的操作，我们不能对这个集合内的所有元素进行挨个计算和，挨个删除，挨个取值。所以迭代器可以进行真正的对这个集合内的元素的操作。
2.2 抽象工厂模式：假设这样一个场景，有一个车辆工厂，该工厂生产自行车、摩托车和汽车。所以，这个工厂内部就可以分为：自行车生产部门、摩托车生产部门和汽车生产部门。每一个部门下都会
生产具体的车辆。有的豪华，有的实用。这就使得该工厂生产的车辆既多样化，又统一化。Java 中的这个相同理念的设计模式就叫做抽象工厂模式。该模式下有四个角：抽象产品、具体产品、抽象工厂、具体工厂。下面我们来一一解读。抽象产品：这是一个接口或抽象类，它用来说明该抽象产品有什么操作，能干什么。具体产品：它是抽象产品的实现类或者继承类。它用来重写抽象产品的方法，实现这些说明的操作。抽象工厂：这是一个接口或者抽象类，它用来说明该抽象工厂要生产哪些具体产品。具体工厂：它是抽象工厂的实现类或者继承类，他用重写具体工厂内的方法，真正能做到生产出具体产品。
抽象工厂模式的好处：使用抽象工厂模式，可以让设计者自定义获取哪些具体产品，让设计者规范这些
产品的种类，即抽象产品，从而保证了抽象工厂模式的统一性。而具体工厂生产出来的具体产品，产品样式多种多样，它们的共同点就是同属一个抽象产品，使得抽象工厂模式有了多样性。既方便管理，又不乏创造性。
2.3中介者模式：假设这样一个场景，在二手房市场，有人想要买房，有人想要卖房。但是买房的人有人想买高层，有人想买带有三个卧室的，有人想买面积大的，需求各种各样；卖房的人有的房子是低层，有的房子是带有两个阳台的，有的房子是紧凑的，房子种类各种各样。这是如果有中介者来，对卖房人的房源进行管理，对买房人的需求进行通信，这时买卖双方既省时又省力。在Java 中所对应的这种设计模式叫做中介者模式。该模式下有四个角的划分：同事、具体同事、中介者、具体中介者。下面我们对这四个角进行解读。同事：这是一个接口，它包含了所要规范的方法有哪些，这些方法可以被解读为需求。具体同事：这是同事的实现类，具体中介者被包含在其中，它重写了同事的方法，使得需求通知具体中介者即可。中介者：这是一个接口，用来规范方法，为了让同事之间可以通信。具体中介者：它是中介者的实现类，具体同事的引用被包含在其中。具体中介者通过重写中介者的方法，使得具体同事直接可以相互通信。
中介者模式的好处：如果没有中介者，那么各个同事之间需要通信就要相互之间引用，这就会让系统难于管理和维护，令相互引用的同事之间的耦合度很高，也使得这些同事难以被复用。所以有了中介者，这些难题的解决就成了好处：1.便于系统对这些同事进行管理和维护2.可以让相互引用的同事之间的耦
合度降低，如果我们修改其中一个同事的代码，不用再去修改到其他同事代码。3.使得这些同事的代码复用率提高，使得系统整洁有效率。
总结：Java 设计模式一共23中，本文的主要介绍了三种，目的是为了让读者进一步认识和理解Java 的主要模式。希望读者可以走进Java 设计模式的世界，感受不一样的代码艺术。
参考文献：
[1]耿详义，张跃平.Java 设计模式[J].北京：清华大学出版社，2009：1.
（上接第191页）
四、结语
在我们的生活中，移动设备随处可见。小到一部手机，大到一部平板都可以成为我们了解新闻，观看时事的工具。电子报纸的诞生，极大地解决了传统纸质报纸的携带不方便、资源耗费大、不便管理等问题，但受限于各家电子报刊都各自独立，且在大屏显示器上会出现图片文字模糊、错位等严重失真情况。利用本电子报刊阅览系统则可以解决这些问题。
参考文献：
[1]郑豪，何彦雨.基于Java 平台的分布式网络爬虫系统研究[J].
科技创新与应用,2017,(01):112.
[2]何丽，龚旺.jQuery 在AJAX 技术框架中页面加载的应用[J].计算机时代,2011,(08):25-26.
[3]程春玲，崔国亮，隋宗见.基于广播SNMP 的网络管理并行轮询算法[J].计算机应用研究,2010,(12):4711-4714.
[4]姜梦稚.基于Java 的多线程网络爬虫设计与实现[J].微型电脑应用,2010,(07):21-22+4-5.
[5]李容.基于MVC 模式的Web 应用研究[J].软件导刊,2010,(01):19-21.
[6]罗刚. 自己动手写网络爬虫[M].清华大学出版社，2010

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。