Front-end Component Visual Editing Method Based on Data Analysis

Abstract

The present invention discloses a front-end component visual editing method based on data analysis, belonging to the technical field of front-end component visual editing. The present invention imports existing vue component files, reads the component source code for data analysis and structural decomposition, formats the decomposed code, and converts it into dom structure elements suitable for browsers; constructs tree structure element nodes of a web page, reads data objects in the global parser, and according to the vue component parsing rules, reads the template, script, and style content from the parser object to reconstruct a new vue component; through the constructed complete web page template tree, performs component code reconstruction, and outputs a json structure and new vue component code, thereby realizing interface structure adjustment and solving the problem of parsing errors of components with custom structures in non-standard component libraries when visual tools on the Internet perform structure adjustment based on interface visual dragging.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end component visual editing, and specifically to a method for visual editing of front-end components based on data analysis. Background Art

[0002] In project development, it is often necessary to adjust the vue pages of existing projects, especially when it comes to the adjustment of complex layouts. Previously, the method of manually modifying the source code through front-end development was used for adjustment, which was time-consuming, laborious and prone to errors. At present, many visualization tools on the Internet are based on interface-based visual dragging to achieve structural adjustment, but they cannot handle the problem that non-standard components cannot be effectively displayed in the interface, resulting in the error and loss of node position information and various attribute values, and thus the front-end development efficiency is poor. Summary of the Invention

[0003] The purpose of the present invention is to provide a method for visual editing of front-end components based on data analysis to solve the problems raised in the above background art.

[0004] To solve the above technical problems, the present invention provides the following technical solution: A method for visual editing of front-end components based on data analysis, the method comprising the following steps:

[0005] S1. Import an existing vue component file, read the component source code for data analysis and structural decomposition, decompose the component source code into three parts: template, script, and style, and create a global parser object;

[0006] S2. Format the decomposed code and convert it into dom structure elements suitable for browsers;

[0007] S3. Build the tree structure element nodes of the web page, form a complete web page template tree structure by traversing the converted structure elements, and mark the type and attributes of each node;

[0008] S4. Read the data object in the global parser, create a new vue instance according to the vue component parsing rules, and read the template, script, and style content from the parser object to reconstruct a new vue component;

[0009] S5. Through the constructed complete web page template tree, perform operations of adding new nodes, editing nodes, and deleting nodes at specified nodes;

[0010] S6. Perform component code reconstruction and output the json structure and the new code of the vue component.

[0011] According to the above technical solution, in step S1, the data analysis refers to judging whether the imported file is a standard vue component, specifically including:

[0012] Set label search in the source code to search for several key labels, including: " <template>", "<script", "<style"; if not present <template>Node content, it is determined that it is not a standard vue component. If it exists <template>Node content, analyze whether the imported file is a vue component according to the label position relationship. If it is not a vue component, the operation ends.

[0013] The label position relationship analysis includes: the basic structure of the standard vue component = the component template content

[0014] <template>+Component Scripts <script>+组件样式<style>三各部分内容。其中

[0015] <template>模板可能包含其他嵌套的<template>内容，通过对内容字符串循环分析template标签，如果所有template标签都是完美闭合的标签，那么最外层的template标签内的内容就可以确定为整个组件的模板内容。如果所有template标签不闭合或者标签之间是并列关系的就认为不是标准的vue组件。Vue组件可允许忽略script和style标签，所有这两个标签在判断是否vue组件的方法中不做重点分析。

[0016] 根据上述技术方案，在步骤S1中，所述结构分解包括：

[0017] 定义分解词素的开始标签"<template”以及分解词素的结束标签"< / template>”,构建一个stack栈用来存放从源代码中匹配到分解词素的开始标签的位置，从头开始循环搜索vue源代码，查找分解词素的开始标签和分解词素的结束标签的内容，如果找到分解词素的开始标签就将开始标签的位置入stack栈，当匹配到分解词素的结束标签就将stack栈最后一个元素出栈，将出栈的元素作为字符串起始位置start，直到stack栈的内容为空时候，表示完成封闭的分解词素的提取，记录当前的位置index,其中，分解词素的代码就是start和index之间的字符串内容；

[0018] 其中，所述分解词素指模板、脚本和样式。

