Front-end page generation method, device, program product, and electronic device

Abstract

The application discloses a front-end page generation method and device, a program product and electronic equipment, and relates to the technical field of front ends, and the method comprises the following steps: analyzing annotation data of back-end code to obtain an analysis result, wherein the analysis result at least comprises a page identifier and component data of L page components, L is a positive integer, the page identifier is used for representing a function implemented by the back-end code, and the type of each page component is one of the following: a form type and a table type; determining a page template corresponding to the back-end code based on the page identifier, wherein the page template comprises at least one of the following: a form page sub-template and a table page sub-template; generating target front-end code based on the component data of the L page components and the page template; and generating a target front-end page corresponding to the back-end code based on the target front-end code. The application solves the technical problems of low generation efficiency and inconsistent page styles of front-end pages in the prior art.

Description

Technical Field

[0001] This application relates to the field of front-end technology, and more specifically, to a method, apparatus, program product, and electronic device for generating front-end pages. Background Technology

[0002] In existing technologies, when developing software or systems that include a user interface, developers need to develop corresponding front-end pages for each back-end function. This development approach has the following drawbacks:

[0003] (1) The front-end page and the back-end function need to be developed separately, which involves a lot of work;

[0004] (2) Front-end and back-end development require different technology stacks, and back-end developers cannot complete front-end page development;

[0005] (3) Pages with different functions are developed separately, and it is impossible to guarantee that the design of pages with different functions is consistent.

[0006] There is currently no effective solution to the technical problems of low front-end page development efficiency and inconsistent page style in the existing technologies mentioned above. Summary of the Invention

[0007] This application provides a method, apparatus, program product, and electronic device for generating front-end pages, so as to at least solve the technical problems of low generation efficiency and inconsistent page style in the prior art.

[0008] According to one aspect of this application, a method for generating a front-end page is provided, comprising: parsing comment data of back-end code to obtain a parsing result, wherein the parsing result includes at least a page identifier and component data of L page components, wherein L is a positive integer, the page identifier is used to characterize the function implemented by the back-end code, and each page component is of one of the following types: form type, table type; determining a page template corresponding to the back-end code based on the page identifier, wherein the page template includes at least one of the following: form page sub-template, table page sub-template; generating target front-end code based on the component data of the L page components and the page template; and generating a target front-end page corresponding to the back-end code based on the target front-end code.

[0009] Optionally, the comment data of the backend code is parsed to obtain the parsing result, including: obtaining the backend code file, wherein the backend code file includes at least backend code and comment data with a preset syntax format; classifying the comment data to obtain functional code comment data and comment data of L page components; determining the page identifier based on the preset page name field in the functional code comment data; determining the component data of each page component based on the preset comment field in the comment data of each page component; and using the page identifier and the component data of the L page components as the parsing result.

[0010] Optionally, the preset annotation fields in the annotation data of the form-type page component include at least one of the following: a first preset form annotation field, used to determine the title name of the form; a second preset form annotation field, used to determine the callback function that interacts with the parameters in the form, wherein the callback function includes at least one of the following: an initial value retrieval function, a parameter value submission function; and a third preset form annotation field, used to determine the parameter name, parameter type, and display name of the parameter on the front-end page corresponding to the parameter in the form.

[0011] Optionally, the preset annotation fields in the annotation data of the table-type page component include at least one of the following: a first preset table annotation field for determining the table title; a second preset table annotation field for determining the processing function of the row data in the table, wherein the processing function includes at least one of the following: query function, modification function, add function, delete function; a third preset table annotation field for determining the column attribute information of the table; and a fourth preset table annotation field for determining the primary key information of the row data in the table.

[0012] Optionally, determining the component data of each page component based on preset annotation fields in the annotation data of each page component includes: parsing the annotation data of each page component based on the preset annotation fields to obtain X preset annotation fields and the field value of each preset annotation field corresponding to each page component, where X is a positive integer; generating X key-value pairs corresponding to each page component based on the X preset annotation fields and the field value of each preset annotation field, where the key in each key-value pair is a preset annotation field and the value in each key-value pair is the field value of the corresponding preset annotation field; and using the X key-value pairs corresponding to each page component as the component data of each page component.

[0013] Optionally, generating target front-end code based on component data and page templates of L page components includes: determining the matching page sub-template for each page component based on the type of each page component; generating component code corresponding to each page component based on component data and matching page sub-templates of each page component; generating initial code based on the page templates, wherein the initial code is used to determine the structural skeleton of the target front-end page, and the initial code reserves insertion positions for the component code corresponding to the L page components; and inserting L segments of component code corresponding to the L page components into the initial code to obtain the target front-end code.

[0014] Optionally, the component code corresponding to each page component is generated based on the component data of each page component and the matching page sub-template, including: when the type of the i-th page component among the L page components is a form type, the following operations are performed based on the component data of the i-th page component and the form page sub-template: a first operation, used to fill the value of the first key-value pair in the component data into the position of the form title in the form page sub-template, wherein the key of the first key-value pair is a first preset form comment field; a second operation, used to fill the value of the second key-value pair in the component data into the position of the corresponding preset form event in the form page sub-template, wherein the key of the second key-value pair is a second preset form comment field, and the preset form event is one of the following: page load event, submit button event; a third operation, used to generate form input code based on the value of the third key-value pair in the component data, and insert the form input code into the form page sub-template, wherein the key of the third key-value pair is a third preset form comment field, and the form input code is used to provide an input box for the parameter value in the form on the target front-end page; the component code corresponding to the i-th page component is determined based on the form page sub-template obtained by performing the above operations.

[0015] Optionally, component code corresponding to each page component is generated based on the component data of each page component and the matching page sub-template, including: when the type of the j-th page component among the L page components is a table type, the following operations are performed on the table page sub-template based on the component data of the j-th page component: a fourth operation, used to fill the value of the fourth key-value pair in the component data into the position of the table title in the table page sub-template, wherein the key of the fourth key-value pair is a first preset table comment field; a fifth operation, used to fill the value of the fifth key-value pair in the component data into the position of the corresponding preset table event in the table page sub-template, wherein the key of the fifth key-value pair is a second preset table comment field, and the preset table event is one of the following: query button event, modify button event, etc. The event includes button events, add button events, and delete button events; the sixth operation generates column attribute display code based on the value of the sixth key-value pair in the component data and inserts the column attribute display code into the table page sub-template, where the key of the sixth key-value pair is the third preset table comment field, and the column attribute display code is used to display the column attribute information of the table in the target front-end page; the seventh operation generates table input code based on the value of the seventh key-value pair in the component data and inserts the table input code into the table page sub-template, where the key of the seventh key-value pair is the fourth preset table comment field, and the table input code is used to provide input boxes for row data in the table in the preset pop-up window; the component code corresponding to the j-th page component is determined based on the table page sub-template obtained by performing the above operations.

