Front-end component visual editing method based on data analysis

Abstract

The invention discloses a front-end component visual editing method based on data analysis, and belongs to the technical field of front-end component visual editing. According to the method, an existing vue component file is imported, a component source code is read for data analysis and structural decomposition, and the decomposed code is formatted and converted into a dom structural element suitable for a browser; constructing a tree structure element node of the webpage, reading a data object in a global parser, and reading template, script and style contents from the parser object according to a vue component parsing rule to reconstruct a new vue component; the method comprises the following steps of: constructing a complete webpage template tree, reconstructing a component code and outputting a json structure and a vue component new code through the constructed complete webpage template tree, thereby realizing interface structure adjustment, and solving the problem of analysis error of a component of a user-defined structure of a non-standard component library when a visual tool on the Internet performs structure adjustment based on visual dragging of an interface at present.

Description

Technical Field

[0001] The present invention relates to the technical field of visual editing of front-end components, and in particular to a visual editing method 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 those involving complex layouts. The original method of manually modifying the source code by front-end development is time-consuming, labor-intensive and error-prone. At present, many visualization tools on the Internet are based on visual dragging of the interface to achieve structural adjustment. They cannot handle the problem that non-standard components cannot be effectively displayed in the interface, resulting in the loss of node location information and various attribute values, resulting in poor front-end development efficiency. Summary of the invention

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

[0004] In order to solve the above technical problems, the present invention provides the following technical solution: a front-end component visual editing method based on data analysis, the method comprising the following steps:

[0005] 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;

[0006] S2, format the decomposed code and convert it into DOM structure elements suitable for browsers;

[0007] S3, constructing the tree structure element nodes of the web page, forming a complete web page template tree structure by traversing the converted structural elements, and marking 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, read the template, script, and style content from the parser object to rebuild a new vue component;

[0009] S5. Add new nodes, edit nodes, and delete nodes at designated nodes through the constructed complete web page template tree;

[0010] S6. Refactor the component code and output the json structure and new vue component code.

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

[0012] Set up a 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.

[0013] The tag position relationship analysis includes: Standard Vue component basic structure = component template content

[0014] <template>+ Component Script <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 them is the script content of the component. Then, by searching for the starting tag <style, the content between them is the style content of the component.

