基于HTML5的校园移动客户端的设计与实现。(2)

5.2.6四六级报名 ................................................................................................ 28 5.2.7云笔记 ........................................................................................................ 29 5.2.8普通话报名 ................................................................................................ 30 5.2.9我要请假 .................................................................................................... 31

6 系统测试 ......................................................................................................................... 35

6.1系统测试的目的 ................................................................................................... 35 6.2测试环境 ............................................................................................................... 35 6.3测试方法 ............................................................................................................... 35 6.4测试步骤 ............................................................................................................... 35 6.5详细测试 ............................................................................................................... 36

6.5.1自动加载页 ................................................................................................ 36 6.5.2用户登陆页 ................................................................................................ 36 6.5.3主界面 ........................................................................................................ 36 6.5.4新闻公告页 ................................................................................................ 36 6.5.5课表查询页 ................................................................................................ 36 6.5.6四六级报名页 ............................................................................................ 37 6.5.7云笔记页 .................................................................................................... 37 6.5.8普通话报名页 ............................................................................................ 38 6.5.9我要请假页 ................................................................................................ 38 6.6整体测试和验收测试 ........................................................................................... 38 结 论 ............................................................................................................................. 39 参考文献 ............................................................................................................................. 41 附录一：主要业务数据流定义 ......................................................................................... 42 附录二：主要数据存储的定义 ......................................................................................... 46 致 谢 ............................................................................................................................. 48

II

天津职业技术师范大学2015届本科生毕业设计

1 引言

1.1应用背景

最近几年发展最快的产业莫过于移动互联网，移动互联网的迅速发展带来了许多商机。因此，吸引了很多企业和个人加入，而这恰恰又推动了移动互联网相关的新技术的推广和更新。移动互联网的发展离不开智能手持设备的迅速推广，而智能手持设备则因其相对廉价的硬件成本和使用的便捷性而得到广泛的应用。根据2014年智能手机的出货量数据统计，使用Android和IOS操作系统的智能手机占全球智能手机出货量的96.3%。因此，Google公司的Android和苹果公司的IOS占据了主要的市场份额。那么，我们在开发移动应用的时候至少要考虑这两种情况，而这势必增加企业或个人的开发成本。而基于浏览器的Web App的出现无疑会大大降低企业的开发成本，同样的，对于用户也不必再下载不同版本的手机应用程序，只要打开对应的网址即可。作为社会成员的一部分，我校的学生也有同样的需求。因此，非常有必要开发一款基于手机Web浏览器的综合服务系统，供同学们使用。

开发基于手机或平板电脑浏览器的Web网站将有助于大家更进一步的了解这些最新的技术，有助于新技术的普及。

在移动Web开发方面，国外的一些研发团队开发了诸如jQuery Mobile、JQ Touch、Sencha Touch、PhoneGap等框架。而在我们国内，能够参与开发这些框架的人就很少了，更多的人是在使用和推广这些框架。在互联网上或图书馆中，自己可以查阅的关于jQuery Mobile的完整的项目实例很少，自己只能够查阅到一些模块化的资料。因此，就更有必要开发一个完整的项目并将这些代码分享给大家，供大家学习。

1.2研究设想

目前，国内的一些大的网站已经开始开发和应用自己的移动Web网站了，作为一

名计算机专业的毕业生，应该主动去接触、应用和推广这些新技术。学习了五年的计算机技术，自己已经具备了学习新技术的能力。同时，借助于互联网上的资料和图书馆里的资源自己应该能够开发出一款带给同学们方便的应用系统。

本系统将基于jQuery Mobile这个框架进行开发，该框架支持国内主流的移动平台，很好的解决了浏览器兼容性的问题，在项目开发的过程中主要使用jQuery Mobile自带的组件、主题进行开发。同时，在处理事件的时候主要使用jQuery脚本，只有在jQuery没有办法实现的情况下才考虑使用javascript脚本。在网页设计中使用HTML5作为网站的编码标准，同时，依靠基于CSS3标准的层叠样式表来对网页进行

1

天津职业技术师范大学2015届本科生毕业设计

设计。开发该系统将以提高网站的可访问性为宗旨，尽可能的提高用户体验度。

1.3预期结果

基于HTML5和CSS3，以及jQuery Mobile完全可以实现系统的界面设计。同时，借助于SQL Server 2008和.NET就可以很好的实现数据存储和数据的输出转换。

