馬青松，熊新國(guó)，劉擁軍

（河南職業(yè)技術(shù)學(xué)院電子與物聯(lián)網(wǎng)學(xué)院 河南 鄭州 450000）

0 引言

隨著信息技術(shù)的發(fā)展，各類機(jī)房設(shè)備和系統(tǒng)不斷增加，采用客戶端軟件或?yàn)g覽器查看機(jī)房設(shè)備運(yùn)行狀態(tài)，機(jī)房運(yùn)維管理部門(mén)不能及時(shí)獲取機(jī)房資源和報(bào)警信息[1]。移動(dòng)應(yīng)用的普及，也為機(jī)房運(yùn)維系統(tǒng)注入新的活力。機(jī)房運(yùn)維移動(dòng)應(yīng)用的種類也從原生APP 應(yīng)用逐漸向Android、IOS、微信小程序、H5 等多種類型全面發(fā)展。眾所周知，原生方式開(kāi)發(fā)應(yīng)用需要不同的生產(chǎn)環(huán)境和不同的語(yǔ)言進(jìn)行開(kāi)發(fā)，如Android APP 需要采用Android Studio 開(kāi)發(fā)工具，編程需要采用Java 或Kotlin 語(yǔ)言，IOS APP 需要采用Xcode、iPhone Simulator 開(kāi)發(fā)工具，編程語(yǔ)言采用Object-C 或Swift 開(kāi)發(fā)語(yǔ)言[2]。原生開(kāi)發(fā)因?yàn)闇y(cè)試和應(yīng)用環(huán)境的不同，存在適配難、開(kāi)發(fā)成本高、效率低、用戶體驗(yàn)差，跨平臺(tái)應(yīng)用開(kāi)發(fā)一次開(kāi)發(fā)，多端運(yùn)行，開(kāi)發(fā)一款機(jī)房運(yùn)維的跨平臺(tái)移動(dòng)應(yīng)用程序?qū)C(jī)房運(yùn)維的信息化建設(shè)具有非常重要的意義。

基于以上背景，本系統(tǒng)以u(píng)ni-app 和Spring boot 為核心框架，采用HTML5、CSS3、JavaScript、Java 語(yǔ)言和MySQL 數(shù)據(jù)庫(kù)，實(shí)現(xiàn)一種機(jī)房運(yùn)維系統(tǒng)，系統(tǒng)可以查看機(jī)房資源、異常、報(bào)表和消息通知等。該系統(tǒng)能較大程度上簡(jiǎn)化用戶操作，提高機(jī)房管理人員的工作效率，達(dá)到實(shí)時(shí)查看機(jī)房資源信息、異常等信息的目的。

1 系統(tǒng)架構(gòu)

系統(tǒng)采用前后端分離模式。系統(tǒng)前端通過(guò)HBuilderX進(jìn)行開(kāi)發(fā)、調(diào)試和發(fā)布，架構(gòu)方案采用MVVM 設(shè)計(jì)模式，符合Vue 規(guī)范的uni-app 跨平臺(tái)應(yīng)用框架[3]。系統(tǒng)后端通過(guò)IntelliJ IDEA 進(jìn)行開(kāi)發(fā)和調(diào)試，架構(gòu)方案采用MVC 設(shè)計(jì)模式，使用Java 語(yǔ)言的Spring Boot 框架。后端為前端提供API 接口，客戶端可以用Android APP、IOS APP和各類小程序請(qǐng)求數(shù)據(jù)。通過(guò)遠(yuǎn)程連接阿里云CentOS 服務(wù)器部署Web 服務(wù)器和MySQL 的數(shù)據(jù)庫(kù)服務(wù)器。系統(tǒng)框架結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)框架結(jié)構(gòu)

1.1 跨平臺(tái)移動(dòng)APP

與傳統(tǒng)原生開(kāi)發(fā)相比，跨平臺(tái)移動(dòng)APP 采用單個(gè)代碼庫(kù)在不同平臺(tái)上運(yùn)行的方式，不需要為每個(gè)平臺(tái)單獨(dú)開(kāi)發(fā)獨(dú)立APP。軟件開(kāi)發(fā)人員將單一代碼庫(kù)翻譯成多種編程語(yǔ)言，最大限度的重用代碼可以減少系統(tǒng)部署和維護(hù)成本，縮短開(kāi)發(fā)時(shí)間和節(jié)省資源[2]。由于采用單一代碼庫(kù)，跨平臺(tái)移動(dòng)開(kāi)發(fā)APP 擁有統(tǒng)一外觀，可確保多個(gè)平臺(tái)APP 的外觀一致，用戶體驗(yàn)好。與原生開(kāi)發(fā)類似，跨平臺(tái)移動(dòng)APP也支持豐富多彩的插件，借助第三方插件可以大大簡(jiǎn)化開(kāi)發(fā)過(guò)程。