[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 into the corresponding objects of the parser respectively. This is convenient for subsequent component adjustment and interaction.

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

[0022] For the decomposed script script and style style code, perform regular replacement to remove 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;

[0023] The converted dom structure elements suitable for browsers include:

[0024] In the above technical solution, mainly because modern browsers cannot directly support tags such as elementUI, it is necessary to use the regular replacement method to uniformly replace the component tags of the elementUI component library with div tags that can be recognized by the browser. At the same time, add markers in the div tags to record the original elementUI component tags and corresponding attributes, which is convenient for restoring the component tags and attribute values when reconstructing the component code later. Obtain the nested html code of pure div tags. This code can be used for the subsequent node tree construction work in the third step after conversion.

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

[0026] Create a new dom0 (self-defined node object) node of a new div (standard web page block tag), assign the html code to the innerHTML (innerHTML property of the custom node) of the newly created dom0 to form a nested dom element of html;

[0027] Create a new empty json object, analyze and process the code of dom0, loop recursively through the dom0 elements to extract the key information of the 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 sub-nodes of that 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 add corresponding operation buttons according to the node type. The operation buttons include add, edit and delete;

[0029] According to the file structure of vue+elemenu (elementui is an external UI component library, and VUE's UI component uses elementUI component library), an "add" button is added to the tree node element that allows child nodes to exist, which is convenient for adding new child nodes. Each tree node will add an edit and delete button for modifying and deleting the node. During the node construction process, a tag that allows dragging is added to each node. The tag is used to determine whether the node can be dragged. For elements with child nodes, a checkbox is added in front for shrinking and expanding the child nodes under the node, which is convenient for finding nodes. At this point, the tree structure of the webpage is completed.

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

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

[0032] Build an independent embedded window in the interface display area to display the appearance 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 a visual editing effect. This method of operating on the left and displaying on the right makes it convenient to view the modified effect in time during editing.

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

[0034] Through the constructed DOM structure tree, add new nodes, edit nodes and delete nodes at the specified node. The DOM tree supports mouse dragging, and the corresponding node structure position can be adjusted by mouse dragging.

[0035] The newly added node function will select the custom component type in the pop-up interface;

[0036] 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.

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

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

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

[0040] The edited DOM 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.

[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 structural adjustment based on visual dragging of the interface. The present application can solve the parsing problem of components of custom structures of some original non-standard component libraries in the interface by dragging and editing the node tree, which is not achievable by the current visual dragging based on the interface. In particular, non-standard components generally cannot be effectively displayed in the interface, but the location information and various attribute values ​​of the node can be retained through the DOM structure tree. The edited components can retain support for some non-standard components as much as possible. BRIEF DESCRIPTION OF THE DRAWINGS

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

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

[0044] Figure 2 It is a partial schematic diagram of the newly added component functions of the front-end component visual editing method based on data analysis of the present invention. DETAILED DESCRIPTION

[0045] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0046] See also Figure 1-Figure 2 In this embodiment: a front-end component visual editing method based on data analysis is provided, the method comprising: 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 determining whether the imported file is a standard vue component, specifically including:

[0048] 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.

[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, form a complete web page template tree structure by traversing the converted structural elements, and mark the type and attributes of each node, including:

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

[0062] 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.

[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 node of the tree, and 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, 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 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 tree structure of the web page is completed.

[0065] Read the data object in the global parser, 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;

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

[0067] Build an independent embedded window in the interface display area to show the appearance of the reconstructed component. On the same interface, the tree structure data and the embedded window are set on 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 a visual editing effect.

[0068] Through the constructed DOM structure tree, add new nodes, edit nodes and delete nodes at the specified node. The DOM tree supports mouse dragging, and the corresponding node structure position can be adjusted by mouse dragging.

[0069] The newly added node function will select the custom component type in the pop-up interface;

[0070] 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.

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

[0072] Refactor the component code and output the json structure and new vue component code.

[0073] The component code refactoring includes:

[0074] The edited DOM 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.

[0075] It should be noted that, in this article, relational terms such as first and second, etc. 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 "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0076] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art can still modify the technical solutions described in the aforementioned embodiments or replace some of the technical features therein by equivalents. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in 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 includes the following steps: 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; S2. Format the decomposed code and convert it into DOM structure elements suitable for browsers; 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; S4. Read the data object in the global parser, create a new vue instance according to the vue component parsing rules, and reconstruct a new vue component by reading the template, script, and style content from the parser object; S5. Through the complete web page template tree constructed, perform operations such as adding new nodes, editing nodes, and deleting nodes at the specified nodes; S6. Perform component code refactoring and output the json structure and the new vue component code.

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 judging whether the imported file is a standard vue component, specifically including: 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 according to 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” of the decomposed morpheme and the end tag "”, construct a stack to store the positions of the start tags of the decomposed morphemes matched from the source code, loop through the vue source code from the beginning to search for the content of the start tag and end tag of the decomposed morpheme. 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, use the popped element as the string start position start, until the content of the stack is empty, indicating the extraction of the closed 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 morpheme refers to template, script, and style.

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: methods related to data conversion, template, script, style, data source, 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 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 code, perform regular replacement to remove redundant blank lines and spaces, perform replacement operations according to the respective different characteristics and respective标志性符号 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; The conversion into DOM structure elements suitable for browsers includes: 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.

6. The front-end component visual editing method based on data analysis according to claim 5 is characterized in that: In step S3, it specifically includes: Create a new div dom0 node, assign the html code to the innerHTML of the new dom0, and form a html nested dom element; 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. 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 add corresponding operation buttons according to the node type. The operation buttons include 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 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 tree structure of the web page is completed.

7. 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, the component data, event methods, and internal function contents of each life cycle of the vue component can be extracted from it, and the corresponding component data, event methods, and internal function contents of each life cycle of the vue component can be reassigned to the corresponding objects of the parser; Build an independent embedded window in the interface display area to show the appearance of the reconstructed component. On the same interface, the tree structure data and the embedded window are set on 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 a visual editing effect.

8. 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 DOM structure tree, add new nodes, edit nodes and delete nodes at the specified node. The DOM tree supports mouse dragging, and the corresponding node structure position can be adjusted by mouse dragging. The newly added node function will select the custom component type 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 DOM tree.

9. The front-end component visual editing method based on data analysis according to claim 1, characterized in that: In step S6, the component code refactoring includes: The edited DOM 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