[0016] According to another aspect of this application, a front-end page generation apparatus is also provided, comprising: an annotation parsing unit, configured to parse annotation data of back-end code to obtain a parsing result, wherein the parsing result includes at least a page identifier and component data of L page components, wherein L is a positive integer, the page identifier is used to characterize the function implemented by the back-end code, and each page component is of one of the following types: form type, table type; a template determining unit, configured to determine a page template corresponding to the back-end code based on the page identifier, wherein the page template includes at least one of the following: form page sub-template, table page sub-template; a code generation unit, configured to generate target front-end code based on the component data of the L page components and the page template; and a page generation unit, configured to generate a target front-end page corresponding to the back-end code based on the target front-end code.

[0017] According to another aspect of this application, a computer program product is also provided, which stores a computer program, wherein the method for generating a front-end page that controls the computer program product to execute any of the above-mentioned methods when the computer program is running is also provided.

[0018] According to another aspect of this application, an electronic device is also provided, wherein the electronic device includes one or more processors and a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the front-end page generation method of any of the above.

[0019] In this application, the comment data of the backend code is first parsed to obtain the parsing result. The parsing result includes at least a page identifier and component data of L page components, where L is a positive integer. The page identifier is used to characterize the function implemented by the backend code. The type of each page component is one of the following: form type, table type. Then, the page template corresponding to the backend code is determined based on the page identifier. The page template includes at least one of the following: form page sub-template, table page sub-template. Then, the target frontend code is generated based on the component data of the L page components and the page template. Subsequently, the target frontend page corresponding to the backend code is generated based on the target frontend code.

[0020] As can be seen from the above, this application adopts the method of adding structured comment data in advance to the backend code. By parsing the comment data, the page identifier and form / table type component data of the front-end page to be developed are obtained, and the preset form page sub-template / table page sub-template is automatically matched to generate the target front-end code. This achieves the goal of eliminating the need for manual writing of front-end code, thereby realizing the automated generation of the front-end page. Since this application uses a preset page template to generate the front-end code, the component style in the front-end page obtained by running the front-end code is consistent.

[0021] Therefore, the entire front-end page generation process in this application is based on back-end annotation-driven development, requiring no intervention from front-end developers. All generated front-end pages and multiple components within each front-end page are automatically generated using the same template, ensuring consistency in page component layout, interaction logic, and control styles. This also eliminates repetitive work and waiting periods in front-end and back-end collaborative development, thereby solving the technical problems of low front-end page generation efficiency and inconsistent page styles in existing technologies. Attached Figure Description

[0022] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0023] Figure 1 This is a flowchart of an optional front-end page generation method according to an embodiment of this application;

[0024] Figure 2This is a schematic diagram of an optional front-end code generation process according to an embodiment of this application;

[0025] Figure 3 This is a schematic diagram illustrating the generation effect of an optional front-end page according to an embodiment of this application;

[0026] Figure 4 This is a schematic diagram of an optional front-end page generation apparatus according to an embodiment of this application;

[0027] Figure 5 This is a structural block diagram of an electronic device according to an embodiment of this application. Detailed Implementation

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

[0029] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application 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 this application 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.

[0030] It should also be noted that all information and data (including but not limited to information used for display and analysis) involved in this application are authorized by the user or fully authorized by all parties. For example, if there is an interface between this system and the relevant user or organization, before obtaining the relevant information, it is necessary to send a request to the aforementioned user or organization through the interface, and obtain the relevant information only after receiving consent from the aforementioned user or organization.

[0031] Furthermore, the collection, storage, use, processing, transmission, provision, disclosure, and application of relevant information and data involved in this application all comply with the relevant laws, regulations, and standards of the relevant regions, and necessary security measures have been taken. They do not violate public order and good morals. In addition, this application provides corresponding operation entry points for users to choose to agree to authorization or refuse authorization. If the user chooses to refuse authorization, the corresponding expert decision-making process will be initiated.

[0032] This application aims to provide a method for automatically generating front-end pages based on comments. By parsing scripts, it automatically generates responsive front-end pages using page templates, saving the workload of front-end page development. Developers only need to add comments of a specific format when writing back-end code according to requirements, without needing to learn additional front-end development technologies. Since all pages are generated based on the same page template, the page style of all pages can also be kept consistent.

[0033] The present invention will now be described in detail with reference to various embodiments.

[0034] Example 1

[0035] According to an embodiment of this application, an embodiment of a method for generating a front-end page is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0036] This application provides a front-end page generation system (hereinafter referred to as the generation system) for executing the front-end page generation method of this application. Figure 1 This is a flowchart of an optional front-end page generation method according to an embodiment of this application, such as... Figure 1 As shown, the method includes the following steps:

[0037] Step S101: Parse the comment data of the backend code to obtain the parsing result. The parsing result includes at least the page identifier and the component data of L page components, where L is a positive integer. The page identifier is used to represent the function implemented by the backend code. The type of each page component is one of the following: form type, table type.

[0038] Optionally, a backend function's code file corresponds to a frontend page. The generation system pre-adds comment data to the header of the backend code file, where the comment data includes function code comment data, form-type page component comment data, and / or table-type page component comment data.

[0039] Optionally, the generation system automatically parses the annotation data using a static parsing tool, thereby automatically extracting the page function definition from the annotation data as the page identifier. This eliminates the need for developers to manually identify and infer functions from the backend code. Furthermore, the static parsing tool can automatically distinguish whether different page components belong to form or table types, eliminating the need for front-end developers to manually categorize them. This avoids introducing human errors and improves the efficiency and accuracy of subsequent annotation data parsing.

[0040] Step S102: Determine the page template corresponding to the backend code based on the page identifier, wherein the page template includes at least one of the following: form page sub-template, table page sub-template.

[0041] Optionally, a page template refers to a front-end page code template that includes at least one standard page format; a form page sub-template refers to a code template specifically designed to generate form-type page components, including form titles, input fields, submit buttons, and load events; and a table page sub-template refers to a code template specifically designed to generate table-type page components with add, delete, modify, and query functions.

[0042] Optionally, the generation system selects the corresponding page sub-template based on the page component type identifier extracted from the annotation data. For example, if the annotation data contains a preset annotation field "@form", the generation system selects the "form page sub-template"; if the annotation data contains a preset annotation field "@list", the generation system selects the "table page sub-template".

