基于HTML5的跨移动平台的新闻阅读应用

1、广州大学华软软件学院 软件工程系 邓鸿健 基于HTML5与jQuery Mobile的跨移动平台的新闻阅读应用 广州大学华软软件学院 毕业论文（设计） 课题名称 基于HTML5与jQuery Mobile的跨移动平台的新闻阅读应用-页面设计学 院 广州大学华软软件学院 系 别 软件工程系 专业班级 软件开发1班 学生姓名 邓鸿健 学 号 0840112142 指导教师 钟迅科 日 期 2012年5月2日 iv摘要 近年移动互联网的高速发展，给人们相互交流与获取资讯提供了便捷的渠道。同时伴随移动互联网快速发展的是日新月异的终端设备，各种终端设备每几个月就携带更强的硬件并搭载最新版本的移动操作系统

2、，给用户提供更强大的性能与更友好的用户体验，但是这也给开发者带来了选择平台与兼容版本的困难，一种系统对应一种开发环境，系统版本升级带来了新特性和更高的硬件要求，原来的应用可能就要跟着同时升级。近来HTML5因为其强大的功能而受到业界的重视与支持，热门的移动操作系统都给予了充分的重视，而著名的JavaScript框架jQuery也推出了移动版的框架jQuery Mobile,该框架基于HTML5给不同的移动终端提供了友好界面的支持并对触屏进行了优化。本应用使用jQuery Mobile框架来实现页面设计，实现浏览RSS聚合信息，并提供收藏、推荐、评论功能，实现跨平台新闻阅读。关键词 HTML5，

3、jQuery Mobile，新闻阅读，RSSABSTRACT The few year mobile web developer faster, let people easy to communication and get news. Take part with the mobile web developer is different mobile device with different operation system, the different let user had must choose, and take a problem to developer: a opera

4、tion system support a program language，a kind user support a software .HTML5 is attracted and supported by its power function, all the host mobile operation system declare support HTML5.The popular JavaScript framework release mobile version: jQuery Mobile ,its HTML5-based and support friend UI and

5、optimize about touch screen. This application use jQuery Mobile to design web page, support read RSS news and collect, recommend, comment function，achieve Cross-Platform web application.KEY WORDS HTML5；jQuery Mobile；News Reader；RSS目录前 言1研究背景和意义1研究方法与要达到的要求1与国内研究对比2研究范围31 相关技术介绍41.1HTML5相关新特性介绍41.2CS

6、S3相关新特性介绍61.3jQuery Mobile框架介绍71.3.1综述71.3.2组件71.3.3事件与方法91.4Spring框架91.5Hibernate框架91.6RSS技术102 跨移动平台的新闻阅读应用的可行性分析112.1.可行性分析112.1.1.技术可行性112.1.2.操作可行性112.1.3.经济可行性112.2.可行性分析结论123 跨移动平台的新闻阅读应用的需求分析133.1系统性能需求133.2系统功能需求分析133.2.1.注册与登录模块133.2.2.订阅管理模块133.2.3.浏览用户订阅新闻模块143.2.4.管理订阅新闻模块143.2.5.新闻评论模块

7、143.3跨移动平台的新闻阅读应用的DFD图153.4跨移动平台的新闻阅读应用的ER图163.5用例的实现与说明173.5.1.用例图示173.5.2.用例规约173.6时序图193.6.1.注册时序图193.6.2.登录时序图203.6.3.浏览条目时序图203.6.4.管理订阅时序图213.6.5.新闻评论时序图223.7开发平台223.8应用运行环境223.8.1.服务器端硬件与软件环境233.8.2.客户端硬件与软件环境234 跨移动平台的新闻阅读应用的概要设计244.1应用的系统结构与开发模型244.1.1.B/S系统结构244.1.2.MVC开发模型244.2应用系统结构图254.

