Web前端開(kāi)發(fā)技術(shù)在運(yùn)維管理系統(tǒng)中的應(yīng)用

楊俊 陸校松

【摘要】當(dāng)下，運(yùn)用Web前端開(kāi)發(fā)技術(shù)可以很大程度地促進(jìn)軟件開(kāi)發(fā)效率的提升?；诖耍疚膶⒗肳eb前端框架AdminLTE來(lái)進(jìn)行高職院校IT設(shè)備運(yùn)維管理系統(tǒng)的設(shè)計(jì)開(kāi)發(fā)。

【關(guān)鍵詞】Web前端;AdminLTE;運(yùn)維管理

當(dāng)下我國(guó)已經(jīng)進(jìn)入Web2.0時(shí)代，網(wǎng)頁(yè)制作的基礎(chǔ)上派生了一種新技術(shù)，統(tǒng)稱(chēng)為Web前端開(kāi)發(fā)技術(shù)，Web前端開(kāi)發(fā)技術(shù)具體包括3個(gè)方面：HTML、CSS、JavaScript。jQuery插件基于JavaScript腳本語(yǔ)言，它不僅提供了強(qiáng)大的功能函數(shù)，而且便于查詢(xún)和控制頁(yè)面，徹底解決了瀏覽器兼容性等問(wèn)題。AdminLTE是一款建立在bootstrap和jQuery之上的開(kāi)源的界面框架，它提供了一系列響應(yīng)的、可重復(fù)使用的組件，并內(nèi)置了多個(gè)模板頁(yè)面;同時(shí)自適應(yīng)多種屏幕分辨率，兼容PC和移動(dòng)端。通過(guò)AdminLTE，開(kāi)發(fā)者可以快速的創(chuàng)建一個(gè)響應(yīng)式的Html5網(wǎng)站，極大地提升了開(kāi)發(fā)效率。本文將利用Web前端框架AdminLTE來(lái)進(jìn)行高職院校IT設(shè)備運(yùn)維管理系統(tǒng)的設(shè)計(jì)開(kāi)發(fā)。

一、需求分析

開(kāi)發(fā)高職院校IT設(shè)備運(yùn)維管理系統(tǒng)的主要目標(biāo)是利用該系統(tǒng)來(lái)對(duì)高職院校的IT設(shè)備的運(yùn)行進(jìn)行維護(hù)和管理，從而實(shí)現(xiàn)高職院校的IT設(shè)備運(yùn)維管理信息記錄的全面信息化，提高高職院校的IT設(shè)備運(yùn)維管理的效率和正確性。在高職院校IT設(shè)備運(yùn)維管理系統(tǒng)中設(shè)置了多個(gè)不同的權(quán)限用戶(hù)，如教職工、學(xué)生、IT工程師、超級(jí)管理員等。系統(tǒng)可以為不同的用戶(hù)提供著不同的操作權(quán)限，所以系統(tǒng)可以實(shí)現(xiàn)定制化管理目標(biāo)。系統(tǒng)總體上有下列幾大需求：

（1）系統(tǒng)必須能有針對(duì)性地實(shí)現(xiàn)其功能，以符合高職院校IT環(huán)境對(duì)不同權(quán)限人員的需求。

高職院校IT設(shè)備運(yùn)維管理模塊需要覆蓋到高職院校的各個(gè)角落，如部門(mén)管理、角色管理、用戶(hù)管理、功能管理、報(bào)修類(lèi)型、地點(diǎn)管理、視頻維護(hù)、故障報(bào)修、派單管理等等功能。不同的用戶(hù)組所持有的權(quán)限也不相同，實(shí)際所需功能也因此存在差異性，必須先對(duì)其進(jìn)行分類(lèi)，再按不同類(lèi)別去做設(shè)計(jì)和開(kāi)發(fā)。

（2）實(shí)用針對(duì)性需求