[0043] Optionally, the generation system determines the page template corresponding to the backend code based on the page identifier, avoiding the process of developers repeatedly developing frontend code based on the page functions represented by different page identifiers, thereby improving the efficiency of subsequent frontend code generation.

[0044] Step S103: Generate the target front-end code based on the component data and page templates of L page components.

[0045] Optionally, the generation system generates executable component code by replacing or inserting specific values ​​from the component data into placeholders in the corresponding page sub-template. Then, the generation system generates initial code based on the page template. The initial code is used to determine the structural skeleton of the target front-end page. Then, the generation system inserts L segments of component code corresponding to L page components into the specified reserved positions in the initial code, thereby automatically generating the target front-end code.

[0046] For example, the generation system can replace code in specified reserved locations or insert standard component code into page sub-templates based on component data. This achieves the following: replacing code in specified reserved locations in the page sub-template allows modification of information such as the page title and the backend requests corresponding to page operations; inserting standard component code in specified reserved locations in the page sub-template enables page functionality such as adding table columns and form items. Because the code framework in the page template is fixed, the style design and style of the generated front-end pages can be guaranteed to be consistent, thus eliminating the problems of chaotic front-end page styles and poor user experience caused by manual development.

[0047] Step S104: Generate the target front-end page corresponding to the back-end code based on the target front-end code.

[0048] Optionally, the target front-end page, the interface that the user actually accesses and interacts with in the browser, is generated by the execution of the target front-end code.

[0049] Optionally, the generation system saves the complete target front-end code to the front-end project directory. After the front-end server detects changes to the front-end project, it automatically reloads the corresponding code files. Users can then access the front-end page corresponding to the back-end code by visiting the page path in their browser.

[0050] Optionally, through the above steps, the generation system achieves full automation of adding annotation data to the front-end page visualization. The entire front-end page generation process does not require manual intervention, reducing the workload of developers and realizing a development closed loop of "the front-end page takes effect immediately after the back-end comments are written", thereby improving the development efficiency of the front-end page.

[0051] As can be seen from the above, this application adopts the method of adding structured comment data in advance to the backend code. By parsing the comment data, the page identifier and form / table type component data of the front-end page to be developed are obtained, and the preset form page sub-template / table page sub-template is automatically matched to generate the target front-end code. This achieves the goal of eliminating the need for manual writing of front-end code, thereby realizing the automated generation of the front-end page. Since this application uses a preset page template to generate the front-end code, the component style in the front-end page obtained by running the front-end code is consistent.

[0052] Therefore, the entire front-end page generation process in this application is based on back-end annotation-driven development, requiring no intervention from front-end developers. All generated front-end pages and multiple components within each front-end page are automatically generated using the same template, ensuring consistency in page component layout, interaction logic, and control styles. This also eliminates repetitive work and waiting periods in front-end and back-end collaborative development, thereby solving the technical problems of low front-end page generation efficiency and inconsistent page styles in existing technologies.

[0053] In one optional embodiment, the generation system first obtains a backend code file, wherein the backend code file includes at least backend code and comment data with a preset syntax format. Then, the generation system classifies the comment data to obtain functional code comment data and comment data for L page components. Next, the generation system determines the page identifier based on the preset page name field in the functional code comment data. Subsequently, the generation system determines the component data of each page component based on the preset comment field in the comment data of each page component. Finally, the generation system uses the page identifier and the component data of the L page components as the parsing result.

[0054] Optionally, backend code files, program files written by developers, such as Java (a programming language) files, contain business logic.

[0055] Optionally, after the developers have completed the development of the backend code, the generation system generates comment data with a preset syntax format based on the backend code. Then, the comment data is added to the corresponding position in the initial code file to obtain the backend code file.

[0056] Optionally, functional code comment data is added to the beginning of the code file to indicate the page identifier (i.e., page name) of the corresponding front-end page, and the data format is as follows:

[0057] /

[0058] @page The name of the page displayed on the interface.

[0059] @auther Author

[0060] @version version number

[0061] @date Creation date

[0062] /

[0063] Optionally, the comment data for form-type page components is used to describe the page information of the form components to be generated. A set of form-type comment data corresponds to a form component on the front-end page. The form contains one or more lines of input and output information and a submit button. A back-end code file can contain multiple sets of form-type comment data, with the data format as follows:

[0064] /

[0065] @form form title name

[0066] @init initFunction

[0067] @apply applyFunction

[0068] @param param1 Int parameter1

[0069] @param param2 String parameter2

[0070] /

[0071] Optionally, the annotation data for table-type page components is used to describe the page information of the table components to be generated. A set of table-type annotation data corresponds to a table component on the front-end page, which includes a visual table field and table data operation buttons. A back-end code file can contain multiple sets of table-type annotation data, with the following data format:

[0072] /

[0073] @list table header name

[0074] @searchsearchFuction

[0075] @modify modifyFuncion

[0076] @add addFunction

[0077] @del delFunction

[0078] @param_main paramMain String Primary key parameter

[0079] @param param1 Int parameter1

[0080] /

[0081] Optionally, the system scans the backend project directory, selects a backend code file, extracts the comment data, and then categorizes the comment data. For example, when the @page field is identified, it is classified as functional code comment data; when the @form field is identified, it is classified as a page component comment data, type: form; when the @list field is identified, it is classified as another page component comment data, type: table.

[0082] Optionally, the generation system, through the steps in the above embodiments, implements a mechanism for automatically and structurally extracting comment data from the original backend code file. This mechanism identifies and classifies comment data, allowing the system to automatically distinguish between "overall page information" and "functional module information within the page" without requiring manual interpretation of the comment content. The mechanism extracts key comment fields using fixed fields (such as @page, @form, and @param) to ensure the accuracy of the comment information. Finally, the mechanism outputs parsing results in a unified format, providing reliable input for subsequent page template matching and frontend code generation. The entire process of extracting parsing results eliminates the need for manual organization of the page structure from code comments, avoiding omissions or mismatches caused by misunderstandings, thereby improving the startup efficiency and data accuracy of frontend page generation.

[0083] In one optional embodiment, the preset annotation fields in the annotation data of a form-type page component include at least one of the following:

[0084] The first preset form comment field is used to determine the title of the form; the second preset form comment field is used to determine the callback function that interacts with the parameters in the form, wherein the callback function includes at least one of the following: an initial value retrieval function and a parameter value submission function; the third preset form comment field is used to determine the parameter name, parameter type, and the display name of the parameter on the front-end page corresponding to the parameter in the form.