目前，跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)主流解決方案主要有自繪UI 和JavaScrpit 銜接的混合式開(kāi)發(fā)技術(shù)。采用自繪UI 的混合式開(kāi)發(fā)技術(shù)的主要代表為Google 推出的開(kāi)源UI 工具包Flutter，F(xiàn)lutter 擁有豐富的組件、接口，但由于其基于Dart 語(yǔ)言開(kāi)發(fā)和與原生協(xié)作問(wèn)題，針對(duì)IOS和Android 平臺(tái)，F(xiàn)lutter 需要開(kāi)發(fā)兩套UI 代碼，增加了技術(shù)實(shí)現(xiàn)難度[4]。JavaScript 銜接的混合式開(kāi)發(fā)技術(shù)主要有React Native 和uni-app 等。React Native 是Facebook 開(kāi)源JavaScript 框架React 在原生移動(dòng)應(yīng)用平臺(tái)的產(chǎn)品，React Native 雖然支持IOS 和Android 平臺(tái)，但需要兩套UI 代碼，并且在開(kāi)發(fā)過(guò)程中要與原生協(xié)作，也面臨技術(shù)難度大、實(shí)現(xiàn)成本高的問(wèn)題[5]。

1.2 uni-app 框架

uni-app 是DCloud 團(tuán)隊(duì)采用Vue.js 開(kāi)發(fā)的國(guó)產(chǎn)跨平臺(tái)移動(dòng)應(yīng)用框架，支持發(fā)布到IOS、Android、H5 以及微信小程序、百度小程序、頭條小程序、支付寶小程序等多個(gè)平臺(tái)，跨平臺(tái)能力極強(qiáng)[6]。與Flutter 和React Native相比，uni-app 只需要編寫(xiě)一套代碼就可以發(fā)布到多個(gè)平臺(tái)。軟件開(kāi)發(fā)人員只需要學(xué)習(xí)Vue，開(kāi)發(fā)過(guò)程不用與原生協(xié)作，學(xué)習(xí)成本和難度是最低的[7]。uni-app 的社區(qū)活躍度高，具有組件豐富、生態(tài)繁榮、體驗(yàn)好、平臺(tái)能力不受限、速度快、支持原生渲染、支持原生代碼混寫(xiě)和原生軟件開(kāi)發(fā)工具包等優(yōu)勢(shì)[8]。uni-app實(shí)現(xiàn)了“一套代碼、多端發(fā)行”，有效降低開(kāi)發(fā)和維護(hù)成本。

1.3 Spring Boot

Spring Boot 是Pivotal 團(tuán)隊(duì)在Spring 的基礎(chǔ)上研發(fā)的一套全新的開(kāi)源框架，其設(shè)計(jì)目的是用來(lái)簡(jiǎn)化應(yīng)用的搭建和開(kāi)發(fā)過(guò)程[9]。與Spring 應(yīng)用相比，由于Spring Boot框架去除大量的XML 配置文件和高集成第三方庫(kù)配置，大部分的Spring Boot 應(yīng)用只需要少量的配置代碼，大大簡(jiǎn)化了依賴管理，因此可以使開(kāi)發(fā)者更加專注于業(yè)務(wù)邏輯，淡化配置代碼，深受軟件開(kāi)發(fā)人員喜愛(ài)，是目前后端開(kāi)發(fā)的主流技術(shù)[10]。

1.4 MySQL 數(shù)據(jù)庫(kù)

MySQL 是由瑞典MySQL AB 公司開(kāi)發(fā)的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，目前屬于Oracle 旗下產(chǎn)品。MySQL 具有體積小、速度快、成本低、跨平臺(tái)、兼容性好、開(kāi)放源碼等特點(diǎn)。MySQL 數(shù)據(jù)庫(kù)目前是互聯(lián)網(wǎng)、社交系統(tǒng)、各類應(yīng)用軟件等系統(tǒng)的常見(jiàn)技術(shù)選擇。MySQL 數(shù)據(jù)庫(kù)是與Java、Python、PHP 等主流編程語(yǔ)言緊密結(jié)合的數(shù)據(jù)庫(kù)系統(tǒng)[11]。

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

2.1 軟件功能設(shè)計(jì)

基于uni-app 的機(jī)房運(yùn)維管理系統(tǒng)的總體功能設(shè)計(jì)如表1所示。包括總覽模塊、資源模塊、異常模塊、報(bào)表模塊、消息模塊和個(gè)人信息模塊。

