运维管理系统中Web前端开发技术的运用探析

　　摘要：本文围绕Web前端开发技术在运维管理系统中的应用问题进行研究与论述,首先对运维管理系统的设计需求进行初步分析,并以高校运维管理系统为例,指出系统开发设计应当着眼于满足高校IT环境对不同身份以及操作权限人员的实际需求,同时面向用户提供良好的前端操作界面支持。在此基础上,本文对视频维护、故障报修、维修登记以及派单管理等相关功能模块对Web前端开发技术的应用要点进行分析,最后简要概括了整套运维管理系统的实现支持。

　　关键词：Web前端开发; 运维管理系统; 应用;

　　Application of Web Front End Development Technology in Operation and Maintenance Management System

　　Yu Min

　　Jiangsu Changzhou Liuguojun Vocational and Technical College

　　Abstract：This paper studies and discusses the application of Web front-end development technology in operation and maintenance management system.Firstly,it analyzes the design requirements of operation and maintenance management system.Taking university operation and maintenance management system as an example,it points out that system development and design should focus on meeting the actual needs of University it environment for personnel with different identities and operating permissions,and provide it to users Good front-end operation interface support.On this basis,this paper expounds and analyzes the application points of Web front-end development technology in the process of operation and maintenance management system function development,such as video maintenance,fault repair,maintenance registration and dispatch management.Finally,it briefly summarizes the implementation support of the whole operation and maintenance management system.

　　0 引言

　　当前已有大量研究证实,Web前端开发技术对提升软件开发工作效率以及缩短软件开发周期均具有非常重要的意义与价值。同时,作为一款以jQuery以及bootstrap为依托的开源界面框架,Admin LTE提供了一系列具有可重复使用性以及良好响应性的组件,内置多个模板页面作为支持,并且对多种屏幕分辨率有良好的适应性,对移动智能终端以及PC终端有同步适应性[1,2,3]。基于对Web前端开发技术中Admin LTE技术的应用,系统开发人员可以快速形成一个具有良好响应关系的HTML5网站,以达到提升开发效率、缩短开发周期的目的。基于此,本文围绕运维管理系统中对Web前端开发技术的应用问题进行分析。

　　1 设计需求

　　以高校运维管理系统为例,在对IT设备运维管理系统进行开发建设的过程中,系统开发的核心目标是搭载运维管理系统对高校相关IT设备运行进行日常维护与管理,进一步提升运维管理工作的效率以及正确性。在IT设备运维管理系统中,根据不同的用户操作身份为其配置不同的权限,包括学生、教职员工、IT工程师以及超级管理员等身份,根据其身份以及权限的差异,确保系统管理目标的定制化实现[4,5,6]。具体而言,在基于Web前端开发技术对运维管理系统进行开发建设的过程中,系统总体具备以下几个方面的需求。

　　(1)整套运维管理系统应当具备针对性实现功能,以满足高校IT环境对不同身份以及操作权限人员的实际需求。对于高校而言,IT设备运维管理工作模块应当覆盖至高校各个环节以及工作阶段中,涉及部门管理、用户管理、功能管理、视频维护、故障报修、派单管理以及维修登记等各个方面,不同身份的用户以及用户组所对应的工作权限也存在一定的差异性,系统功能也因此需要体现一定的差异,在对用户身份以及工作权限进行分类的基础上,遵循不同类别完善系统功能设计与开发工作。

　　(2)整套运维管理系统应当提供良好的前端操作界面支持,确保不同身份、权限的工作人员能够对界面进行操作。运维管理系统的可操作性是前端软件开发技术应用必须高度关注的一项问题。从这一角度上来看,系统操作的简便性与可行性对评估系统性能好坏具有非常重要的意义。为了能够使运维管理系统的操作流程更加便捷地被用户掌握,就应当在运维管理系统的开发设计中体现简洁性、流畅性,方便入门,并能够与其他相关主流操作平台兼容。因此,在针对运维管理系统的开发设计中,选用基于Web前端开发技术的Admin LTE的前端框架结构实现系统开发功能。

