Conversion method and device of front-end frame project, equipment, medium and product

Abstract

The invention discloses a front-end frame project conversion method and device, equipment, a medium and a product, relates to the technical field of artificial intelligence, can be applied to the field of financial science and technology, and comprises the following steps: obtaining a to-be-converted page code file contained in a to-be-converted server page project; determining at least one type of layout component code blocks contained in the to-be-converted page code file, and respectively generating an initial front-end framework code file according to each layout component code block; determining a target code snippet needing to be subjected to grammar conversion in each initial front-end framework code file, and performing grammar conversion on the target code snippet according to a target framework grammar corresponding to a target front-end framework to obtain a converted front-end framework code file; and generating a target front-end frame project satisfying the target front-end frame according to the converted front-end frame code file. According to the method, the effect of automatically completing front-end frame project conversion is achieved, manual reconstruction of technicians is not needed, the labor cost is reduced, and the conversion efficiency of the front-end frame project is improved.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence technology and can be applied to the field of financial technology, particularly to a method, apparatus, device, medium, and product for converting front-end framework projects. Background Technology

[0002] With the rapid development of internet technology, front-end technology is evolving rapidly. As front-end technology continues to advance, many financial institutions' outdated server-side page projects can no longer meet the needs of current business development. Therefore, financial institutions need to transform these outdated server-side page projects into more advanced and flexible new front-end framework projects to support rapid business development and changes.

[0003] Current front-end framework project conversion typically relies on technical personnel manually refactoring the entire front-end framework project, which incurs high labor costs and low conversion efficiency. Summary of the Invention

[0004] This invention provides a method, apparatus, device, medium, and product for converting front-end framework projects, in order to solve the problems of high labor costs and low conversion efficiency in current front-end framework project conversion.

[0005] According to one aspect of the present invention, a method for converting a front-end framework project is provided, the method comprising:

[0006] Obtain the code files of the pages to be converted from the server-side page project;

[0007] Identify at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each of the layout component code blocks;

[0008] Identify the target code segments in each of the initial front-end framework code files that need to be syntax-converted, and perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file;

[0009] The target front-end framework project that satisfies the target front-end framework is generated based on the converted front-end framework code file.

[0010] According to another aspect of the present invention, a conversion device for front-end framework projects is provided, the device comprising:

[0011] The code file retrieval module is used to retrieve the code files of the pages to be converted contained in the server-side page project.

[0012] The layout component code block determination module is used to determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each of the layout component code blocks.

[0013] The syntax conversion module is used to determine the target code segments that need to be syntax converted in each of the initial front-end framework code files, and to perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file.

[0014] The framework project generation module is used to generate a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file.

[0015] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising:

[0016] At least one processor; and

[0017] A memory communicatively connected to the at least one processor; wherein,

[0018] The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the conversion method for the front-end framework project according to any one of the present invention.

[0019] According to another aspect of the present invention, a computer-readable storage medium is provided, the computer-readable storage medium storing computer instructions for causing a processor to execute and implement the conversion method of the front-end framework project according to any one of the present invention.

[0020] According to another aspect of the present invention, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the conversion method for a front-end framework project as described in any one of the present invention.

[0021] This invention obtains the page code files to be converted from the server-side page project; identifies at least one type of layout component code block contained in the page code files to be converted, and generates initial front-end framework code files based on each layout component code block; identifies the target code segments in each initial front-end framework code file that need to be syntax-converted, and performs syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file; and generates a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file. The beneficial effects are:

[0022] It achieves automated conversion of front-end framework projects, eliminating the need for manual refactoring by technical personnel, thus reducing labor costs and improving the conversion efficiency of front-end framework projects.

[0023] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0024] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used 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 those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 This is a flowchart of a front-end framework project conversion method provided in Embodiment 1 of the present invention;

[0026] Figure 2 This is a flowchart of a front-end framework project conversion method provided in Embodiment 2 of the present invention;

[0027] Figure 3 This is a flowchart of a front-end framework project conversion method provided in Embodiment 3 of the present invention;

[0028] Figure 4 This is a flowchart of a front-end framework project conversion method provided in Embodiment 4 of the present invention;

[0029] Figure 5 This is a schematic diagram of the structure of a front-end framework project conversion device provided in Embodiment 5 of the present invention;

[0030] Figure 6 This is a schematic diagram of the structure of an electronic device that implements the front-end framework project conversion method of this invention. Detailed Implementation

[0031] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0032] It should be noted that the terms "first," "second," "third," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0033] Example 1

[0034] Figure 1 This is a flowchart illustrating a method for converting a front-end framework project according to Embodiment 1 of the present invention. This embodiment is applicable to situations where outdated server-side page projects are converted into technologically advanced front-end framework projects. This method can be executed by a front-end framework project conversion device, which can be implemented in hardware and / or software, such as using a computer. Figure 1 As shown, the method includes:

[0035] S101. Obtain the code files of the pages to be converted contained in the server-side page project to be converted.

[0036] Among them, the server-side page projects to be converted refer to legacy systems that adopt traditional server-side rendering architectures and require technical upgrades. These projects have highly coupled business logic and view layers, and the server directly generates Hypertext Markup Language (HTML). Examples include, but are not limited to, JSP (JavaServer Pages) projects. JSP is a Java-based server-side technology used to create dynamic web pages. It can interact directly with Java code, supports custom tag libraries, and easily and quickly generates HTML pages.

[0037] However, the server-side page projects to be converted suffer from outdated interfaces, obsolete functions, high maintenance costs, poor user experience, and high development costs. In order to improve user experience, reduce maintenance costs, and keep up with the pace of front-end technology development, it is necessary to use advanced front-end frameworks to convert the old server-side page projects.

[0038] The page code file to be converted refers to the dynamic template file in the server-side page project that mixes business logic and the view layer. It is written using server-side rendering technology. For example, assuming the server-side page project to be converted is a JSP project, then the page code file to be converted refers to the JSP file in the JSP project.