[0085] Optionally, the first preset form comment field refers to the @form field, where @form is the header of the form type comment, and the form title name displayed on the page is followed by this field; the second preset form comment field refers to @init or @apply, where @init is the form initial data retrieval function, used to retrieve the initial display data of the form, and is not a required field, and @apply is the form submission function, used to submit form information and retrieve the submission result; the third preset form comment field refers to the @param field, where @param is used to represent form parameter information. A set of form type comment data can contain multiple lines of @param fields, each line representing a parameter, and the parameter name, parameter type, and parameter display name on the page are filled in after the @param field.

[0086] Optionally, by setting a first preset form comment field, the generation system can prevent front-end developers from manually writing title text, ensuring that the title content is completely consistent with the back-end function description, reducing naming ambiguity, and improving the semantic accuracy of the interface. By setting a second preset form comment field, the generation system allows the interaction logic of the front-end page (data loading, submission) to be entirely defined by comments. Developers do not need to manually write code; the generation system automatically writes the function names into the front-end event binding logic, ensuring that the front-end and back-end function names correspond one-to-one, thereby eliminating call errors or interface mismatches. By setting a third preset form comment field, the generation system can automatically generate the corresponding front-end input controls (such as text boxes) based on this information. At the same time, the parameter name is used to bind the front-end DOM (Document Object Model) element, the page display name is used to generate tag text, and the parameter type can be used as the basis for front-end validation. At this time, developers do not need to manually write form items on the front end, avoiding missing fields or spelling errors, ensuring that each parameter is completely aligned between the front end and the back end, and improving the generation accuracy of form components.

[0087] In one optional embodiment, the preset annotation fields in the annotation data of the table-type page component include at least one of the following:

[0088] The first preset table comment field is used to determine the table title; the second preset table comment field is used to determine the processing function for the row data in the table, wherein the processing function includes at least one of the following: query function, modification function, add function, delete function; the third preset table comment field is used to determine the column attribute information of the table; the fourth preset table comment field is used to determine the primary key information of the row data in the table.

[0089] Optionally, the first preset table comment field refers to the `@list` field, where `@list` is the header of the table type comment, and the field is followed by the table title name displayed on the page. The second preset table comment field refers to the `@search`, `@modify`, `@add`, or `@del` fields. `@search` represents the function name of a table query function and is unique within a table comment; `@modify` represents the function name of a function to modify row data in a table and is unique within a table comment (optional); `@add` represents the function name of a function to add a row of data to a table and is unique within a table comment (optional); `@del` represents the function name of a function to delete a row of data from a table. Aside from the function name of a single row of data functions, it is unique within a table comment and is not a required field; the third default table comment field is the @param field, which is used to represent the column data information of the table. A set of table type comment data can contain multiple rows of @param fields, each row representing a column of data. The column parameter name, column parameter type, and page display column name are filled in after this field; the fourth default table comment field is the @param_main field, which is used to fill in the primary key data variable name, variable type, and page display name for each row of data. Modification, addition, and deletion of the table all use primary key operations, and it is unique within a table comment.

[0090] Optionally, the generation system sets a first preset table annotation field, directly using the string in the annotation (such as "device list") as the display title of the front-end table, avoiding manual title writing by front-end personnel, ensuring that the title is completely consistent with the back-end function name, and improving the semantic clarity of the interface; the generation system sets a second preset table annotation field, with each field bound to a back-end function, corresponding to the "query," "modify," "add," and "delete" button operations on the front end, respectively. The visibility and functionality of the front-end buttons are completely controlled by the annotations, eliminating the need for manual judgment of whether a certain operation is needed, and avoiding functional omissions or redundancy; the generation system sets a third preset table annotation field... The system eliminates the need for manual column definition writing, ensuring that column order, names, and types are consistent with the backend and preventing field misalignment or display errors. The generation system uses a fourth preset table comment field to clearly identify the unique key value of each row of data, used for parameter passing during modification, deletion, and addition operations. For example, when generating "Modify" and "Delete" buttons, the system automatically passes the primary key value as a request parameter to the backend function. When generating the "Add" pop-up form, the primary key field is not displayed (usually auto-incrementing), but other fields can inherit the column definition, thus preventing modification / deletion operations from being aimless due to an undefined primary key and preventing accidental operations or data corruption.

[0091] In one optional embodiment, the generation system first parses the annotation data of each page component based on preset annotation fields to obtain X preset annotation fields and the field value of each preset annotation field for each page component, where X is a positive integer. Then, based on the X preset annotation fields and the field value of each preset annotation field, the generation system generates X key-value pairs for each page component, where the key in each key-value pair is a preset annotation field and the value in each key-value pair is the field value of the corresponding preset annotation field. Finally, the generation system uses the X key-value pairs for each page component as the component data for each page component.

[0092] Optionally, preset comment fields refer to field identifiers defined in comments using a fixed format, such as @form, @init, and @param; field values ​​refer to the specific content following each preset comment field, such as "warning threshold" after @form and "getCurrentWarnSetting" after @init.

[0093] Optionally, the generation system parses the comments in the backend code file to form one or more page data. Each component data includes multiple key-value pairs consisting of id (key, corresponding to the preset comment field) and value (value, corresponding to the field value).

[0094] Optionally, the generation system parses X preset comment fields and their values ​​for each page component, transforming unstructured comments into processable raw data items. This standardizes the parsing of comment content and avoids recognition failures due to different comment writing habits. Then, based on the X preset comment fields and their values, the generation system generates X key-value pairs for each page component, establishing a one-to-one mapping between comment content and operable data. This allows subsequent processing to quickly find data by key name without needing to extract the semantics of field values. Finally, the generation system encapsulates these X key-value pairs into component data, resulting in standardized intermediate output. Different types of page components (forms, tables) are output in the same data format, facilitating unified interfaces between modules. If new comment fields (such as @disabled) are added later, only rules need to be added to the current comment parsing process, thus decoupling the comment parsing module from the code generation process and improving system maintainability and scalability.

[0095] In one optional embodiment, the generation system first determines the matching page sub-template for each page component based on the type of each page component. Then, the generation system generates component code corresponding to each page component based on the component data of each page component and the matching page sub-template. Next, the generation system generates initial code based on the page template. The initial code is used to determine the structural skeleton of the target front-end page. The initial code reserves insertion positions for the component code corresponding to L page components. Subsequently, the generation system inserts L segments of component code corresponding to the L page components into the initial code to obtain the target front-end code.

[0096] Optionally, the generation system first creates an initial front-end code file, which contains only initial code. Then, based on the component type of each page component, it generates corresponding component code and inserts it into the reserved insertion position in the initial code to obtain the target front-end code file. Finally, the generation system adds the front-end page generated based on the target front-end code in the target front-end code file to the front-end for visualization.