8、3数据库设计254.3.1.数据字典265 跨移动平台的新闻阅读应用的详细设计295.1应用结构图295.2功能实现305.2.1.注册模块与注册模块305.2.2.管理订阅模块315.2.3.浏览订阅模块345.2.4.管理条目模块385.2.5.新闻评论模块406 项目测试426.1单元测试426.2集成测试426.3系统测试426.4响应性能测试43项目总结45参考文献46致谢47前 言研究背景和意义本文主要探讨跨平台新闻聚合阅读应用在移动中的重要地位。随着信息爆炸时代的到来，个人获取信息的渠道异常丰富，各种渠道提供了不同的信息，如果没有统一的管理工具，要查看新闻信息必须查看信息源，同时

9、要从一大堆信息中分辩哪些是旧的，哪些是新的，这会导致产生大量重复性的工作产生，如果要获取多个信息源的新闻，那重复的工作会更加的多。但是如果使用信息聚合应用，就可以把多个信息源集中起来，统一浏览与管理，只要查看这个应用就能查看到最新的新闻资讯，并且可以查找以前看过的内容，实现个人信息源中心的作用。现在移动互联网的资费越来越低，很多人都通过移动终端来获取信息，这的确是一个非常便利的手段，因为这可以十分便利地联网与别人交流或者获取资讯。因为移动平台的激烈竞争，诞生了像iOS、Android、WP7等不同的移动操作系统，这些系统给用户提供的更多的选择与不同的体验，却增加了开发人员的负担，因为想要更多的

10、用户就要兼容更多的系统，这样在开发和升级上的工作就会大大增加。近几年快速发展的HTML5给更好的跨移动平台应用提供了技术的支持，现在HTML5提供了丰富的功能如：视频标签、画布、离线支持，加上越来越强大的CSS3，在开发跨移动平台应用时能够使开发人员更加专注于功能的实现，而不用顾虑太多的平台相关兼容，所以使用HTML5相关技术在开发跨移动平台应用时是个不错的选择。研究方法与要达到的要求使用jQuery Mobile框架开发一个Web应用，通过使用jQuery Mobile框架 API提供的功能模块和方法事件实现较丰富的跨移动平台新闻阅读应用，另外使用HTML5与CSS3实现增强性的功能，提供更

11、好的用户体验。同时测试该应用在不同平台上面的表现效果，以此测试应用跨平台性的适应性，探讨跨移动平台应用的开发方向。该Web应用要完成任务设定的基本要求，和部分考虑实现功能，能够在主流移动平台如：Android和iOS上运行良好，同时有较好的用户体验，以此证明基于HTML5的jQuery Mobile开发的应用能够胜任跨移动平台开发的任务，能够提供较好的平台适应性。图0-1 效果图与国内研究对比国外知名的新闻阅读应用Google reader和国内领先的新闻阅读应用鲜果阅读都有推出移动版的应用，以下就这些应用与本应用的异同做些简单分析：1.跨平台性：Google reader的移动版本有移动网页

12、版和客户端版，移动网页版的功能有所精简，比较简单。鲜果阅读的移动版本也有移动网页版和客户端版，但是移动网页版更加简单，只实现了基本的功能。本应用基于移动网页提供了一致的功能体验，但是需要较新的浏览器支持。2.功能：Google reader的客户端版功能齐全，同时提供了良好的体验。鲜果阅读的客户端版提供了相对简单的功能，但是有很好的用户体验。本应用通过较新的HTML5与jQuery Mobile提供了较完整的功能与比较好的用户体验。3.其它：Google reader与鲜果阅读作为商业化应用在浏览器兼容上面考虑更多，所以他们在移动网页上的功能会有所精简，而重点维护客户端版本。本应用因为研究性的

13、需要，只确保在主流移动平台如Android和iOS上能良好运行，其它一些较老的移动平台和较旧版本的浏览器，在兼容方法可能有所欠缺。研究范围围绕跨移动平台新闻阅读应用的需求，使用jQuery Mobile框架作为核心架构，实现应用基本功能，另外再使用HTML5与CSS3增强用户体验与完成考虑添加的功能。研究范围集中于实验jQuery Mobile的提供的API是否满足跨移动平台应用开发的需要，同时尝试结合HTML5与CSS3进行开发，研究这些最新技术在现有平台上面的适应性。1 相关技术介绍1.1 HTML5相关新特性介绍HTML5的上一个版本是4.01，发布时间在1999年，这会使人觉得奇怪为什