[0019] 组件中script脚本和style样式,一般不会有嵌套的结构，判断方法相对比较简单，通过查找起始标签<script、< / script> , the content between the two is the script content of the component. Then find the start tag <style、,两者之间内容就是组件的样式内容。

[0020] According to the above technical solution, in step S1, the built-in objects in the global parser include: data conversion related methods, templates, scripts, styles, data sources and method events, which are used to store the corresponding content of the component, and save the decomposed morpheme content of the component source code to the corresponding objects of the parser respectively. This facilitates the subsequent component adjustment and interaction.

[0021] According to the above technical solution, in step S2, the formatting process includes:

[0022] For the decomposed script and style codes, regular replacement is used to remove redundant blank lines and spaces, and replacement operations are performed according to the different characteristics and iconic symbols of the script and style. Line breaks are added and corresponding code indentation operations are performed based on the code level to achieve code formatting.

[0023] The conversion into DOM structural elements suitable for the browser includes:

[0024] In the above technical solution, mainly because modern browsers cannot directly support elementUI and other tags, it is necessary to use the regular replacement method to uniformly replace the component tags of the elementUI component library with div tags that the browser can recognize, and add tags in the div tags to record the tags and corresponding attributes of the original elemenuI components, so as to facilitate the restoration of component tags and attribute values ​​when reconstructing the component code later. Get the nested html code of the pure div tag. After this code is converted, it can be used for the node tree construction work in the third step later.

[0025] According to the above technical solution, in step S3, it specifically includes:

[0026] Create a new div (standard web page block tag) dom0 (custom node object) node, assign the html code to the innerHTML of the new dom0 (the innerHTML attribute of the custom node), and form a html nested dom element;

[0027] Create an empty json object, analyze and process the dom0 code, recursively extract the key information of component labels, attributes and text from the dom0 elements, and save them in the json object. The json object stores the key information related to each node name, attribute value, text content and child nodes of the node.

[0028] Create an empty tree node, analyze and process the JSON object, traverse the JSON object, assign the corresponding information of each JSON object node to the corresponding child node of the tree, and at the same time add corresponding operation buttons according to the node type. The operation buttons include add, edit, and delete;

[0029] According to the file structure of the vue + elemenu (elementui is an external UI component library, and the UI components of VUE use the elementUI component library), add an "add" button to the tree node elements of the tree that allow child nodes to exist, which is convenient for the operation of adding new child nodes. An edit and delete button will be added to each tree node for the modification and deletion operations of the node. During the construction of the node, a mark allowing drag-and-drop operations will be added to each node, and it is judged whether the node can be dragged through the mark. For elements with child nodes, a checkbox will be added in front for the collapse and expansion operations of the child nodes under the node, which is convenient for finding nodes. So far, the tree structure of the web page is constructed.

[0030] According to the above technical solution, in step S4, it further includes:

[0031] After the new vue component is mounted, the component data, event methods, and the internal function content of each life cycle of the vue component can be extracted from it, and the corresponding component data, event methods, and the internal function content of each life cycle of the vue component are reassigned to the corresponding objects of the parser; this is convenient for subsequent editing and interaction.

[0032] Construct an independent embedded window in the interface display area to display the appearance effect of the reconstructed component. On the same interface, the tree structure data and the embedded window are set at the left and right ends of the interface. When the tree structure data on the left is modified, the component will be re-rendered and synchronously rendered and displayed in the embedded window on the right, realizing the visual effect of editing. This way of operating on the left and displaying on the right is convenient for viewing the modified effect in time during editing.

[0033] According to the above technical solution, in step S5, it further includes:

[0034] Through the constructed dom structure tree, add operations for adding, editing, and deleting nodes at the specified node. The Dom tree supports mouse dragging, and the position of the corresponding node structure is adjusted through mouse dragging;

[0035] The function of adding a new node will perform a custom component type selection in the pop-up interface;

[0036] The editing node supports operations such as property adjustment, data binding, event addition, and data source selection for the selected components in the pop-up window, supports adding custom properties and script codes, and the modification or addition of script events can update the corresponding content of the parser object in a timely manner;

[0037] The deletion node can delete the currently selected node, removing the node from the dom tree.