相信，在指导老师的引领和自己的努力之下，一定可以开发出一个基于移动Web浏览器的综合服务系统，借助于该系统大家可以轻松的查看学校发布的公告、通知。同时，类似于“四六级报名”、“普通话报名”、“请假”等事情也可以直接借助于本系统来完成。从此，大家不仅可以选择以App的形式访问学校综合服务系统，而且可以通过访问移动Web的形式访问综合服务系统。

移动Web网站的使用使大家无论是高端的智能手机还是内存较小的移动终端，只要它可以打开浏览器，就可以获取到最新的校园公告。

2

天津职业技术师范大学2015届本科生毕业设计

2 可行性分析

2.1技术可行性

自万维网联盟在2012年宣布HTML5规范正式定稿以来，HTML5在网站开发方面的应用铺天盖地席卷而来。与此同时，支持HTML5的浏览器也越来越多，从国外的Chrome、IE9、Safari、Opera到国内的傲游浏览器、搜狗浏览器、QQ浏览器等都开始具备支持和兼容HTML5的能力。由此可见，开发基于HTML5的综合服务系统可以在较广泛的浏览器中运行。

伴随着智能手持设备迅速占据整个移动市场，在移动设备上开发具有较高兼容性的网站已经成为了一种非常急迫和实用的需求。与早期版本的网页设计语言相比，HTML5和CSS3在页面布局与设计方面具有使用起来更方便、样式更加灵活以及兼容性更高等优势。

另一方面，诸如jQuery Mobile等手机Web开发框架的出现，已经在某种程度上很好地解决了不同手持设备的兼容性问题。

2.2经济可行性

在经济方面，借助于现有的笔记本电脑、图书馆里的资料以及互联网上的资料完

全可以在有限的时间内开发出满足同学们需求的系统。不需要额外购买更多的硬件设备或软件。具备经济可行性。

2.3操作可行性

系统将参照原有电脑版、安卓版综合服务系统的设计风格。同时，界面将设计的

更加简洁，从而使系统更具实用性。对用户来说，只要会使用手机浏览器上网，就有足够的能力轻松地访问本系统。同时，在系统中，将给出较多友好的文字提示，以方便大家使用该系统。

2.4数据流图

数据流图作为交流信息的基本工具，在分析员和用户之间起着“桥梁”的作用。

由于数据流图中主要使用了四种基本符号，并且不包含程序具体实现的细节。因此，大多数非计算机专业的人都可以较容易的理解它。

本系统的数据流图如图2-1所示：

3

天津职业技术师范大学2015届本科生毕业设计

F1-08请假表D1-20D1-19请假信息请假信息F1-05四六级表D1-15报名信息P1-09申请休假P1-10查看假条P1-05四六级报名D1-10D1-11请假信息请假信息D1-06四或六级报名信息D1-02验证信息用户D1-01用户信息D1-03紧急通知P1-01用户登录F1-01用户信息表D1-04D1-05D1-07新闻消息课表笔记内容D1-09D1-08笔记内容普通话报名P1-02查看紧急通知D1-12紧急通知P1-03查看新闻消息D1-13新闻消息P1-04查看课表D1-14课表P1-06写笔记D1-16笔记P1-07查看笔记D1-17笔记P1-08普通话报名D1-18报名信息F1-02紧急通知表F1-03新闻公告表F1-04课表表F1-06笔记表F1-07普通话报名表

图2-1系统数据流图

2.5数据字典

数据字典包含了数据流图中所有元素定义的解释，以方便用户查阅。 以下是对系统中所涉及的元素的定义： 1、 数据项定义：

系统的数据项描述如表2-1所示：

表2-1系统的数据项描述

序号 I01-01 I01-02 I01-03 I01-04 I01-05 I01-06 I01-07 I01-08 列 名 user_id user_password user_name user_class user_academy user_sex Cet com 字段描述 学号 登录密码 姓名 班级 学院 性别 四、六级报名 云记事 4

数据类型 varchar(11) varchar(20) nvarchar(20) nvarchar(20) nvarchar(20) nvarchar(1) tinyint nvarchar(max) 可否为空 否 否 否 否 是 是 是 是

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库基于HTML5的校园移动客户端的设计与实现。(2)在线全文阅读。