Page file conversion method and device, equipment, storage medium and product
By parsing the DOM tree of the JSP page file, identifying and converting the attributes and hierarchical relationships of the DOM nodes, and generating the target framework page file, the problem of low JSP page conversion efficiency is solved, and efficient automatic conversion and quality assurance are achieved.
Patent Information
- Application Number
- CN202511110970.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-08
- Publication Date
- 2025-09-19
AI Technical Summary
In the prior art, the process of converting a JSP page into a new front-end framework page is inefficient and difficult to ensure the conversion quality. The commonly used manual conversion method is prone to errors.
The browser plug-in parses the DOM tree generated by rendering the JSP page file, identifies the target DOM node that matches the preset JSP component style identifier set, obtains its attribute information and hierarchical relationship, and converts the structured component information into code data that conforms to the target framework syntax based on the code generation rules of the target framework, and fills it into the preset target framework code template.
It realizes the automatic conversion of JSP page files to target framework page files, improves processing efficiency, saves labor costs, ensures conversion quality and semantic consistency, and avoids logic loss.
Smart Images
Figure CN120669983A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of financial technology, and in particular to a page file conversion method, apparatus, device, computer-readable storage medium, and computer program product. Background Art
[0002] Currently, many financial institutions have systems developed using traditional technology frameworks. For example, most system pages are built using Java Server Pages (JSP) technology, which uses component libraries developed based on JSP to render components such as buttons and tables. The user experience provided by JSP pages lags far behind that of pages developed using newer front-end frameworks. Therefore, JSP pages are urgently needed to be upgraded.
[0003] However, converting a large number of JSP pages to a new front-end framework is not an easy task. Currently, the most common conversion method is for developers to manually analyze the JSP page source code and rewrite it based on the new front-end framework. However, this manual conversion method is inefficient, error-prone, and difficult to guarantee conversion quality. Summary of the Invention
[0004] The embodiments of the present application provide a page file conversion method, apparatus, device, computer-readable storage medium, and computer program product to solve the technical problems of low processing efficiency and difficulty in ensuring conversion quality in traditional manual conversion methods.
[0005] In a first aspect, an embodiment of the present application provides a page file conversion method, comprising:
[0006] The browser plug-in parses the DOM tree generated by the JSP page file rendering and identifies the target DOM node that matches the preset JSP component style identifier set;
[0007] Obtaining the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combining the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information;
[0008] Based on the component style identifier of each target DOM node, the corresponding code generation rule in the target framework is called to convert the structured component information into code data that conforms to the syntax expression of the target framework;
[0009] The code data is filled into a preset target framework code template to obtain a target framework page file.
[0010] In a second aspect, an embodiment of the present application provides a page file conversion device, comprising:
[0011] The identification module is used to parse the DOM tree generated by rendering the JSP page file through the browser plug-in and identify the target DOM node that matches the preset JSP component style identifier set;
[0012] An acquisition module is used to obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information;
[0013] A conversion module is used to call the corresponding code generation rules in the target framework based on the component style identification of each target DOM node, and convert the structured component information into code data that conforms to the grammatical expression of the target framework;
[0014] The filling module is used to fill the code data into a preset target framework code template to obtain a target framework page file.
[0015] In a third aspect, an embodiment of the present application provides an electronic device comprising a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of the page file conversion method provided in the first aspect of the embodiment of the present application are implemented.
[0016] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the page file conversion method provided in the first aspect of the embodiment of the present application are implemented.
[0017] In a fifth aspect, an embodiment of the present application provides a computer program product having a computer program stored thereon, which, when executed by a processor, implements the steps of the page file conversion method provided in the first aspect of the embodiment of the present application.
[0018] The technical solution provided by the embodiment of the present application automatically identifies the target DOM nodes that match the preset JSP component style identification set by analyzing the DOM tree generated by the rendering of the JSP page file, and obtains the self-attribute information of each target DOM node, and combines the self-attribute information of each target DOM node into structured component information based on the hierarchical relationship of each target DOM node in the DOM tree, thereby converting the structured component information based on the code generation rule of the target framework, and filling the converted code data into the preset target framework code template, thereby obtaining the corresponding target framework page file, realizing the automatic conversion of JSP page files to target framework page files, effectively improving the processing efficiency of JSP page files, and saving a lot of labor costs. In addition, based on the dual identification rules of component style identification and DOM structure, the semantic consistency of JSP components and target framework components is ensured, and the hierarchical relationship of the original JSP components is retained, avoiding the loss of logic caused by manual reconstruction of the code, and ensuring the conversion quality of JSP page files. BRIEF DESCRIPTION OF THE DRAWINGS
[0019] Figure 1 A schematic diagram of a flow chart of a page file conversion method provided in an embodiment of the present application;
[0020] Figure 2 Another flowchart of the page file conversion method provided in an embodiment of the present application;
[0021] Figure 3 A schematic diagram of the structure of a page file conversion device provided in an embodiment of the present application;
[0022] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0023] In order to make the purpose, technical solutions and advantages of this application more clearly understood, the technical solutions in the embodiments of this application are further described in detail through the following embodiments and in conjunction with the accompanying drawings. It should be understood that the specific embodiments described herein are only used to explain this application and are not intended to limit this application. Those skilled in the art can make adjustments to them as needed to suit specific application scenarios. It should also be noted that, for ease of description, the drawings only show parts related to this application rather than all structures.
[0024] It should be noted that the information collected in the embodiments of the present application is information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of relevant data comply with the relevant laws, regulations and standards of relevant countries and regions, take necessary confidentiality measures, do not violate public order and good customs, and provide corresponding operation entrances for users to choose to authorize or refuse.
[0025] Figure 1 A flow chart of the page file conversion method provided in the embodiment of the present application. Figure 1 As shown, the method may include:
[0026] S101: parsing a DOM tree generated by rendering a JSP page file through a browser plug-in, and identifying a target DOM node that matches a preset JSP component style identifier set.
[0027] The DOM tree is a tree-like structure generated by the browser plug-in after parsing the Hypertext Markup Language (HTML) code of the JSP page file. Each DOM node in the DOM tree represents an HTML element. The preset JSP component style identifier set includes at least one JSP component style identifier. A JSP component style identifier is used to identify a specific JSP component. For example, the JSP component can be a table, input box, drop-down box, button, navigation component, etc. in the JSP page. Developers can pre-configure the JSP component style identifier set. The browser plug-in obtains the JSP component style identifier set pre-configured by the developer and recursively traverses each DOM node and its child DOM nodes in the DOM tree generated by rendering the JSP page file. The component style identifier of each DOM node and its child DOM nodes is matched with the pre-configured JSP component style identifier set. The successfully matched DOM node / child DOM node is used as the target DOM node. For the successfully matched target DOM node, the subsequent self-attribute information extraction operation is performed. For the DOM node / child DOM node that failed to match, the subsequent self-attribute information extraction operation does not need to be performed.
[0028] By traversing the DOM tree, we identify the target DOM nodes that match the preset JSP component style identification set, and only extract the attribute information of these target DOM nodes that need attention, avoiding extracting too much useless information and ensuring that the final generated target framework page file contains only necessary content, thereby reducing code redundancy.
[0029] S102: Obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree through the browser plug-in, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information.
[0030] The attribute information of each target DOM node is used to characterize the component features of the JSP component to be extracted, which may include the component type, component tag name, component style identifier, bound events, method bodies associated with bound events, variable data contained in the component, text content, and style content data of the component. For example, assuming that the target DOM node corresponds to a drop-down box component, the component type, corresponding tag name, style class name, drop-down options contained, and method bodies (e.g., functions) triggered after selecting an option can be extracted.
[0031] The browser plug-in extracts the attribute information of each target DOM node by calling the interface function of the node attribute information (such as getAttribute, node.attributes, etc.).
[0032] Optionally, the above process of obtaining the own attribute information of each target DOM node may include: for each target DOM node, based on the component style identifier of the target DOM node, determining the data extraction rule corresponding to the target DOM node from the correspondence between the component style identifier and the data extraction rule; extracting the own attribute information of the target DOM node through the data extraction rule.
[0033] Among them, the data extraction rule specifically defines which specific attribute information is extracted from the target DOM node. The target DOM node is associated with different JSP components, and the extracted attribute information may be different. For example, for a drop-down box component, it is necessary to extract the specific options contained in the drop-down box and the method body triggered after the option is selected. For a table component, it may be necessary to extract column definitions, data binding logic and other information. For a button component, it may be necessary to extract the button text, click events and other information. For an input box component, it may only be necessary to extract the specific content in the input box. Based on this, for each target DOM node, the data extraction rule corresponding to the target DOM node can be determined from the correspondence between the component style identifier and the data extraction rule based on the component style identifier of the target DOM node, and the target DOM node's own attribute information can be extracted based on the data extraction rule.
[0034] By matching the data extraction rules corresponding to the target DOM node and using the corresponding data extraction rules to extract the specified attribute information from the target DOM node, it is ensured that the extracted information is the key information required by the JSP component, avoiding the extraction of irrelevant information, thereby further reducing the code redundancy of the target framework page file finally generated.
[0035] When the browser plug-in identifies the target DOM node by traversing the DOM tree, it can also synchronously obtain the hierarchical relationship of each target DOM node in the DOM tree, which may include a parent-child relationship and a sibling relationship. According to the hierarchical relationship of the target DOM node, the browser plug-in nests the own attribute information of the child node in the parent node, and nests the own attribute information of each sibling node in the same parent node, thereby forming complete structured component information. The browser plug-in can send the obtained structured component information to a code generation module. The code generation module can be integrated with the browser plug-in in the same hardware device, or can be independently set in different hardware devices. This embodiment does not limit this.
[0036] S103 : Based on the component style identifier of each target DOM node, the corresponding code generation rule in the target framework is called to convert the structured component information into code data that conforms to the syntax expression of the target framework.
[0037] Among them, the code generation module receives the structured component information sent by the browser plug-in, determines the corresponding code generation rule from the correspondence between the component style identifier and the code generation rule based on the component style identifier of each target DOM node in the structured component information, calls the corresponding code generation rule to perform code conversion on the structured component information, and converts the structured component information into code data that conforms to the target framework syntax expression. For example, assuming that the structured component information contains a drop-down box component and a table component, the code generation rules corresponding to the drop-down box component and the table component can be determined from the correspondence between the above-mentioned component style identifier and the code generation rule, and the relevant information of the drop-down box component in the structured component information is converted into code based on the code generation rule corresponding to the drop-down box component, and the relevant information of the table component in the structured component information is converted into code based on the code generation rule corresponding to the table component, thereby obtaining code data that conforms to the target framework syntax expression.
[0038] Alternatively, the target framework can be a front-end framework for building web pages that is distinct from JSP, such as the Vue framework or the React framework. For example, for the Vue framework, the corresponding code generation rules can be invoked to convert the structured component information into code data that conforms to the Vue framework's syntax. For the React framework, the corresponding code generation rules can be invoked to convert the structured component information into code data that conforms to the syntax.
[0039] S104: Fill the code data into a preset target framework code template to obtain a target framework page file.
[0040] The target framework code template is a file that contains the key structure of the target framework. Different frameworks have different code templates. For the Vue framework, the target framework code template is a Vue file with only the key structure. For the React framework, the target framework code template is a jsx file with only the key structure. Taking the Vue framework as an example, the Vue file contains the view area, the logic area, and the style area. The view area contains the tag <template> and< / template> , the logical area contains labels <script>和< / script> , the style area contains the label <style>和< / style> .
[0041] After obtaining the converted code data, the code data is correspondingly filled into the target framework code template, thereby obtaining the target framework page file.
[0042] The page file conversion method provided by the embodiment of the present application automatically identifies the target DOM node that matches the preset JSP component style identifier by analyzing the DOM tree generated by the rendering of the JSP page file, and obtains the self-attribute information of each target DOM node, and combines the self-attribute information of each target DOM node into structured component information based on the hierarchical relationship of each target DOM node in the DOM tree, thereby converting the structured component information based on the code generation rule of the target framework, and filling the converted code data into the preset target framework code template, thereby obtaining the corresponding target framework page file, realizing the automatic conversion of JSP page files to target framework page files, effectively improving the processing efficiency of JSP page files, and saving a lot of labor costs. In addition, based on the dual recognition rules of component style identifier and DOM structure, the semantic consistency of JSP components and target framework components is ensured, and the hierarchical relationship of the original JSP components is retained, avoiding the loss of logic caused by manual reconstruction of the code, and ensuring the conversion quality of JSP page files.
[0043] In one embodiment, optionally, Figure 2 As shown, the process of filling the code data into the preset target frame code template to obtain the target frame page file may include:
[0044] S201. Classify code data to obtain first data, second data, and third data.
[0045] The first data includes the method body and variable data of the component, the second data includes the style content data of the component, and the third data includes the remaining data in the code data except the method body, variable data and style content data.
[0046] The method body is the implementation of a function or method. It's the block of code contained within the function or method definition that describes the actions to be performed when the function or method is called. For example, when an option in a drop-down box is selected, the code in the corresponding method body is executed.
[0047] Variable data refers to the variable value defined in a component, which is usually used to store the state of the component. For example, the variable data of a drop-down box component can include the options contained in the drop-down box and the selected option.
[0048] The style content data indicates the style definition of the component and is generally used to control the appearance of the component. For example, the style content data defines the length, width, and background color of the component.
[0049] The converted code data is classified, the method body and variable data in the code data are classified as the first data, the style content data in the code data is classified as the second data, and the code data except the method body, variable data and style content data is classified as the third data, and these three types of data are filled in the target framework code template accordingly.
[0050] S202 , filling the first data into the logic area, determining the data to be filled in the style area according to the second data, filling the data to be filled into the style area, and filling the third data into the view area to obtain a target frame page file.
[0051] The logic area is used to store component logic, the view area is used to store page rendering content, and the style area is used to store component style. Based on this, the first data can be filled into the logic area, the data to be filled into the style area is determined based on the second data, and the data to be filled into the style area is filled, and the third data is filled into the view area to obtain the target frame page file.
[0052] Taking the Vue framework as an example, the first data can be filled in <script>和< / script> In the tag, fill the second data in <style>和< / style> In the tag, fill the third data in <template> and< / template> Tags to get the Vue page file.
[0053] When filling the style area, in an optional implementation, the style of the component in the original JSP page file can be retained, that is, the second data is directly determined as the data to be filled in the style area, and filled into the style area. In another optional implementation, the style of the component in the original JSP page file can also be changed, and the style of the extracted component can be redefined. Specifically, the corresponding target style content data is obtained from the correspondence between the preset component style identifier and the style content data through the component style identifier in the code data, the second data is updated to the target style content data, and the updated second data is determined as the data to be filled in the style area, and filled into the style area. In other words, the style of the component can be modified as needed, and the visual effect and user experience of the page can be improved by optimizing the style.
[0054] By classifying the code data and filling it into the target framework code template, the generated target framework code structure is ensured to be clear and easy to maintain, which improves the standardization of the target framework page code; and for different target frameworks, the corresponding target framework code templates and code conversion rules can be adjusted to achieve expansion, further improving the conversion efficiency of JSP page files.
[0055] In one embodiment, optionally, after obtaining the target frame page file, the target frame page file can also be reviewed and processed based on a preset review strategy; if the target frame page file passes the review, the target frame page file can be tested and processed based on a preset test strategy; if the target frame page file passes the test, the target frame page file can be saved.
[0056] Specifically, the above-mentioned preset review strategies include preset code review rules and readability review rules. Among them, the content of the code review rules may include: conducting structural review, style review, logic review and compliance review. The structural review may include: checking whether the division of the target framework components is reasonable, whether the dependencies between components are clear, and whether the component coupling is reasonable. The style review may include: determining that the component style complies with the project's coding specifications and there are no redundant or conflicting styles. The logic review may include: verifying whether the logic correctly implements the corresponding functions, including event binding, event handling, and routing navigation. The compliance review may include: verifying whether the code complies with the specifications of the target framework, prohibiting the use of abandoned interfaces, and checking whether there are risks of sensitive data leakage and security vulnerabilities.
[0057] The readability review rules mentioned above may include: naming convention review, comment review, and format review. The naming convention review may include ensuring that the names of variables, functions, components, etc. are clear, easy to understand, and meet the requirements of the target framework. The comment review may include checking whether the code contains sufficient comments to explain complex logic or algorithms. The format review may include ensuring that the code format is consistent and meets the project's coding standards.
[0058] The target framework page file is code reviewed based on the above code review rules. If the review passes, the target framework page file is readability reviewed based on the readability review rules to obtain the corresponding readability review result. If the readability review passes, the target framework page file is tested based on the preset test strategy.
[0059] The preset testing strategies include functional testing, performance testing, and compatibility testing. Among them, the content of functional testing may include: verifying whether the functions of a single function or method are normal, using automated testing tools to write test cases, and performing automated testing on the target framework page files. The above-mentioned performance testing may include: testing loading speed and testing resource consumption, among which testing loading speed refers to testing the loading speed of the target framework page to ensure that they are loaded within a reasonable time. Testing resource consumption may include: monitoring the consumption of computing resources, memory and other resources by the target framework page during runtime to ensure that they do not consume excessive resources and cause the device to freeze or crash. The above-mentioned compatibility testing may include: testing browser compatibility and testing device compatibility. Testing browser compatibility refers to testing the target framework page on different browsers to ensure that they can work properly in different environments. Testing device compatibility refers to testing the target framework page on different devices to ensure that they can display normally under different screen sizes and resolutions.
[0060] Furthermore, a functional test is performed on the target framework page file based on the functional test rules. After the functional test passes, a performance test is performed on the target framework page file based on the performance test rules. After the performance test passes, a compatibility test is performed on the target framework page file based on the compatibility test rules. After all types of reviews and tests are passed, the target framework page file is saved.
[0061] Optionally, if the target framework page file fails the review or test, a diagnostic report containing error location and corresponding modification suggestions is generated and sent to the target user. During the review and testing of the target framework page file, if an error is found, the specific error information and error location are recorded. At the same time, corresponding modification suggestions can also be generated for each error. After the review process and / or test is completed, a diagnostic report is generated based on this information, and the diagnostic report is sent to the target user via a preset sending method, thereby assisting developers to quickly locate and fix errors.
[0062] In this embodiment, after the target framework page file is generated, the target framework page file can also be reviewed and tested to ensure the quality of the target framework page file finally generated. If the review fails or the test fails, a corresponding diagnostic report can also be generated to assist developers in fixing errors, further improving the quality of the target framework page file finally generated.
[0063] Figure 3 A schematic diagram of the structure of the page file conversion device provided in the embodiment of the present application. Figure 3 As shown, the apparatus may include: an identification module 301 , an acquisition module 302 , a conversion module 303 and a filling module 304 .
[0064] Specifically, the identification module 301 is used to parse the DOM tree generated by rendering the JSP page file through the browser plug-in, and identify the target DOM node that matches the preset JSP component style identifier set;
[0065] The acquisition module 302 is used to obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information;
[0066] The conversion module 303 is used to call the corresponding code generation rules in the target framework based on the component style identification of each target DOM node, and convert the structured component information into code data that conforms to the syntax expression of the target framework;
[0067] The filling module 304 is used to fill the code data into the preset target framework code template to obtain the target framework page file.
[0068] Based on the above embodiment, optionally, the acquisition module 302 is further used to determine, for each target DOM node, based on the component style identifier of the target DOM node, a data extraction rule corresponding to the target DOM node from the correspondence between the component style identifier and the data extraction rule; and extract the target DOM node's own attribute information through the data extraction rule.
[0069] Based on the above embodiment, optionally, the target framework code template includes a view area, a logic area and a style area;
[0070] The filling module 304 is also used to classify the code data to obtain first data, second data and third data; wherein, the first data includes the method body and variable data of the component, the second data includes the style content data of the component, and the third data includes the remaining data in the code data except the method body, variable data and style content data; the first data is filled into the logic area, the data to be filled in the style area is determined according to the second data, and the data to be filled is filled into the style area, and the third data is filled into the view area to obtain the target frame page file.
[0071] Based on the above embodiment, optionally, the filling module 304 is also used to determine the second data as the data to be filled in the style area; or, obtain the corresponding target style content data from the correspondence between the preset component style identifier and the style content data through the component style identifier in the code data, update the second data to the target style content data, and determine the updated second data as the data to be filled in the style area.
[0072] Based on the above embodiment, optionally, it further includes: an optimization module;
[0073] Specifically, the optimization module is used to review and process the target frame page file based on a preset review strategy; if the target frame page file passes the review, the target frame page file is tested based on a preset test strategy; if the target frame page file passes the test, the target frame page file is saved.
[0074] On the basis of the above embodiment, optionally, it further includes: a sending module;
[0075] The optimization module is also used to generate a diagnostic report containing error locations and corresponding modification suggestions when the target framework page file fails the review or test;
[0076] The sending module is used to send the diagnostic report to the target user.
[0077] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application is shown in FIG. Figure 4 As shown, the device includes a processor 40, a memory 41, an input device 42 and an output device 43; the number of processors 40 in the device can be one or more. Figure 4 In the embodiment, a processor 40 is used as an example; the processor 40, the memory 41, the input device 42 and the output device 43 in the device can be connected by a bus or other means. Figure 4The bus connection is taken as an example.
[0078] Memory 41, as a computer-readable storage medium, can be used to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the page file conversion method in the embodiments of the present application (e.g., identification module 301, acquisition module 302, conversion module 303, and filling module 304 used in the page file conversion device). Processor 40 executes the software programs, instructions, and modules stored in memory 41 to execute various functional applications and data processing of the device, thereby implementing the above-mentioned page file conversion method.
[0079] The memory 41 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system and at least one application required for a function; the data storage area may store data created during the page file conversion process, etc. In addition, the memory 41 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 41 may further include a memory remotely located relative to the processor 40, and these remote memories may be connected to the device / terminal / server via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0080] The input device 42 may be used to receive input digital or character information and generate key signal input related to user settings and function control of the electronic device. The output device 43 may include a display device such as a display screen.
[0081] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:
[0082] The browser plug-in parses the DOM tree generated by the JSP page file rendering and identifies the target DOM node that matches the preset JSP component style identifier set;
[0083] Obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information;
[0084] Based on the component style identifier of each target DOM node, the corresponding code generation rules in the target framework are called to convert the structured component information into code data that conforms to the syntax expression of the target framework;
[0085] Fill the code data into the preset target frame code template to obtain the target frame page file.
[0086] In one embodiment, a computer program product is provided, which stores a computer program. When the computer program is executed by a processor, the following steps are implemented:
[0087] The browser plug-in parses the DOM tree generated by the JSP page file rendering and identifies the target DOM node that matches the preset JSP component style identifier set;
[0088] Obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information;
[0089] Based on the component style identifier of each target DOM node, the corresponding code generation rules in the target framework are called to convert the structured component information into code data that conforms to the syntax expression of the target framework;
[0090] Fill the code data into the preset target frame code template to obtain the target frame page file.
[0091] The page file conversion apparatus, electronic device, computer-readable storage medium, and computer program product provided in the above embodiments can execute the page file conversion method provided in any embodiment of the present application, and have the corresponding functional modules and beneficial effects of executing the method. For technical details not fully described in the above embodiments, please refer to the page file conversion method provided in any embodiment of the present application.
[0092] Through the above description of the implementation methods, those skilled in the art can clearly understand that the present application can be implemented with the help of software and necessary general-purpose hardware, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which can be stored in a computer-readable storage medium, such as a computer's floppy disk, read-only memory (ROM), random access memory (RAM), flash memory (FLASH), hard disk or optical disk, etc., including a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute the methods of each embodiment of the present application.
[0093] It is worth noting that the various units and modules included in the above embodiments are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be achieved; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application.
[0094] Note that the above are only preferred embodiments of the present application and the technical principles employed. Those skilled in the art will understand that the present application is not limited to the specific embodiments herein, and that various obvious changes, readjustments, and substitutions can be made by those skilled in the art without departing from the scope of protection of the present application. Therefore, although the present application has been described in more detail through the above embodiments, the present application is not limited to the above embodiments and may include many other equivalent embodiments without departing from the scope of the present application. The scope of the present application is determined by the scope of the appended claims.
Claims
1. A page file conversion method, characterized in that: include: The browser plug-in parses the DOM tree generated by the JSP page file rendering and identifies the target DOM node that matches the preset JSP component style identifier set; Obtaining, through the browser plug-in, the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combining the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information; Based on the component style identifier of each target DOM node, the corresponding code generation rule in the target framework is called to convert the structured component information into code data that conforms to the syntax expression of the target framework; The code data is filled into a preset target framework code template to obtain a target framework page file.
2. The method according to claim 1, characterized in that The obtaining of the own attribute information of each target DOM node includes: For each target DOM node, based on the component style identifier of the target DOM node, determine the data extraction rule corresponding to the target DOM node from the correspondence between the component style identifier and the data extraction rule; The self-attribute information of the target DOM node is extracted according to the data extraction rule.
3. The method according to claim 1, characterized in that The target framework code template includes a view area, a logic area and a style area; Fill the code data into the preset target framework code template to obtain the target framework page file, including: Classifying the code data to obtain first data, second data, and third data; wherein the first data includes the method body and variable data of the component, the second data includes the style content data of the component, and the third data includes the remaining data in the code data except the method body, variable data, and style content data; The first data is filled into the logic area, the data to be filled in the style area is determined according to the second data, and the data to be filled is filled into the style area, and the third data is filled into the view area to obtain a target frame page file.
4. The method according to claim 3, characterized in that Determining the data to be filled in the style area according to the second data includes: Determining the second data as the data to be filled in the style area; Alternatively, the corresponding target style content data is obtained from the correspondence between the preset component style identifier and the style content data through the component style identifier in the code data, the second data is updated to the target style content data, and the updated second data is determined as the data to be filled in the style area.
5. The method according to claim 1, wherein Also includes: Review and process the target frame page files based on the preset review strategy; If the target frame page file passes the review, testing the target frame page file based on a preset testing strategy; If the target frame page file passes the test, the target frame page file is saved.
6. The method according to claim 5, characterized in that Also includes: In the case that the target frame page file fails the review or the test, a diagnostic report including the error location and corresponding modification suggestions is generated and sent to the target user.
7. A page file conversion device, characterized in that: include: The identification module is used to parse the DOM tree generated by rendering the JSP page file through the browser plug-in and identify the target DOM node that matches the preset JSP component style identifier set; An acquisition module is used to obtain the self-attribute information of each target DOM node and the hierarchical relationship of each target DOM node in the DOM tree, and combine the self-attribute information of each target DOM node based on the hierarchical relationship to form structured component information; A conversion module is used to call the corresponding code generation rules in the target framework based on the component style identification of each target DOM node, and convert the structured component information into code data that conforms to the grammatical expression of the target framework; The filling module is used to fill the code data into a preset target framework code template to obtain a target framework page file.
8. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.
10. A computer program product having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.