Front-end Design And Implementation Of Smart Pipe Corridor Platform Based On React

In recent years,with the gradual deepening of smart city construction,the corridor as a city's "capillaries" has become an important part of smart city construction.Smart pipe corridor is a unified management and maintenance platform for comprehensive pipe corridors that fully utilizes Internet technology in the field of integrated pipe corridor management.Due to the increase in business due to the expansion of integrated pipe corridor access facilities,the number of modules due to management and maintenance has increased.Existing smart pipe corridor platforms cannot meet the increasing business requirements.How to quickly iterate the existing smart pipe corridor platforms has become the key to the further development of the system.In this paper,from the perspective of improving development efficiency and system scalability,according to the characteristics of the existing smart pipe corridor management platform,the front-end and back-end independent development of loosely coupled methods are used,and the design and implementation of the front end of the smart pipe corridor platform are given.The main work contents are as follows:(1)Construct the front-end architecture of the smart pipe corridor platform.The React framework is selected as the JavaScript library for building user interfaces,and the front-end static resources are packaged through Webpack,which implements the on-demand introduction strategy,strictly divides the development environment and release environment,avoids the introduction of unnecessary tools,and achieves the purpose of reducing packaging deployment time.(2)In order to improve the front-end development efficiency and code robustness,this paper proposes a method for developing the intelligent pipe gallery component library Windom-UI-Zero.Extract,encapsulate,and publish common UI components to npm,effectively reduce the code repetition rate,and reduce UI attention under the same conditions.(3)The front-end and back-end separation strategies are adopted in the development of the smart pipe corridor platform.In the front-end and back-end joint debugging,in terms of data transmission optimization,a GraphQL service is designed as the middle layer of the front-end and back-end joint debugging.Effectively reduce the pressure on the server,and achieve the purpose of adapting multiple services on the same interface.(4)Designed and implemented the business function module of the intelligent pipe gallery platform.The front-end business of the platform mainly includes five major modules:intelligent monitoring,patrol inspection and maintenance,emergency command,corridor operation,and operation management.Based on the completion of each module,it has been compatible with mainstream browsers.Finally,the front-end development of the smart pipe gallery platform was completed,and the platform was tested and verified.