基于React的電廠信息管理系統(tǒng)前端頁面設(shè)計(jì)

祝廣場(chǎng) 柯亞唯

摘 要：隨著現(xiàn)代網(wǎng)絡(luò)應(yīng)用的不斷發(fā)展，前端應(yīng)用的規(guī)模變得越來越大，交互越來越復(fù)雜。為了提高電廠信息管理系統(tǒng)前端頁面的操作體驗(yàn)和管理效果，本文提出了基于React的電廠信息管理系統(tǒng)前端頁面設(shè)計(jì)方案，在該方案的前端項(xiàng)目中，應(yīng)用React作為前端UI框架，該框架結(jié)合了高效率的Virtual DOM渲染技術(shù)，讓構(gòu)建可組合的組件思路可行。本方法專注于組件自身的邏輯、復(fù)用及測(cè)試，適用于開發(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)前端頁面的操作體驗(yàn)和管理效果，本文提出了基于React的電廠信息管理系統(tǒng)前端頁面設(shè)計(jì)方案，電廠信息管理系統(tǒng)的開發(fā)前端React框架和后端的SSM框架，客戶端與服務(wù)器端的功能分離，可以快速發(fā)現(xiàn)并定位問題，整體代碼可維護(hù)性高。

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

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

首先，需要根據(jù)電廠信息管理系統(tǒng)的實(shí)際應(yīng)用場(chǎng)景和環(huán)境，做詳細(xì)的功能需求分析。結(jié)合電廠信息管理系統(tǒng)的服務(wù)對(duì)象和服務(wù)要求，可以認(rèn)定該系統(tǒng)需要實(shí)現(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)信息，推動(dòng)電力生產(chǎn)信息化的進(jìn)程。

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

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

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

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

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

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

2.1 瀏覽器端

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

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

2.2 服務(wù)器端

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

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

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

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

3 React框架

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

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

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

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

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

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

本電廠信息管理系統(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ù)來處理該行為邏輯，同時(shí)向服務(wù)器異步發(fā)送API請(qǐng)求，進(jìn)行自身數(shù)據(jù)更新；最后，視圖層通過監(jiān)聽數(shù)據(jù)層，將數(shù)據(jù)變化反映到不同的視圖中進(jìn)行顯示。

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

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

5 結(jié)語

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

參考文獻(xiàn)：

[1]張孟娟.電力運(yùn)營(yíng)監(jiān)控可視化管理研究[D].西南財(cái)經(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è)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué)， 2013.

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

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

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

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

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

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

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

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

作者簡(jiǎn)介：祝廣場(chǎng)（1984-），男，河南人，碩士，工程師，研究方向：熱工自動(dòng)化。