Design And Implementation Of Visual Editing System Based On Components

With the development of Internet technology and the increasing volume of data,the requirement for front-end is higher and higher.Because the traditional front-end development mode requires higher technical threshold,and the style and function of pages are similar,most of them are repetitive work,which seriously affects the efficiency and enthusiasm of front-line staff.Therefore,in order to solve these problems,The company decided to use component-based technology and the popular front end technology framework to develop component-based ERP system,so as to improve the efficiency of front-end page development.The component based visual editing system will provide the front end developers with all kinds of UI components,visual operation and platform services after encapsulation,thus greatly improving the efficiency of front-end page development.The implementation of the system mainly involves components,visualization and generation of code generation.Different from the traditional front-end page development mode,in component-based visual editing system,the components commonly used in the page are abstracted,encapsulated by components,encapsulated the internal implementation details of the components,provide a unified interface for users,and use the popular front end technology framework Vue to improve the browser's performance.The visualization of the system is convenient.Visualization of the attributes and data logic of the components is carried out through the encapsulation of Vue technology.Users are allowed to edit the contents of the page by dragging,clicking,and so on,so as to improve the efficiency of the front page development.The components that need to be encapsulated are declared in the JSON format in the system,and the HTML model,the CSS model and the JS modelimplemented in the system are used.The actual code of the component is generated and finally assembled into the front code of the complete custom page.At present,the system has not yet been tested in the company,but this paper has carried out detailed requirements analysis and design,and rigorous operational testing.It is expected that it can be applied to the company and get good user feedback,thus proving the research value in front end visualization.