　　2 功能开发

　　在基于Web前端开发技术所构建的运维管理系统中,所涉及的功能模块涵盖视频维护、故障报修、维修登记以及派单管理几个方面。以下进行逐一介绍。

　　2.1 视频维护功能模块

　　整套运维管理系统的最核心功能即视频维护功能,同时也是运维管理系统对系统开发功能的创新,能够确保不同身份以及不同权限的用户(包括IT工程师、超级管理员、用户、管理对象等)搭载远程视频的方式维护IT设备存在的相关故障与问题。在视频维护功能实现过程中,应当以视频实时性通信为前提,其具体实现方式包括两种类型:一是基于网页操作界面的实时性通信,二是基于客户端的实时性通信。基于对运维管理系统相关使用环境需求的考量,若用户使用的移动设备如PC终端、手机智能终端等无通信客户端,还需要下载安装软件,并且客户端通信基于不同操作平台还存在一定的限制。除此以外,传统网络操作界面的实时性通信需要以Adobe Flash以及Microsoft Sliverlight等插件为依托,因此带给用户的操作体验不够理想。

　　为了解决上述问题,在本运维管理系统运行期间,为支持视频维护功能模块的实现,可以尝试引入基于Web前端开发技术的RTC网页实时通讯技术,该Web RTC在浏览器中集成,不需要另行下载,也不需要Adobe Flash以及Microsoft Sliverlight等插件提供支持,因此对于用户而言能获得更好的体验,同时也能够避免因下载安装插件所产生的风险隐患。目前,在技术条件的支持下,主流浏览器对Web RTC均有良好的支持效果,系统可通过安装Web RTC浏览器的方式,满足不同操作系统以及不同浏览器间实现双向实时性语音视频通信功能。在运维管理系统具体运行期间,用户、管理对象、超级管理员以及IT工程师四类用户登录系统主操作界面,在业务管理模块下选择视频维护功能模块,界面自动切换至已完成搭建的Node.js服务器地址上。在页面上通过输入账号以及密码的方式,获得进入视频通讯主操作界面的权限,并对IT工程师的在线情况进行了解,支持与线上工程师通过视频对接的方式发出通话请求,获得允许后双方进入视频通话交流界面,支持对整套系统进行远程维护与管理,其典型工作流程如图1所示。

　　图1 视频维护功能模块的典型工作流程   

　　在此过程中,为保证系统运行质量,应对HTTP请求量进行严格控制。可以尝试将多个CSS文件或Java Script文件合并在一起,让其同时运行;进一步完善和优化图片架构,可以在一个图像上进行多区域划分,并且输入不同映射的连接;实现图片和文本一起下载,借助CSS background开展背景图绝对定位。以上操作,可有效压缩、打包HTTP请求,内层请求则直接分化为单独的队列,且并不会减少请求数量,从而能够直接提升网页载入速度,为用户提供更好的操作体验。

　　2.2 故障报修功能模块

　　本模块的主要操作用户以管理对象以及用户为主。以高校运维管理系统为例,用户即教职工,管理对象即学生用户。双方可以在登录系统后进入业务管理模块下方的故障报修子功能模块中,获取本功能模块修改权限后对故障信息进行如实填写,并完成故障报修功能。在这一功能模块实现过程中,可以尝试引入Web前端开发技术对文件大小进行控制。主要原因是文件过大可能导致加载储存增加,降低加载速度,导致网页响应以及互动反应受到影响。在具体实现中,首先可以对Java Script进行压缩,然后剔除多余的HTML标签,对CSS文件以及代码进行优化,以提升文件加载速度,仅面向用户呈现一级运行界面。以资源合并压缩指令为例,CSS.JS压缩:

　　<!——资源合并——><scriptsrc=”a.js”type=”text/javascript”></script>;<scriptsrc=”

