祝廣場 柯亞唯

摘 要：隨著現(xiàn)代網(wǎng)絡(luò)應(yīng)用的不斷發(fā)展，前端應(yīng)用的規(guī)模變得越來越大，交互越來越復(fù)雜。為了提高電廠信息管理系統(tǒng)前端頁面的操作體驗和管理效果，本文提出了基于React的電廠信息管理系統(tǒng)前端頁面設(shè)計方案，在該方案的前端項目中，應(yīng)用React作為前端UI框架，該框架結(jié)合了高效率的Virtual DOM渲染技術(shù)，讓構(gòu)建可組合的組件思路可行。本方法專注于組件自身的邏輯、復(fù)用及測試，適用于開發(fā)大型應(yīng)用程序。

關(guān)鍵詞：電廠信息管理系統(tǒng)；React；前端UI框架

DOI：10.16640/j.cnki.37-1222/t.2018.22.102

0 引言

隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展與普及，前端應(yīng)用的規(guī)模變得越來越大，用戶與網(wǎng)頁的交互也變得越來越復(fù)雜。為了提高電廠信息管理系統(tǒng)前端頁面的操作體驗和管理效果，本文提出了基于React的電廠信息管理系統(tǒng)前端頁面設(shè)計方案，電廠信息管理系統(tǒng)的開發(fā)前端React框架和后端的SSM框架，客戶端與服務(wù)器端的功能分離，可以快速發(fā)現(xiàn)并定位問題，整體代碼可維護性高。

本文是基于React架構(gòu)的電廠信息管理系統(tǒng)前端頁面設(shè)計。主要對Web前端開發(fā)相關(guān)技術(shù)進行了研究，然后分析和設(shè)計了React的設(shè)計思想。最后具體介紹了采用React框架構(gòu)建電廠信息管理系統(tǒng)前端頁面的步驟。

1 電廠信息管理系統(tǒng)前端頁面功能分析

首先，需要根據(jù)電廠信息管理系統(tǒng)的實際應(yīng)用場景和環(huán)境，做詳細(xì)的功能需求分析。結(jié)合電廠信息管理系統(tǒng)的服務(wù)對象和服務(wù)要求，可以認(rèn)定該系統(tǒng)需要實現(xiàn)電力生產(chǎn)過程中的電力監(jiān)管和數(shù)據(jù)傳輸、查看、下載等功能，從而能夠更好地服務(wù)于電力生產(chǎn)和管理過程。電廠信息管理系統(tǒng)的需求如圖1所示。

圖1中展示了電廠信息管理系統(tǒng)前端頁面的所需功能，包含管理人員信息、監(jiān)控畫面和電力生產(chǎn)信息等信息，能夠全方位展示和監(jiān)管電廠生產(chǎn)信息，推動電力生產(chǎn)信息化的進程。

一個完善可靠的電廠信息管理系統(tǒng)前端頁面分為如下幾個功能模塊：登陸認(rèn)證服務(wù)體系、生產(chǎn)過程監(jiān)控、生產(chǎn)數(shù)據(jù)展示和下載等需求模塊。

（1）管理認(rèn)證服務(wù)體系。在網(wǎng)絡(luò)高度發(fā)展的今天，網(wǎng)絡(luò)體系的安全性一直是各個用戶關(guān)注的焦點。為了保證電廠信息管理系統(tǒng)訪問用戶的真實性、安全性，及用戶請求的合理性和邏輯性，從而保證服務(wù)器、數(shù)據(jù)庫免受網(wǎng)絡(luò)黑客、病毒等攻擊而造成系統(tǒng)崩潰等情況，該系統(tǒng)設(shè)立的認(rèn)證服務(wù)系統(tǒng)能夠通過認(rèn)證系統(tǒng)內(nèi)注冊的用戶信息，登陸服務(wù)系統(tǒng)，進行數(shù)據(jù)查看和下載。電廠信息管理系統(tǒng)的管理認(rèn)證系統(tǒng)包含以下幾個部分：注冊、登錄、密碼管理和退出登陸等。