14、么一个版本间会隔了十多年， 其实这是因为W3C在发布4.01版本后就改变研究方向到XHTML，但是因为XHTML发展的过于超前和规范太严格，所以没被业界接受，反而是Opera、Apple的浏览器厂商在HTML基础上面发展的新版本受到欢迎，后来W3C加入到HTML新版本的开发上面，这就是现在的HTML5，这个新版本有如下几点新特性：1. 简单的声明之前的HTML4.01文件类型声明：和XHTML1.0文件类型声明：到HTML5声明文件类型只要如下简单即可：因为HTML5的一个设计原理就是必须要向后兼容，兼容未来的HTML版本，所以再写一个声明版本的doctype已经没有多大意义，对验证器来说也是

15、一样。同时HTML5的规范还省略了不必要的复杂性，避免不必要的复杂性。如声明rel=stylesheet后就不必要再声明type=text/css了，因为这两个声明是同样的意思，只要有rel= stylesheet就够了，因为这样浏览器就可以猜测出你要链接的是一个CSS样式表。2. 新的有具体意义的标签（头部）、（导航）、（文章）、（分区）、（脚本）、这些元素的作用类似于以前的（分区）,可以把文档分割为独立的不同的部分，但是新标签有具体的语义上的含义，可以把网页分隔成清晰的独立的模块。 3. 新的表单元素元素把表单内容的一部分打包，生成一组相关表单的字段。增加新的带有浏览器直接支持插件的类型，

16、提供原生的更好的用户输入体验:color date datetime datetime-local month week time email number rangesearch tel url增加新属性带有默认的动作事件或者特殊的效果：autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height max min multiple pattern placeholder required step 4. 视频与音频支持标签定义视频，通过浏览器原生支持MP4、WebM

17、和Ogg三种视频格式，各个浏览器公司对这三种视频支持略有不同。标签定义音频，通过浏览器原生支持 MP3、Wav、和Ogg三种音频格式，同样各个浏览器对这三种音频支持略有不同 。5. 元素拖放通过设置元素为可拖元素和drag（拖到）与drag（拖放）事件，和相关的动作处理事件，完成网页元素的拖放事件操作，这个也是通过浏览器原生支持的，只需简单的操作就可以完成。6. 画布元素元素是只用于图形的容器，可以通过脚本语言绘制自定义的图形，或者绘制图片文件，它与其它图片元素的区别在于它是通过脚本来实现的。7. 离线应用与数据支持提供比cookies更安全更快捷的本地存储功能，能够在用户浏览器保存更多的数据

18、。8. 其它SVG格式支持、位置定位服务、独立线程、服务器发送事件。1.2 CSS3相关新特性介绍1. 强大的选择符：CSS3的扩展了CSS2.1的基本选择符，它允许在标签中指定特定的HTML元素而不必使用多余的类、ID或者JavaScript脚本，另外增加了全新的伪对象选择符，用来和content属性一起使用，设置在对象前后使设计弹性更大。2. 更丰富的色彩效果：颜色取值HSL能够设定色调的饱和度和亮度，RGBA和HSLA的参数Alpha可以指定元素的透明度，另外还可以使用transparent指定全透明色彩。3. 多栏布局：CSS3提供了多列布局的支持，通过指定columns的相关属性，就

19、可以指定列数或者根据列宽动态布局。4. 丰富的背景属性：CSS3增加了多个背景属性，如background-image、background-repeat、background-size、background-position等，这样就可以在一个元素上添加上不同效果的背景图片，设计更美观的网页。5. 字体与文字支持：支持将字体文件映射到客户端系统，使的客户端可以使用没有安装的字体样式。Text（文本）属性有所增强，支持一些文字处理，或者文字效果。6. 增强边框支持：更详细的边框设置，和原生的圆角支持。比如：多色边框、边框背景图、圆角与边框阴影，那样就可以通过简单的代码实现丰富的效果。7. 新增

