基于HTML5的移动校园资讯平台的应用研究

房洪瑞+姜振凤+韩春润+张胜龙+李桂玲

摘要：移动终端技术以及智能手机应用的飞速发展给各行各业的工作提供了便利。围绕高校师生生活和学习服务需求，本文研究的基于HTML5的移动网站架构系统具有良好的跨平台性，能适用于当前主流的各种手机操作系统。项目应用于枣庄学院校园内，为师生学习生活提供了一个集个性化新闻资讯、信息推送、应用无缝集成的移动校园资讯服务平台。

关键词：HTML5、移动互联、校园资讯

中图分类号：TP393 文献标识码：A 文章编号：1672-3791（2017）01（a）-0000-00

引言

高校信息化建设的蓬勃发展推动了高校数字化校园平台的建设和应用。基于传统计算机应用架构的高校信息平台在一定程度上方便了师生，但也存在诸多显而易见的问题：如通过单一的Web访问方式难以及时、便利地获取各种资讯和服务[1]。随着智能手机的普及以及3G/4G无线网络的覆盖，智能手机已成为人们获取资讯、学习阅读、交友娱乐的重要工具。特别是作为容易接受新事物、引领信息消费的大学生群体，更多地希望能够通过移动终端随时、随地获取信息。因此，基于移动互联的校园资讯服务平台的研究成为当前校园信息化探讨的一个热点。

1系统需求分析

校园本质上是一种生活环境，且每个校园文化都是独具一格的，从移动互联技术的角度来研究建设“定制化”的校园服务平台是非常有意义和必要的。本文研究主要面对枣庄学院内部师生，基于高校现有的宽带无线网络及云服务平台等硬件基础，致力于为师生的学习、生活、社交等方面提供专业的校园资讯服务。

由于智能手机带宽较窄、显示屏幕较小以及系统开发代码不同等特点，使得相关移动资源存在形式单一、可移植性差等问题[2]。因此在技术层面上，为了实现智能手机用户能在移动终端快速、安全的使用软件应用，本文将HTML5+CSS3+JavaScript技术作为系统实施的解决方案。通过使用HTML5新特性，包括新的结构化元素、智能表单控件和API应用程序接口等，实现用户不需要第三方插件在各种移动终端平台上对资讯随时、随地访问，并力争通过感知、挖掘用户的爱好和兴趣为其提供个性化资讯服务。针对以上需求，系统包括下功能。

（1） 校园资讯要闻。发布学校发生的最新要闻和重要通知。

（2） 社团活动。校级、院级社团工作及相关活动安排。

（3） 生活服务。为学生提供学校周边餐饮、购物及校内二手商品信息发布平台[1]。

（4） 学习交流。四六级、考研、专业资格认证考试学习经验交流平台。

（5） 勤工俭学。校内外兼职、求职信息发布平台。

（6） 创新创业平台。为学生提供一个进行产品宣传、推广服务的小型创业平台。

（7） 信息查询。提供与互联网上学校选课管理、图书馆借书管理、宿舍管理等系统的对接功能。

2系统体系结构设计

系统在体系结构上分为三层：前端表示层使用户在移动设备上通过浏览器来访问应用系统；逻辑处理层包含各种业务逻辑规则，主要指服务上的功能模块处理用户发送来的各种服务请求。数据层主要给系统提供用于显示系统主界面的各类数据支持。系统体系结构如图1所示。

3数据库设计

数据库采用MySQL，涉及到11张表：管理员信息表，注册用户信息表，新闻信息表、新闻类别表，通知信息表，评论信息表，文章信息表，商品信息表，社团信息表，社团活动报名表、招聘信息表。通过服务器端PHP代码获取数据库中的数据，并以API接口形式将转换后的JSON格式数据返回给调用的HTML前端，页面接收传回的JSON数据，按格式進行组织并显示在页面中。

4系统实现

4.1 表示层功能模块实现

前台页面采用HTML5标准，在程序建设中整体使用jQuery Mobile开发工具。jQuery Mobile框架基于jQuery、HTML5和CSS3，包括构建完整移动APP和网站所需的所有UI组件，能够提供一个交互性强的接口来兼容不同的移动平台[3]。使用jQuery Mobile，页面必须声明DOC?TYPE为HTML5，并在网页页眉中引入jQuery Mobile CSS、jQuery Mobile库、jQuery库。因在不同尺寸的移动终端设备访问，在head里需加入一个viewport，使页面的宽度与设备的宽度保持一致。在交互页面的设计上通过JSP和jQuery Mobile实现接收用户输入的数据并经系统后台程序处理将结果数据输出。此外，采用HTML5和CSS3特效，加上其他的优化措施，可以减小页面渲染的运算量[4]，提升整个平台的运行效率。

4.2 后台管理功能实现

后台服务端技术主要采用PHP与MySQL搭配使用，由于PHP和Java Script都对JSON具有良好的支持，因此服务器端与客户端之间接口采用JSON作为数据交换格式[5]，PHP可以通过使用json_encode（）函数直接编码PHP对象而获得json数据，从而免去使用XML繁琐的转换和解析过程。开发平台使用一款开源的CMS系统PHPCMS，PHPCMS基于PHP+MySql数据库，采用 MVC三层架构和OOP面向对象理念，与数据库的交互采用 Hibernate 框架。

在PHPCMS中使用cURL工具来传输文件和数据，通过初始化curl_init（），设置curl_setopt（）变量指定URL请求的各个细节，执行并获取结果curl_exec（），释放cURL句柄curl_close（）等基本步骤建立cURL请求。此外，资讯平台中部分“信息在线实时采集”功能主要通过HTML5的Websocket函数，建立一个与服务器直接进行通讯的Socket，从而使浏览器端能够与网页服务器实现双向通讯，有效减轻数据包负担。

5结语

针对枣庄学院校园文化特点，本文研究的移动校园资讯平台有效地将设备环境、时空环境、人文信息环境融合在一起，为教师、学生提供了一个通过智能手机、平板电脑等移动终端设备接收、查询到所需的各类校园资讯信息，提高师生的工作学习效率。

参考文献

[1]茅志刚.基于移动互联网的智慧校园服务平台[D].杭州：杭州电子科技大学，2013.

[2]罗辉琼，梁卓明，何明发. 基于移动服务开放平台构建高校智慧校园生态[J]. 中国教育信息化.2014（13）：52-54.

[3] 陈楠楠.基于HTML5的移动学习资源设计及应用研究[D].西安：西安电子科技大学，2013

[4] 董志宇.基于HTML5的移动应用自动生成系统[D].长春：吉林大学，2015