Html5在基于移动终端高职院校信息系统开发中的应用

陈 印

（四川职业技术学院，四川 遂宁 629000）

随着“移动互联网+”理念的蓬勃发展，以手机为主流的移动智能终端应用几乎已成为人们生活和工作不可或缺的一部分，如微信、QQ、滴滴、美团、淘宝APP等。对于大多数高职院校而言，基本上都建有基于C/S或B/S架构、涵盖校园信息管理、教学管理、科研管理、学生管理以及后勤管理等与教学工作、校园生活密不可分的信息系统，但充分考虑教职员工和学生常用的手机、平板电脑等移动智能终端设备应用及使用习惯的学校并不多，即使有，也只是少量简单信息推送与查阅等功能，没有充分发挥移动智能终端的优势和解决用户的迫切需求。在这样的大环境之下，高职院校信息系统已不能故步自封、依然停留在仅PC端支撑的应用阶段，应当针对移动终端设备的特性对其功能及使用方式进行有效的迁移或扩充。Html5为这一切提供了强有力的技术支撑。

1 Html5概述

HTML5是HTML4.01的下一个版本，于2014年10月正式发布。HTML5之前的HTML标准，适合PC端的WEB程序开发，并不适用于移动终端设备，或者在移动设备上不能提供良好的用户体验。HTML5相对于上一个版本，主要增加了以下几个主要内容和新的特性：新的文档类型、

1.1 跨平台

目前移动智能终端设备的系统平台有苹果公司的iOS和谷歌公司的Android两大主流阵营。iOS平台应用主要使用Objtive-C或Swift语言开发，而Android平台主要使用Java语言进行开发。之前的移动终端APP为了满足不同的系统平台支撑，需要分别开发iOS版和Android版，耗费大量的人力和财力进行重复开发，这种应用又称“原生应用”。Html5属于WEB技术，跨平台性是其最主要的特征，使用Html5开发的应用基于Web技术构建，运行于移动浏览器之中，不受系统平台限制，这种应用又称为移动Web应用。[2]

1.2 多媒体

声音与视频是多媒体的主要表现形式，Html5中提供了及元素以支撑声音和视频的播放。由于不同浏览器对文件格式的支持不尽相同，这些标签里边允许使用多个标记设置使用不同格式的文件声音或视频文件，浏览器将根据实际情况识别第一个可用的文件格式。

1.3 绘图

Html5提供了及标记用于在网页上绘制位图或矢量图，可用于绘制与动态数据相关的一些统计图、特殊图形以及外部图片等。不过canvas本身并不支持绘图能力，需要使用JavaScript实现绘图功能；而svg可通过设置SVG DOM元素来绘制矢量图，而SVG DOM中的元素值可以使用JavaScript来进行控制。[3]

1.4 数据存储

Html5提供了Web Storage技术，可以通过Local Storage和Session Storage实现对离线数据的临时或永久存储。如果要存储结构较为复杂的数据，还可以使用基于SQLite开发的关系型数据库Web SQL Database，以及基于NoSQL的非关系型数据库IndexedDB。[4]

1.5 地理定位

Html5通过Geolocation接口可获取用户地理位置信息，包括经纬度坐标等，配合百度地图、谷歌地图、高德地图等，可以向用户呈现可视化的GPS定位信息。浏览器的Geolocation对象的getCurrent Position方法用于获取当前的位置信息，获取成功之后可用latitude和longitude得到当前位置的纬度和经度值。由于定位设计用户隐私，访问时，浏览器需要向用户申请授权。

1.6 移动终端设备及本地系统的访问

Html5提供了WebRTC技术、Plus技术，以实现对移动终端设备及本地文件系统的访问。通过这些技术，可以使用JavaScript脚本实现摄像头及麦克风的调用、文件的访问以及通讯录的访问等。通过Camera API能够使用移动终端的摄像头拍照并呈现图像到当前网页。

2 高职院校信息系统功能概述

高职院校信息系统概念较为广泛，而且不同学校在信息系统功能需求或实际应用中有所不同。但总的来说有以下几个必不可少的功能子模块：

2.1 校园信息管理模块

校园信息管理是高职院校非常重要的新闻、公告等资讯平台，一般由校园网及专用的综合网络办公系统（如OA协同办公系统等）来实现。具体内容包括新闻或公告信息的发布、修改、删除、审核、展示等功能，其中信息的展示（即浏览）功能完全可以扩充到移动终端设备信息系统中。

2.2 教务管理模块

教务管理是高职院校教学活动管理的核心，一般由专门的教务在线管理系统来实现（如正方管理系统）。主要实现教务处教学班排课、班级管理、学生管理，教师课表的查阅、调课申请与审核、成绩发布与管理、考勤信息的管理，以及学生课表的查阅、成绩的查阅等功能。其中课表查阅、调课申请与审核、考勤信息管理、成绩查阅等功能业务逻辑较为简单，对计算机资源要求低，便捷性要求却较高，适合扩充到移动终端设备信息系统中。

2.3 科研管理模块

科研工作是培养和锻炼高职院校师资队伍科研能力的重要工作，一直以来都很受学校的重视。科研管理主要实现科研项目、论文与专著、教材等科研成果的管理功能。这些科研项目成果的登记、出版物或获奖证书等的证明材料上传等使用移动终端操作更为方便。

由于这些功能模块相对独立性较强，管理部门重合性小，而且各自内部业务逻辑较为复杂，很多高职院校采用的是多个毫不相关、相互独立、基于B/S架构的WEB系统为各个部门专用。课题所研究的基于移动终端的高职院校信息系统并不是从零开始设计系统，更不是要把整个WEB系统所实现的功能原封不动搬到移动终端之上，而是需要针对移动终端的特点和用户的合理需求对原有的WEB系统功能进行迁移和扩充。如果要从这些零散的系统中抽取部分功能在移动终端整合为一个综合的信息系统，需要分别在各个系统中申请并取得单独授权。

