Vue-based html code conversion method

Abstract

The invention discloses a vue-based html (Hypertext Markup Language) code conversion method, which comprises the following steps of: analyzing an HTML (Hypertext Markup Language) page, and dividing the page into a static page and a dynamic page; classifying styles in the static page, defining component boundaries, analyzing a logical relationship in a dynamic part, and defining corresponding rules for a dynamic method; integrating the rule into a rule display area, and displaying the conversion rule; defining the rules into a rule base according to a unified specification; importing a project, and creating and binding an instance object; hTML is decomposed into a series of marks, and an AST structure is obtained; dynamically creating and generating a template file by using an EJS engine library and a Handlebars engine library; selecting a rule base, and traversing the AST structure by using a recursive function to generate a corresponding source code; and carrying out connectivity test on the converted project, and exporting the project if no problem is confirmed. Fast and efficient conversion of HTML codes is achieved, manual operation is reduced, and development efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of Web development, and in particular to a Vue-based HTML code conversion method. Background Art

[0002] With the continuous development of Web development technology, HTML, as the basic language of web pages, is of great importance. However, in the overall process of the project, developers often need to frequently modify and convert the pages designed by the UI to adapt to different needs and scenarios. Now UI design tools can automatically generate corresponding HTML codes and CSS styles, and developers need to manually convert HTML to Vue development language, which is inefficient. Therefore, how to develop a tool that can automatically and efficiently convert HTML code has become a problem that needs to be solved in the current front-end technology field.

[0003] The existing technologies include: html-to-vue can convert HTML into Vue pages through the command line; vue-html-loader can convert HTML file contents into Vue components with the help of webpack loader; vue-template-compiler can convert HTML in string form into Vue files.

[0004] The existing technologies can only convert simple HTML file contents, and the conversion is relatively simple, and HTML cannot be converted into dependent component libraries, such as the Vue project code of elementUI. In addition, the operation is complicated during the conversion, and batch conversion is not possible. Summary of the invention

[0005] In view of the above problems, the present invention is proposed to provide a Vue-based HTML code conversion method that overcomes the above problems or at least partially solves the above problems.

[0006] According to one aspect of the present invention, a Vue-based HTML code conversion method is provided, the code conversion method comprising:

[0007] Analyze HTML pages and divide them into static pages and dynamic pages;

[0008] Classifying the styles in the static page, defining component boundaries, analyzing the logical relationships in the dynamic part, and defining corresponding rules for the dynamic method;

[0009] Integrate the rules into the rule display area to display the conversion rules;

[0010] Defining a rule base according to a unified specification;

[0011] Import the project, create and bind an instance object;

[0012] Decompose HTML into a series of tags and obtain the AST structure;

[0013] Use EJS and Handlebars engine libraries to dynamically create and generate template files;

[0014] Select the rule base, use the recursive function to traverse the AST structure, and generate the corresponding source code;

[0015] Perform a connectivity test on the converted project, confirm that there are no problems, and export the project.

[0016] Optionally, analyzing the HTML page and dividing the page into a static page and a dynamic page specifically includes:

[0017] Analyze HTML pages and divide them into static and dynamic parts based on whether they rely on user interaction or server-side processing.

[0018] Optionally, the styles in the static page are classified specifically including: basic style, layout style, component style, theme style, etc., and corresponding style rules are defined, including nesting of no more than three layers, variable definition rules, style naming rules and CSS modularization rules.

[0019] Optionally, the defining component boundaries, analyzing the logical relationships in the dynamic part, and defining corresponding rules for the dynamic method include:

[0020] Define component boundaries, including: component scope, component input and output rules, component naming rules, and the correspondence rules between HTML tags and Vue tags;

[0021] Analyze the logical relationship in the dynamic part, including: define page parameter transmission rules and page routing mode rules;

[0022] Define corresponding rules for dynamic methods, including: string concatenation, method reuse and nesting rules, avoidance of dead loops, and more use of js built-in parameters.

[0023] Optionally, defining a rule base according to a unified specification specifically includes:

[0024] Follow the camelCase naming method, use names, and follow the big-name-then-small-name convention to define the rule library, which can be divided into style library, component library, logic relationship library, and method library. Each library contains corresponding detailed rules.

[0025] Optionally, decomposing the HTML into a series of tags to obtain the AST structure specifically includes:

[0026] Decompose HTML into a series of tags, including attribute names and text nodes;

[0027] Identify the start tag and end tag, associate the corresponding element nodes, combine them into a structure, build the structure, and form an AST structure.