[0038] The Dom tree supports the collapse and expansion functions of nodes at different levels, facilitating node search during editing and reducing visual interference.

[0039] According to the above technical solution, in step S6, the component code refactoring includes:

[0040] Traverse and parse the edited dom tree structure to generate a data source in json structure, and at the same time, combine the regular replacement method to reconstruct the adjusted vue template code. Extract the latest script and style content from the parser object and splice them into a new vue component code. The system provides two data formats, json structure data source and vue component code, for users to choose to export and use.

[0041] Compared with the prior art, the beneficial effects achieved by the present invention are: This tool adjusts the interface structure by constructing a node tree, which is different from the current visualization tools on the Internet that achieve structure adjustment through interface-based visual dragging. This application can solve the parsing problem of components with custom structures in some non-standard component libraries in the interface through the method of node tree dragging and editing, which cannot be achieved by current interface-based visual dragging. In particular, non-standard components generally cannot be effectively displayed in the interface, but the position information and various attribute values of the node can be retained through the dom structure tree. The edited components are made to retain support for some non-standard components as much as possible. Description of the Drawings

[0042] The drawings are used to provide a further understanding of the present invention and constitute a part of the specification. They are used together with the embodiments of the present invention to explain the present invention and do not constitute a limitation to the present invention. In the drawings:

[0043] Figure 1 is a partial schematic diagram of the structural decomposition of the front-end component visualization editing method based on data analysis of the present invention;

[0044] Figure 2 is a partial schematic diagram of the new component function of the front-end component visualization editing method based on data analysis of the present invention. Detailed Embodiments

[0045] The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0046] Please refer to Figure 1 - Figure 2 , in this embodiment: A front-end component visual editing method based on data analysis is provided. The method includes: importing an existing vue component file, reading the component source code for data analysis and structure decomposition, decomposing the component source code into three parts: template, script, and style, and creating a global parser object;

[0047] The data analysis refers to judging whether the imported file is a standard vue component, specifically including:

[0048] Set tag search in the source code to search for several key tags, including: " <template>”, "<script”, "<style”; if not present <template>Node content is not a standard Vue component. If it exists <template>Node content. Analyze whether the imported file is a Vue component based on the tag position relationship. If it is not a Vue component, the operation ends.

[0049] The structure decomposition includes:

[0050] Define the start tag "<template" of the decomposed morpheme and the end tag of the decomposed morpheme "< / template> ", build a stack to store the position of the start tag of the decomposed morpheme matched from the source code, search the vue source code from the beginning, find the content of the start tag and the end tag of the decomposed morpheme, if the start tag of the decomposed morpheme is found, put the position of the start tag into the stack, when the end tag of the decomposed morpheme is matched, pop the last element of the stack, and use the popped element as the starting position of the string start, until the content of the stack is empty, it means that the extraction of the closed decomposed morpheme is completed, and the current position index is recorded, where the code of the decomposed morpheme is the string content between start and index;

[0051] The decomposed morphemes refer to templates, scripts and styles.

[0052] The built-in objects in the global parser include: data conversion related methods, templates, scripts, styles, data sources and method events, which are used to store the corresponding content of the component and save the decomposed morpheme content of the component source code to the corresponding objects of the parser respectively.

[0053] The creation of the parser object also includes:

[0054] Create a vueParser object to store the imported component source code and various decomposed data, including component template content, component data, component scripts, and component styles, convert the component to json data to form an updated template.

[0055] Format the decomposed code and convert it into DOM structure elements suitable for browsers;

[0056] The formatting process includes:

[0057] For the decomposed script and style codes, regular replacement is used to remove redundant blank lines and spaces, and replacement operations are performed according to the different characteristics and iconic symbols of the script and style. Line breaks are added and corresponding code indentation operations are performed based on the code level to achieve code formatting.

[0058] The conversion into DOM structural elements suitable for the browser includes:

[0059] Through the regular replacement method, the component tags of the elementUI component library are uniformly replaced with div tags that can be recognized by the browser. At the same time, tags are added in the div tags, the tags and corresponding attributes of the original elemenuI components are recorded, and the nested HTML code of the pure div tags is obtained.

