基于HTML5的实验室智能管控系统的设计

随着信息技术在各个领域应用的不断发展,实现"数字化、网络化、智能化"制造,是制造业发展的新趋势,也是新一轮科技革命和产业变革的核心所在。本文通过前端技术与nodeJs作为服务端,完成了一个基于HTML5+CSS+nodeJs的实验室智能管控系统的设计。该管理系统旨在提高实验室与实验设备的使用率,降低实验室管理人员的管理难度,减轻数据统计的复杂程度。该管理系统有如下优点:自主注册、记录日志、实时监控;提高实验室设备的使用效率,及时发送设备运行和生产进度情状、设备故障预警、维修情况等。

本系统采用B/S模式，利用管理信息技术设计并开发了一个实验室管理系统，提高了管理工作效率。另外随着网络进入Web3.0时代，传统的Web页面已经严重的制约着网络应用软件的开发，因此在开发此系统的过程中，本人运用Ajax异步交互技术和的HTML5，利用这两个技术的独特优势，研究开发新的Web系统应用，旨在研究如何改善B/S模式系统，使实验室管理系统在实时交互性方面明显优于传统的Web应用程序，提高管理者的使用体验。

系统整体设计

该系统共分为3个模块，用户登录/登出模块，用户对实验室/实验设备修改信息模块，个人信息模块。各个模块虽然表面上看似相互独立，但是对数据库的访问上是紧密相连的，各个模块访问的是同一个数据库，只是访问的不同的表而已。具体功能如下：

(1)用户登录/登出模块，包块用户的登录功能，登出功能，注册用户功能。

(2)实验室/实验设备管理，包块对实验室的增删改查功能，以及对实验室设备的增删改查功能。

(3)修改用户信息模块，此模块用户可以自己修改个人的信息。

目 录

第一章 绪论1

1.1研究的背景与意义1

1.2课题研究的内容和论文架构1

第二章 系统相关技术3

2.1系统相关技术3

2.1.1 DIV+CSS介绍3

2.1.2 JAVASCRIPT介绍4

2.1.3 NODEJS介绍5

2.1.4 MYSQL数据库介绍6

2.1.5 VUEJS简介7

2.2 B/S模型概述8

2.3系统可行性分析9

第三章 系统需求分析9

3.1功能需求分析9

3.1.1 客户需求了解9

3.1.2 运行环境9

3.2设计工具介绍10

3.2.1 WebStorm简介10

3.2.2 navicat简介10

第四章 系统整理设计12

4.1系统整体设计12

4.1.1 设计原则12

4.1.2 系统整体设计12

4.2系统总体设计13

4.2.1 数据库设计13

第五章 系统实现14

5.1系统界面14

5.1.1 系统登录界面14

5.1.2 系统登出界面14

5.2 个人信息模块14

5.3 设备管理模块14

5.3.1 系统实验室管理页面14

5.3.2 系统实验设备管理页面14

结束语15

致谢16

参考文献17

附录 部分程序18