[0039] In one implementation, the system automatically traverses the directory tree of the server-side page project to be converted. By identifying the extensions of all files in the directory tree, it determines the file that matches the target extension as the page code file to be converted. For example, given the project root path and output directory as input, the tool recursively scans the project root path, filters files with the target extension (such as ".jsp", ".asp", etc.), automatically migrates the original file stream to the output directory, and generates the page code file to be converted.

[0040] In another implementation, a preprocessing hook is embedded in the build process of the server-side page project to be converted, automatically intercepting the page code files to be converted before compilation. For example, the file processing flow triggered by the build command is monitored, and the server-side tags in the source code are identified by the parser, automatically exporting files containing specific tags as the page code files to be converted.

[0041] In another implementation, examine the directory structure and file organization of the server-side page project code to be converted to determine the location of the page code files to be converted. Typically, files ending with ".jsp" are the page code files to be converted.

[0042] S102. Determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each layout component code block.

[0043] The layout component code block refers to the core code snippet that implements the division of page areas and the positioning of components. Essentially, it is a modular unit that defines the page structure through specific syntax rules. In other words, the layout component code block is the code block related to each layout component in the page code file to be converted. Layout components include, but are not limited to, the page header, navigation bar, sidebar, and content area.

[0044] The initial front-end framework code file refers to the basic, unoptimized front-end framework syntax code file generated after extracting layout component code blocks from the page code file to be converted. For example, the initial front-end framework code file can be a front-end framework code file with the ".vue" extension.

[0045] In one implementation, the code file of the page to be converted is scanned for repetitive structural patterns, component declaration keywords are detected, and code blocks containing layout component tags are captured as layout component code blocks.

[0046] In another implementation, an abstract syntax tree parser is used to decompose the page code file to be converted into a syntax node tree, identify frequently occurring node combinations, and then mark nodes containing layout component attributes as layout component nodes. Finally, the corresponding code is extracted from the converted page code file based on the layout component nodes as layout component code blocks.

[0047] In another implementation, a front-end page is generated based on the code file of the page to be converted, the layout components contained in the front-end page are identified, and then the layout component code block corresponding to the identified layout component is extracted from the code file of the page to be converted based on the component identification information of the identified layout component.

[0048] Furthermore, after determining the layout component code blocks, an independent front-end framework code file is created for each layout component code block, serving as the initial front-end framework code file. In other words, this embodiment involves segmenting and extracting each layout component code block, and using each extracted layout component code block as the initial front-end framework code file.

[0049] For example, suppose the page code file to be converted is a JSP file, and the initial front-end framework code file is a Vue file, with the initial front-end framework code file ending in ".vue". For instance, an initial front-end framework code file named "headComponent.vue" is created based on the "head component code block" identified in the JSP file; an initial front-end framework code file named "navigationComponent.vue" is created based on the "navigation component code block" identified in the JSP file; an initial front-end framework code file named "sidebarComponent.vue" is created based on the "sidebar component code block" identified in the JSP file; and an initial front-end framework code file named "mainContentComponent.vue" is created based on the "mainContent component code block" identified in the JSP file.

[0050] S103. Determine the target code segments that need to be syntax-converted in each initial front-end framework code file, and perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file.

[0051] In this context, the target code snippet refers to the original code that cannot be directly run in a front-end framework due to differences in syntax; that is, a code snippet that requires syntax transformation. For example, JSP projects and Vue projects each have unique syntax rules and execution mechanisms. When converting from a JSP project to a Vue project, the target code snippets in the JSP project need to be restructured. A code snippet refers to a code unit with a specific syntactic structure that can be parsed independently and needs to be transformed.

[0052] The target front-end framework refers to the front-end technology framework to which the server-side page project to be converted is planned. A front-end technology framework is a collection of pre-built tools, specifications, and components used to efficiently build user interfaces, such as the Vue framework. The Vue framework is a popular front-end JavaScript framework used to build user interfaces. It adopts a component-based development approach, which makes the front-end code maintainable and reusable.

[0053] The target framework syntax refers to the specific syntax rules and programming paradigms of the target front-end framework. It determines how the code of the server-side page project to be converted needs to be transformed to run correctly in the new target front-end framework. For example, the target framework syntax can be Vue framework syntax, etc.

[0054] Converting front-end framework code files refers to new code files that have been restructured to conform to the specifications of the target front-end framework. Essentially, it is the product of adapting the code logic of the original server-side page project to be converted into the syntax system of the new target front-end framework.

[0055] In one implementation, a front-end page is generated based on the page code file to be converted, the dynamic page content in the front-end page is determined, and the data object associated with the dynamic page content is determined from each initial front-end framework code file based on the dynamic page content, which serves as the target code segment that needs to be syntax converted.

[0056] In another implementation, a front-end page is generated based on the code file of the page to be converted, and the target control with interactive functions in the front-end page is determined. Based on the target control, the listener events and event handling methods associated with the target control are determined from each initial front-end framework code file, which are used as the target code segments that need to be syntax converted.

[0057] Furthermore, after determining the target code segment that needs to be grammatically converted, in one implementation, a pre-trained multilingual code conversion model is used. After inputting the target code segment, the model automatically generates an equivalent converted code segment based on the deep learning framework syntax mapping relationship, and then generates a converted front-end framework code file based on the converted code segment.

[0058] In another implementation, an abstract syntax tree is generated by parsing the target code snippet. A conversion rule library for the target front-end framework is pre-set. The system automatically traverses the nodes of the abstract syntax tree, performs node replacement and structural reorganization according to the conversion rule library, and finally generates a converted front-end framework code file that conforms to the syntax of the target framework.

[0059] S104. Generate a target front-end framework project that meets the target front-end framework requirements based on the converted front-end framework code files.

[0060] The target front-end framework project refers to the set of full-featured code that automatically converts the server-side page project to be converted into a codebase that conforms to the technical specifications of the target front-end framework.

[0061] In one implementation, a new front-end framework project is created, and the necessary configuration options for the project to start and run correctly are configured, such as the development server, startup scripts, and build tools, to ensure the project functions properly. Further, the code files for each conversion front-end framework are written into the newly created project to generate a target front-end framework project that conforms to the target front-end framework.