　　b.js”type=”text/javascript”></script>;<scriptsrc=”c.js”type=”text/javascript”></script>;<scriptsrc=”abc.js”type=”text/javascript”></script>

　　2.3 维修登记功能模块

　　由运维管理系统负责接收系统输入的学生编号代码以及密码,将相应校验Action调用出来,负责对登录人员密码进行校验。在校验正确的情况下提示成功,并进入下一阶段应用功能,在校验出错的情况下提示错误,要求重试。在此基础上,本功能模块以IT工程师为主要操作用户,在派单管理基础上,IT工程师可通过登录运维管理系统维修登记功能模块的方式,掌握超级管理员的故障派单具体情况。被派单工程师应依据用户提供的设备具体故障信息尽快参与维修过程,设备维修结束后被派单工程师应尽快再次进入维修登记功能模块中,对完工信息进行提交,以完成维修操作。

　　2.4 派单管理功能模块

　　本功能模块的主要操作用户以超级管理员为主。具有超级管理员权限的工作人员首先登录系统管理界面,然后在系统管理界面中点击派单管理功能,由系统自动显示故障报修功能中涉及的报修故障信息,并向IT工程师发送指令,将故障信息及其处理要求以派单的方式发送至工程人员。接着超级管理员便可针对用户的故障报修申请一一进行派单,超级管理员只需要在未处理的故障清单表上点击派单,然后填写详细的派单信息同时选择要执行维修的IT工程师提交即可,接着对应的被派单的IT工程师就会收到该维修申请,整个派单管理过程结束。

　　3 系统实现

　　整套运维管理系统采用C#编程语言进行程序开发,系统功能开发工具选用Visual Studio 2017版本,系统框架结构基于.NET Core,对多种运行环境有良好支持效果与适应性。开发模式选用与Bootstrap相结合的B/S模式,整体功能框架布局为基于AdminLTE的开源界面工作框架。为满足与Web前端开发技术的适应需求,整套运维管理系统的开发环境按照如下方式设置:①服务器操作系统选用Windows Server 2016版本系统;②编程语言选用C#语言;③Web服务器终端选用IIS版本系统终端;④数据库服务器系统选用SQL Server 2017版本系统;⑤开发工具选用Visual Studio 2017版本工具;⑥系统开发平台选用Windows 10.0版本平台。系统具体实现界面如图2所示。

　　图2 运维管理系统具体实现界面示意图 

　　4 结 语

　　在当前技术条件的支持下,我国已经基本进入Web 2.0时代,以网页制作技术为基础形成了基于Web前端开发技术,具体内容涉及CSS、JavaScript以及HTML 3个部分。同时,通过应用插件技术的方式提供基于JavaScript的脚本语言支持,不但在功能函数上性能强大,还能够使对页面的查询与控制更为方便,对解决浏览器兼容问题具有非常重要的意义。从此角度来看,在运维管理系统中引入Web前端开发技术对提升软件开发工作效率、缩短系统开发周期具有非常重要的意义与价值,本文的上述分析证实了这一结论。

　　参考文献

　　[1]黄雯婕.逆向学习编码的Web前端开发教学研究[J].数码世界,2020(6):85.

　　[2]张清博,孙宜田,孙永佳,等.智能播种机作业监管云平台Web前端的开发与实现[J].中国农机化学报,2019,40(6):167-172.

　　[3]何杰惠.基于Web前端开发的即时通信文件传输研究[J].微型电脑应用,2018,34(11):88-91,106.

　　[4]陈登峰,张温,耿建勤,等.基于Web的管廊可视化信息管理系统设计与实现[J].计算机测量与控制,2020,28(5):170-174.

　　[5]焦新伟.HTML5在WEB前端开发中的应用研究[J].网络安全技术与应用,2020(4):73-75.

　　[6]杜英魁,王杨,关屏,等.基于Spring Boot的云端数据监控管理与可视化应用系统[J].计算机系统应用,2020,29(5):123-127.