20、弹性盒子模型：可以设定盒子的比例或者固定大小，然后就能使各个元素的自适应窗口大小，而且还可以指定布局的取向和顺序，使网页元素的布局更加灵活，更有弹性。8. 媒体查询：media query可以测定浏览设备的类型和大小，从而编写不同的样式，使网页的平台适应性大大提高，提供更好浏览体验。9. 其它：边框图片、渐变设计、动画效果、语音样式。1.3 jQuery Mobile框架介绍1.3.1 综述jQuery Mobile框架是jQuery面向手机与平板等移动设备开发的核心库，并且提供了完整统一的UI框架，为开发人员提供一个跨浏览器的框架，使得开发移动Web网站或应用更加快捷。jQuery Mobi

21、le中的页面都是基于简洁、语义化的HTML来构建，这样可以确保能兼容大部分支持web浏览的设备。在这些设备解析CSS和JavaScript的过程中，以一种不明显的方式将语义化的页面转化为富客户端页面。1.3.2 组件页面与对话框jQuery Mobile关于页面提供了如下几种组件：带有头部栏和底部栏的页面，链接动态载入页面，对话框页面以及体验比较好的页面切换效果，同时提供动态页面后退动作的处理，满意开发移动应用的需求。工具栏提供工具栏组件。可以头部栏和底部栏添加按钮；不同样式的导航栏；头部栏和底部栏自动适应页面，显示或者隐藏；某些页面内容作全屏显示，例如展示图片。按钮提供三种颜色主题的18种不

22、同标志的图标按钮，并且可以设置按钮的图标位置、是否带有文字、是否行内按钮，或者一组相关的按钮。内容格式提供四种不同宽度的列布局，自动把元素按照比例平铺。折叠展示的内容，并且可以把相关的几个折叠元素组合成一个集合。表单元素提供风格统一的美观的UI的表单元素，可以设置标签和元素在同一行的格式显示，也可以把多个表单元素组和成一个独立样式的表单集合。列表视图提供了多种样式可带统计数字的列表：基本的网格列表、数字列表、分割显示的列表、带分割标题的列表等，提供列表内查询的功能支持。图1-1 jQuery Mobile基本组件1图1-2 jQuery Mobile基本组件21.3.3 事件与方法jQuery

23、 Mobile对移动设备提供了丰富的事件支持，如 ：触摸、虚拟鼠标、改变屏幕方向、滑动和页面状态改变的事件支持。基于框架的方法就提供改变或加载页面、清除框架记录缓存、显示或隐藏通知信息、显示或隐藏工具栏等丰富的方法，使开发人员使用jQuery Mobile开发Web应用更加得心应手。1.4 Spring框架1. 管理容器：Spring包含并管理应用对象的配置和生命周期，可以配置bean的实例策略与相互之间联系。委托Spring容器对对象生命周期进行管理，从而使开发人员可以更加注重与业务上的工作。2. 控制反转：Spring3.0 通过一种称为控制反转（Inversion of Control，

24、IoC）的技术完成松耦合的需求。一个对象依赖的其它对象会通过被动的方式传递进来，而不用自己创建依赖的对象。3. 面向切面编程：Spring3.0 还提供了称为面向切面编程（Aspect-Oriented Programming，AOP）方式的支持，通过分离应用的业务逻辑与系统服务（如日记）实现高内聚，使得对象实现自己的功能，完成业务逻辑就足够了。4. Spring MVC：Spring MVC框架是一个全功能的Web应用程序的MVC实现。通过控制器实现Web应用程序的业务逻辑，加上Spring 框架一贯的易用性、扩展性与灵活性，使得Spring MVC能够高效地和其它技术协同工作。1.5 Hi