高職院校IT設(shè)備運(yùn)維管理系統(tǒng)主要是對(duì)高職院校IT設(shè)備進(jìn)行維護(hù)的管理系統(tǒng)。系統(tǒng)的所有功能都應(yīng)該根據(jù)這個(gè)核心功能去擴(kuò)展，必須具備一切與高職院校IT設(shè)備運(yùn)行、維護(hù)、管理有關(guān)的基本功能和流程體系。

（3）系統(tǒng)必須有良好的前端操作界面，易于被所有操作角色所掌握。

系統(tǒng)操作性的重要之處不言而喻，然而其在使用過(guò)程中的友好性更為重要。一個(gè)系統(tǒng)有好的功能但是沒(méi)有一個(gè)看上去簡(jiǎn)潔明了易于操作的界面，用戶(hù)也不會(huì)覺(jué)得系統(tǒng)好用。因此，系統(tǒng)的操作簡(jiǎn)易性也成為了一個(gè)衡量系統(tǒng)性能好壞的重要指標(biāo)。如果想讓用戶(hù)更加便捷地掌握系統(tǒng)的操作流程，就需要將系統(tǒng)開(kāi)發(fā)、設(shè)計(jì)得更簡(jiǎn)潔流暢、容易入門(mén)，并且能夠很好地與其它的主流操作系統(tǒng)或平臺(tái)相兼容。所以本系統(tǒng)采用當(dāng)下主流的Web前端開(kāi)發(fā)技術(shù)中的AdminLTE前端框架來(lái)實(shí)現(xiàn)。

（4）可兼容性

本文所開(kāi)發(fā)的是高職院校IT設(shè)備運(yùn)維管理系統(tǒng)。然而，這個(gè)系統(tǒng)并不能獨(dú)立于高職院校的內(nèi)部系統(tǒng)，必須能夠與其它系統(tǒng)相互傳輸、共享某些信息與資源。為此，對(duì)于新系統(tǒng)的開(kāi)發(fā)設(shè)計(jì)，我們務(wù)必要考慮好其兼容性，且新系統(tǒng)的預(yù)留接口要兼容于已有系統(tǒng)，同時(shí)本系統(tǒng)所采用的是基于Web前端開(kāi)發(fā)技術(shù)的AdminLTE框架，兼容于目前市面上幾乎所有主流瀏覽器和移動(dòng)端系統(tǒng)。

高職院校IT設(shè)備運(yùn)維管理系統(tǒng)主要的用戶(hù)就是超級(jí)管理員、教職工、學(xué)生和IT工程師（維修人員）等。超級(jí)管理員對(duì)于系統(tǒng)的所有的功能進(jìn)行操作，包括系統(tǒng)管理、業(yè)務(wù)管理和數(shù)據(jù)報(bào)表，而教職工、學(xué)生主要能夠操作的就是業(yè)務(wù)管理中的一部分，主要是視頻維護(hù)、故障報(bào)修、客戶(hù)評(píng)價(jià)和報(bào)修單管理。IT工程師能夠操作的范圍是整個(gè)業(yè)務(wù)中所有的部分。系統(tǒng)管理是超級(jí)管理員才有權(quán)限使用的功能，該模塊下主要有下列幾大功能模塊：部門(mén)管理、角色管理、報(bào)修類(lèi)型、功能管理、地點(diǎn)管理、用戶(hù)管理和最新公告。超級(jí)管理員可以使用系統(tǒng)管理中的各個(gè)子模塊功能，而且可對(duì)部門(mén)信息、角色信息、用戶(hù)信息、系統(tǒng)的功能、報(bào)修的類(lèi)型、報(bào)修設(shè)備的地點(diǎn)和公告等進(jìn)行增刪改查等操作。系統(tǒng)的主要業(yè)務(wù)就是對(duì)高職院校的IT設(shè)備進(jìn)行運(yùn)維管理。所以業(yè)務(wù)主要有：視頻維護(hù)、故障報(bào)修、派單管理、維修登記、客戶(hù)評(píng)價(jià)和報(bào)修單管理等。為了對(duì)高職院校的IT設(shè)備的運(yùn)維情況有個(gè)總體的統(tǒng)計(jì)和分析，在系統(tǒng)中還設(shè)計(jì)了一個(gè)數(shù)據(jù)報(bào)表的功能模塊，該模塊主要包括部門(mén)報(bào)表、類(lèi)型報(bào)表和綜合報(bào)表三個(gè)子功能模塊。系統(tǒng)總體功能結(jié)構(gòu)如圖1所示。