[0062] This invention, through the following steps, obtains the page code files to be converted from the server-side page project; identifies at least one type of layout component code block within the page code files, and generates initial front-end framework code files based on each layout component code block; identifies the target code segments in each initial front-end framework code file that require syntax conversion, and performs syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework, thereby obtaining the converted front-end framework code file; and generates a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file. The beneficial effects are:

[0063] Firstly, it achieves the effect of automating the conversion of front-end framework projects, eliminating the need for manual reconstruction by technical personnel, reducing labor costs and improving the conversion efficiency of front-end framework projects.

[0064] Secondly, it can transform a front-end and back-end coupled server-side page project into a front-end and back-end separated front-end framework project, thereby solving the problems of outdated technology stack, high maintenance costs, and poor user experience.

[0065] Example 2

[0066] Figure 2 This is a flowchart illustrating a front-end framework project conversion method according to Embodiment 2 of the present invention. This embodiment further optimizes and expands upon the above embodiments and can be combined with the various optional implementation methods described above. For example... Figure 2 As shown, the method includes:

[0067] S201. Obtain the code files of the pages to be converted contained in the server-side page project to be converted.

[0068] S202. Generate a front-end page based on the code file of the page to be converted, and determine at least one type of layout component contained in the front-end page.

[0069] Here, the front-end page refers to the visual interface running on the user's device, such as the visual interface in a browser. Layout components refer to reusable user interaction units responsible for the page structure and area division, including but not limited to the page header, navigation bar, sidebar, and content area.

[0070] In one implementation, a screenshot of the front-end page is obtained, and a target detection algorithm is used to identify layout components based on the screenshot. Based on the identification results, at least one type of layout component is determined to be contained in the front-end page.

[0071] In another implementation, the Hypertext Markup Language (HMR) tags corresponding to the front-end page are obtained, the HMR tags are input into a large language model, and the large language model is used to determine at least one type of layout component contained in the front-end page based on the HMR tags.

[0072] S203. Determine the component identification information corresponding to each layout component, and perform character matching in the code file of the page to be converted according to the component identification information to determine the matching code block where the component identification information is located in the code file of the page to be converted.

[0073] Component identification information specifically refers to characteristic strings or structured tags used to uniquely identify and locate a particular layout component. Matching code blocks refer to consecutive related code segments located in the code file of the page to be converted using the component identification information.

[0074] In one implementation, the component identification information corresponding to each layout component is determined based on the Hypertext Markup Language tags corresponding to the front-end page. Then, the component identification information is used as keywords for character matching in the code file of the page to be converted. Based on the character matching results, the code block where each component identification information is located in the code file of the page to be converted is determined as the matching code block.

[0075] S204. Treat each matching code block as a layout component code block, and generate an initial front-end framework code file based on each layout component code block.

[0076] By generating a front-end page from the code file of the page to be converted, and identifying at least one type of layout component contained in the front-end page; determining the component identifier information corresponding to each layout component, and performing character matching in the code file of the page to be converted based on the component identifier information to determine the matching code block where each component identifier information is located in the code file of the page to be converted; and using each matching code block as the layout component code block, the beneficial effects are:

[0077] Firstly, traditional development requires manually searching for layout component code line by line. This solution automatically matches component identification information, reducing manual location time and improving development efficiency.

[0078] Secondly, character matching is used to determine the precise start and end positions of layout components in the code file of the page to be converted, avoiding incomplete or redundant code blocks caused by manual truncation, and improving the extraction quality of layout component code blocks.

[0079] S205. Obtain the Hypertext Markup Language (HMR) tags corresponding to the front-end page; perform character matching between the HMR tags and the code file of the page to be converted, and determine the dynamic page content in the front-end page based on the character matching results.

[0080] Hypertext Markup Language (HTML) tags are the basic syntactic units that constitute the structure of a webpage. They consist of instructions enclosed in angle brackets and are used to define the semantics, function, and display logic of the content. Dynamic page content refers to webpage elements that are generated or updated in real time through data-driven processes.

[0081] In one implementation, for the rendered front-end page, its corresponding document object model tree is determined, and the hypertext markup language tags in the document object model tree are directly extracted.

[0082] In another implementation, for the rendered front-end page, the single-page application is rendered as a static Hypertext Markup Language snapshot on the server side, and the complete Hypertext Markup Language tags containing dynamic data are obtained by requesting them.

[0083] Furthermore, after obtaining the Hypertext Markup Language (HTML) tags, the HTML tags are matched with the code file of the page to be converted, and the dynamic page content in the front-end page is determined based on the character matching results.

[0084] Optionally, the dynamic page content in the front-end page can be determined based on the character matching results, including:

[0085] Identify dynamic tag content that does not exist in the code file of the page to be converted but exists in the Hypertext Markup Language (HTML) tags; determine the page content corresponding to the dynamic tag content in the front-end page as the dynamic page content.

[0086] In one implementation, the dynamic page content in the front-end page is determined by comparing the differences between the page code file to be converted and the rendered Hypertext Markup Language tags.

[0087] For example, assuming that the Hypertext Markup Language tags “AA, BB” do not exist in the code file of the page to be converted, then “AA, BB” will be used as dynamic tag content, and the page content corresponding to the dynamic tag content “AA, BB” in the front-end page will be further determined as dynamic page content.

[0088] By identifying dynamic tag content that exists in Hypertext Markup Language tags but not in the code file of the page to be converted, and determining the corresponding page content in the front-end page as the dynamic page content, the beneficial effects are:

[0089] Firstly, by comparing the differences between the code file of the page to be converted and the rendered Hypertext Markup Language tags, interference from static templates can be eliminated, and the dynamic tag content generated dynamically by the operation can be directly locked, thereby improving the accuracy of capturing dynamic tag content.

[0090] Secondly, traditional dynamic page content detection requires simulating browser rendering throughout the entire process, while this solution directly skips static node parsing by comparing tag differences, reducing processing time and improving the efficiency of determining dynamic page content.

[0091] S206. Determine the target code segments that need to be syntax-transformed in each initial front-end framework code file based on the dynamic page content.

[0092] In one implementation, the page coordinate information corresponding to the dynamic page content in the front-end page is determined, and the code fragments related to the "data object" are determined from each initial front-end framework code file based on the page coordinate information, which are then used as the target code fragments that need to be syntax-converted.