25、bernate框架基于Java语言的一种对象关系映射解决方案，使得开发人员使用通过面向对象的思维来操作关系数据库。同时提供HQL查询工具、缓存管理、延迟加载策略、事务管理批量操作等方法。1.6 RSS技术RSS（信息聚合）是一种描述与同步网站信息的格式。有些网站提供RSS输出，即把网站最新的内容实时地输出到RSS上面，这样用户只要借助RSS聚合工具就能获取到多个信息源的最新更新，在不访问来源网站的情况下获取网站的的资讯。2 跨移动平台的新闻阅读应用的可行性分析2.1. 可行性分析可行性分析主要是对跨移动平台的新闻阅读应用的技术可行性、操作可行性、经济可行性进行分析，所指定的解决方案是否可行，能

26、否在规定资源和时间的约束下完成，能否获得相应的效益。2.1.1. 技术可行性本应用后台技术采取成熟的Spring与Hibernate框架，拥有规范、完整的官方文档与详细的网络教程，加上已经有一定的使用经验，所以能够应用于开发相关功能应用。HTML5与jQuery Mobile是Web最新的技术与新诞生的框架，所有相关资料与经验会比较欠缺，但是可以参考官方详细文档，并通过实验验证效果，所以也可以对这些新技术新框架进行使用，开发跨平台应用。2.1.2. 操作可行性本应用基于HTML5与jQuery Mobile框架开发，框架UI提供了良好的用户体验，并且在主流的移动平台都有较好的适应性。另外在jQ

27、uery Mobile的UI的基础上面再增加一定的优化，使框架能满足应用的需求。良好的用户体验为操作可行性提供了保证。2.1.3. 经济可行性后台应用的框架Spring、Hibernate都基于开源框架，能免费使用并获得一定的支持服务。数据库系统采用性能高、成本低、可靠性好的关系型数据库 MySQL，能够为数据存储提供较好的支持。费用支出主要集中于开发与维护人员的工资，以及服务器运行与网络流量的费用。2.2. 可行性分析结论通过可行性分析，跨平台新闻阅读应用在技术、操作、经济三个方面的可行性都达到要求，具备进行开发的价值，并能在开发完成上线，为用户提供服务。3 跨移动平台的新闻阅读应用的需求分

28、析3.1 系统性能需求 表3-1 系统性能需求主要质量属性详细要求正确性无逻辑错误稳定性Web服务持续稳定工作时间3天（72小时）可靠性有针对异常的处理，防止非法操作性能，效率应用响应时间小于等于3秒易用性精简操作步骤，相关操作有一定的提示清晰性界面条理清楚，操作明确安全性保护用户信息可扩展性可在当前需求基础之上进行功能上的扩展跨平台性可运行在主流的移动平台上3.2 系统功能需求分析3.2.1. 注册与登录模块为用户提供注册帐号，使之能够登录到系统，以独立的身份使用应用，浏览或者管理自己的新闻信息。3.2.2. 订阅管理模块用户可以搜索自己感兴趣的新闻，并将该新闻源添加到自己的订阅源中，然后就

29、可以在应用中第一时间浏览到最新的新闻资讯。同时，用户还可以删除已订阅的新闻源，使新闻阅读应用中的信息符合个人的需求。3.2.3. 浏览用户订阅新闻模块以列表方式或者图片方式浏览已经用户订阅的最新的新闻，或者订阅源内全部的新闻。系统还支持用户浏览自己收藏的新闻，或者应用推荐的新闻条目（即用户推荐）。使得用户可以统一浏览感兴趣的新闻。3.2.4. 管理订阅新闻模块标记用户已读的新闻条目，用户可以初始新闻条目的阅读状态，另外提供收藏、分享到微博的功能，使用户可以对自己订阅的新闻进行管理，分享感兴趣的新闻，并且通过用户的操作动作，应用汇集关注度高的新闻，进行推荐。3.2.5. 新闻评论模块用户可以查看