[0097] Optionally, the generation system determines the matching page sub-template for each page component based on its component type. This means the system determines the component type based on annotation fields such as @form or @list and automatically selects the corresponding page sub-template accordingly. For example, a form page sub-template is used for a form component to generate a form structure, and a table page sub-template is used for a table component to generate a table structure. By binding the template type to the component type, the system ensures that the generated content meets expectations, avoids generating page components with incorrect structures due to type mismatch, and avoids the risk of manual template selection errors. Afterward, the generation system replaces the field values ​​(such as titles, function names, and parameters) in the component data with the insertion positions indicated by the placeholders in the sub-template, and generates an executable code segment. This achieves automated mapping from annotation descriptions to front-end code, reducing the development cost of front-end code. Subsequently, the generation system inserts the L-segment component code into the reserved position in the initial code. The insertion process is automated, eliminating the need for manual code splicing and avoiding errors such as syntax errors and unclosed tags. This achieves automated integration of modular components, making "multi-component combination" a repeatable and verifiable standardized process.

[0098] In an optional embodiment, when the type of the i-th page component among the L page components is a form type, the generation system performs the following operations based on the component data and form page sub-template of the i-th page component: a first operation, used to fill the value of the first key-value pair in the component data into the position of the form title in the form page sub-template, wherein the key of the first key-value pair is a first preset form comment field; a second operation, used to fill the value of the second key-value pair in the component data into the position of the corresponding preset form event in the form page sub-template, wherein the key of the second key-value pair is a second preset form comment field, and the preset form event is one of the following: page load event, submit button event; a third operation, used to generate form input code based on the value of the third key-value pair in the component data, and insert the form input code into the form page sub-template, wherein the key of the third key-value pair is a third preset form comment field, and the form input code is used to provide an input box for the parameter value in the form on the target front-end page; then, the generation system determines the component code corresponding to the i-th page component based on the form page sub-template obtained by performing the above operations.

[0099] Optionally, the first key-value pair refers to the key-value pair in the component data with the key @form, whose value is the title name of the form displayed on the front-end page; the second key-value pair refers to the key-value pair in the component data with the key @init or @apply, which is used to bind front-end events; the third key-value pair refers to the key-value pair in the component data with the key @param, which is used to describe an input parameter in the form.

[0100] Optionally, the first operation refers to replacing the form field with the form title in the form page sub-template; the second operation refers to replacing the apply field function with the submit button event of the form template; in addition, if there is an init field, the second operation refers to replacing the init field function with the page load event; the third operation refers to adding a row of corresponding data to the pop-up add / modify form page for each param field.

[0101] Optionally, the generation system avoids front-end developers manually writing titles by performing the first operation, ensuring that the titles are consistent with the back-end functionality. Figure 1To eliminate semantic confusion in the interface caused by inconsistent manual naming, the title content is now driven by comments, achieving automatic synchronization of interface titles and improving the consistency of front-end and back-end development. The generation system achieves precise and automatic binding between front-end interactive behaviors and back-end interfaces by performing the second operation, eliminating interface mismatch, missing functions, or redundant buttons. The generation system performs the third operation to convert each @param comment (such as cpuThresholdIntCPU warning threshold (%)) into a complete front-end input control, thereby achieving automatic generation and expansion of form fields, eliminating repetitive work and errors in manually writing form items.

[0102] Optionally, based on the steps in the above embodiments, the generation system constructs a complete automated generation process for form-type page components, thereby reducing the development cost of form-type front-end pages. At the same time, it eliminates technical problems such as inconsistent titles, interface errors, missing fields, and chaotic styles caused by manual writing, and realizes a closed-loop mechanism of "the form is automatically generated after the form comments are written". In this way, it provides a standardized, automated, and highly reliable generation mechanism for form-type page components.

[0103] In an optional embodiment, when the type of the j-th page component among the L page components is a table type, the generation system performs the following operations on the table page sub-template based on the component data of the j-th page component: a fourth operation, used to fill the value of the fourth key-value pair in the component data into the position of the table title in the table page sub-template, wherein the key of the fourth key-value pair is a first preset table comment field; a fifth operation, used to fill the value of the fifth key-value pair in the component data into the position of the corresponding preset table event in the table page sub-template, wherein the key of the fifth key-value pair is a second preset table comment field, and the preset table event is one of the following: query button event, modify button event, add button event, delete button event; The sixth operation generates column attribute display code based on the value of the sixth key-value pair in the component data and inserts the column attribute display code into the table page sub-template. The key of the sixth key-value pair is the third preset table comment field, and the column attribute display code is used to display the column attribute information of the table in the target front-end page. The seventh operation generates table input code based on the value of the seventh key-value pair in the component data and inserts the table input code into the table page sub-template. The key of the seventh key-value pair is the fourth preset table comment field, and the table input code is used to provide input boxes for row data in the table in a preset pop-up window. After that, the generation system determines the component code corresponding to the j-th page component based on the table page sub-template obtained by performing the above operations.

[0104] Optionally, the fourth key-value pair refers to the key-value pair with the key @list in the component data, whose value is the title name of the table displayed on the front-end page; the fifth key-value pair refers to the key-value pair with the keys @search, @modify, @add, and @del in the component data, which is used to bind table operation events; the sixth key-value pair refers to the key-value pair with the key @param in the component data, which is used to define a column of data in the table; and the seventh key-value pair refers to the key-value pair with the key @param_main in the component data, which is used to define the unique identifier (primary key) of each row of data in the table.

[0105] Optionally, the fourth operation refers to replacing the list field with the table header in the table template; the fifth operation refers to one of the following: replacing the search field function with the query button event of the table template; if there is a modify field, replacing the modify field function with the edit button event of the table template, and hiding the edit button if there is no modify field; if there is an add field, replacing the add field function with the add button event of the table template, and hiding the add button if there is no modify field; if there is a del field, replacing the del field function with the delete button event of the table template, and hiding the delete button if there is no del field; the sixth operation refers to adding a row of column code corresponding to the data in the table template for each param field; the seventh operation refers to adding a row of form components corresponding to the data in the pop-up add / edit form page for each param_main field.

[0106] Optionally, the generation system performs a fourth operation, allowing the table titles on the front-end page to be determined by back-end comments, eliminating the need for manual coding and avoiding inconsistent or ambiguous title naming, thus achieving "back-end-defined interface names" and improving consistency between front-end and back-end development. The generation system performs a fifth operation, binding the function names of @search, @modify, @add, and @del to the events of their corresponding buttons, enabling on-demand generation and precise binding of table function buttons, preventing missing or incorrect bindings. The generation system performs a sixth operation, converting each @param comment (such as @paramdeviceName String device name) into a column of the table, achieving automated generation and dynamic scaling of table columns, solving the tedious and error-prone problem of manually maintaining table columns. The generation system performs a seventh operation, automating primary key-driven row operations, ensuring that add, delete, and modify operations are executable, traceable, and unambiguous.