二、系統(tǒng)設(shè)計(jì)

本運(yùn)維系統(tǒng)中最主要功能模塊有：視頻維護(hù)、故障報(bào)修、派單管理、維修登記等，下面逐步一一進(jìn)行設(shè)計(jì)。

本運(yùn)維系統(tǒng)中最主要且有特色的功能是視頻維護(hù)功能，也是本系統(tǒng)的一個(gè)重要的創(chuàng)新功能，視頻維護(hù)使得不同身份的用戶(hù)，包括教職工、學(xué)生、超級(jí)管理員和IT工程師都可以通過(guò)遠(yuǎn)程視頻的方式對(duì)IT設(shè)備的故障來(lái)進(jìn)行維護(hù)。視頻實(shí)時(shí)通信的方式無(wú)外乎兩種：一種是客戶(hù)端實(shí)時(shí)通信，一種是網(wǎng)頁(yè)實(shí)時(shí)通訊。考慮到運(yùn)維管理系統(tǒng)的各種使用環(huán)境需要，若使用者使用的電腦或手機(jī)等移動(dòng)設(shè)備無(wú)通信客戶(hù)端，還需要下載安裝軟件，且客戶(hù)端通信基于不同的操作平臺(tái)還會(huì)有所限制。加上傳統(tǒng)的網(wǎng)頁(yè)實(shí)時(shí)通信必須要安裝Adobe Flash、Microsoft Sliverlight之類(lèi)的插件，這些都會(huì)讓使用者操作繁瑣且使用體驗(yàn)較差。所以本系統(tǒng)該功能模塊的設(shè)計(jì)選用基于WebRTC技術(shù)的網(wǎng)頁(yè)實(shí)時(shí)通訊技術(shù)，WebRTC集成在瀏覽器之中，不需要另行下載，也不需要其它插件的支持，就能直接帶來(lái)良好的用戶(hù)體驗(yàn)，同時(shí)也能避免因?yàn)椴寮南螺d安裝帶來(lái)的安全隱患。只要是安裝了內(nèi)嵌了WebRTC技術(shù)的瀏覽器（目前主流的瀏覽器都支持WebRTC技術(shù)），不同的瀏覽器和不同的操作系統(tǒng)間也可以進(jìn)行雙向?qū)崟r(shí)的語(yǔ)音視頻通信。首先四類(lèi)用戶(hù)登錄完成進(jìn)入系統(tǒng)主界面，在業(yè)務(wù)管理模塊下選擇視頻維護(hù)功能，此時(shí)界面會(huì)轉(zhuǎn)到搭建好的Node.js服務(wù)器地址（Node.js服務(wù)器提供用戶(hù)的登錄界面、視頻通信界面、管理用戶(hù)登記退出的界面及視頻通信的參與者進(jìn)行視頻數(shù)據(jù)通信的數(shù)據(jù)傳輸協(xié)議代碼），在該頁(yè)面再次輸入賬號(hào)和密碼，就可以進(jìn)入視頻通訊的主界面，在主界面可以觀(guān)察到IT工程師是否在線(xiàn)，如果工程師在線(xiàn)上，就可以通過(guò)視頻對(duì)接的方式向工程師發(fā)送通話(huà)請(qǐng)求，如果工程師允許，則雙方即可進(jìn)入正常的視頻通話(huà)界面交流，此時(shí)就可以進(jìn)行遠(yuǎn)程指導(dǎo)維護(hù)了，維護(hù)完畢，視頻通話(huà)結(jié)束。流程圖如圖2所示。

