《基于HTML5的移动校园服务平台研究与实现》-工学论文，通信论文-论文范文参考-科学狗论文网

标题

基于HTML5的移动校园服务平台研究与实现

范文

卞晨晨王鹰汉

摘要：文章针对上饶职业技术学院校情及校园文化特点，设计并实现了基于HTML5的移动校园服务平台。它主要是为该院师生提供工作和学习上的服务，为实现数字化校园建设提供有力保障。相比原生APP，基于HTML5开发的系统具有良好的跨平台性、开发成本低、维护方便等特点，且极大地提高了用户体检。

关键词：HTML5；移动校园服务平台；WeX5； JSON

根据教育部关于《教育信息化十年发展规划（2011—2020年）》的要求，各高校都在積极地以协同方法对现有的校园网络资源进行整合与规划，利用最新的互联网技术和科技成果建设与完善信息化校园。目前，智能移动设备因其相对廉价的硬件成本和使用的便捷性在校园得到广泛的应用，为了方便广大师生工作与学习，开发一款适合上饶职业技术学院校情的移动服务平台势在必行。本文以开发一款基于HTML5的Web APP系统为基础，从系统的需求分析、系统体系结构设计、数据库设计、系统设计与实现等方面进行详细阐述。

1 系统需求分析

校园从本质上讲是融学习与生活等于一体的场所，且每所学校因其校情、学情等不一样而具有独特性。在互联网时代，开发一款符合上饶职业技术学院师生需求的“定制化”移动服务平台，将对数字化校园建设非常有帮助。该平台服务的对象是上饶职业技术学院校内师生，利用学院现有的网络环境和云服务平台等硬件设施，致力于为师生的生活、学习、社交、娱乐等方面提供专业的服务。

随着时代的发展，智能手机的配置也在逐步提高，但相比个人计算机而言，其带宽、显示屏幕还是存在一定的局限性。为了能让用户不需要下载移动端安装的APP（Application），而能享受到同样优质的上网服务体验，获取相同的生活、工作、学习资源等，只需打开网址进行链接，就能在移动端快速、安全地享受到软件的服务。本系将利用开源免费的开发工具WeX5，使用HTML5+CSS3+JavaScript进行Web前端设计，使用超文本预处理器（Hypertext Preprocessor，PHP）进行后端程序设计，利用MySQL进行数据库存储。通过使用HTML5新的元素进行页面设计，实现用户在移动端访问时不需要下载第三方组件，就能随时随地享受到相同的校园文化服务需求[1]。

2 系统体系结构设计

本平台的体系结构分为3层，分别为界面表示层、业务逻辑处理层以及数据访问层。用户可通过打开浏览器输入网址进入界面表示层访问移动校园服务平台，通过业务逻辑处理层处理用户发送的各种服务请求，通过数据访问层提供平台业务逻辑处理以及显示到界面表示层的各种数据支持[2]。系统体系结构如图1所示。

3 数据库设计

本平台采用MySQL作为数据后台信息存储，总共包括7个表：分别是新闻信息表（YD_Article）、新闻类别表（YD_ArticleType）、用户信息表（YD_Users）、互动讨论信息表（YD_Ask）、移动学习信息表（YD_Study）、数字图书信息表（YD_Library）、校园卡信息表（YD_Card）。利用服务器脚本语言PHP对数据进行操作后，转&成JS对象标记（JavaScript Object Notation，JSON）格式的数据后再通过应用程序编程接口（Application Programming Interface，API）接口发送到前端页面，前端页面接收到JSON格式的数据后再通过HTML5与CSS3有组织、有结构地展现在前端页面[3]。

4 系统设计与实现

4.1 前端设计与实现

前端页面使用HTML5进行页面结构化设计，通过CSS3对HTML元素进行格式化表现，再通过JS进行交互行为的编写。本系统包括八大功能模块：学院信息模块、实时导航模块、移动教务模块、云端学习模块、互动社区模块、校园卡服务模块、数字图书馆模块、校园导航模块[4]，其中每个模块都包括多个功能小模块，比如移动教务模块包括课表查询、成绩查询及学期行事历查询子模块等，客户端模块结构如图2所示。

在移动端网络连接正常的情况下，当用户打开移动校园服务平台时，就进入了移动平台主页面。当用户查看学院信息、实时导航和校园导航3个模块时，是允许用户处在游客状态。而当用户想进入其他模块时需要权限才能访问，在没有登录的情况下点击其他模块系统会自动跳转到登录界面供用户登录，登录时只能凭教工号或学生号才能登录，教工号或学生号管理员会通过后台进行导入到系统中，其没有注册功能。系统的其他应用模块在主界面中没有显示出来，如果用户想继续添加模块，可以点击主界面中的“+”号继续添加。底部栏中的首页和应用按钮可相互切换，平台运行时客户端主界面显示效果如图3所示。

4.2 后端的设计与实现

后端服务为前端页面提供数据，后端对数据进行处理操作后将结果返回到前端页面，系统服务可通过PHP调用后端服务即可实现。本系统后台采用PHP与MySQL结合进行开发，由于PHP和JavaScript都对JSON具有良好的支持作用，所以采用JSON数据交换格式作为客户端与服务器端的API接口。在PHP中使用内置函数json-encode。将数值转换成JSON数据存储格式，从而避免了利用XML解析和转换的诸多缺点[5]。

5 结语

针对上饶职业技术学院校园文化特点设计的移动校园服务平台，为师生提供了一个无需下载并安装的不同版本手机应用程序，就可接收、查询到所需的各类校园信息，为数字化校园建设奠定了基础，大大提高了师生工作和学习效率。

[参考文献]

[1]陆晨，冯向阳，苏厚勤.HTML5WebSocket握手协议的研究与实现[J].计算机应用与软件，2015（1）：128-131.

[2]郭玉江.基于HTML5的跨平台移动内容管理系统的设计与实现[D].杭州：杭州电子科技大学，2015.

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

[4]袁南星.基于HTML5+JavaScript的移动用户环境自适应[J].电脑与电信，2015（12）：44-46.

[5]王鹰汉，卞晨晨.基于云计算的移动校园服务平台研究与实现[J].福建电脑，2017（6）：14-15.

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。