Component-Based Backstage Management Page Visual Construction System Design And Implementation

The "Internet plus" era is driving the close connection between the Internet and all trades and professions,the demand of Web application is also growing.Most of the front-end functions required by this kind of system are similar,the page structure is relatively fixed,the overall demand is huge,and the UI style requirements are low.Their front-end functions are mainly to display and manage data,as well as manage user rights.Essentially,they are for data create,delete,update,read operations.There are many repetitive work in the front-end development process.In the traditional front-end web page construction process,firstly,the interface prototype is designed by the art designer,then the developer program and generate static web pages according to the design,and write logic code to generate dynamic pages,in any step,the developer may modify them to suit changing needs.Thus,there are many inefficiencies in the development of Web pages.For improving development efficiency,automatic development has become an important direction of front-end page development,the automatic construction of the backstage management system page is conducive to avoid the defect of such inefficient Web page development,which is significance to the development of the Internet.Aiming at the fixed function and structure of the backstage management system Web page,and taking the improvement of the development efficiency of the front end of the system as the starting point,this paper deeply investigates the development status of the existing Web page construction tools,and puts forward a solution for the visualization and automatic construction of backstage management pages.Firstly,this paper develops the system's front-end based on the React front-end framework and uses Ant Design Pro scaffold to build the backstage management console to construct a visual interactive operation interface.Secondly,this paper analyzes and summarizes the common functions of backstage management system,through component-based methods to develop a low-coupling,reusable and interactive front-end component library using ECharts chart library and Ant Design UI component style library.The drag,zoom,add and delete functions of components are designed and implemented,based on the responsive flow grid layout,components can be flexibly arranged on the page to generate personalized page layout.The system also has functions such as automatic configuration of navigation routing and access rights,visual dynamic component editing,backstage data interface binding and interaction,data operation item setting,operation data automatic generation and saving,cross-device response,etc.This system can build functionally satisfied backstage management pages through visual operation combined with automatic development process,screens the details of the Web page coding,simplifies front-end development,reduces costs,increases the exploring efficiency and is conducive to coping with the continuous demand for Web pages generated by the rapid development of the Internet.