表1 系統(tǒng)總體功能

2.1.1 總覽模塊

總覽模塊包括系統(tǒng)概覽、異?？傆[和路由切換功能。用戶身份認(rèn)證及授權(quán)成功后，默認(rèn)展示總覽模塊，系統(tǒng)概覽功能采用柱狀圖展示網(wǎng)絡(luò)設(shè)備、服務(wù)器、硬件資源、軟件資源、機(jī)房設(shè)備正常和異常數(shù)量；異?？傆[功能采用餅圖展示災(zāi)難、嚴(yán)重、一般、警告、信息各級(jí)別異常的數(shù)量和比例；路由切換功能可以切換至資源、異常、報(bào)表和消息模塊。

2.1.2 資源模塊

資源模塊包括資源列表頁(yè)面和資源詳情頁(yè)面。資源模塊列表頁(yè)面、異常模塊列表頁(yè)面、報(bào)表模塊列表頁(yè)面、消息模塊列表頁(yè)面均默認(rèn)展示20 條資源信息，用戶通過(guò)上拉操作進(jìn)行數(shù)據(jù)刷新，下拉操作進(jìn)行數(shù)據(jù)分頁(yè)加載。資源模塊列表頁(yè)默認(rèn)展示資源序號(hào)、資源名稱、資源健康度，健康度采用灰、紅、黃、綠四色分級(jí)方式；資源類型有網(wǎng)絡(luò)設(shè)備、交換機(jī)、路由器、防火墻、軟件資源、數(shù)據(jù)庫(kù)、中間件、云服務(wù)器等，輸入關(guān)鍵字和資源類型模糊查詢。通過(guò)點(diǎn)擊某條資源信息，進(jìn)入到資源詳情頁(yè)面。資源詳情包括資源信息、資源指標(biāo)、CPU、內(nèi)存、磁盤(pán)、接口、關(guān)鍵端口和關(guān)鍵進(jìn)程功能。資源信息展示資源名稱、管理IP 等信息，資源指標(biāo)展示資源名稱和取值結(jié)果。

2.1.3 異常模塊

異常模塊包括異常列表頁(yè)面和異常詳情頁(yè)面。異常列表頁(yè)面默認(rèn)展示異常指標(biāo)和異常級(jí)別，異常級(jí)別采用紅、橙、黃三色分級(jí)方式；采用輸入關(guān)鍵字和選擇異常時(shí)間段模糊查詢異常列表。通過(guò)點(diǎn)擊某條異常信息，進(jìn)入到異常詳情頁(yè)面。異常詳情頁(yè)面包括異常信息和指標(biāo)閾值功能。異常信息展示資源名稱、子資源名稱、指標(biāo)名稱、是否恢復(fù)、持續(xù)時(shí)間、異常級(jí)別、異常次數(shù)、異常描述等字段。指標(biāo)閾值通過(guò)表格展示異常級(jí)別、比較方式、閾值和異常過(guò)濾字段。

2.1.4 報(bào)表模塊

報(bào)表模塊包括報(bào)表列表頁(yè)面和報(bào)表詳情頁(yè)面。報(bào)表列表默認(rèn)展示20 條報(bào)表數(shù)據(jù)，采用輸入關(guān)鍵字和選擇報(bào)表時(shí)間段模糊查詢報(bào)表。通過(guò)點(diǎn)擊某條報(bào)表信息，進(jìn)入到報(bào)表詳情頁(yè)面。報(bào)表詳情采用表格方式展示報(bào)表中資源信息和異常信息。

2.1.5 消息模塊

消息模塊包括消息列表和消息詳情頁(yè)面。消息列表默認(rèn)展示20 條消息數(shù)據(jù)，采用輸入關(guān)鍵字模糊查詢消息。消息狀態(tài)有已讀和未讀狀態(tài)，通過(guò)點(diǎn)擊某條消息信息，進(jìn)入到消息詳情頁(yè)面。消息詳情展示消息的發(fā)布時(shí)間、發(fā)布人和詳細(xì)描述。

2.1.6 個(gè)人信息模塊

個(gè)人信息模塊分為我的頁(yè)面和登錄頁(yè)面，用戶輸入服務(wù)器地址、用戶名和密碼授權(quán)登錄，我的頁(yè)面展示用戶名、部門(mén)、郵箱和聯(lián)系方式信息。

2.2 數(shù)據(jù)庫(kù)設(shè)計(jì)

本系統(tǒng)使用MySQL 數(shù)據(jù)庫(kù)。根據(jù)軟件功能列表，主要數(shù)據(jù)表設(shè)計(jì)如下：資源表（tb_resource）記錄資源信息，包括資源ID、資源名稱、管理IP、資源類型、資源地域、廠商、健康度、可用率等。異常表（tb_exception）記錄異常信息，包括異常ID、異常指標(biāo)、異常級(jí)別、異常次數(shù)、異常指標(biāo)、異常時(shí)間、異常描述等。報(bào)表（tb_sheets）記錄生成日常報(bào)表信息，包括報(bào)表ID、報(bào)表日期、報(bào)表資源信息、報(bào)表異常信息等。消息表（tb_messages）記錄消息信息，包括消息ID、消息日期、消息狀態(tài)、消息詳情等。用戶表（tb_user）記錄用戶信息，包括主鍵ID、用戶名、部門(mén)、聯(lián)系方式、郵箱等。

3 系統(tǒng)展示

3.1 開(kāi)發(fā)環(huán)境

基于機(jī)房運(yùn)維管理系統(tǒng)的設(shè)計(jì)，系統(tǒng)前端采用uniapp 和Spring Boot 開(kāi)發(fā)，uni-app 主要用來(lái)數(shù)據(jù)展示，Spring Boot 用來(lái)邏輯處理和開(kāi)發(fā)接口，實(shí)現(xiàn)總覽模塊、資源模塊、異常模塊、報(bào)表模塊、消息模塊和個(gè)人信息模塊。開(kāi)發(fā)環(huán)境和編程環(huán)境如表2所示。

表2 系統(tǒng)開(kāi)發(fā)環(huán)境

3.2 模塊展示

首先管理員賬號(hào)“admin”在登錄頁(yè)面分別輸入服務(wù)器地址、用戶名和密碼，登錄成功并跳轉(zhuǎn)至總覽頁(yè)面，總覽頁(yè)面展示系統(tǒng)概覽和異?？傆[，可以Tab 切換，點(diǎn)擊系統(tǒng)概覽柱狀圖出現(xiàn)當(dāng)前類型的正常和異常設(shè)備數(shù)量，通過(guò)點(diǎn)擊資源、異常、報(bào)表和消息圖表，分別進(jìn)入到對(duì)應(yīng)模塊，也可以通過(guò)底部導(dǎo)航訪問(wèn)模塊?？傆[頁(yè)面如圖2所示。

圖2 總覽頁(yè)面

資源列表頁(yè)面默認(rèn)展示20 條資源數(shù)據(jù)，可以通過(guò)點(diǎn)擊下拉框，底部彈出下拉選項(xiàng)，檢索相應(yīng)類型的資源，點(diǎn)擊某條資源，進(jìn)入到資源詳情頁(yè)面。資源頁(yè)面如圖3所示。在異常列表頁(yè)面點(diǎn)擊某條異常，進(jìn)入到資源詳情頁(yè)面。異常頁(yè)面和異常詳情頁(yè)面如圖4所示。

圖3 資源列表頁(yè)面

圖4 異常詳情頁(yè)面

報(bào)表列表頁(yè)面可以按照本月、本周、本日、上周、全部等方式查詢報(bào)表，點(diǎn)擊某條報(bào)表，進(jìn)入到報(bào)表詳情頁(yè)面。消息列表頁(yè)面按照時(shí)間順序展示最新20 條消息，消息未被點(diǎn)擊，消息狀態(tài)為未讀，點(diǎn)擊某條消息，進(jìn)入到消息詳情頁(yè)面，消息狀態(tài)變更為已讀。報(bào)表列表頁(yè)面和消息列表頁(yè)面分別如圖5、圖6所示。

圖5 報(bào)表列表頁(yè)面

圖6 消息頁(yè)面

4 結(jié)論

針對(duì)機(jī)房運(yùn)維管理中存在的問(wèn)題，前端采用uni-app框架，后端采用Spring Boot 開(kāi)發(fā)了一種機(jī)房運(yùn)維管理系統(tǒng)，主流框架為系統(tǒng)的實(shí)現(xiàn)提供了良好的技術(shù)保障。實(shí)現(xiàn)了用戶登錄、總覽、資源、異常、報(bào)表和消息模塊，最后對(duì)系統(tǒng)進(jìn)行測(cè)試，驗(yàn)證了該系統(tǒng)能較大程度上簡(jiǎn)化用戶操作、增強(qiáng)系統(tǒng)安全性，系統(tǒng)可以查看機(jī)房資源信息、異常信息、報(bào)表信息和消息通知等，系統(tǒng)數(shù)據(jù)傳輸穩(wěn)定性好，應(yīng)用軟件人機(jī)操作界面穩(wěn)定易用。