故障報(bào)修功能的主要的操作人員是教職工和學(xué)生用戶(hù)，教職工、學(xué)生用戶(hù)可以登錄系統(tǒng)后點(diǎn)擊進(jìn)入業(yè)務(wù)管理模塊下的故障報(bào)修子功能模塊，填寫(xiě)相關(guān)的故障信息便可以進(jìn)行故障報(bào)修。

派單管理功能這一環(huán)節(jié)最主要的操作者就是系統(tǒng)的超級(jí)管理員。超級(jí)管理員先要登錄上系統(tǒng)管理界面，之后在系統(tǒng)管理界面中點(diǎn)擊派單管理功能，這時(shí)會(huì)顯示出用戶(hù)故障報(bào)修的未處理清單，接著超級(jí)管理員便可針對(duì)用戶(hù)的故障報(bào)修申請(qǐng)一一進(jìn)行派單，超級(jí)管理員只需在未處理的故障清單表上點(diǎn)擊派單，然后填寫(xiě)詳細(xì)的派單信息同時(shí)選擇要執(zhí)行維修的IT工程師提交即可，接著對(duì)應(yīng)的被派單的IT工程師就會(huì)收到該維修申請(qǐng)，整個(gè)派單管理過(guò)程結(jié)束。

維修登記功能模塊的主要操作用戶(hù)是IT工程師，超級(jí)管理員將教職工或?qū)W生用戶(hù)提交的故障報(bào)修單進(jìn)行派單后，IT工程師便會(huì)在維修登記功能里查看到超級(jí)管理員的故障派單詳情。被派單的IT工程師就需要根據(jù)用戶(hù)提供的IT設(shè)備的故障情況，到指定的地點(diǎn)去進(jìn)行維修，維修結(jié)束后要再次進(jìn)入維修登記功能模塊中提交完工信息，自此維修結(jié)束。

三、系統(tǒng)實(shí)現(xiàn)

本運(yùn)維管理系統(tǒng)采用C#編程語(yǔ)言，使用Visual Studio 2017開(kāi)發(fā)工具，運(yùn)用.NET Core框架，支持多種運(yùn)行環(huán)境。開(kāi)發(fā)模式是結(jié)合了Bootstrap的B/S模式。整體的功能框架布局采用了AdminLTE開(kāi)源界面框架。本系統(tǒng)的開(kāi)發(fā)環(huán)境如下：服務(wù)器操作系統(tǒng)：Windows Server 2016;編程語(yǔ)言：C#;開(kāi)發(fā)工具：Visual Studio 2017;Web服務(wù)器：IIS;數(shù)據(jù)庫(kù)服務(wù)器：SQL Server 2017;系統(tǒng)開(kāi)發(fā)平臺(tái)：Windows 10。系統(tǒng)實(shí)現(xiàn)界面如圖3、4所示。

由此可見(jiàn)，利用Web前端技術(shù)進(jìn)行軟件開(kāi)發(fā)可以極大縮短開(kāi)發(fā)周期，提高開(kāi)發(fā)效率。

參考文獻(xiàn)：

[1]高佳憶，魏乃曉，徐文輝，賈燕.基于Web前端開(kāi)發(fā)的公司網(wǎng)站設(shè)計(jì)研究[J].無(wú)線(xiàn)互聯(lián)科技，2018，15（11）.

[2]張?chǎng)?，于涌，王典，?Web 前端技術(shù)開(kāi)發(fā)的優(yōu)化與研究[J].產(chǎn)業(yè)與科技論壇，2018，17（24）.

作者簡(jiǎn)介：楊?。?986-），男，江蘇南通人，碩士、硬件工程師、電子商務(wù)師;研究方向：信息安全、數(shù)據(jù)挖掘、教育管理。陸校松（1982-），男，江蘇南通人，工程師，碩士，研究方向：web應(yīng)用開(kāi)發(fā)。