[0093] By generating a front-end page from the code file of the page to be converted and obtaining the corresponding Hypertext Markup Language (HTML) tags for the front-end page; performing character matching between the HTML tags and the code file of the page to be converted, and determining the dynamic page content in the front-end page based on the character matching results; and determining the target code segments that need to be syntax-converted in each initial front-end framework code file based on the dynamic page content, the beneficial effects are:

[0094] By comparing the character-level differences between the code file of the page to be converted and the rendered Hypertext Markup Language tags, the dynamic page content in the front-end page can be directly located, avoiding the computational overhead of traditional abstract syntax tree traversal and improving the efficiency of determining the dynamic page content.

[0095] Optionally, the target code segments that need to undergo syntax transformation in each initial front-end framework code file are determined based on the dynamic page content, including:

[0096] S2061. Determine the page coordinate information corresponding to the dynamic page content in the front-end page, and perform character matching in the code file of the page to be converted based on the page coordinate information to determine the data object associated with the page coordinate information in the code file of the page to be converted.

[0097] Page coordinate information refers to the spatial positioning data of dynamic page content within the front-end page, typically including the precise pixel position of the top-left corner of the dynamic page content relative to the front-end page. Data objects are code entities that store the dynamic data state and directly determine the rendered content of the area corresponding to the page coordinate information.

[0098] In one implementation, the bounding box information of the dynamic page content in the front-end page is obtained using a built-in method of the browser. Then, the page coordinate information corresponding to the dynamic page content in the front-end page is determined based on the bounding box information. Further, the page coordinate information is used as keywords for character matching in the code file of the page to be converted, identifying the data object in the code file of the page to be converted that is bound to and associated with the page coordinate information.

[0099] S2062. Take the layout component code block to which the data object belongs as the first layout component code block, and determine the first code position of the data object in the first layout component code block.

[0100] The first layout component code block refers to the highest-level user interaction container code unit that wraps the data object in the code file of the page to be converted. The first code position refers to the precise code coordinates of the data object in the layout component code block, including but not limited to the line number, column number, or node path in the abstract syntax tree.

[0101] In one implementation, the layout component code block to which the data object belongs is determined as the first layout component code block based on the previously determined layout component code blocks. Furthermore, the code position of the data object within the first layout component code block is determined as the first code position.

[0102] S2063. Determine the initial front-end framework code file associated with the first layout component code block as the first front-end framework code file, and determine the target code segment in the first front-end framework code file that needs to be syntax-transformed based on the first code position.

[0103] In one implementation, based on the association between the layout component code block and the initial front-end framework code file, the initial front-end framework code file associated with the first layout component code block is selected as the first front-end framework code file. Furthermore, a code search is performed within the first front-end framework code file based on a first code location, and the code snippets within the first front-end framework code file that match the first code location are selected as the target code snippets for syntax conversion. That is, the target code snippet is the code snippet in the first front-end framework code file corresponding to the data object in the page code file to be converted.

[0104] By determining the page coordinates of the dynamic page content on the front-end page, and performing character matching in the code file to be converted based on these page coordinates, the data object associated with the page coordinates in the code file to be converted is identified. The layout component code block to which the data object belongs is designated as the first layout component code block, and the first code position of the data object within this first layout component code block is determined. The initial front-end framework code file associated with the first layout component code block is then designated as the first front-end framework code file, and the target code segment requiring syntax conversion within the first front-end framework code file is determined based on the first code position. The beneficial effects are:

[0105] Traditional methods require manual searching of massive amounts of code to locate the code blocks corresponding to page content. In contrast, this solution automates the process by connecting page coordinates information, data objects, and layout component code blocks, thereby accurately locating layout component code blocks while reducing the time required for location.

[0106] S207. Perform syntax conversion on the target code snippet according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file; generate the target front-end framework project that meets the target front-end framework based on the converted front-end framework code file.

[0107] For example, directives and expressions that conform to JSP syntax in the target code snippet can be converted into expressions and directives that conform to Vue syntax, such as v-bind and v-for.

[0108] Example 3

[0109] Figure 3 This is a flowchart of a front-end framework project conversion method provided in Embodiment 3 of the present invention. This embodiment further optimizes and expands the above embodiments and can be combined with the various optional implementation methods described above. Figure 3 As shown, the method includes:

[0110] S301. Obtain the code files of the pages to be converted contained in the server-side page project to be converted.

[0111] S302. Determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each layout component code block.

[0112] S303. Generate a front-end page based on the code file of the page to be converted, and determine the target controls with interactive functions in the front-end page.

[0113] In this context, the target control refers to a visual interface element on the front-end page that can trigger user interaction and is associated with a specific function. Examples include buttons and input boxes.

[0114] In one implementation, a screenshot of the front-end page is obtained, and a target detection algorithm is used to identify controls based on the screenshot. Based on the identification results, the target controls with interactive functions contained in the front-end page are determined.

[0115] In another implementation, the Hypertext Markup Language (HMR) tags corresponding to the front-end page are obtained, the HMR tags are input into a large language model, and the large language model is used to determine the target controls with interactive functions contained in the front-end page based on the HMR tags.

[0116] S304. Based on the control identification information of the target control, perform character matching in the code file of the page to be converted to determine the listener events associated with the control identification information in the code file of the page to be converted, and determine the event handling methods associated with the listener events.

[0117] Among these, control identification information refers to the unique combination of features that identifies interactive controls on the front-end page. Event listeners refer to declarations that listen for specific interactive behaviors of the target control, such as clicks and input. Event handling methods refer to the JavaScript functions executed in response to event listeners.

[0118] In one implementation, the control identification information is used as a keyword to perform character matching in the code file of the page to be converted, thereby determining the listener events that are bound to the control identification information in the code file of the page to be converted, and the event handling methods that are bound to the listener events.

[0119] S305. The layout component code block to which the event listener and event handling method belong is designated as the second layout component code block, and the second code position of the event listener in the second layout component code block and the third code position of the event handling method in the second layout component code block are determined.