[0028] Optionally, the dynamically creating and generating template files by using EJS and Handlebars engine libraries specifically includes:

[0029] Use EJS and Handlebars engine libraries to dynamically create and generate vue, react, and angular template files;

[0030] The template file includes a parent node and a child node to represent a finer-grained structure, forming a template file library for the user to select a target language and then generate a basic template file.

[0031] Optionally, the connectivity test is performed on the converted project to confirm that there is no problem. The exported project specifically includes:

[0032] Perform a connectivity test on the converted project. If there is a problem with the test, choose whether to open the editing page and make targeted modifications to the problematic parts of the page;

[0033] After the modification, test the project again. If there are no problems, finish the conversion and export the project.

[0034] Optionally, the selection rule base uses a recursive function to traverse the AST structure to generate the corresponding source code, specifically including:

[0035] Select the rule base, use the recursive function to traverse the AST structure, and traverse to the node corresponding to the rule in the rule base;

[0036] According to the rules and node types, conversion is performed to generate corresponding source code.

[0037] The present invention provides a Vue-based HTML code conversion method, which includes: analyzing HTML pages, dividing the pages into static pages and dynamic pages; classifying the styles in the static pages, defining component boundaries, analyzing the logical relationship in the dynamic part, and defining corresponding rules for dynamic methods; integrating the rules into a rule display area, and displaying the conversion rules; defining a rule library according to a unified specification; importing a project, creating and binding an instance object; decomposing HTML into a series of tags to obtain an AST structure; using EJS and Handlebars engine libraries to dynamically create a template file; selecting a rule library, traversing the AST structure using a recursive function, and generating corresponding source code; performing a connectivity test on the converted project, confirming that there is no problem, and exporting the project. The method realizes fast and efficient conversion of HTML code, reduces manual operations, and improves development efficiency.

[0038] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0040] Figure 1 A flowchart of a Vue-based HTML code conversion method provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0041] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0042] The terms "comprises" and "having" and any variations thereof in the description embodiments, claims and drawings of the present invention are intended to cover non-exclusive inclusions, for example, including a series of steps or units.

[0043] The technical solution of the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments.

[0044] like Figure 1 As shown, a method for converting HTML code based on Vue includes:

[0045] Analyze HTML pages and divide them into static parts (css, html) and dynamic parts (js) based on whether they rely on user interaction or server-side processing;

[0046] Classify the styles in static pages, such as basic styles, layout styles, component styles, theme styles, etc., and define corresponding style rules, such as nesting no more than three layers, variable definition rules, style naming rules, CSS modularization rules, etc.; define component boundaries, such as component scope, component input and output rules, component naming rules, html tag and vue tag correspondence rules, etc.; analyze the logical relationship in the dynamic part, define page parameter passing rules, page routing mode rules, etc.; define corresponding rules for dynamic methods, such as string concatenation, method reuse and nesting rules, avoid dead loops, use more js built-in parameters, etc.;

[0047] Integrate the above rules into the rule display area to display the conversion rules;

[0048] Define the rules according to unified specifications, such as following the camelCase naming method, using meaningful names, and using big names first and small names later. The rule library can be divided into style library, component library, logic relationship library and method library. Each library contains corresponding detailed rules.

[0049] Import the project, create and bind an instance object;

[0050] Decompose HTML into a series of tags, such as attribute names, text nodes, etc., then identify the start and end tags, and associate them with their corresponding element nodes to form meaningful structures, and finally build these structures to form an AST structure;

[0051] Use EJS and Handlebars engine libraries to dynamically create and generate template files such as vue, react, and angular. The template files must include parent nodes and child nodes to represent a finer-grained structure, thereby forming a template file library for users to select the target language and generate basic template files;

[0052] Select the rule base, use the recursive function to traverse the AST structure, traverse to the node corresponding to the rule in the rule base, convert according to the type of rules and nodes, and generate the corresponding source code. For example, when traversing to the table part, convert the table tag to the el-table tag according to the rule, and convert tr, td, etc. to the el-table-column tag that conforms to the syntax;

[0053] Perform a connectivity test on the converted project. If there is a problem in the test, you can choose whether to open the editing page and make targeted modifications to the problematic parts of the page;

[0054] After the modification, test the project again. If there are no problems, finish the conversion and export the project.

[0055] The present invention realizes fast and efficient conversion of HTML code, reduces manual operations, and improves development efficiency. At the same time, since AST is used as an intermediate representation, the conversion process is more accurate and reliable, and errors and ambiguities in the code conversion process can be effectively avoided.