3 Html5在基于移动终端高职院校信息系统中的应用

Html5技术为基于移动终端的高职院校信息系统的开发提供了丰富的技术支撑。为便于讨论，以下使用“本系统”特指本课题研究的“基于移动终端高职院校信息系统”。

3.1 开发模式与技术选择

基于Html5技术的移动Web应用与移动平台原生应用相比，移动Web应用具有跨平台的优势，然而由于其运行于浏览器容器中，与移动设备API隔离，功能受到一定的限制，它适用于浏览、查询或展示型的应用，在功能复杂或需使用设备API的应用中，仅仅使用Web技术实现难度较大或无法实现，具体表现在：移动应用通常需要访问的设备功能包括：摄像头、加速记、地理位置信息、通讯录、照片库、存储卡和媒体播放等，这些功能与硬件或操作系统底层有关，Web应用不具备所需的较高的权限，因此需要平台原生技术进行补充，取长补短，使用移动Web技术与系统平台原生技术相混合的开发模式。[5]

技术上，前端使用Html5+JavaScript+CSS4技术,服务器端采用Java+MySQL技术与现有的信息系统各分支子系统进行数据整合，前端与后端使用JSON实现数据交互，最终根据需要发布为iOS或Android系统所支持的App即可。

3.2 多媒体展示

本系统中的校园信息模块，主要实现新闻、公告等在移动终端的展示功能，这些信息中经常会使用到图片、声音和视频等多媒体资源，因此必须考虑多媒体文件的展示问题。早期的html版本早已支持图片的呈现，而声音和视频却必须借助于其他外部插件才能正常展示。Hmtl5标准对此做了有很大的改进，仅使用、元素即可实现音频、视频格式的播放。

3.3 文件访问与上传

本系统中的科研管理等子模块需要上传科研成果证明材料等电子文件，在以往传统的WEB系统中一般需要使用扫描仪采集电子文件再进行上传，而在移动终端项目中，就应该充分发挥其固有的硬件设备特性，直接调用摄像头及时拍照上传。

Html5的input标签，设置其type为“file”即可轻松实现对移动终端的文件访问，更为惊喜的是，通过该功能配合JS脚本能够快速实现在移动终端选择使用摄像头在线拍照后及时上传。如果设置其accept为“image/*”，可用于选择图片类型的文件，设置其multiple属性可支持多文件选择。JS脚本使用FileReader()方法获取选择文件的64位编码[6]，便于传输数据到服务器端，如：

其中的datas即是成功读取所选文件列表中第一个文件得到的64位编码，其格式形如：

data：image/png;base64,编码字符串

服务器端接收到数据后根据具体的编程语言解析并存储为对应格式的文件。由于编码完毕才能向服务器端发送数据，所以必须协调好两个步骤的执行时序。另外，如果一次上传多个文件，则需要遍历各个文件并采取恰当的方式与后端服务器进行数据传递。

3.4 移动前端与服务器后端数据交互

本系统各个模块将大量使用前后端数据交互功能，可使用Html5与jQuery里边的Ajax技术实现异地无刷新交互。为了使用Ajax，事先需引用Jqeury框架。目前，前端与后端数据主要使用json对象进行交互，xml用得比较少。

3.4.1 前端向后端发送数据请求

在WEB前端，使用Html5输入控件接收用户输入数据，按照Ajax语法组织并提交数据到后端服务器，如：

$.ajax({

type：“post”,//数据提交方式，分为 get和post两种

url：“servlet/test”,//接收请求的服务器后端文件地址

data： {data1：“data1”,data2：“data2”},//从输入控件提取的数据，作为请求参数提交到服务器后端

dataType：“json”,//后端执行请求后以json类型返回响应数据

success：analysisData{

//后端响应成功后的回调函数，参见3.4.3

});

3.4.2 后端向前端发送响应数据[7]

当服务器后端接收到前端数据请求后，按照所使用的编程语言执行请求并向前端以json字符串形式发送响应结果，不同的语言环境处理方式略有不同。在JSP中，可使用json-lib包通过json对象封装键值对格式的java数据再转化为json字符串输出，参考代码如下：

//MyData是java中自定义的类，包含多个属性

MyData myData1=new MyData(“Value11”,“Value12”,…);

MyData myData2=new MyData(“Value21”,“Value22”,…);

List list=new ArrayList();

list.add(myData1);

list.add(myData2);

JSONArray jsonArray=JSONArray.fromObject(list);//java对象列表转化为json对象数组

String jsonstr=jsonArray.toString();//json对象数组转化为json字符串

3.4.3 前端对数据进行解析

服务器端成功执行前端请求后将回调前端指定的函数，并以data参数将响应结果返回给前端。前端结合Html5控件，可按需要对接收到的数据进行解析处理，如：

function analysisData(data){

$(“#dataList”).html('');//Html5 前 端数据呈现控件

var jsonData=$.parseJSON(data);//将响应结果转换为json对象

$.each (jsonData,function(index,item){//遍历解析json对象中的数据并以列表形式呈现到DataList

varname1=jsonData[index].Field-Name1;//FieldName由后端服务器发送回来的数据属性名决定

var name2= jsonData [index].Field-Name2;

$(“#dataList”).html($(“#dataList”).html()+“”+“
”);

});

};

4 结语

Html5的跨平台、多媒体、绘图、数据存储、地理定位、文件访问等特性，推动了传统WEB系统向手机、平板电脑等移动终端的功能延伸，为移动终端App的开发提供了新的技术和新的思路，为基于移动终端的高职院校信息系统的开发提供了技术支撑。