Visual configuration rendering method and system based on Vue modularizationand terminal

Abstract

The invention belongs to the technical field of data analysis and processing, and discloses a visual configuration rendering method and system based on Vue modularization, and a terminal. The method comprises: configuring a mapping relation of component names; analyzing the configuration; instantiating a construction function of the component in the presence of the module name or in the case of meeting a rendering condition; developing single file components corresponding to the visual area and the attribute configuration area; data initialization, service interaction of a visual area and an attribute configuration area, and dynamic mounting of components are carried out; and data initialization backfilling, binding, interaction between the two regions and outward provision of an object for acquiring the component configuration data in a prototype mode are carried out. According to the method, the problems that a traditional template engine or a spliced html character string rendering mode is poor in code readability and leads to the whole body are solved, the problem of high coupling degree is also solved, and the code readability is improved; and the responsibility of developers is clearer, the development efficiency is greatly improved, and the user experience is improved.

Description

technical field [0001] The invention belongs to the technical field of data analysis and processing, and in particular relates to a visual configuration rendering method, system and terminal based on Vue componentization. Background technique [0002] At present, with the rise of the mobile Internet, the requirements for developers are getting higher and higher, and the responsiveness of pure browsers can no longer meet the high requirements of user experience. We often need to develop for the needs of mobile terminals. In order to ensure the user experience, it is also necessary to improve the development efficiency and respond quickly to the project. The demand for visual construction is getting more and more attention. You only need to drag and drop the required components on the page to assemble the page, and you can build it online app. So to achieve, you must first provide the function of configuring the WYSIWYG Web page. [0003] However, now everyone has been accus...

AI Technical Summary

Problems solved by technology

[0004] In a sense, it is indeed possible to achieve dynamic rendering of visual configuration by using a pure template engine or directly splicing Html elements with strings, but there are three problems in this way: (1) At present, front-end componentization and engineering are already The industry's front-end development trend, under the front-end component architecture, using traditional template engines or strings to directly splice Html elements and bind events for the final results does not conform to its development model; (2) through traditional template engines Or splicing html strings for visualization and the rendering method of the attribute configuration area has poor code readability. If you need to add the display style of the component in the visualization configuration area, or add configuration in the attribute configuration area, the workload is relatively large and problems may occur; (3) Visualization through traditional template engines or splicing html strings and rendering methods in attribute configuration areas are highly coupled between codes of each component, which cannot meet the needs of developers for custom development or maintenance of components. It is necessary to re-read the whole the code

[0006] (1) The method of using traditional template engines or strings to directly splice Html elements and bind events for the final generated results does not conform to its development model

[0007] (2) The code readability of the visualization through the traditional template engine or splicing html strings and the rendering method of the attribute configuration area is poor. If you need to add the display style of the component in the visual configuration area, or add configuration in the attribute configuration area, work If the volume is relatively large, it is easy to cause problems; the coupling degree between each component code is large, which cannot meet the needs of developers to customize development or maintain components, and it is necessary to re-read the overall code

Images