[0120] The second layout component code block refers to the container-level component code unit that carries interactive controls and their event logic. The second code position refers to the physical coordinates of the event listener within the second layout component code block; the third code position refers to the physical coordinates of the event handling method within the second layout component code block.

[0121] In one implementation, based on the previously determined layout component code blocks, the layout component code block to which the event listener and the event handling method belong is determined as the second layout component code block. Furthermore, the code position of the event listener within the second layout component code block is determined as the second code position, and the code position of the event handling method within the second layout component code block is determined as the third code position.

[0122] S306. Determine the initial front-end framework code file associated with the second layout component code block as the second front-end framework code file, and determine the target code segment in the second front-end framework code file that needs to be syntax-transformed based on the second code position and the third code position.

[0123] In one implementation, the initial front-end framework code file associated with the second layout component code block is used as the second front-end framework code file, based on the association between the layout component code block and the initial front-end framework code file.

[0124] Furthermore, based on the second code location, a code search is performed in the second front-end framework code file, and the code snippets in the second front-end framework code file that match the second code location are used as the target code snippets for syntax conversion. That is, the target code snippets include the code snippets in the second front-end framework code file that correspond to the events listened to in the page code file to be converted.

[0125] Furthermore, based on the third code location, a code search is performed in the second front-end framework code file, and the code snippets in the second front-end framework code file that match the third code location are used as the target code snippets for syntax conversion. That is, the target code snippets include the code snippets in the second front-end framework code file corresponding to the event handling methods in the page code file to be converted.

[0126] By generating a front-end page from the code file to be converted and identifying the target controls with interactive functions in the front-end page; performing character matching in the code file to be converted based on the control identifier information of the target controls to identify the listener events associated with the control identifier information in the code file to be converted, and identifying the event handling methods associated with the listener events; taking the layout component code block to which the listener events and event handling methods belong as the second layout component code block, and determining the second code position of the listener events and the third code position of the event handling methods in the second layout component code block; determining the initial front-end framework code file associated with the second layout component code block as the second front-end framework code file, and based on the second and third code positions, determining the target code segments in the second front-end framework code file that need to be syntax-converted, the beneficial effects are:

[0127] Firstly, by using character matching, we can accurately locate the listener events and event handling methods in the code file of the page to be converted, avoiding omissions during manual searching and improving the accuracy of locating listener events and event handling methods.

[0128] Secondly, by using dual-coordinate positioning at the second and third code positions, the target code segment that needs to be syntax-converted can be quickly located, saving time and improving the efficiency of target code segment positioning.

[0129] S307. Perform syntax conversion on the target code snippet according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file; generate the target front-end framework project that meets the target front-end framework based on the converted front-end framework code file.

[0130] Optional, also includes:

[0131] A. Generate the front-end page based on the code file of the page to be converted, and obtain the corresponding Hypertext Markup Language tags for the front-end page.

[0132] B. Perform character matching between the Hypertext Markup Language tags and the code file of the page to be converted to determine the static tag content that exists in both the Hypertext Markup Language tags and the code file of the page to be converted.

[0133] Static tag content refers to tag elements that exist simultaneously in both the code file of the page to be converted and the rendered Hypertext Markup Language tags. Its characteristic is that it does not require dynamic generation at runtime and remains completely consistent between the source code and the rendered result. Examples include image names and table names.

[0134] C. Designate the layout component code block containing the static tag content as the third layout component code block, and determine the initial front-end framework code file associated with the third layout component code block as the third front-end framework code file.

[0135] This refers to the layout component code block containing static tag content, located through a hierarchical filtering mechanism.

[0136] In one implementation, the layout component code block to which the static tag content belongs is determined as the third layout component code block, and the initial front-end framework code file associated with the third layout component code block is determined as the third front-end framework code file based on the association between the layout component code block and the initial front-end framework code file.

[0137] D. Write the static tag content into the view layer block corresponding to the third front-end framework code file.

[0138] In this context, the view layer block refers to the independent code unit responsible for visual rendering in the front-end framework code file, such as the template block in the front-end framework code file.

[0139] In one implementation, the static tag content is copied and written into the view layer block corresponding to the third front-end framework code file.

[0140] By generating a front-end page from the code file of the page to be converted and obtaining the corresponding Hypertext Markup Language (HTML) tags for the front-end page; performing character matching between the HTML tags and the code file of the page to be converted to determine the static tag content that exists in both the HTML tags and the code file of the page to be converted; designating the layout component code block to which the static tag content belongs as the third layout component code block, and determining the initial front-end framework code file associated with the third layout component code block as the third front-end framework code file; and writing the static tag content into the view layer block corresponding to the third front-end framework code file, the beneficial effects are:

[0141] Firstly, static tag content is automatically identified and written into the view layer block of the front-end framework code file, avoiding copying and pasting layout code line by line, improving efficiency and shortening the conversion cycle of front-end framework projects.

[0142] Secondly, by directly writing static tag content into the view layer block, there is no need to calculate the virtual structured object tree, which can improve the rendering speed of subsequent front-end pages.

[0143] Example 4

[0144] Figure 4 This is a flowchart of a front-end framework project conversion method provided in Embodiment 4 of the present invention. This embodiment further optimizes and expands the above embodiments and can be combined with the various optional implementation methods described above. Figure 4 As shown, the method includes:

[0145] S401. Obtain the code files of the pages to be converted contained in the server-side page project to be converted.

[0146] S402. Determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each layout component code block.

[0147] S403. Determine the target code segments that need to be syntax-converted in each initial front-end framework code file, and perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file.

[0148] S404. Obtain the first nesting relationship code between each layout component code block and the first communication method code between each layout component code block from the server-side page project to be converted.

[0149] The first nesting relationship code refers to the structural declaration code of the direct parent-child hierarchy between layout components, describing how a layout component is embedded in the view container of other layout components, forming the outermost nested layer of the hierarchy tree. The first communication method code refers to the most basic data transfer code between adjacent parent-child layout components.

[0150] In one implementation, a first folder containing specific nested code within the server-side page project to be converted is determined, and code extraction is performed from the first folder to identify the first nested code. Additionally, a second folder containing specific communication method code within the server-side page project to be converted is determined, and code extraction is performed from the second folder to identify the first communication method code.