30、某条应用其他用户所给的评论，并能自己发表评论，参与到与其他用户的讨论中，获取比新闻本身更丰富资讯。3.3 跨移动平台的新闻阅读应用的DFD图关键字用户登录用户表用户信息注册注册信息订阅表应用初始化搜索新闻源新闻源表新闻浏览订阅条目表浏览操作新闻记录表评论操作评论表图3-1 跨移动平台的新闻阅读应用的DFD图3.4 跨移动平台的新闻阅读应用的ER图拥有目录N11用户1包含N11新闻订阅新闻源等于1包含N拥有11拥有阅读记录1新闻条目N评论图3-2跨移动平台的新闻阅读应用的ER图3.5 用例的实现与说明3.5.1. 用例图示图3-3 注册用户用例图3.5.2. 用例规约表3-2注册用例规约用例名称

31、：注册涉及的参与者：未注册用户涉及的用例：登录描述：未注册用户进行注册。前置条件：进入网站基本流：1. 未注册用户进入网站。2. 用户进入注册页面。3. 用户填写基本信息进行注册。备选流：1. 注册失败。表3-3登录用例规约用例名称：登录涉及的参与者：已注册用户涉及的用例：注册描述：已注册用户登录应用前置条件：登录网站基本流：1. 竟然登录页面。2. 输入登录信息，登录。3.登录到首页 。备选流：1. 登录失败。表3-4管理订阅用例规约用例名称：管理订阅涉及的参与者：已注册用户涉及的用例：登录描述：用户进行增加、删除订阅源。前置条件：登录网站基本流：1. 用户搜索订阅。2. 用户选择订阅并添加

32、。3. 成功添加订阅。备选流：1. 用户删除已订阅内容。表3-5浏览订阅用例规约用例名称：浏览订阅涉及的参与者：已注册用户涉及的用例：登录、管理订阅描述：对已订阅的条目进行浏览前置条件：登录基本流：1. 用户进入首页。2. 用户选择新闻栏目。3. 用户浏览新闻目录4. 用户浏览新闻的具体内容。备选流：1. 用户浏览收藏条目。2.用户浏览所有条目表3-6管理条目用例规约用例名称：管理条目涉及的参与者：已注册用户涉及的用例：登录、浏览订阅描述：用户对新闻条目进行收藏、推荐、分享等操作。前置条件：浏览条目基本流：1. 用户浏览某条新闻具体内容。2. 用户收藏该条新闻内容。续表3-6 3. 用户进行其

33、它操作。备选流：1. 用户取消收藏。表3-7新闻评论用例规约用例名称：新闻评论涉及的参与者：已注册用户涉及的用例：浏览订阅描述：用户查看新闻条目的评论，并进行评论前置条件：浏览订阅基本流：1. 用户进入订阅评论页面。2. 用户浏览订阅评论。3. 用户进行评论。备选流：1. 用户没评论返回。3.6 时序图3.6.1. 注册时序图图2-2注册时序图3.6.2. 登录时序图图2-3登录时序图3.6.3. 浏览条目时序图图2-4浏览条目时序图3.6.4. 管理订阅时序图图2-5管理订阅时序图3.6.5. 新闻评论时序图图2-6新闻评论时序图3.7 开发平台跨移动平台的新闻阅读应用的开发平台使用了Win

34、dows 7操作系统，MySQL数据库，MyEclipse集成开发环境，Firefox、Chorme、Safari浏览器，Chrome开发者工具、Firebug与Firefox开发者工具调试页面与脚本。3.8 应用运行环境应用必须部署到服务器上才可以为用户提供服务，同时客户端也要满足应用的部分需要才可以较好地运行应用，以下对推荐的运行环境对简单的介绍：3.8.1. 服务器端硬件与软件环境表3-8 服务器软件与硬件推荐配置处理器：Intel最强处理器内存：4G硬盘：500G SATA硬盘操作系统：Linux/UnixWeb服务器：Tomcat数据库：MySQL3.8.2. 客户端硬件与软件环境表