（2）生產(chǎn)過程監(jiān)控。為保證電力生產(chǎn)過程中關(guān)鍵環(huán)節(jié)的安全和穩(wěn)定，本系統(tǒng)設(shè)有生產(chǎn)過程監(jiān)控界面，結(jié)合實際生產(chǎn)環(huán)節(jié)的監(jiān)控攝像頭，實時監(jiān)控生產(chǎn)過程，同時監(jiān)控并顯示關(guān)鍵生產(chǎn)數(shù)據(jù)，對于預(yù)警范圍內(nèi)的數(shù)據(jù)進行預(yù)警，確保生產(chǎn)設(shè)備安全穩(wěn)定運行[1]。

（3）生產(chǎn)數(shù)據(jù)展示和下載。電力生產(chǎn)過程中，除了關(guān)鍵環(huán)節(jié)的監(jiān)控，其他生產(chǎn)數(shù)據(jù)和資料也需要進行展示和下載。電廠信息管理系統(tǒng)通過與后臺數(shù)據(jù)庫的數(shù)據(jù)交換，讀取數(shù)據(jù)，并在前端頁面以圖表的方式展示，同時能夠?qū)?shù)據(jù)進行篩選、分析和下載，有助于專業(yè)人員對電力生產(chǎn)過程進行分析和優(yōu)化。

2 電廠信息管理系統(tǒng)總體架構(gòu)設(shè)計

本文根據(jù)電廠信息管理系統(tǒng)的系統(tǒng)，設(shè)計了系統(tǒng)總體架構(gòu)圖，如圖2所示?，F(xiàn)今常見的網(wǎng)絡(luò)架構(gòu)模式有B/S和C/S模式，結(jié)合本文設(shè)計系統(tǒng)的實際應(yīng)用場景，選用B/S架構(gòu)模式進行開發(fā)[2，3]。該系統(tǒng)在B/S模式下被分為瀏覽器端、服務(wù)器端和數(shù)據(jù)采集端三個部分[4]。

2.1 瀏覽器端

B/S模式即瀏覽器/服務(wù)器模式，以瀏覽器為主要的開發(fā)平臺，考慮到本系統(tǒng)的用戶和使用場景，Web瀏覽器在PC機中作為預(yù)裝機的桌面應(yīng)用軟件之一，在開發(fā)和使用上能夠給開發(fā)者和使用者帶來極大的便利。對于系統(tǒng)開發(fā)者而言，不需要增改開發(fā)版本來適應(yīng)不同的操作系統(tǒng)；而對于該系統(tǒng)的使用者來說，也無需額外下載桌面應(yīng)用軟件來訪問和操作系統(tǒng)，僅需打開瀏覽器輸入網(wǎng)址即可進入電廠信息管理系統(tǒng)界面[5]。

電廠信息管理系統(tǒng)通過HTTPS協(xié)議實現(xiàn)瀏覽器端和服務(wù)器端的安全通訊，通過服務(wù)器端進行API通信和瀏覽器端靜態(tài)資源下載，從而為使用者提供實時的動態(tài)交互和數(shù)據(jù)監(jiān)控。系統(tǒng)用戶在瀏覽器端通過鼠標(biāo)或鍵盤等交互設(shè)備進行網(wǎng)頁操作、跳轉(zhuǎn)等，系統(tǒng)通過網(wǎng)絡(luò)向系統(tǒng)后臺進行數(shù)據(jù)請求，進而更新前端頁面的顯示樣式和數(shù)據(jù)。

2.2 服務(wù)器端

系統(tǒng)服務(wù)器端通過響應(yīng)瀏覽器端的請求，為系統(tǒng)用戶提供日常數(shù)據(jù)服務(wù)和后臺資源支持。系統(tǒng)服務(wù)器端是以服務(wù)器集群為單位，主要包括代理服務(wù)器、數(shù)據(jù)庫服務(wù)器和文件服務(wù)器等。

