简单设备配置管理平台web设计

原创

wx5b7cd11f5c9c1 2022-01-13 17:17:24 博主文章分类：前端笔记 ©著作权

文章标签 ajax json web 数据导航栏 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx5b7cd11f5c9c1的原创作品，请联系作者获取转载授权，否则将追究法律责任

用户需求
[1] 设备相关运行数据能够在web平台上实时刷新显示
[2] web平台能够对设备进行远程控制及相关参数的配置
技术框架
[1] web页面采用div+css进行布局，呈上+左+右的框架布局，上面top层为配置管理系统名称等相关title信息显示。左侧为导航栏设计，右侧采用内联iframe框架。
[2] web页面右侧内容随着左侧导航栏中标题切换而随之改变，其功能定义相关的事件触发函数来实现。
[3] 左侧导航栏标题切换可设计相关js接口来实现页面样式的变化。
[4] 平台采用前后端逻辑分离架构，同时采用ajax异步通信机制，有效提高用户的交互体验及数据的实时响应显示。
[5] 后端cgi服务程序以线程的形式运行在后台，前端html页面存储服务器上。
功能实现
[1] 数据显示
前端通过ajax异步通信每隔1秒向后端发起get请求，将相关参数及请求信息传送给后端cgi服务，cgi服务解析请求并对参数进行处理，返回json格式的数据。前端对json数据进行解析并在页面对应显示，达到设备相关参数的实时显示。
[2] 设备控制
前端界面设计相关js接口函数，实现各功能按钮的实践触发。当事件触发时，前端通过ajax机制向后端cgi服务发送请求，cgi服务解析请求并将参数传递给底层的相关线程，通过485通信实现设备的控制，设备响应后线程将响应结果返回给cgi服务器，cgi服务器将响应结果以json格式响应给前端。前端解析json数据并显示设备结果信息。