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

杨俊 陆校松

【摘要】当下，运用Web前端开发技术可以很大程度地促进软件开发效率的提升。基于此，本文将利用Web前端框架AdminLTE来进行高职院校IT设备运维管理系统的设计开发。

【关键词】Web前端;AdminLTE;运维管理

当下我国已经进入Web2.0时代，网页制作的基础上派生了一种新技术，统称为Web前端开发技术，Web前端开发技术具体包括3个方面：HTML、CSS、JavaScript。jQuery插件基于JavaScript脚本语言，它不仅提供了强大的功能函数，而且便于查询和控制页面，彻底解决了浏览器兼容性等问题。AdminLTE是一款建立在bootstrap和jQuery之上的开源的界面框架，它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面;同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，开发者可以快速的创建一个响应式的Html5网站，极大地提升了开发效率。本文将利用Web前端框架AdminLTE来进行高职院校IT设备运维管理系统的设计开发。

一、需求分析

开发高职院校IT设备运维管理系统的主要目标是利用该系统来对高职院校的IT设备的运行进行维护和管理，从而实现高职院校的IT设备运维管理信息记录的全面信息化，提高高职院校的IT设备运维管理的效率和正确性。在高职院校IT设备运维管理系统中设置了多个不同的权限用户，如教职工、学生、IT工程师、超级管理员等。系统可以为不同的用户提供着不同的操作权限，所以系统可以实现定制化管理目标。系统总体上有下列几大需求：

（1）系统必须能有针对性地实现其功能，以符合高职院校IT环境对不同权限人员的需求。

高职院校IT设备运维管理模块需要覆盖到高职院校的各个角落，如部门管理、角色管理、用户管理、功能管理、报修类型、地点管理、视频维护、故障报修、派单管理等等功能。不同的用户组所持有的权限也不相同，实际所需功能也因此存在差异性，必须先对其进行分类，再按不同类别去做设计和开发。

（2）實用针对性需求

高职院校IT设备运维管理系统主要是对高职院校IT设备进行维护的管理系统。系统的所有功能都应该根据这个核心功能去扩展，必须具备一切与高职院校IT设备运行、维护、管理有关的基本功能和流程体系。

（3）系统必须有良好的前端操作界面，易于被所有操作角色所掌握。

系统操作性的重要之处不言而喻，然而其在使用过程中的友好性更为重要。一个系统有好的功能但是没有一个看上去简洁明了易于操作的界面，用户也不会觉得系统好用。因此，系统的操作简易性也成为了一个衡量系统性能好坏的重要指标。如果想让用户更加便捷地掌握系统的操作流程，就需要将系统开发、设计得更简洁流畅、容易入门，并且能够很好地与其它的主流操作系统或平台相兼容。所以本系统采用当下主流的Web前端开发技术中的AdminLTE前端框架来实现。

（4）可兼容性

本文所开发的是高职院校IT设备运维管理系统。然而，这个系统并不能独立于高职院校的内部系统，必须能够与其它系统相互传输、共享某些信息与资源。为此，对于新系统的开发设计，我们务必要考虑好其兼容性，且新系统的预留接口要兼容于已有系统，同时本系统所采用的是基于Web前端开发技术的AdminLTE框架，兼容于目前市面上几乎所有主流浏览器和移动端系统。

高职院校IT设备运维管理系统主要的用户就是超级管理员、教职工、学生和IT工程师（维修人员）等。超级管理员对于系统的所有的功能进行操作，包括系统管理、业务管理和数据报表，而教职工、学生主要能够操作的就是业务管理中的一部分，主要是视频维护、故障报修、客户评价和报修单管理。IT工程师能够操作的范围是整个业务中所有的部分。系统管理是超级管理员才有权限使用的功能，该模块下主要有下列几大功能模块：部门管理、角色管理、报修类型、功能管理、地点管理、用户管理和最新公告。超级管理员可以使用系统管理中的各个子模块功能，而且可对部门信息、角色信息、用户信息、系统的功能、报修的类型、报修设备的地点和公告等进行增删改查等操作。系统的主要业务就是对高职院校的IT设备进行运维管理。所以业务主要有：视频维护、故障报修、派单管理、维修登记、客户评价和报修单管理等。为了对高职院校的IT设备的运维情况有个总体的统计和分析，在系统中还设计了一个数据报表的功能模块，该模块主要包括部门报表、类型报表和综合报表三个子功能模块。系统总体功能结构如图1所示。