服務(wù)器集群中，代理服務(wù)器主要用于前后端HTTPS請求的反向代理，通過解析HTTPS請求路徑并轉(zhuǎn)發(fā)到其他服務(wù)器。數(shù)據(jù)庫服務(wù)器是專用于數(shù)據(jù)庫的服務(wù)器，主要為文件服務(wù)器提供數(shù)據(jù)支持，以保證服務(wù)器數(shù)據(jù)請求的及時響應(yīng)。文件服務(wù)器，同時也被稱為靜態(tài)資源服務(wù)器，負(fù)責(zé)部署電廠信息管理系統(tǒng)前端React項目，主要為前端提供靜態(tài)資源。三類服務(wù)器相互協(xié)作，共同服務(wù)于電廠信息管理系統(tǒng)。

2.3 數(shù)據(jù)采集端

數(shù)據(jù)采集端主要用于對實際數(shù)據(jù)或者其他來源數(shù)據(jù)進行采集和計算，形成統(tǒng)一的格式傳輸給數(shù)據(jù)庫服務(wù)器，并存儲在數(shù)據(jù)庫中。實際應(yīng)用中，由于數(shù)據(jù)的來源不同，數(shù)據(jù)采集端的種類和樣式有很多。本系統(tǒng)中，主要用到了攝像頭數(shù)據(jù)采集端和生產(chǎn)數(shù)據(jù)采集端，通過采集設(shè)備和控制器，將處理過的數(shù)據(jù)傳給數(shù)據(jù)庫服務(wù)器。由于監(jiān)測點繁多且分散，數(shù)據(jù)采集端的選擇和布置需要經(jīng)過仔細(xì)研究和考證，以保證數(shù)據(jù)的可靠和高效。

3 React框架

電廠信息管理系統(tǒng)所采用的React框架，是最初由Facebook公司開發(fā)的內(nèi)部項目，該框架采用聲明式的設(shè)計思想，使得該框架使用起來高效且靈活。React憑借其獨特的設(shè)計思路和出眾的性能，得到了廣大開發(fā)者的青睞，以成為當(dāng)今Web前端開發(fā)的一款主流框架[6]。

React卓越的設(shè)計思想主要體現(xiàn)在以下三個方面：

（1）專注視圖層。React并不是完整的 MVC/MVVM 框架，它專注于提供清晰、簡潔的 View（視圖）層解決方案，同時也是包含有視覺（View）和控制器（Controller）的庫。對于業(yè)務(wù)邏輯較為復(fù)雜的系統(tǒng)，開發(fā)者可以根據(jù)實際情況自行選擇業(yè)務(wù)邏輯框架，并根據(jù)需求搭配Flux、Redux、GraphQL/Relay來使用。

（2）高效渲染。React的開發(fā)者為其引入了虛擬DOM（Virtual DOM）機制，當(dāng)前端組件需要更新的時候，React會創(chuàng)建一個新的虛擬DOM并與之前儲存的DOM通過diff算法進行比較，僅對需要改變的DOM進行修改和加載，大大減少了加載量和加載時間。同時幫助解決了跨瀏覽器問題，標(biāo)準(zhǔn)化的API，能兼容新版本的瀏覽器，方便和其他平臺集成。

（3）組件化。React推薦以組件的方式去重新思考UI構(gòu)成，開發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個組件都獨立封裝，開發(fā)者按照界面模塊自然劃分的方式來組織和編寫代碼，整個UI界面是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。

4 電廠信息管理系統(tǒng)前端架構(gòu)設(shè)計

本電廠信息管理系統(tǒng)的前端架構(gòu)中，采用視圖層、行為層和數(shù)據(jù)層的三層架構(gòu)，具體架構(gòu)模式如圖3所示。

