基于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-），男，河南人，硕士，工程师，研究方向：热工自动化。