基于HTML5的高校实验室预约开放系统的设计.docxVIP

基于HTML5的高校实验室预约开放系统的设计

蒋旺喜党旗章苏静

摘要：本文通过分析高校实验室传统预约开放管理存在的问题，设计了基于HTML5的高校实验室预约开放管理系统，系统的主要模块包含实验室预约管理和实验室数据统计管理。本系统能够为高校师生提供在线预约服务，优化高校实验室开放管理，实时呈现实验室开放使用情况及生成教育部实验室开放数据报表。

中图分类号：G434?文献标识码：A?论文编号：1674-2117（2019）11-0109-04

●实验室预约开放系统

针对以上要求，笔者根据所在学校实际情况，设计了一个实验室预约开放系统，该系统采用HTML5响应式布局来设计平台的前端。

●HTML5的核心技术及应用

1.HTML5核心技术

（1）2D图像绘制技术

Canvas是用于在网页中绘制位图的技术，是HTML5中最受关注的功能之一。本系统可利用Canvas绘制实验室二维码、统计图表。

（2）离线应用技术

离线应用是指在脱离网络连接的环境下，WebAPP依然能够进行数据存储与交换业务，从而保证程序的正常运行。这项技术使得WebAPP克服了过去离线即瘫痪的局限，应用适应性更强。

（3）响应式布局技术

不同类型的设备，如手机、平板、笔记本电脑、触控一体机等，它们的屏幕大小、分辨率、键盘类型都存在巨大差異。HTML5响应式布局技术使得浏览器针对不同的设备输出相应的网页布局。HTML5标准为移动Web应用程序提供了优秀的页面体验，而且AndroidBrowser及iOS对Webkit的良好支持，同时使用CSS3等功能实现原生应用程序的UI界面。[4]

（4）提供丰富的支持Web应用扩展的API

HTML5提供了操作移动设备硬件的API，包括地理位置感知API、运动感应事件、通用感应器API、触控交互事件、WebSocketAPI、MessagingAPI等。[5]

2.HTML5应用

HTML5的优势是兼容性好，用HTML5技术开发的应用能跨平台使用，并且可以在网页上直接进行调试和修改，且开发和维护的成本较低。HTML5的应用主要有以下几方面：①游戏开发，如微信小游戏;②轻应用、WebAPP、微站;③基于微信平台的开发，实现扫一扫、微信支付等操作;④WebVR让虚拟现实大众化，通过HTML5把虚拟现实内容嵌入到Web页面中。

●实验室预约开放系统的设计与分析

1.系统总体框架设计

总体框架由五个层次和一个信息安全保障体系组成。底层是网络层，包括校园内部网络和互联网。服务器包含数据库服务器和应用服务器。为了方便师生预约实验室，本系统支持PC端和移动端接入访问。本系统功能模块分为五个方面，分别是用户管理、信息管理、实验室管理、统计报表管理和预约管理，其中主要模块是统计报表管理和预约管理。信息安全保障体系要保障网络安全、服务器安全、数据库安全和应用程序安全。系统总体框架如图1所示。

2.实验室预约流程分析

本系统给师生提供的预约方式有两种，一种是在平台中选择相应的实验室进行预约，另一种是应用智能移动终端扫描实验室的二维码进行预约。实验室预约业务流程如上页图3所示。为了减少实验室管理员的预约审核工作量，本系统通过程序控制实验室预约过程：①某实验室在某时间段已经被预约了，是不能被重复预约，确保实验室所有的预约不会有时间冲突;②限制实验室的预约权限，如某些实验室是学生不能预约的，在学生的预约界面是不会显示这些实验室。为了让管理员能及时审核师生的预约情况，教师或学生预约提交后系统会自动发送手机短信至管理员手机，管理员即刻知晓谁在某时段预约了某实验室。管理员预约审核流程如上页图4所示。

3.实验室统计报表设计与分析

●系统的优势分析

1.采用HTML5响应式页面设计

在信息技术飞速发展的今天，智能移动终端成为我们生活中不可缺少的伙伴。为了同时支持PC端和各类移动智能终端的使用，本系统采用HTML5响应式页面设计。

2.与高校实验室预约开放管理业务无缝对接

本系统的设计要求：一是与高校实验室开放管理密切整合，管理更加细致简单;二是师生能随时随地预约，并能及时得到反馈;三是确保实验室开放数据准确无误，并与教育部要求上交的数据一致。

3.按教育部要求随时导出实验室开放数据报表

本系统可随时随地查询导出实验室实验项目统计表和实验室开放使用情况数据统计表。这些数据报表不但可视化呈现了各个实验室的使用情况，而且可直接作为教育部要求的实验室开放数据统计报表。

●总结展望

本系统设计的目的是信息化管理高校实验室预约开放业务，提高实验室的使用率和及时掌握实验室的实际使用情况。为了能跨平台使用，本系统采用了HTML5响应式页面设计，支持各种智能移动终端使用。管理员可根据实验室的开放情况设置实验室的开放时间和使用人数等，使实验室在某时段不存