[0151] S405. Determine the second nesting relationship code between each converted front-end framework code file based on the first nesting relationship code, and perform syntax conversion on the first communication method code according to the target framework syntax to obtain the second communication method code.

[0152] The second nested relationship code refers to the hierarchical declaration code between code files reconstructed based on the original first nested relationship code and combined with the characteristics of the target front-end framework during the front-end framework conversion process.

[0153] The second communication method code refers to the data transmission code after the original first communication method code has been reconstructed according to the target framework's syntax rules during the front-end framework conversion process.

[0154] For example, suppose the server-side page project to be converted is a JSP project, and the target front-end framework is the Vue framework. When there is a nested relationship between the layout component code blocks in the JSP file (the page code file to be converted), after splitting it into Vue component files (the front-end framework code files to be converted), the second nested relationship between the Vue component files is determined according to the original first nested relationship code.

[0155] If there is inter-communication between layout component code blocks in the original JSP file (the page code file to be converted), then the original first communication method code will be rewritten according to Vue syntax as the second communication method code between Vue component files (the front-end framework code files to be converted).

[0156] S406. Generate the target front-end framework project based on the converted front-end framework code file, the second nested relationship code, and the second communication method code.

[0157] In one implementation, the second nesting relationship code is written to a third folder in the target front-end framework project that specifically stores nesting relationship code, and the second communication method code is written to a fourth folder in the target front-end framework project that specifically stores communication method code, and then the target front-end framework project is generated by combining the obtained converted front-end framework code file.

[0158] By obtaining the first nesting relationship code between each layout component code block and the first communication method code between each layout component code block from the server-side page project to be converted; determining the second nesting relationship code between each converted front-end framework code file based on the first nesting relationship code; and performing syntax conversion on the first communication method code according to the target framework syntax to obtain the second communication method code; and generating the target front-end framework project based on the converted front-end framework code file, the second nesting relationship code, and the second communication method code, the beneficial effect is that, through the automatic inheritance of nesting relationship code and the automatic translation of communication method code, the conversion cycle of the front-end framework project is shortened compared to the traditional method of manually rewriting nested logic and communication code.

[0159] Optional, also includes:

[0160] Obtain the storage path corresponding to each conversion front-end framework code file, and obtain the browser access address set for each conversion front-end framework code file; generate target mapping relationships based on each storage path and each browser access address.

[0161] The storage path refers to the physical location of the converted front-end framework code files within the project directory. The browser access address refers to the virtual path used by the user when accessing the front-end layout components through the target browser.

[0162] The target browser determines the target storage path based on the target browser access address and the target mapping relationship, and retrieves the target conversion front-end framework code file for page rendering based on the target storage path; the target browser access address is the browser access address entered by the user in the target browser.

[0163] For example, suppose a user enters the target browser access address "http: / / xx.xx.xx.xx / # / about" in the target browser. The target browser determines the target storage path associated with the target browser access address "http: / / xx.xx.xx.xx / # / about" as " / about" based on the target mapping relationship. Then, it will obtain the target conversion front-end framework code file based on the target storage path " / about" for page rendering.

[0164] By obtaining the storage paths corresponding to each conversion front-end framework code file and the browser access addresses set for each conversion front-end framework code file, and generating target mapping relationships based on each storage path and browser access address, the beneficial effect is that by constructing target mapping relationships based on each storage path and browser access address, the front-end and back-end separation effect during page rendering is achieved. This allows the browser to directly call the corresponding front-end framework code file for page rendering using the target mapping relationship, without the need for back-end server involvement, thus improving page rendering efficiency.

[0165] Optional, also includes:

[0166] Determine the data retrieval logic corresponding to the data object, and encapsulate the data retrieval logic into an application programming interface (API); write the API into the first front-end framework code file.

[0167] In front-end framework projects, page loading and rendering are completed on the browser side without server-side involvement. Therefore, dynamic page content data cannot be obtained by directly reading server-side Java data objects. The method for obtaining this data needs to be transformed into a front-end / back-end separated interface approach, typically using application programming interface (API) requests.

[0168] Data acquisition logic refers to the operational rules and implementation code for extracting the data source corresponding to the data object. An Application Programming Interface (API) specifically refers to the standardized encapsulation of data acquisition logic, allowing developers to access data through a unified interface without needing to concern themselves with the underlying implementation details. The target browser retrieves the target data corresponding to the data object from the target server based on the API and renders the page accordingly.

[0169] In one implementation, when the target browser loads the front-end framework page, it sends a data request to the target server when it reads the network request for data retrieval. After receiving the data request, the target server returns the target data to the target browser in an agreed data format. After receiving the target data, the target browser dynamically updates the page content, and the dynamic data is displayed normally on the target browser.

[0170] By defining the data acquisition logic corresponding to the data object and encapsulating the data acquisition logic into an application programming interface (API), and writing the API into the first front-end framework code file, the beneficial effect is that it transforms the data acquisition method of dynamic page content into a front-end and back-end separated interface method, which can ensure the normal rendering of the front-end framework page.

[0171] Example 5

[0172] Figure 5This is a schematic diagram of a front-end framework project conversion device provided in Embodiment 5 of the present invention. It is applicable to situations where outdated server-side page projects are converted into technologically advanced front-end framework projects, such as... Figure 5 As shown, the device includes:

[0173] The code file acquisition module 51 is used to acquire the code file of the page to be converted contained in the server-side page project to be converted;

[0174] The layout component code block determination module 52 is used to determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each of the layout component code blocks.

[0175] The syntax conversion module 53 is used to determine the target code segments that need to be syntax converted in each of the initial front-end framework code files, and to perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file.

[0176] The framework project generation module 54 is used to generate a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file.

[0177] Optionally, the layout component code block determination module 52 is specifically used for:

[0178] A front-end page is generated based on the code file of the page to be converted, and at least one type of layout component is determined in the front-end page;

[0179] Determine the component identification information corresponding to each of the layout components, and perform character matching on the code file of the page to be converted according to the component identification information to determine the matching code block where each component identification information is located in the code file of the page to be converted.