[0107] Optionally, the generation system constructs an automated generation process for table-type page components through the steps in the above embodiments, thereby reducing the development cost of table-type page components and solving the technical problems of column misalignment, missing buttons, lost primary keys, and interface mismatch caused by manual coding. At the same time, it realizes a development closed loop of "automatic generation of table components after writing table comments", thus providing a standardized, automated, and highly reliable generation mechanism for table-type components. This solves the inefficiency and high risk of repeatedly manually coding table structures, button logic, and pop-up input in traditional development technologies.

[0108] For example, the comment data in the backend code file obtained by the generation system is as follows:

[0109] /

[0110] @page Alert Threshold Configuration

[0111] @auther Author

[0112] @version version number

[0113] @date Creation date

[0114] /

[0115] /

[0116] @form alert threshold

[0117] @init getCurrentWarnSetting

[0118] @apply setWarnSetting

[0119] @param cpuThreshold Int CPU warning threshold (%)

[0120] @param memThreshold Int Memory warning threshold (%)

[0121] @param diskThreshold Int Hard disk warning threshold (%)

[0122] /

[0123] Optionally, Figure 2 This is a schematic diagram of an optional front-end code generation process according to an embodiment of this application, such as... Figure 2 As shown, Figure 2 The left side shows the page template obtained by matching the backend code file mentioned above. At this time, the page template contains a form page sub-template. In the form page sub-template, {form_title} is the reserved position for the form title; {param_text} and {param_name} are the reserved positions for the page display name and parameter name of the form parameters (such as memThreshold); and {initFunction} is the reserved position for the "getCurrentWarnSetting" function represented by the init field.

[0124] Optionally, the generation system replaces the placeholders in the reserved positions in the page template with the component data obtained by parsing the above-mentioned annotation data, thereby modifying information such as the page title and the backend requests corresponding to page operations. The target front-end code generated based on the above-mentioned annotation data is as follows (the bold part is the automatically generated code, and the rest is the page template code):

[0125]

[0126]

[0127]

[0128]

[0129] Optionally, Figure 3 This is a schematic diagram illustrating an optional front-end page generation effect according to an embodiment of this application, such as... Figure 3 As shown, the title of this front-end page is "Warning Threshold". The page component type included in this front-end page is a form. This form component supports setting the percentage values ​​of CPU warning threshold, memory warning threshold and hard disk warning threshold.

[0130] Example 2

[0131] This application embodiment can also provide a front-end page generation device. It should be noted that the front-end page generation device of this application embodiment can be used to execute the front-end page generation method provided in this application embodiment. The front-end page generation device provided in this application embodiment will be described below.

[0132] According to an embodiment of this application, an apparatus for implementing the above-described front-end page generation method is also provided. Figure 4 This is a schematic diagram of an optional front-end page generation apparatus according to an embodiment of this application, such as... Figure 4 As shown, the device includes: an annotation parsing unit 401, a template determining unit 402, a code generation unit 403, and a page generation unit 404.

[0133] Optionally, the annotation parsing unit 401 is used to parse the annotation data of the backend code to obtain a parsing result, wherein the parsing result includes at least a page identifier and component data of L page components, where L is a positive integer, the page identifier is used to characterize the function implemented by the backend code, and the type of each page component is one of the following: form type, table type; the template determination unit 402 is used to determine the page template corresponding to the backend code based on the page identifier, wherein the page template includes at least one of the following: form page sub-template, table page sub-template; the code generation unit 403 is used to generate target frontend code based on the component data of the L page components and the page template; the page generation unit 404 is used to generate the target frontend page corresponding to the backend code based on the target frontend code.

[0134] As can be seen from the above, this device uses pre-added structured comment data in the backend code. By parsing the comment data, it obtains the page identifier and form / table type component data of the frontend page to be developed, and automatically matches the preset form page sub-template / table page sub-template to generate the target frontend code. This achieves the goal of eliminating the need for manual frontend code writing, thus realizing the automated generation of the frontend page. Since this device uses preset page templates to generate the frontend code, the component styles in the frontend page obtained by running the frontend code are consistent.

[0135] Therefore, it can be seen that the entire front-end page generation process in this device is based on back-end annotation-driven development, without the need for front-end personnel to intervene in the development. All generated front-end pages and multiple components in each front-end page are automatically generated through the same template, ensuring the consistency of page component layout, interaction logic and control style. At the same time, it eliminates repetitive work and waiting cycles in front-end and back-end collaborative development, thereby solving the technical problems of low front-end page generation efficiency and inconsistent page style in existing technologies.

[0136] In one optional embodiment, the annotation parsing unit 401 includes: a file acquisition subunit, an annotation classification subunit, a first determination subunit, a second determination subunit, and a third determination subunit.

[0137] Optionally, the file acquisition subunit is used to acquire the backend code file, wherein the backend code file includes at least backend code and comment data with a preset syntax format; the comment classification subunit is used to classify the comment data to obtain functional code comment data and comment data of L page components; the first determination subunit is used to determine the page identifier based on the preset page name field in the functional code comment data; the second determination subunit is used to determine the component data of each page component based on the preset comment field in the comment data of each page component; and the third determination subunit is used to use the page identifier and the component data of the L page components as the parsing result.

[0138] In one optional embodiment, the preset annotation fields in the annotation data of a form-type page component include at least one of the following:

[0139] The first preset form comment field is used to determine the form's title name;

[0140] The second preset form comment field is used to determine the callback function that interacts with the parameters in the form, wherein the callback function includes at least one of the following: an initial value retrieval function and a parameter value submission function;

[0141] The third preset form comment field is used to determine the parameter name, parameter type, and the display name of the parameter on the front-end page.

[0142] In one optional embodiment, the preset annotation fields in the annotation data of the table-type page component include at least one of the following:

[0143] The first preset table comment field is used to determine the table title;

[0144] The second preset table comment field is used to determine the processing function for the row data in the table, wherein the processing function includes at least one of the following: query function, modification function, add function, and delete function;

[0145] The third preset table comment field is used to determine the column attribute information of the table;

[0146] The fourth preset table comment field is used to determine the primary key information of the row data in the table.

[0147] In one optional embodiment, the second determining subunit includes: a parsing module, a generating module, and a first determining module.