[0060] Construct the tree structure element nodes of the web page. By traversing the converted structure elements, a complete web page template tree structure is formed, and the types and attributes of each node are marked, specifically including:

[0061] Create a new dom0 node of div, assign the html code to the innerHTML of the newly created dom0, and form the dom elements nested in html;

[0062] Create a new empty json object, analyze and process the code of dom0, recursively loop through the dom0 elements to extract the key information of component tags, attributes and text, and save it into the json object. The json object stores the relevant key information of each node name, attribute value, text content and the child nodes of this node;

[0063] Create an empty tree node, analyze and process the json object, traverse the json object, assign the corresponding information of each json object node to the corresponding child nodes of the tree, and at the same time add corresponding operation buttons according to the node type. The operation buttons include add, edit and delete;

[0064] According to the file structure of the vue+elemenu component, add an "add" button to the tree node elements of the tree that allow child nodes to exist. Each tree node will add an edit and delete button for the modification and deletion operations of this node. During the construction of the node, a mark allowing drag operation is added to each node at the same time. Whether the node can be dragged is judged by the mark. For elements with child nodes, a checkbox is added in front. The construction of the web page tree structure is completed.

[0065] Read the data object in the global parser, and create a new vue instance according to the vue component parsing rules. Read the template, script and style content from the parser object and reconstruct a new vue component;

[0066] After the new vue component is mounted, the component data, event methods, and internal function content of each life cycle of the vue component can be extracted from it, and the corresponding component data, event methods, and internal function content of each life cycle of the vue component are reassigned to the corresponding objects of the parser;

[0067] Construct an independent embedded window in the interface display area to display the appearance effect of the reconstructed component. On the same interface, the tree structure data and the embedded window are set at the left and right ends of the interface. When the tree structure data on the left is modified, the component will be re-rendered and synchronously rendered and displayed in the embedded window on the right to achieve the visual effect of editing.

[0068] Through the constructed DOM structure tree, operations such as adding new nodes, editing nodes, and deleting nodes are performed at the specified nodes. The DOM tree supports mouse dragging, and the corresponding node structure position is adjusted by mouse dragging;

[0069] The function of adding new nodes will select the custom component type in the pop-up interface;

[0070] Editing nodes supports operations such as property adjustment, data binding, event addition, and data source selection of the selected components in the pop-up window, supports adding custom attributes and script codes, and the modification or addition of script events can update the corresponding content of the parser object in a timely manner;

[0071] Deleting nodes can delete the currently selected node, so that the node is removed from the DOM tree.

[0072] Perform component code refactoring and output the JSON structure and new Vue component code.

[0073] The component code refactoring includes:

[0074] Traverse and parse the edited DOM tree structure to generate a data source in JSON structure, and at the same time combine the regular replacement method to reconstruct the adjusted Vue template code. Extract the latest script and style content from the parser object and splice them into a new Vue component code. The system provides two data formats, JSON structure data source and Vue component code, for users to choose to export and use.

[0075] It should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "including", "comprising" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, article or device.

[0076] Finally, it should be noted that the above are only preferred embodiments of the present invention and are not used to limit the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.< / template> < / template> < / template> < / template> < / template> < / template>

Claims

1. A visual editing method for front-end components based on data analysis, characterized in that: The method comprises the following steps: S1. Import the existing vue component file, read the component source code for data analysis and structure decomposition, decompose the component source code into three parts: template, script, and style, and create a global parser object; S2, format the decomposed code and convert it into DOM structure elements suitable for browsers; S3, build tree nodes, form a complete web page template tree structure by traversing the converted DOM structure elements, and mark the type and attributes of each node; S4. Read the data object in the global parser object, create a new vue instance according to the vue component parsing rules, read the template, script, and style content from the parser object to rebuild a new vue component; S5. Add new nodes, edit nodes, and delete nodes at designated nodes through the constructed complete web page template tree structure; S6. Refactor the component code and output the json structure and new vue component code; In step S3, it specifically includes: Create a new div dom0 node, assign the html code to the innerHTML of the new dom0 node, and form a html nested dom element; Create an empty json object, analyze and process the code of the newly created dom0 node, recursively extract the key information of component labels, attributes and text from dom elements, and save them in the json object. The json object stores the key information related to each node name, attribute value, text content and child nodes of the node. Create an empty tree node, analyze and process the json object, traverse the json object, assign the corresponding information of each json object node to the corresponding child node of the tree node, and add corresponding operation buttons according to the node type, including add, edit and delete; According to the file structure of the vue+elemenu component, an "add" button is added to the tree node element that allows child nodes to exist. An edit and delete button is added to each tree node element for modifying and deleting the node. During the node construction process, a mark that allows dragging operations is added to each node. The mark is used to determine whether the node can be dragged. For elements with child nodes, a checkbox is added in front, and the web page template tree structure is completed.

2. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S1, the data analysis refers to determining whether the imported file is a standard vue component, specifically including: Set up tag search in the source code to search for several key tags, including: <template>", "<script", "<style"; if not present <template>Node content is not a standard Vue component. If it exists <template> Node content, analyze whether the imported file is a Vue component based on the tag position relationship. If it is not a Vue component, the operation ends.< / template> < / template> < / template> 3. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S1, the structural decomposition includes: Define the start tag "<template” for decomposing morphemes and the end tag "” for decomposing morphemes. Construct a stack to store the positions of the start tags of the morphemes matched from the source code. Search the vue source code cyclically from the beginning to find the contents of the start tags and end tags of the decomposed morphemes. If the start tag of the decomposed morpheme is found, push the position of the start tag onto the stack. When the end tag of the decomposed morpheme is matched, pop the last element from the stack and use the popped element as the starting position start of the string. Until the content of the stack is empty, it means the extraction of the enclosed decomposed morpheme is completed. Record the current position index. Among them, the code of the decomposed morpheme is the string content between start and index; Among them, the decomposed morphemes refer to templates, scripts, and styles.

4. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S1, the built-in objects in the global parser include: data conversion related methods, templates, scripts, styles, data sources, and method events, which are used to store the corresponding contents of the components and save the decomposed morpheme contents of the component source code into the corresponding objects of the parser respectively.

5. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S2, the formatting process includes: For the decomposed script script and style style codes, through regular replacement, remove the redundant blank lines and spaces, and perform replacement operations according to the respective different characteristics and respective标志性 symbols of the script script and style style, add line breaks and perform corresponding code indentation operations in combination with the code hierarchy to achieve code formatting processing; The conversion into dom structure elements suitable for browsers includes: Through the regular replacement method, uniformly replace the component tags of the elementUI component library with div tags that can be recognized by the browser, and at the same time add marks inside the div tags to record the original tags and corresponding attributes of the elementUI components, and obtain the nested html code of the pure div tags.

6. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S4, it also includes: After the new vue component is mounted, it is possible to extract the component data, event methods, and the internal function contents of each life cycle of the vue component, and reassign the corresponding component data, event methods, and the internal function contents of each life cycle of the vue component to the corresponding objects of the parser; Construct an independent embedded window in the interface display area to display the appearance effect of the reconstructed component. On the same interface, the tree structure data and the embedded window are set at the left and right ends of the interface. When the tree structure data on the left is modified, the component will be re-rendered and synchronously rendered and displayed in the embedded window on the right to achieve the visualization effect of editing.

7. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S5, it also includes: Through the constructed web page template tree structure, add operations for adding new nodes, editing nodes, and deleting nodes at the specified nodes. The web page template tree structure supports mouse dragging, and the position of the corresponding node structure can be adjusted by mouse dragging; The new node function will perform custom component type selection in the pop-up interface; The edit node supports property adjustment, data binding, event addition, and data source selection of the selected component in the pop-up window. It supports adding custom properties and script codes. The modification or addition of script events can timely update the corresponding content of the parser object. Deleting a node can delete the currently selected node, so that the node is removed from the web page template tree structure.

8. The front-end component visual editing method based on data analysis according to claim 1 is characterized in that: In step S6, the component code refactoring includes: The edited web page template tree structure is traversed and parsed to generate a json structured data source. At the same time, the regular replacement method is used to rebuild the adjusted vue template code, extract the latest script and style content from the parser object, and reassemble it into a new vue component code. The system provides two data formats: json structured data source and vue component code, for users to choose to export and use.

Images