[0180] Each of the matching code blocks is used as the layout component code block.

[0181] Optionally, the syntax conversion module 53 is specifically used for:

[0182] Generate a front-end page based on the code file of the page to be converted, and obtain the corresponding Hypertext Markup Language tags for the front-end page;

[0183] The Hypertext Markup Language tags are matched with the page code file to be converted, and the dynamic page content in the front-end page is determined based on the character matching results.

[0184] Based on the content of the dynamic page, determine the target code segments in each of the initial front-end framework code files that need to undergo syntax transformation.

[0185] Optionally, the syntax conversion module 53 is further used for:

[0186] Identify dynamic tag content that does not exist in the code file of the page to be converted, but exists in the Hypertext Markup Language tags;

[0187] The page content corresponding to the dynamic tag content in the front-end page is determined as the dynamic page content.

[0188] Optionally, the syntax conversion module 53 is further used for:

[0189] Determine the page coordinate information corresponding to the dynamic page content in the front-end page, and perform character matching in the code file of the page to be converted based on the page coordinate information to determine the data object associated with the page coordinate information in the code file of the page to be converted;

[0190] The layout component code block to which the data object belongs is taken as the first layout component code block, and the first code position of the data object in the first layout component code block is determined.

[0191] The initial front-end framework code file associated with the first layout component code block is determined as the first front-end framework code file, and the target code segment that needs to be syntax-transformed in the first front-end framework code file is determined according to the first code position.

[0192] Optionally, the syntax conversion module 53 is further used for:

[0193] A front-end page is generated based on the code file of the page to be converted, and the target controls with interactive functions in the front-end page are determined.

[0194] Based on the control identification information of the target control, character matching is performed in the code file of the page to be converted to determine the listening events associated with the control identification information in the code file of the page to be converted, and the event handling methods associated with the listening events are determined.

[0195] The layout component code block to which the listening event and the event handling method belong is designated as the second layout component code block, and the second code position of the listening event in the second layout component code block and the third code position of the event handling method in the second layout component code block are determined.

[0196] The initial front-end framework code file associated with the second layout component code block is determined as the second front-end framework code file, and the target code segment that needs to be syntax-transformed in the second front-end framework code file is determined according to the second code position and the third code position.

[0197] Optionally, the device further includes a view layer block editing module, specifically used for:

[0198] Generate a front-end page based on the code file of the page to be converted, and obtain the corresponding Hypertext Markup Language tags for the front-end page;

[0199] The Hypertext Markup Language (HTML) tags are matched with the page code file to be converted to determine the static tag content that exists in both the HTML tags and the page code file to be converted.

[0200] The layout component code block to which the static tag content belongs is designated as the third layout component code block, and the initial front-end framework code file associated with the third layout component code block is designated as the third front-end framework code file.

[0201] The static tag content is written into the view layer block corresponding to the third front-end framework code file.

[0202] Optionally, the device may further include other code conversion modules, specifically used for:

[0203] Obtain the first nesting relationship code between each layout component code block and the first communication method code between each layout component code block from the server-side page project to be converted;

[0204] The second nesting relationship code between each of the converted front-end framework code files is determined based on the first nesting relationship code, and the first communication method code is syntactically converted according to the target framework syntax to obtain the second communication method code;

[0205] The target front-end framework project is generated based on the converted front-end framework code file, the second nesting relationship code, and the second communication method code.

[0206] Optionally, the device further includes a front-end routing module, specifically used for:

[0207] Obtain the storage path corresponding to each of the conversion front-end framework code files, and obtain the browser access address set for each of the conversion front-end framework code files;

[0208] Generate a target mapping relationship based on each of the storage paths and each of the browser access addresses;

[0209] Specifically, the target browser determines the target storage path based on the target browser access address and the target mapping relationship, and obtains the target conversion front-end framework code file for page rendering based on the target storage path; the target browser access address is the browser access address entered by the user in the target browser.

[0210] Optionally, the device further includes an interface encapsulation module, specifically used for:

[0211] Determine the data acquisition logic corresponding to the data object, and encapsulate the data acquisition logic into an application programming interface;

[0212] Write the application programming interface into the first front-end framework code file;

[0213] The target browser obtains the target data corresponding to the data object from the target server according to the application programming interface, and performs page rendering based on the target data.

[0214] The front-end framework project conversion device provided in this embodiment of the invention can execute the front-end framework project conversion method provided in any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0215] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0216] Example 6

[0217] Figure 6 A schematic diagram of an electronic device 60 that can be used to implement embodiments of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (e.g., helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0218] like Figure 6As shown, the electronic device 60 includes at least one processor 61 and a memory, such as a read-only memory (ROM) 62 and a random access memory (RAM) 63, communicatively connected to the at least one processor 61. The memory stores computer programs executable by the at least one processor. The processor 61 can perform various appropriate actions and processes based on the computer program stored in the ROM 62 or loaded from storage unit 68 into the RAM 63. The RAM 63 can also store various programs and data required for the operation of the electronic device 60. The processor 61, ROM 62, and RAM 63 are interconnected via a bus 64. An input / output (I / O) interface 65 is also connected to the bus 64.

[0219] Multiple components in electronic device 60 are connected to I / O interface 65, including: input unit 66, such as keyboard, mouse, etc.; output unit 67, such as various types of monitors, speakers, etc.; storage unit 68, such as disk, optical disk, etc.; and communication unit 69, such as network card, modem, wireless transceiver, etc. Communication unit 69 allows electronic device 60 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0220] Processor 61 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 61 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 61 performs the various methods and processes described above, such as the transformation methods of a front-end framework project.

[0221] In some embodiments, the front-end framework project conversion method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 68. In some embodiments, part or all of the computer program may be loaded and / or installed on electronic device 60 via ROM 62 and / or communication unit 69. When the computer program is loaded into RAM 63 and executed by processor 61, one or more steps of the front-end framework project conversion method described above may be performed. Alternatively, in other embodiments, processor 61 may be configured to perform the front-end framework project conversion method by any other suitable means (e.g., by means of firmware).