35、3-9 客户端软件与硬件推荐配置处理器：1 GHz内存：512M操作系统：Android 2.3、IOS 4.0或以上浏览器：系统浏览器或Opera浏览器屏幕：触摸屏4 跨移动平台的新闻阅读应用的概要设计4.1 应用的系统结构与开发模型为了满足跨移动平台的新闻阅读应用的需求，必须选择合适的系统结构与开发模型，以下对这些内容作概要介绍。为了满足跨移动平台的需求，本应用没有采用现在移动平台流行的基于客户端的C/S架构，而是采用了B/S这种基于浏览器的架构，这种架构可以避免客户端的差异性，为用户提供一致的用户体验。开发模式选用现在成熟的MVC三层开发模式，使得界面与业务逻辑能够低耦合，使得应用各个模

36、块能够独立开发。4.1.1. B/S系统结构为了应用能够跨移动平台运行，所以本应用采用B/S这种基于浏览器的架构，因为用户使用的应用程序只要在服务器运行的一个版本，使得应用的维护变得更容易，只要在服务器维护应用，用户只要访问就能够使用到最新版本的应用程序，避免了用户升级客户端的麻烦。另外由于HTML5与jQuery Mobile等新技术的引入，使得应用能够实现丰富的功能，并且在界面设计上有较大的选择空间，能够开发出类似客户端的应用程序。4.1.2. MVC开发模型应用使用成熟的MVC开发模型，将业务逻辑与页面视图进行分离，使得页面设计与数据库设计能够进行分离。同时为了应用的良好体验与减轻服务器

37、的压力，在视图层使用JavaScript脚本处理用户动作，调用Ajax发送响应请求。4.2 应用系统结构图搜索订阅添加订阅管理订阅修改目录修改订阅浏览订阅修改状态分享条目条目评论评价评论跨移动平台新闻阅读应用用户注册用户登录图4-1 应用系统结构图4.3 数据库设计数据库作为保存与管理应用数据的核心部分，所有数据库表都确保满足第三范式，避免数据冗余，提高存储效率，查询速度。另外为了数据的安全，数据表没有使用外键约束，而是使用程序进行约束。4.3.1. 数据字典表4-1 表描述表序号表名表描述表4-2Catalog用户目录表表4-3Channel新闻频道表表4-4Comment评论表表4-5Fe

38、ed用户订阅表表4-6Item新闻条目表表4-7Member用户表表4-8Record用户记录表表4-9Vote推荐表表4-2 目录表-catalog字段类型描述扩展CatalogIDint(11)目录ID主键（自增）MemberIDint(11)用户ID索引CatalogNamevarchar（10）目录名Iexint（11）目录序号表4-3 频道表-channel字段类型描述扩展ChannelIDint（11）频道ID主键（自增）Urlvarchar（500）频道网址Titlevarchar（500）频道名称Linkvarchar（500）网站网址Descriptionvarchar（50

39、0）频道描述Languagevarchar（10）语言LastCrawlDatedatetime最新获取时间LastUpdateDatedatetime最新更新时间Countint（11）订阅数表4-4 评论表-comment字段类型描述扩展CommentIDbigint（20）评论ID主键（自增）ParentIDbigint（20）引用ID索引MemberIDint（11）用户ID索引ItemIDbigint（20)新闻条目ID索引Contentvarchar（500）评论内容CDatedatetime评论时间Supportint（11）支持数Againstint（11）反对数表4-5 订阅

40、表-feed字段类型描述扩展FeedIDint（11）订阅ID主键（自增）FeedNamevarchar（500）订阅名MemberIDint（11）用户ID索引CatalogIDint（11）目录IDChannelIDint（11）频道ID索引CDatedatetime浏览时间表4-6 新闻条目表-item字段类型描述扩展ItemIDbigint(20)条目ID主键（自增）ChannelIDint（11）频道ID索引Titlevarchar（100）条目标题Descriptionmediumtext条目内容Linkvarchar（2048）条目网址Authorvarchar（50）条目作者P

41、ubDatedatetime更新时间LoadDatedatetime读取时间Shareint（11）分享数表4-7 用户信息表-member字段类型描述扩展MemberIDint（11）用户ID主键（自增）LoginNamevarchar（20）昵称索引LoginPwdvarchar（50）登录密码EMailvarchar（100）注册邮箱LastDate datetime登录时间表4-8 用户记录信息表-record字段类型描述扩展RecordIDbigint（20）记录ID主键（自增）MemberIDint（11）用户ID索引ItemIDbigint(20)条目ID续表4-8IsShare