二、系统设计

本运维系统中最主要功能模块有：视频维护、故障报修、派单管理、维修登记等，下面逐步一一进行设计。

本运维系统中最主要且有特色的功能是视频维护功能，也是本系统的一个重要的创新功能，视频维护使得不同身份的用户，包括教职工、学生、超级管理员和IT工程师都可以通过远程视频的方式对IT设备的故障来进行维护。视频实时通信的方式无外乎两种：一种是客户端实时通信，一种是网页实时通讯。考虑到运维管理系统的各种使用环境需要，若使用者使用的电脑或手机等移动设备无通信客户端，还需要下载安装软件，且客户端通信基于不同的操作平台还会有所限制。加上传统的网页实时通信必须要安装Adobe Flash、Microsoft Sliverlight之类的插件，这些都会让使用者操作繁琐且使用体验较差。所以本系统该功能模块的设计选用基于WebRTC技术的网页实时通讯技术，WebRTC集成在浏览器之中，不需要另行下载，也不需要其它插件的支持，就能直接带来良好的用户体验，同时也能避免因为插件的下载安装带来的安全隐患。只要是安装了内嵌了WebRTC技术的浏览器（目前主流的浏览器都支持WebRTC技术），不同的浏览器和不同的操作系统间也可以进行双向实时的语音视频通信。首先四类用户登录完成进入系统主界面，在业务管理模块下选择视频维护功能，此时界面会转到搭建好的Node.js服务器地址（Node.js服务器提供用户的登录界面、视频通信界面、管理用户登记退出的界面及视频通信的参与者进行视频数据通信的数据传输协议代码），在该页面再次输入账号和密码，就可以进入视频通讯的主界面，在主界面可以观察到IT工程师是否在线，如果工程师在线上，就可以通过视频对接的方式向工程师发送通话请求，如果工程师允许，则双方即可进入正常的视频通话界面交流，此时就可以进行远程指导维护了，维护完毕，视频通话结束。流程图如图2所示。

故障报修功能的主要的操作人员是教职工和学生用户，教职工、学生用户可以登录系统后点击进入业务管理模块下的故障报修子功能模块，填写相关的故障信息便可以进行故障报修。

派单管理功能这一环节最主要的操作者就是系统的超级管理员。超级管理员先要登录上系统管理界面，之后在系统管理界面中点击派单管理功能，这时会显示出用户故障报修的未处理清单，接着超级管理员便可针对用户的故障报修申请一一进行派单，超级管理员只需在未处理的故障清单表上点击派单，然后填写详细的派单信息同时选择要执行维修的IT工程师提交即可，接着对应的被派单的IT工程师就会收到该维修申请，整个派单管理过程结束。

维修登记功能模块的主要操作用户是IT工程师，超级管理员将教职工或学生用戶提交的故障报修单进行派单后，IT工程师便会在维修登记功能里查看到超级管理员的故障派单详情。被派单的IT工程师就需要根据用户提供的IT设备的故障情况，到指定的地点去进行维修，维修结束后要再次进入维修登记功能模块中提交完工信息，自此维修结束。

三、系统实现

本运维管理系统采用C#编程语言，使用Visual Studio 2017开发工具，运用.NET Core框架，支持多种运行环境。开发模式是结合了Bootstrap的B/S模式。整体的功能框架布局采用了AdminLTE开源界面框架。本系统的开发环境如下：服务器操作系统：Windows Server 2016;编程语言：C#;开发工具：Visual Studio 2017;Web服务器：IIS;数据库服务器：SQL Server 2017;系统开发平台：Windows 10。系统实现界面如图3、4所示。

由此可见，利用Web前端技术进行软件开发可以极大缩短开发周期，提高开发效率。

参考文献：

[1]高佳忆，魏乃晓，徐文辉，贾燕.基于Web前端开发的公司网站设计研究[J].无线互联科技，2018，15（11）.

[2]张鑫，于涌，王典，等.Web 前端技术开发的优化与研究[J].产业与科技论坛，2018，17（24）.

作者简介：杨俊（1986-），男，江苏南通人，硕士、硬件工程师、电子商务师;研究方向：信息安全、数据挖掘、教育管理。陆校松（1982-），男，江苏南通人，工程师，硕士，研究方向：web应用开发。