[0148] Optionally, the parsing module is used to parse the annotation data of each page component based on preset annotation fields to obtain X preset annotation fields and the field value of each preset annotation field corresponding to each page component, where X is a positive integer; the generation module is used to generate X key-value pairs corresponding to each page component based on the X preset annotation fields and the field value of each preset annotation field, where the key in each key-value pair is a preset annotation field, and the value in each key-value pair is the field value of the corresponding preset annotation field; the first determining module is used to use the X key-value pairs corresponding to each page component as the component data of each page component.

[0149] In one optional embodiment, the code generation unit 403 includes: a fourth determining subunit, a first generating subunit, a second generating subunit, and an insertion subunit.

[0150] Optionally, the fourth determining subunit is used to determine the matching page sub-template for each page component based on the type of each page component; the first generating subunit is used to generate the component code corresponding to each page component based on the component data of each page component and the matching page sub-template; the second generating subunit is used to generate initial code based on the page template, wherein the initial code is used to determine the structural skeleton of the target front-end page, and the initial code reserves the insertion positions for the component code corresponding to L page components; the insertion subunit is used to insert the L segments of component code corresponding to the L page components into the initial code to obtain the target front-end code.

[0151] In one optional embodiment, the first generation subunit includes: a first execution module and a second determination module.

[0152] Optionally, the first execution module is configured to perform the following operations based on the component data and form page sub-template of the i-th page component when the i-th page component is of type form: First operation: filling the form title position in the form page sub-template with the value of the first key-value pair in the component data, where the key of the first key-value pair is a first preset form comment field; Second operation: filling the corresponding preset form event position in the form page sub-template with the value of the second key-value pair in the component data, where the key of the second key-value pair is a second preset form comment field, and the preset form event is one of the following: page load event, submit button event; Third operation: generating form input code based on the value of the third key-value pair in the component data, and inserting the form input code into the form page sub-template, where the key of the third key-value pair is a third preset form comment field, and the form input code is used to provide an input box for the parameter values ​​in the form on the target front-end page; The second determination module is configured to determine the component code corresponding to the i-th page component based on the form page sub-template obtained by performing the above operations.

[0153] In an optional embodiment, the first generation subunit further includes a second execution module and a third determination module.

[0154] Optionally, the second execution module is configured to perform the following operations on the table page sub-template based on the component data of the j-th page component when the j-th page component is of table type: A fourth operation, used to fill the value of the fourth key-value pair in the component data into the position of the table title in the table page sub-template, wherein the key of the fourth key-value pair is a first preset table comment field; A fifth operation, used to fill the value of the fifth key-value pair in the component data into the position of the corresponding preset table event in the table page sub-template, wherein the key of the fifth key-value pair is a second preset table comment field, and the preset table event is one of the following: query button event, modify button event, add button event, delete button event; A sixth operation, used to fill the value of the fifth key-value pair in the component data into the position of the corresponding preset table event in the table page sub-template; A sixth operation, used to fill the value of the fifth key-value pair into the position of the corresponding preset table event, wherein the key of the fifth key-value pair is a second preset table comment field, and the preset table event is one of the following: query button event, modify button event, add button event, delete button event; A sixth operation, used to fill the value of the fourth key-value pair into the position of the table title in the table page sub-template. The first operation generates column attribute display code based on the value of the sixth key-value pair in the component data and inserts the column attribute display code into the table page sub-template. The key of the sixth key-value pair is the third preset table comment field. The column attribute display code is used to display the column attribute information of the table in the target front-end page. The second operation generates table input code based on the value of the seventh key-value pair in the component data and inserts the table input code into the table page sub-template. The key of the seventh key-value pair is the fourth preset table comment field. The table input code is used to provide input boxes for row data in the table in a preset pop-up window. The third determination module determines the component code corresponding to the j-th page component based on the table page sub-template obtained by performing the above operations.

[0155] It should be noted that the above-mentioned annotation parsing unit 401, template determination unit 402, code generation unit 403 and page generation unit 404 correspond to steps S101 to S104 in the method embodiment. The above units and corresponding steps implement the same instances and application scenarios, but are not limited to the content disclosed in the above embodiments.

[0156] Example 3

[0157] Embodiments of this application can also provide an electronic device. Figure 5 This is a structural block diagram of an electronic device according to an embodiment of this application, such as... Figure 5 As shown, the electronic device includes: one or more ( Figure 5 (Only one is shown) processor 502, memory 504, memory controller, and peripheral interface, wherein the peripheral interface is connected to the radio frequency module, audio module and display.

[0158] The memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the methods and devices in the embodiments of this application. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, thereby realizing the above-mentioned method for generating front-end pages.

[0159] The memory may include high-speed random access memory (RAM), and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include memory remotely located relative to the processor, which can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks (LANs), mobile communication networks, and combinations thereof.

[0160] The processor can access information and applications stored in memory via a transmission device to perform the following steps: parse the comment data of the backend code to obtain a parsing result, wherein the parsing result includes at least a page identifier and component data of L page components, where L is a positive integer, the page identifier is used to characterize the function implemented by the backend code, and each page component is of one of the following types: form type, table type; determine the page template corresponding to the backend code based on the page identifier, wherein the page template includes at least one of the following: form page sub-template, table page sub-template; generate target frontend code based on the component data of the L page components and the page template; generate the target frontend page corresponding to the backend code based on the target frontend code.

[0161] This application provides a solution for generating front-end pages. The solution pre-adds structured comment data to the back-end code, parses the comment data to obtain the page identifier and form / table type component data of the front-end page to be developed, and automatically matches preset form / table page sub-templates to generate the target front-end code. This achieves the goal of automatically generating front-end pages without requiring manual coding. Because this solution uses preset page templates to generate front-end code, the component styles in the resulting front-end page are consistent.

[0162] Therefore, it can be seen that the entire front-end page generation process in this solution is driven by back-end annotations, without the need for front-end personnel to intervene in the development. All generated front-end pages and multiple components in each front-end page are automatically generated through the same template, ensuring the consistency of page component layout, interaction logic and control style. At the same time, it eliminates repetitive work and waiting cycles in front-end and back-end collaborative development, thereby solving the technical problems of low front-end page generation efficiency and inconsistent page style in existing technologies.

[0163] Those skilled in the art will understand that Figure 5 The structure shown is for illustrative purposes only. Electronic devices can also be smartphones, tablets, PDAs, mobile internet devices, PADs, and other terminal devices. Figure 5 This does not limit the structure of the aforementioned electronic device. For example, electronic devices may also include components that are more... Figure 5 The more or fewer components shown (such as network interfaces, display devices, etc.), or having the same Figure 5 The different configurations shown.

[0164] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the terminal device. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0165] Example 4

[0166] Embodiments of this application may also provide a storage medium.

[0167] Optionally, in this embodiment of the application, the storage medium can be used to store the program code executed by the front-end page generation method provided in the above method embodiment.