42、bit（1）分享状态IsReadbit（1）查看状态IsCollectbit（1）收藏状态CDatedatetime创建时间表4-9 推荐表-vote字段类型描述扩展VoteIDbigint(20)推荐ID主键（自增）续表4-9CommentIDbigint（20）评论IDMemberIDint（11）用户ID5 跨移动平台的新闻阅读应用的详细设计5.1 应用结构图图5-1 应用结构图5.2 功能实现5.2.1. 注册模块与注册模块 图5-2 注册页面 图5-3 登录页面1. 功能说明应用提供用户注册的功能，成功注册用户可以登录应用，使用应用提供的服务。这两个页面主要使用了jQuery Mob

43、ile表单的UI组件，输入框使用HTML5的标签新增的placeholder属性实现标签的显示隐藏效果。2. 登录页面代码片段登录信息邮箱: 5.2.2. 管理订阅模块 图 5-5 应用首页图5-6 添加订阅页面 图 5-7 编辑订阅页面图 5-8 拖放删除订阅页面1. 功能说明应用以列表的形式提供用户订阅的新闻内容，用户可以通过搜索订阅添加感兴趣的订阅，使用jQuery Mobile提供的taphold事件触发编辑订阅目录的菜单，同时使用HTML5提供的Drag and Drop特性完成拖放删除订阅的功能。2. taphold事件代码片段/订阅编辑$(h3.doc-h a).bind(tap

44、hold, function(e) if (!dragIs) var feedid = $(this).attr(feedid);var feedTitle = $(this).attr(feedTitle);var catalogId = $(this).attr(catalogId);$(.item-control).attr(feedid, feedid);$(.item-control).attr(feedTitle, feedTitle);$(.item-control).attr(catalogId, catalogId);$(#cover).fadeIn(fast);$(foot

45、er).children().fadeOut(0);$(.item-control).fadeIn(200););3. Drag and Drop特性代码片段/将dataTransfer事件添加到jQuery事件队列中$.ps.push(dataTransfer);/拖放开关var dragIs = false;/开始拖动作function handleDragStart(e) dragIs = true;var fId = $(this).attr(feedid);this.style.opacity = 0.4;$(footer).children().not(.dele

46、te-content).not(#search-bar).fadeOut(0);$(.delete-content).fadeIn(fast);e.dataTransfer.setData(text, fId);/放动作function handleDrop(e) if (e.preventDefault) e.preventDefault();var fId = e.dataTransfer.getData(text);$.ajax();/拖放结束5.2.3. 浏览订阅模块 图 5-9 列表浏览订阅页面1. 列表浏览订阅说明使用jQuery Mobile的列表UI组件作为列表浏览订阅的核心内

47、容，另外添加额外元素（星号标记）提供收藏功能。使用HTML5本地存储保存用户浏览设置（如浏览模式、订阅条目类型）。图5-10 小屏幕图片浏览订阅页面2. 小屏幕图片浏览订阅说明使用CSS3的media query（媒体查询）检测屏幕的宽度，当屏幕宽度小于720像素是使用小屏幕的CSS样式。图 5-11 大屏幕图片浏览订阅页面3. 大屏幕图片浏览订阅说明使用CSS3的media query（媒体查询）检测屏幕的宽度，当屏幕宽度大于1200像素是使用大屏幕的CSS样式。4. 列表浏览订阅页面代码片段img class=img-star ui-li-icon ui-li-thumb src=resources/images/star1.png alt=图片无法加载5. CSS3媒体查询代码片段/*屏幕分辩率大于720px小于1200px*/media screen and (min-width:720px) and (max-width:1200px)article.img-boxmargin:0.75ex 1.2ex;width:30%;height:28ex;article.img-box header aheight:2.5ex;padding:1ex 5px;6. HTML5本地存储用户设置代码片段/本地存储扩展方法Stotyp