[0056] Beneficial effects: (1) High degree of automation: Through the process of code parsing, conversion and generation, the automatic conversion of HTML code is realized, which reduces manual operations and improves development efficiency;

[0057] (2) Accurate and reliable conversion: Using AST as the intermediate representation can accurately represent the structure and semantics of HTML code, avoiding errors and ambiguities in the conversion process;

[0058] (3) Flexible and customizable: By expanding and customizing the transformation rule library, it can meet different development scenarios and requirements, improving the applicability and flexibility of the tool;

[0059] (4) Good user experience: It provides a friendly user interface, which facilitates users to input, convert and output HTML codes, thus improving user experience and operation convenience;

[0060] (5) Strong compatibility: It supports users' file conversion needs in many aspects, including modification, editing and downloading.

[0061] The above specific implementation methods further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for converting HTML code based on Vue, characterized in that: The code conversion method comprises: Analyze HTML pages and divide them into static pages and dynamic pages; Classify the styles in the static page, define component boundaries, analyze the logical relationships in the dynamic part, and define corresponding rules for the dynamic method; Integrate the rules into the rule display area to display the conversion rules; Defining a rule base according to a unified specification; Import the project, create and bind an instance object; Decompose HTML into a series of tags and obtain the AST structure; Use EJS and Handlebars engine libraries to dynamically create and generate template files; Select the rule base, use the recursive function to traverse the AST structure, and generate the corresponding source code; Perform a connectivity test on the converted project, confirm that there are no problems, and export the project.

2. According to a Vue-based HTML code conversion method according to claim 1, it is characterized in that: The analysis of HTML pages and the classification of pages into static pages and dynamic pages specifically include: Analyze HTML pages and divide them into static and dynamic parts based on whether they rely on user interaction or server-side processing.

3. According to a Vue-based HTML code conversion method according to claim 1, it is characterized in that: The classification of styles in the static page specifically includes: basic style, layout style, component style, theme style, etc., and defines corresponding style rules, including nesting of no more than three layers, variable definition rules, style naming rules and CSS modularization rules.

4. The method for converting HTML code based on Vue according to claim 1, characterized in that: Defining component boundaries, analyzing logical relationships in the dynamic part, and defining corresponding rules for dynamic methods include: Define component boundaries, including: component scope, component input and output rules, component naming rules, and the correspondence rules between HTML tags and Vue tags; Analyze the logical relationship in the dynamic part, including: define page parameter transmission rules and page routing mode rules; Define corresponding rules for dynamic methods, including: string concatenation, method reuse and nesting rules, avoidance of dead loops, and more use of js built-in parameters.

5. The method for converting HTML code based on Vue according to claim 1, characterized in that: Defining a rule base according to a unified specification specifically includes: Follow the camelCase naming method, use names, and follow the big-name-then-small-name convention to define the rule library, which can be divided into style library, component library, logic relationship library, and method library. Each library contains corresponding detailed rules.

6. The method for converting HTML code based on Vue according to claim 1, characterized in that: Decomposing HTML into a series of tags to obtain an AST structure specifically includes: Decompose HTML into a series of tags, including attribute names and text nodes; Identify the start tag and end tag, associate the corresponding element nodes, combine them into a structure, build the structure, and form an AST structure.

7. The method for converting HTML code based on Vue according to claim 1, characterized in that: The method of dynamically creating and generating template files using EJS and Handlebars engine libraries specifically includes: Use EJS and Handlebars engine libraries to dynamically create and generate vue, react, and angular template files; The template file includes a parent node and a child node to represent a finer-grained structure, forming a template file library for the user to select a target language and then generate a basic template file.

8. The method for converting HTML code based on Vue according to claim 1, characterized in that: The connectivity test of the converted project is carried out to confirm that there are no problems. The exported project specifically includes: Perform a connectivity test on the converted project. If there is a problem with the test, choose whether to open the editing page and make targeted modifications to the problematic parts of the page; After the modification, test the project again. If there are no problems, finish the conversion and export the project.

9. The method for converting HTML code based on Vue according to claim 1, characterized in that: The selection rule base uses a recursive function to traverse the AST structure and generate corresponding source code, which specifically includes: Select the rule base, use the recursive function to traverse the AST structure, and traverse to the node corresponding to the rule in the rule base; According to the rules and node types, conversion is performed to generate corresponding source code.

Images