[0168] Optionally, in this embodiment, the storage medium may be located in any computer terminal in a group of computer terminals in a computer network, or in any mobile terminal in a group of mobile terminals.

[0169] This application also provides a computer program product, which, when executed on a data processing device, is adapted to perform the steps of a method for generating a front-end page.

[0170] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0171] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0172] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

[0173] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0174] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0175] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0176] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method for generating a front-end page, characterized in that, include: The comment data of the backend code is parsed to obtain the parsing result, wherein the parsing result includes at least a page identifier and component data of L page components, wherein L is a positive integer, the page identifier is used to characterize the function implemented by the backend code, and the type of each page component is one of the following: form type, table type; The page template corresponding to the backend code is determined based on the page identifier, wherein the page template includes at least one of the following: a form page sub-template and a table page sub-template; The target front-end code is generated based on the component data of the L page components and the page template; The target front-end page corresponding to the back-end code is generated based on the target front-end code.

2. The method for generating a front-end page according to claim 1, characterized in that, The comment data in the backend code is parsed to obtain the parsing results, including: Obtain a backend code file, wherein the backend code file includes at least the backend code and comment data in a preset syntax format; The annotation data is categorized to obtain functional code annotation data and annotation data for L page components; The page identifier is determined based on the preset page name field in the function code annotation data; The component data of each page component is determined based on the preset annotation fields in the annotation data of each page component; The page identifier and the component data of the L page components are used as the parsing result.

3. The method for generating a front-end page according to claim 2, characterized in that, The preset annotation fields in the annotation data of the form-type page component include at least one of the following: The first preset form comment field is used to determine the form's title name; The second preset form annotation field is used to determine the callback function that interacts with the parameters in the form, wherein the callback function includes at least one of the following: an initial value retrieval function and a parameter value submission function; The third preset form comment field is used to determine the parameter name, parameter type, and the display name of the parameter on the front-end page.

4. The method for generating a front-end page according to claim 2, characterized in that, The preset annotation fields in the annotation data of the table-type page component include at least one of the following: The first preset table comment field is used to determine the table title; The second preset table annotation field is used to determine the processing function for the row data in the table, wherein the processing function includes at least one of the following: query function, modification function, add function, and delete function; The third preset table comment field is used to determine the column attribute information of the table; The fourth preset table comment field is used to determine the primary key information of the row data in the table.

5. The method for generating a front-end page according to claim 2, characterized in that, The component data of each page component is determined based on preset annotation fields in the annotation data of each page component, including: Based on the preset annotation fields, the annotation data of each page component is parsed to obtain X preset annotation fields corresponding to each page component and the field value of each preset annotation field, where X is a positive integer; Based on the X preset annotation fields and the field value of each preset annotation field, X key-value pairs are generated for each page component, wherein the key in each key-value pair is a preset annotation field, and the value in each key-value pair is the field value of the corresponding preset annotation field; The X key-value pairs corresponding to each page component are used as the component data of each page component.

6. The method for generating a front-end page according to claim 1, characterized in that, Based on the component data of the L page components and the page template, the target front-end code is generated, including: The page sub-template matching each page component is determined based on the type of each page component; Based on the component data of each page component and the matching page sub-template, generate the component code corresponding to each page component; Initial code is generated based on the page template, wherein the initial code is used to determine the structural skeleton of the target front-end page, and the initial code reserves the insertion positions for the component code corresponding to the L page components; The L segments of component code corresponding to the L page components are inserted into the initial code to obtain the target front-end code.

7. The method for generating a front-end page according to claim 6, characterized in that, Based on the component data of each page component and the matching page sub-template, the component code corresponding to each page component is generated, including: If the type of the i-th page component among the L page components is the form type, perform the following operations based on the component data of the i-th page component and the form page sub-template: The first operation is used to fill the value of the first key-value pair in the component data into the position of the form title in the form page sub-template, wherein the key of the first key-value pair is a first preset form comment field; The second operation is used to fill the value of the second key-value pair in the component data into the corresponding preset form event position in the form page sub-template, wherein the key of the second key-value pair is a second preset form comment field, and the preset form event is one of the following: page load event, submit button event; The third operation is used to generate form input code based on the value of the third key-value pair in the component data, and insert the form input code into the form page sub-template, wherein the key of the third key-value pair is a third preset form comment field, and the form input code is used to provide an input box for the parameter value in the form in the target front-end page; Based on the form page sub-template obtained by performing the above operations, determine the component code corresponding to the i-th page component.

8. The method for generating a front-end page according to claim 6, characterized in that, Based on the component data of each page component and the matching page sub-template, the component code corresponding to each page component is generated, including: If the type of the j-th page component among the L page components is the table type, perform the following operations on the table page sub-template based on the component data of the j-th page component: The fourth operation is used to fill the value of the fourth key-value pair in the component data into the position of the table title in the table page sub-template, wherein the key of the fourth key-value pair is the first preset table comment field; The fifth operation is used to fill the value of the fifth key-value pair in the component data into the corresponding preset table event position in the table page sub-template, wherein the key of the fifth key-value pair is the second preset table comment field, and the preset table event is one of the following: query button event, modify button event, add button event, delete button event; The sixth operation is used to generate column attribute display code based on the value of the sixth key-value pair in the component data, and insert the column attribute display code into the table page sub-template, wherein the key of the sixth key-value pair is the third preset table annotation field, and the column attribute display code is used to display the column attribute information of the table in the target front-end page; The seventh operation is used to generate table input code based on the value of the seventh key-value pair in the component data, and insert the table input code into the table page sub-template, wherein the key of the seventh key-value pair is the fourth preset table annotation field, and the table input code is used to provide an input box for the row data in the table in a preset pop-up window; Based on the table page sub-template obtained by performing the above operations, determine the component code corresponding to the j-th page component.

9. A front-end page generation device, characterized in that, include: The annotation parsing unit is used to parse the annotation data of the backend code to obtain the parsing result. The parsing result includes at least a page identifier and component data of L page components, where L is a positive integer. The page identifier is used to characterize the function implemented by the backend code. The type of each page component is one of the following: form type, table type. The template determination unit is used to determine the page template corresponding to the backend code based on the page identifier, wherein the page template includes at least one of the following: a form page sub-template and a table page sub-template; The code generation unit is used to generate target front-end code based on the component data of the L page components and the page template; The page generation unit is used to generate the target front-end page corresponding to the back-end code based on the target front-end code.

10. An electronic device, characterized in that, It includes one or more processors and a memory, the memory being used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors cause the one or more processors to implement the front-end page generation method according to any one of claims 1 to 8.

Images