基于React的電廠信息管理系統前端頁面設計

祝廣場 柯亞唯

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

關鍵詞：電廠信息管理系統；React；前端UI框架

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

0 引言

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

本文是基于React架構的電廠信息管理系統前端頁面設計。主要對Web前端開發相關技術進行了研究，然后分析和設計了React的設計思想。最后具體介紹了采用React框架構建電廠信息管理系統前端頁面的步驟。

1 電廠信息管理系統前端頁面功能分析

首先，需要根據電廠信息管理系統的實際應用場景和環境，做詳細的功能需求分析。結合電廠信息管理系統的服務對象和服務要求，可以認定該系統需要實現電力生產過程中的電力監管和數據傳輸、查看、下載等功能，從而能夠更好地服務于電力生產和管理過程。電廠信息管理系統的需求如圖1所示。

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

一個完善可靠的電廠信息管理系統前端頁面分為如下幾個功能模塊：登陸認證服務體系、生產過程監控、生產數據展示和下載等需求模塊。

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

（2）生產過程監控。為保證電力生產過程中關鍵環節的安全和穩定，本系統設有生產過程監控界面，結合實際生產環節的監控攝像頭，實時監控生產過程，同時監控并顯示關鍵生產數據，對于預警范圍內的數據進行預警，確保生產設備安全穩定運行[1]。

（3）生產數據展示和下載。電力生產過程中，除了關鍵環節的監控，其他生產數據和資料也需要進行展示和下載。電廠信息管理系統通過與后臺數據庫的數據交換，讀取數據，并在前端頁面以圖表的方式展示，同時能夠對數據進行篩選、分析和下載，有助于專業人員對電力生產過程進行分析和優化。

2 電廠信息管理系統總體架構設計

本文根據電廠信息管理系統的系統，設計了系統總體架構圖，如圖2所示。現今常見的網絡架構模式有B/S和C/S模式，結合本文設計系統的實際應用場景，選用B/S架構模式進行開發[2，3]。該系統在B/S模式下被分為瀏覽器端、服務器端和數據采集端三個部分[4]。

2.1 瀏覽器端

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

電廠信息管理系統通過HTTPS協議實現瀏覽器端和服務器端的安全通訊，通過服務器端進行API通信和瀏覽器端靜態資源下載，從而為使用者提供實時的動態交互和數據監控。系統用戶在瀏覽器端通過鼠標或鍵盤等交互設備進行網頁操作、跳轉等，系統通過網絡向系統后臺進行數據請求，進而更新前端頁面的顯示樣式和數據。

2.2 服務器端

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

服務器集群中，代理服務器主要用于前后端HTTPS請求的反向代理，通過解析HTTPS請求路徑并轉發到其他服務器。數據庫服務器是專用于數據庫的服務器，主要為文件服務器提供數據支持，以保證服務器數據請求的及時響應。文件服務器，同時也被稱為靜態資源服務器，負責部署電廠信息管理系統前端React項目，主要為前端提供靜態資源。三類服務器相互協作，共同服務于電廠信息管理系統。

2.3 數據采集端

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

3 React框架

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

React卓越的設計思想主要體現在以下三個方面：

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

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

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

4 電廠信息管理系統前端架構設計

本電廠信息管理系統的前端架構中，采用視圖層、行為層和數據層的三層架構，具體架構模式如圖3所示。

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

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

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

5 結語

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

參考文獻：

[1]張孟娟.電力運營監控可視化管理研究[D].西南財經大學， 2013.

[2]趙巧花.C/S和B/S混合架構在電力管理系統中的應用研究[J]. 軟件導刊，2012（05）：86-87.

[3]徐晶晶.電力生產管理系統的設計與實現[D].電子科技大學， 2013.

[4]王少麗.基于AngularJS的前端開發框架的設計與應用[D].大連海事大學，2018.

[5]劉旭.廣電前端機房管理信息系統的設計與實現[D].黑龍江大學，2014.

[6]祁暉，底曉強，畢琳等.基于React的MOOC移動學習平臺建設研究[J].教育現代化，2016（38）：261-262.

[7]彭云建，鄧飛其.電力綜合信息管理系統面向對象數據庫的建模[J].電力系統及其自動化學報，2007（01）：49-54.

[8]張文軍.基于AngularJS的山洪預警與推演系統的前端設計與實現[D].華中科技大學，2015.

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

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

[11]路雯雯.支持前后端分離的JavaScript開發框架的研究及在內容管理系統中的應用[D].山東大學，2017.

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