[0222] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations may include: implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0223] Computer programs used to implement the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0224] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0225] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0226] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or computing systems that include middleware components (e.g., application servers), or computing systems that include frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0227] A computing system can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a host product within the cloud computing service system to address the shortcomings of traditional physical hosts and virtual private servers, such as high management difficulty and weak business scalability.

[0228] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0229] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for converting a front-end framework project, characterized in that, The method includes: Obtain the code files of the pages to be converted from the server-side page project; Identify at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each of the layout component code blocks; Identify the target code segments in each of the initial front-end framework code files that need to be syntax-converted, and perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file; The target front-end framework project that satisfies the target front-end framework is generated based on the converted front-end framework code file.

2. The method according to claim 1, characterized in that, The step of determining that the page code file to be converted contains at least one type of layout component code block includes: A front-end page is generated based on the code file of the page to be converted, and at least one type of layout component is determined in the front-end page; Determine the component identification information corresponding to each of the layout components, and perform character matching on the code file of the page to be converted according to the component identification information to determine the matching code block where each component identification information is located in the code file of the page to be converted. Each of the matching code blocks is used as the layout component code block.

3. The method according to claim 1, characterized in that, The determination of the target code segments that need to undergo syntax transformation in each of the initial front-end framework code files includes: Generate a front-end page based on the code file of the page to be converted, and obtain the corresponding Hypertext Markup Language tags for the front-end page; The Hypertext Markup Language tags are matched with the page code file to be converted, and the dynamic page content in the front-end page is determined based on the character matching results. Based on the content of the dynamic page, determine the target code segments in each of the initial front-end framework code files that need to undergo syntax transformation.

4. The method according to claim 3, characterized in that, Determining the dynamic page content in the front-end page based on the character matching result includes: Identify dynamic tag content that does not exist in the code file of the page to be converted, but exists in the Hypertext Markup Language tags; The page content corresponding to the dynamic tag content in the front-end page is determined as the dynamic page content.

5. The method according to claim 3, characterized in that, The step of determining the target code segments that need to undergo syntax transformation in each of the initial front-end framework code files based on the dynamic page content includes: Determine the page coordinate information corresponding to the dynamic page content in the front-end page, and perform character matching in the code file of the page to be converted based on the page coordinate information to determine the data object associated with the page coordinate information in the code file of the page to be converted; The layout component code block to which the data object belongs is taken as the first layout component code block, and the first code position of the data object in the first layout component code block is determined. The initial front-end framework code file associated with the first layout component code block is determined as the first front-end framework code file, and the target code segment that needs to be syntax-transformed in the first front-end framework code file is determined according to the first code position.

6. The method according to claim 1, characterized in that, The determination of the target code segments that need to undergo syntax transformation in each of the initial front-end framework code files includes: A front-end page is generated based on the code file of the page to be converted, and the target controls with interactive functions in the front-end page are determined. Based on the control identification information of the target control, character matching is performed in the code file of the page to be converted to determine the listening events associated with the control identification information in the code file of the page to be converted, and the event handling methods associated with the listening events are determined. The layout component code block to which the listening event and the event handling method belong is designated as the second layout component code block, and the second code position of the listening event in the second layout component code block and the third code position of the event handling method in the second layout component code block are determined. The initial front-end framework code file associated with the second layout component code block is determined as the second front-end framework code file, and the target code segment that needs to be syntax-transformed in the second front-end framework code file is determined according to the second code position and the third code position.

7. The method according to claim 1, characterized in that, Also includes: Generate a front-end page based on the code file of the page to be converted, and obtain the corresponding Hypertext Markup Language tags for the front-end page; The Hypertext Markup Language (HTML) tags are matched with the page code file to be converted to determine the static tag content that exists in both the HTML tags and the page code file to be converted. The layout component code block to which the static tag content belongs is designated as the third layout component code block, and the initial front-end framework code file associated with the third layout component code block is designated as the third front-end framework code file. The static tag content is written into the view layer block corresponding to the third front-end framework code file.

8. The method according to claim 1, characterized in that, The step of generating a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file includes: Obtain the first nesting relationship code between each layout component code block and the first communication method code between each layout component code block from the server-side page project to be converted; The second nesting relationship code between each of the converted front-end framework code files is determined based on the first nesting relationship code, and the first communication method code is syntactically converted according to the target framework syntax to obtain the second communication method code; The target front-end framework project is generated based on the converted front-end framework code file, the second nesting relationship code, and the second communication method code.

9. The method according to claim 1, characterized in that, Also includes: Obtain the storage path corresponding to each of the conversion front-end framework code files, and obtain the browser access address set for each of the conversion front-end framework code files; Generate a target mapping relationship based on each of the storage paths and each of the browser access addresses; Specifically, the target browser determines the target storage path based on the target browser access address and the target mapping relationship, and obtains the target conversion front-end framework code file for page rendering based on the target storage path; the target browser access address is the browser access address entered by the user in the target browser.

10. The method according to claim 5, characterized in that, Also includes: Determine the data acquisition logic corresponding to the data object, and encapsulate the data acquisition logic into an application programming interface; Write the application programming interface into the first front-end framework code file; The target browser obtains the target data corresponding to the data object from the target server according to the application programming interface, and performs page rendering based on the target data.

11. A conversion device for front-end framework projects, characterized in that, The device includes: The code file retrieval module is used to retrieve the code files of the pages to be converted contained in the server-side page project. The layout component code block determination module is used to determine at least one type of layout component code block contained in the code file of the page to be converted, and generate an initial front-end framework code file according to each of the layout component code blocks. The syntax conversion module is used to determine the target code segments that need to be syntax converted in each of the initial front-end framework code files, and to perform syntax conversion on the target code segments according to the target framework syntax corresponding to the target front-end framework to obtain the converted front-end framework code file. The framework project generation module is used to generate a target front-end framework project that satisfies the target front-end framework based on the converted front-end framework code file.

12. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the conversion method for the front-end framework project according to any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a processor to execute the conversion method for a front-end framework project as described in any one of claims 1-10.

14. A computer program product comprising a computer program that, when executed by a processor, implements the conversion method for a front-end framework project according to any one of claims 1-10.

Images