圖3中三層架構(gòu)各司其職，其中視圖層主要負(fù)責(zé)處理視圖顯示；而行為層則根據(jù)前端用戶不同的交互指令觸發(fā)不同的操作行為；數(shù)據(jù)層則通過監(jiān)聽行為類型和響應(yīng)回調(diào)函數(shù)來處理該行為邏輯，同時向服務(wù)器異步發(fā)送API請求，進行自身數(shù)據(jù)更新；最后，視圖層通過監(jiān)聽數(shù)據(jù)層，將數(shù)據(jù)變化反映到不同的視圖中進行顯示。

當(dāng)用戶通過瀏覽器訪問電廠信息管理系統(tǒng)網(wǎng)頁界面時，代理服務(wù)器會自動將頁面請求通過HTTPS發(fā)送到服務(wù)器集群中的文件服務(wù)器上，之后，文件服務(wù)器加載系統(tǒng)首頁的JavaScript腳本與CSS文件。

當(dāng)用戶需要訪問其他界面時，根據(jù)跳轉(zhuǎn)頁面指向，React將自動重新渲染顯示界面，并不需要重新建立HTTPS請求。當(dāng)用戶請求涉及后端數(shù)據(jù)時，代理服務(wù)器將API請求發(fā)送到數(shù)據(jù)庫服務(wù)器，對數(shù)據(jù)庫執(zhí)行讀改刪插等操作，并通過JSON文件向前端返回所需數(shù)據(jù)。

5 結(jié)語

本文在電廠信息管理系統(tǒng)的前端設(shè)計方案中，采用B/S模式，同時應(yīng)用React框架來構(gòu)建瀏覽器端的UI頁面，通過對React設(shè)計思想的分析，結(jié)合頁面布局的預(yù)先設(shè)計，創(chuàng)建了可復(fù)用、易于測試、能靈活集成的組件，從而能達到高效開發(fā)的目的。構(gòu)建了前端頁面的軟件架構(gòu)，從整體上分析了前端在頁面操作中的工作流程和步驟，整體操作簡單、靈活，開發(fā)和維護成本較低，擴展性和可移植性高。前端技術(shù)的應(yīng)用促進了電廠管理信息化的發(fā)展，在未來具有較為廣泛的應(yīng)用前景。

參考文獻：

[1]張孟娟.電力運營監(jiān)控可視化管理研究[D].西南財經(jīng)大學(xué)， 2013.

[2]趙巧花.C/S和B/S混合架構(gòu)在電力管理系統(tǒng)中的應(yīng)用研究[J]. 軟件導(dǎo)刊，2012（05）：86-87.

[3]徐晶晶.電力生產(chǎn)管理系統(tǒng)的設(shè)計與實現(xiàn)[D].電子科技大學(xué)， 2013.

[4]王少麗.基于AngularJS的前端開發(fā)框架的設(shè)計與應(yīng)用[D].大連海事大學(xué)，2018.

[5]劉旭.廣電前端機房管理信息系統(tǒng)的設(shè)計與實現(xiàn)[D].黑龍江大學(xué)，2014.

[6]祁暉，底曉強，畢琳等.基于React的MOOC移動學(xué)習(xí)平臺建設(shè)研究[J].教育現(xiàn)代化，2016（38）：261-262.

[7]彭云建，鄧飛其.電力綜合信息管理系統(tǒng)面向?qū)ο髷?shù)據(jù)庫的建模[J].電力系統(tǒng)及其自動化學(xué)報，2007（01）：49-54.

[8]張文軍.基于AngularJS的山洪預(yù)警與推演系統(tǒng)的前端設(shè)計與實現(xiàn)[D].華中科技大學(xué)，2015.

[9]司開放.基于React的遠程會診系統(tǒng)設(shè)計[J].信息與電腦（理論版）， 2017（22）：105-106.

[10]林嘉婷.試談前后端分離及基于前端MVC框架的開發(fā)[J].電腦編程技巧與維護，2016（23）：5-8.

[11]路雯雯.支持前后端分離的JavaScript開發(fā)框架的研究及在內(nèi)容管理系統(tǒng)中的應(yīng)用[D].山東大學(xué)，2017.

作者簡介：祝廣場（1984-），男，河南人，碩士，工程師，研究方向：熱工自動化。