Front-end code generation method and computing device

Abstract

The embodiment of the invention provides a front-end code generation method and computing equipment, and relates to the technical field of computing equipment. The method is applied to front-end equipment and comprises the following steps: displaying a first interface; the first interface comprises a component bar and a canvas; the component column comprises a plurality of page components; the canvas is used for constructing a front-end page; in response to an arrangement operation of a user on the first interface, selecting at least one target page component from the component column, displaying the selected target page component in the canvas, and configuring a display attribute and / or an operation attribute of each target page component to construct the front-end page; and generating configuration information of the front-end page, and generating a code of the front-end page according to the configuration information. According to the method, the technical threshold of developers can be reduced, and the front-end code generation efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of computing device technology, and in particular to a front-end code generation method and computing device. Background Technology

[0002] In enterprise application development, front-end projects often have a large number of CRUD (Create, Read, Update, Delete) interface requirements with similar functionalities. These interfaces share highly similar core logic (e.g., data display, form submission, data filtering), but require differentiated field configurations for different business scenarios. This includes adjusting field display order, matching data types, and implementing role-based access control (e.g., some fields are only visible to administrators).

[0003] Existing front-end development solutions require developers to manually code the front-end code, which is inefficient and requires a certain level of technical expertise from the developers. Summary of the Invention

[0004] This application provides a front-end code generation method and computing device, which can reduce the technical threshold for developers and improve the efficiency of front-end code generation.

[0005] In a first aspect, embodiments of this application provide a front-end code generation method, applied to a front-end device. The method includes: displaying a first interface; the first interface includes a component bar and a canvas; the component bar includes multiple page components; the canvas is used to construct a front-end page; in response to an arrangement operation by a user on the first interface, selecting at least one target page component from the component bar and displaying it on the canvas, and configuring the display attributes and / or operation attributes of each target page component to construct the front-end page; generating configuration information for the front-end page, and generating code for the front-end page based on the configuration information.

[0006] The front-end code generation method provided in this application displays a first interface on a front-end device. Users can perform orchestration operations on the first interface, selecting target page components needed to build the front-end page from a component bar in a visual manner. Furthermore, display attributes and / or operation attributes are configured for the target page components to ensure the display effect and interactivity of the front-end page, thereby generating the front-end page. Compared with traditional front-end development solutions, this application uses a visual interface operation method instead of manually writing front-end code, which can effectively reduce the technical requirements for developers. Moreover, selecting target page components through the interface saves the process of manually writing and validating code, thereby effectively improving the efficiency of front-end code generation.

[0007] In one possible implementation, the orchestration operation includes a first operation and a second operation; configuring the display attributes of the target page component includes: obtaining at least one data field; in response to the user's first operation, establishing a mapping relationship between at least one data field and the target page component; and in response to the user's second operation, adjusting the data field mapped to the target page component to configure the display attributes of the target page component. This approach provides a method for configuring the display attributes of a target page component through interface operations, thereby improving the feasibility of this solution.

[0008] In another possible implementation, the second operation includes at least one of the following: modifying the content of a data field; adding a data field; or setting the display permissions for a data field. This second operation can enhance the richness of the display effects of the target page components and improve the user's interactive experience.

[0009] In another possible implementation, the orchestration operation also includes a third operation; configuring the display attributes of the target page component further includes: responding to the user's third operation, configuring the display style of the target page component to configure its display attributes. Through the above steps, the display style of the target page component is configured, achieving personalized display of the target page component, improving the richness of the front-end page, and ensuring a good user experience.

[0010] In another possible implementation, the orchestration operation includes a fourth and a fifth operation; configuring the operation attributes of the target page component includes: responding to the user's fourth operation by selecting a target event from the event library to configure the operation method of the target page component; and responding to the user's fifth operation by selecting a target interface function from the interface function library to configure the response result of the target page component after responding to the operation method, thereby configuring the operation attributes of the target page component. It should be understood that through the above interactive configuration method of operation method + response result, the operability of the page component is ensured, thereby improving the user's interactive experience.

[0011] In another possible implementation, the orchestration operation also includes a sixth operation; configuring the operation attributes of the target page component further includes: in response to the user's sixth operation, configuring the operation permissions of the target page component. By configuring operation permissions, the functional integrity of the front-end page is ensured, and unauthorized access is avoided.

[0012] Another possible implementation includes: obtaining a backend interface file; the backend interface file contains multiple interface information; for each interface information, an interface function is generated based on the interface address and request method extracted from the interface information to build an interface function library. Based on the user-uploaded backend interface file, the frontend device can automatically generate the corresponding interface function library, saving users the process of manually writing interface functions, improving development efficiency and reducing the risk of errors.

[0013] In another possible implementation, before displaying the first interface, the method further includes: displaying a second interface; the second interface includes the routing structure of the software system to which the front-end page belongs; in response to the user's seventh operation on the routing structure, configuring the route name of the front-end page and / or the hierarchy of the front-end page in the routing structure to configure the routing method of the front-end page in the software system. Through the above steps, a solution for routing configuration during front-end development based on interface operations is provided, ensuring the feasibility of this solution.

[0014] Another possible implementation involves generating the front-end page code based on the configuration information. This includes: obtaining the front-end page's technical framework information; selecting a front-end template from a template library that matches the technical framework information; and populating the front-end template with the configuration information to obtain the front-end page code. This approach allows the front-end page's configuration information to be reused across different technical frameworks, eliminating the need for developers to rewrite code for different frameworks and effectively improving development efficiency.

[0015] Secondly, this application provides a front-end code generation apparatus, which includes one or more functional modules for implementing the front-end code generation method described in the first aspect above.

[0016] Thirdly, embodiments of this application provide a computing device including a processor and a memory; the processor is coupled to the memory; the memory is used to store computer instructions, which are loaded and executed by the processor to enable the computing device to implement the method described in the first aspect.

[0017] Fourthly, embodiments of this application provide a computer-readable storage medium comprising: computer software instructions; when the computer software instructions are executed in a computing device, they cause the computing device to implement the method described in the first aspect.

[0018] Fifthly, embodiments of this application provide a computer program product that, when run on a computing device, causes the computing device to execute the steps of the method related to the first aspect described above, so as to implement the method of the first aspect described above.

[0019] The beneficial effects of the second to fifth aspects mentioned above can be referred to the corresponding description of the first aspect, and will not be repeated here. Attached Figure Description

[0020] Figure 1 A schematic diagram of a system architecture for a front-end device provided in an embodiment of this application; Figure 2 A flowchart illustrating a front-end code generation method provided in an embodiment of this application; Figure 3 A schematic diagram of a first interface provided in an embodiment of this application; Figure 4 A schematic diagram of a second interface provided in an embodiment of this application; Figure 5 This is a schematic diagram illustrating a process for configuring the display attributes of page components, provided as an embodiment of this application. Figure 6 A flowchart illustrating another front-end code generation method provided in an embodiment of this application; Figure 7 This is a functional diagram of a front-end code generation system provided in an embodiment of this application; Figure 8 A complete flowchart is provided for an embodiment of this application; Figure 9 This is a schematic diagram illustrating the composition of a front-end code generation device provided in an embodiment of this application. Detailed Implementation

[0021] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0022] It should be noted that in the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design scheme described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0023] To facilitate a clear description of the technical solutions of the embodiments of this application, the terms "first" and "second" are used in the embodiments of this application to distinguish the same or similar items with essentially the same function and effect. Those skilled in the art can understand that the terms "first" and "second" are not intended to limit the quantity or execution order.

[0024] The following is a brief explanation of the technical terms used in the embodiments of this application: 1. Router: or front-end routing, is a mechanism used to manage the mapping relationship between uniform resource locators (URLs) and front-end pages. It can listen for changes in the content of the URL and update the content of the front-end page without refreshing the browser.

[0025] This application provides a front-end code generation method that generates front-end code through a visual interface, replacing the manual writing of front-end code. This effectively improves the efficiency of front-end code generation and reduces the technical requirements for developers.

[0026] In some implementations, the front-end code generation method provided in this application displays a first interface on a front-end device. Users can perform orchestration operations on the first interface, selecting target page components needed to build the front-end page from a component bar in a visual manner. Furthermore, display attributes and / or operation attributes are configured for the target page components to ensure the display effect and interactivity of the front-end page, thereby generating the front-end page. Compared with traditional front-end development solutions, this application uses a visual interface operation method instead of manually writing front-end code, which can effectively reduce the technical requirements for developers. Moreover, selecting target page components through the interface saves the process of manually writing and validating code, thereby effectively improving the efficiency of front-end code generation.

[0027] The embodiments provided in this application will now be described in detail with reference to the accompanying drawings.

[0028] The technical solutions provided in this application can be applied to computing devices, which can be front-end devices, specifically including handheld computers (PDAs), smartphones, ultra-mobile personal computers (UMPCs), tablet computers, laptops, netbooks, desktop computers, all-in-one computers, etc. This application does not specifically limit the type of front-end device.

[0029] Figure 1 This is a schematic diagram illustrating the composition of a front-end device provided in an embodiment of this application. Figure 1 As shown, the front-end device may include a processor 101 and a memory 102; the memory 102 stores instructions executable by the processor 101; when the processor 101 is configured to execute instructions, the front-end device executes the front-end code generation method in the embodiments of this application.

[0030] In some implementations, the front-end device also communicates with a back-end server. The front-end device runs a client-side version of the front-end code generation system (which can be called a visual configuration platform), while the back-end server runs a server-side version of the front-end code generation system. Users can log in to the visual configuration platform through the front-end device to develop front-end code via a visual interface. Furthermore, during development, users can upload back-end object files, which include multiple data fields that the front-end page needs to display. The front-end device sends the back-end object file to the back-end server for parsing, extracts the multiple data fields, and sends them back to the front-end device. This allows users to configure the front-end page based on these multiple data fields, improving the efficiency of front-end page development.

[0031] It should be noted that the system architecture and application scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of system architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0032] The front-end code generation method provided in this application is applicable to project development (such as enterprise management systems, data platforms, etc.) that include a large number of pages with CRUD (Create, Read, Update, Delete) functions. It can realize the needs of quickly generating a single front-end page and generating multiple front-end pages in batches.

[0033] The front-end code generation system provided in this application embodiment can adopt a three-layer architecture of front-end layer - back-end layer - engine layer. The logic of the functions and data interaction of each layer is as follows: 1. Front-end Layer: This is the visual configuration platform (VCP), responsible for providing the user interface for developing front-end pages. Additionally, it receives back-end object files from the user, transmits these files to the back-end layer, and retrieves multiple data fields parsed from the back-end object files. These data fields can be used to assist the user in developing the front-end pages. Finally, based on the developed front-end pages, it generates configuration information and sends this information to the engine layer.

[0034] 2. Backend Layer: This is the server-side layer, responsible for parsing the backend object file uploaded by the frontend layer and sending the resulting data fields back to the frontend layer. Additionally, the backend layer can store user information for different users, as well as each user's configuration information.

[0035] 3. Engine Layer: This is the code generation engine (CGE), responsible for loading a predefined template library, retrieving the specified front-end template from the library, and injecting configuration information into the front-end template to generate front-end code (i.e., the code for the front-end page). The generated front-end code supports two output methods: local download and automatic upload to the cloud (e.g., uploading to the distributed version control system Git).

[0036] The three-tier architecture enables data interaction through RESTful interfaces. RESTful interfaces are application programming interfaces designed according to the Representational State Transfer (REST) ​​architectural style. They are a software architecture design specification based on the HyperText Transfer Protocol (HTTP), aiming to achieve client-server interaction in a simple and unified way. The configuration information flow path is: front-end configuration input → back-end parsing and storage → engine layer template rendering → front-end code output, achieving a closed data loop.

[0037] In some implementations, the aforementioned front-end layer can be deployed on a front-end device, and the aforementioned back-end layer can be deployed on a back-end server. The aforementioned engine layer can be deployed on either a front-end device or a back-end device; this application does not specifically limit this.

[0038] Figure 2 This is a flowchart illustrating a front-end code generation method provided in an embodiment of this application. For example, the front-end code generation method provided in this embodiment can be applied to... Figure 1 In the front-end device shown, in other words, it can be accessed through... Figure 1 The front-end device executes the method; specifically, the method can be executed by the processor of the front-end device.

[0039] like Figure 2 As shown, the front-end code generation method provided in this application embodiment may include the following steps: S201, Display the first interface.

[0040] The first interface includes a component bar and a canvas; the component bar includes multiple page components; the canvas is used to build the front-end page.

[0041] In this embodiment, after a user logs into the visual configuration platform, the front-end device can display a first interface. The user can then construct the front-end page based on this first interface through visual operations.

[0042] Page components are the basic building blocks of a front-end page. Examples of page components include buttons, input boxes, selection boxes, icons, text boxes, tables, and other commonly used page components. Users can select the required page components from the component bar and drag them onto the canvas according to their actual business needs, saving the process of manually writing the corresponding code for the page components.

[0043] For example, Figure 3 This is a schematic diagram of a first interface provided in an embodiment of this application. For example... Figure 3 As shown, the right side is the component bar, and the middle of the image is the canvas.

[0044] In some implementations, users can also configure the routing of the aforementioned front-end page through a visual interface. Therefore, before displaying the first interface, the front-end device can also execute the following S200a-S200b: S200a, Display the second interface.

[0045] The second interface includes the routing structure of the software system to which the front-end page belongs. This second interface can also be called the routing configuration page.

[0046] S200b, in response to the user's seventh operation on the routing structure, configures the route name of the front-end page and / or the hierarchy of the front-end page in the routing structure to configure the routing method of the front-end page in the software system. For example, Figure 4 This is a schematic diagram of the second interface provided in an embodiment of this application. (See diagram below.) Figure 4 As shown, the left side of the second interface displays the routing structure of the software system. Each route name in the routing structure is a control that can be used to configure the front-end page corresponding to that route name. Users can modify the route name of a specific front-end page in the routing structure. For example, by double-clicking "User Management" in the routing structure, the route name of the "User Management" front-end page can be changed (e.g., to "User List Management"). Users can also adjust the hierarchy of the front-end page corresponding to that control in the routing structure by dragging the control. For example, the original parent route of "User Management" is "System Management". Users can drag "User Management" under "Personal Configuration" to change the parent route of "User Management" to "Personal Configuration".

[0047] Additionally, the right side of the second interface can include specific route configurations. This right side includes multiple parameter fields, and users can input information in the corresponding input boxes for each field to configure the settings. Examples include configuring the current front-end page's route path to " / system / user", configuring the current front-end page's Chinese menu title to "User Management", configuring the current front-end page's English menu title to "User Management", configuring the current front-end page's icon to "el-icon-user", configuring the current front-end page's permission identifier to "user:list" (specifying which users can access the front-end page), and configuring whether to enable caching for the current front-end page (caching page content to improve loading speed), etc.

[0048] In some implementations, users can also perform initial configuration through a visual interface. For example, after logging into the visual configuration platform, users can configure the software system name, select the front-end technology framework (Vue3 or React), language mode (Chinese or English), user interface (UI) component library (providing predefined page components), and code output method (local saving or uploading to Git). Once the user's initial configuration is complete, the front-end device generates a unique project identifier (projectId), and associates the configuration information corresponding to the initial configuration with the projectId, storing it in a database (e.g., a database deployed on the front-end device, such as a distributed file-based database). Through these steps, personalized configuration for users during front-end development is achieved.

[0049] Similarly, for S200a-S200b mentioned above, after the user completes the route configuration, the front-end device generates route configuration information and associates it with the projectId, storing it in the database to achieve the binding of a single front-end page with the entire software system.

[0050] S202. In response to the user's arrangement operation on the first interface, select at least one target page component from the component bar to display on the canvas, and configure the display properties and / or operation properties of each target page component to construct the front-end page.

[0051] In this embodiment, the front-end device can display multiple commonly used page components in the component bar. Users can select the appropriate target page component and drag it onto the canvas according to their current business needs. Then, display attributes (such as data fields displayed in the page component, colors displayed in the page component, etc.) and / or operation attributes (such as how to perform the operation and the response result of the operation, etc.) are configured for these target page components. In this way, the richness and interactivity of the content displayed on the front-end page are guaranteed.

[0052] In addition, the front-end device records the type of the target page component, its current position in the canvas, display attributes and / or operation attributes as configuration information for the target page component, so as to facilitate the subsequent generation of front-end page code.

[0053] The following section uses a target page component as an example to describe in detail the specific configuration process from the perspective of configuring display properties.

[0054] In some implementations, the orchestration operation includes a first operation and a second operation. Configuring the display attributes of the target page component in S202 above can be specifically implemented as follows: S301-S303: S301. Obtain at least one data field.

[0055] In some implementations, users can manually enter at least one data field on a visual configuration platform.

[0056] In other implementations, users can upload a backend object file via a frontend device. This backend object file includes at least one data field that needs to be displayed in page components. The frontend device then sends the backend object file to a backend server. The backend server parses the backend object file using an abstract syntax tree (AST), extracts at least one data field, and returns it to the frontend device. An AST is a code parsing method that describes the syntactic structure and semantic information of code using tree-like nodes, stripping away irrelevant syntactic details (such as spaces and semicolons) and retaining only the core logical structure. AST parsing can accurately identify the data fields in the backend object file and the nesting relationships between them, then generate a JSON-formatted parsing result.

[0057] For Java POJO format backend object files, the included data fields can be extracted. Using Structured Query Language (SQL), the table structure can be analyzed and extracted to determine the nesting relationships between data fields.

[0058] For example, taking user information as a data field: a JOSN formatted data field is as follows: { Id: long-user ID; username: String - Username; tatus:Integer - User state; createTime:LocalDateTime - Creation time; } This application embodiment extracts data fields from backend object files through AST parsing, which is not limited to the type of backend object file (Java POJO file, SQL file, or Swagger file), thus improving the compatibility of this solution with backend object file recognition.

[0059] S302. In response to the user's first action, establish a mapping relationship between at least one data field and the target page component.

[0060] The mapping relationship can be established in two ways: automatic and manual. Users can choose according to their own needs.

[0061] One possible implementation is that if the user chooses the manual method, the front-end device displays at least one data field on the interface, and the user can drag the data field to the target page component to establish a mapping relationship with the target page component.

[0062] In another possible implementation, if the user selects the automatic method, the front-end device can automatically match the corresponding target page component based on the data type of the data field. For example, for character data fields (int, float, or string), such as username or user age, these data fields are operable and changeable, and would correspond to input boxes or text boxes as target page components. For boolean data fields, such as user status, these data fields have fixed values, such as only online (value 1) and offline (value 0), and would correspond to selection boxes as target page components. For time-type data fields, such as dates, they could correspond to date pickers as target page components.

[0063] Specifically, for solutions that automatically match target page components, front-end devices can use artificial intelligence recommendations to automatically recommend page components based on the type of data fields, reducing the need for users to manually select page components.

[0064] S303. In response to the user's second operation, adjust the data fields mapped to the target page component to configure the display properties of the target page component.

[0065] The second operation includes at least one of the following: modifying the content of a data field; adding a data field; or setting the display permissions for a data field.

[0066] For example, for a target page component, the user can modify the content of its mapped data fields. For instance, if the original data field in the backend object file is "User Management", the user can further modify it to "User List Management". At the same time, the frontend device modifies the content displayed on the frontend according to the user's operation and records the mapping relationship of the data field modification on the frontend, ensuring that the "User List Management" displayed on the frontend corresponds to the "User Management" on the backend.

[0067] For example, if a target page component needs to display multiple data fields, the user can add new data fields according to actual business needs. For instance, a table-type target page component might include two data fields: user name and user status. The original values ​​for user status are 0 and 1, but directly displaying 0 and 1 to the user would be confusing. Therefore, the user can add a mapping text data field to the table-type target page component. This mapping text is associated with the user status, with the relationship being (1 - online, 0 - offline). The front-end device can add the mapping text field to the target page component based on user actions and adjust the displayed content of the mapping text field to be associated with the user status; that is, when the user status value is 1, the mapping text displays "online"; when the user status value is 0, the mapping text displays "offline".

[0068] For example, users can also configure the display permissions of data fields. After a user selects a target page component, a dropdown menu will appear, with each option corresponding to a specific display permission. Once the user has made their selection, the front-end device can configure the display permissions of the data fields in the target page component based on the user's chosen permissions. For instance, for general data fields, "visible to everyone" can be set. For some special data fields, "visible only to administrators" can be set.

[0069] The front-end device predefines a utility function library, which includes permission judgment code corresponding to various display permissions. Based on the user's configuration, the front-end device can obtain the corresponding permission judgment code, realizing the conversion of permission rules from functional descriptions to actual code, ensuring the generation of subsequent front-end page code.

[0070] Optionally, the user can also configure the display style of the target page components. In some embodiments, the arrangement operation further includes a third operation; configuring the display attributes of the target page components in S202 above also includes: S304. In response to a third user action, configure the display style of the target page component to configure the display properties of the target page component.

[0071] For example, for a target page component, the front-end device can display a style configuration interface via a pop-up window. In this interface, users can configure the target page component's color, transparency, and other display styles. Correspondingly, after user configuration, the front-end device can configure the target page component's display style based on user actions. Furthermore, different types of page components support different display styles. For instance, for some special target page components, such as table-type components, it's also possible to configure table shading, column width, text alignment within the list, and markers for required data fields (such as using red asterisks).

[0072] The display style can be configured by the user manually inputting it or by selecting it from a drop-down list.

[0073] Figure 5 This is a schematic diagram illustrating an exemplary process for configuring page components, provided as an embodiment of this application. Figure 5 As shown, the uploaded backend object file is retrieved, and its Abstract Syntax Tree (AST) is parsed by the backend server to generate at least one data field. Based on business requirements, new data fields are added, and mapping relationships are established between these data fields and page components. The display permissions (visibility) of the page components are configured, and finally, the configuration information of the page components is saved.

[0074] By following the steps above, the display style of the target page components is configured, enabling personalized display of the target page components, enhancing the richness of the front-end page, and ensuring the user experience.

[0075] The following section uses a target page component as an example to describe the specific configuration process in detail from the perspective of configuring operation properties.

[0076] In some implementations, the orchestration operation includes a fourth operation and a fifth operation; the operation attributes for configuring the target page component in S202 above can be specifically implemented as follows: S401-S402: S401. In response to the user's fourth action, select the target event from the event library to configure the operation mode of the target page component.

[0077] The event library predefines multiple events to represent the operation / triggering methods of page components. These can include click events, double-click events, drag events, and hover events. Similarly, for a target page component, multiple events can be displayed via a dropdown menu, allowing the user to select the target event. The front-end device then configures the operation method of the target page component based on the user's selection of the target event.

[0078] For example, for button-type target page components, click or double-click events can be configured. For pop-ups within the front-end page, drag-and-drop support can be configured so that users can freely drag and change the position of the pop-up.

[0079] S402. In response to the user's fifth operation, select the target interface function from the interface function library to configure the response result of the target page component after configuring the response method of the target page component, so as to configure the operation attribute of the target page component.

[0080] The interface function library includes multiple interface functions, each corresponding to an interface on a backend server. By calling these functions, CRUD (Create, Read, Update, Delete) functionalities can be implemented on the backend server. For each target page component, a dropdown menu displays multiple interface functions, allowing the user to select the target function. The frontend device then configures the target page component's response based on the user's selection. In other words, after a user interacts with the target page component, the frontend device automatically calls the target interface function to obtain the desired response.

[0081] It should be understood that after configuring the operation method of the target page component, the corresponding operation result should also be configured to ensure the interactive experience. For example, when a user needs to query the user list, they can click the query control on the front-end page, and the front-end device will call the query interface to retrieve the query result of the user list from the back-end server. As another example, when a user adds a new data entry to the user list on the front-end page, the front-end device will call the add interface to add the new data to the back-end server.

[0082] In addition, to ensure a good user experience, the front-end device can add extra page components before and after calling the target API function to display the operation status, based on the user's configuration. For example, after a user successfully adds data, the front-end device displays a pop-up window indicating that the data has been submitted. After a user clicks to delete a piece of data, the front-end device first prompts the user for confirmation before calling the API function. Only after the user confirms will the front-end device call the target API function to delete the data from the back-end.

[0083] In some implementations, the orchestration operation also includes a sixth operation; configuring the operation attributes of the target page component in S202 above also includes: S403, in response to the user's sixth operation, configuring the operation permissions of the target page component.

[0084] For example, users can also configure operation permissions for target page components. When a user selects a target page component, a dropdown menu will appear, with each option corresponding to a specific operation permission. The front-end device can configure the operation permissions for target page components based on the user's selection. For instance, the input field corresponding to a user's nickname can be set to "editable by everyone." For some special data fields, such as user IDs, which are unique and immutable, the input field corresponding to the user ID can be set to "editable only by administrators."

[0085] The front-end device predefines a utility function library, which includes permission judgment code corresponding to various operation permissions. Based on the user's configuration, the front-end device can obtain the corresponding permission judgment code, realizing the conversion of permission rules from functional descriptions to actual code, ensuring the generation of subsequent front-end page code.

[0086] It should be understood that by using the above-mentioned operation method and response result interaction configuration method, the operability of page components is guaranteed, thereby improving the user's interactive experience.

[0087] The above interface function library can be generated in the following way: The front-end device also executes S501-S502: S501. Obtain the backend interface file; the backend interface file includes information on multiple interfaces.

[0088] Users can upload backend interface files, such as Swagger files, through the frontend device. The backend interface file includes information on multiple interfaces. Each interface information includes the specific interface address (such as a URL) and the request method.

[0089] S502. For each interface information, generate an interface function based on the interface address and request method extracted from the interface information to build an interface function library.

[0090] After obtaining the backend interface file, the frontend device can use AST parsing to extract the interface address and corresponding request method from the interface information in order to build an interface function library.

[0091] As an example, the interface functions corresponding to the four functions of CRUD operations are as follows: For list lookup, the corresponding URL is " / api / user / list", and the corresponding request method is "GET".

[0092] To add new data, the corresponding URL is " / api / user / add", the corresponding request method is "POST", and the request body includes the data to be added. The request body is in JSON format.

[0093] To modify data, the corresponding URL is " / api / user / edit / {id}", and the corresponding request method is "PUT". To delete data, the corresponding URL is " / api / user / delete" and the corresponding request method is "DELETE".

[0094] Based on the backend interface files uploaded by users, the frontend device can automatically generate the corresponding interface function library, saving users the process of manually writing interface functions, improving development efficiency and reducing the risk of writing errors.

[0095] S203. Generate configuration information for the front-end page, and generate the code for the front-end page based on the configuration information.

[0096] In this embodiment, after the user edits the front-end page, the front-end device can generate configuration information for the front-end page. This configuration information includes initialization configuration information, routing configuration information, and target page component configuration information. The target page component configuration information includes: information about the target page components configured in the front-end page (including the type of the target page component, its display attribute configuration, operation attribute configuration, and its distribution position within the front-end page). The front-end device can generate the front-end page code based on this configuration information and output it to a specified location (such as local storage or uploading to Git).

[0097] The above S203 can be executed by the front-end device or the back-end server. That is, the front-end device sends the configuration information to the back-end server, and the back-end server generates the code of the front-end page according to the configuration information.

[0098] Specifically, such as Figure 6 As shown, the above S203 can be specifically implemented as follows: S2031. Obtain the technical framework information of the front-end page.

[0099] In some implementations, developers can select the technology framework to use during initial configuration. The front-end device or back-end server can obtain the technology framework information for the front-end page from the configuration information in the initial configuration.

[0100] S2032. Select a front-end template from the template library that matches the technical framework information.

[0101] The template library includes front-end templates for multiple technology frameworks, such as those for Vue3 and React. Front-end devices or back-end servers can select the appropriate front-end template from the library based on the acquired technology framework information.

[0102] S2033. Fill the front-end template with configuration information to obtain the code of the front-end page.

[0103] After obtaining the configuration information and template of the front-end page, the front-end device or back-end server can load the configuration information and the front-end template, and use the EJS engine to populate the configuration with dynamic content (such as interface addresses, automatic data, etc.) in the front-end template to obtain the code of the front-end page. The EJS engine is a dynamic rendering tool used to generate the front-end page.

[0104] Additionally, the Prettier tool can be used to format the front-end page code and generate standard code files. Prettier automatically parses the code and reformatts it according to preset rules, ensuring consistent code style. This solves the problem of inconsistent code formatting that often occurs during collaborative development, reducing the time and cost for developers to manually adjust the formatting.

[0105] The above method allows the configuration information of the front-end page to be reused across different technology frameworks, eliminating the need for developers to rewrite code for different technology frameworks, thereby effectively improving development efficiency.

[0106] In some implementations, before S203, the front-end device can test the front-end page. Only after confirming the functionality is working correctly will the front-end page code be generated, ensuring code accuracy. Specifically, the front-end device also performs the following: displays a preview and debug page. The front-end device can render the front-end page in real-time based on virtual DOM technology and display it on the preview and debug page. Virtual DOM is a way to describe the structure, attributes, and content of page components in the front-end page using JavaScript objects. On the preview and debug page, the user can test the functionality of each page component. Page components that fail the test are reconfigured. If all page components function correctly, S203 can be executed to generate the front-end page code.

[0107] For example, when testing the "Add Data" function, after the user clicks the "Add Data" control, a form pops up where the user can enter test data "username=test" and click "Submit". For the response after clicking the "Add Data" control, developers can pre-configure a simulated response "{code:200, message:"success"}. If, after the developer submits the test data, the front-end page displays a "Successful operation" message and automatically refreshes the list, then the "Add Data" function is confirmed to be working correctly.

[0108] In some implementations, if the user selects an internationalization configuration (such as Chinese or English) during initialization, the front-end device or back-end server selects an internationalization file from the configuration library based on the user's selection and saves it in association with the front-end page code. This allows the front-end page to be rendered in different language formats according to the internationalization file and displayed to the user during subsequent rendering.

[0109] In some implementations, developers may make multiple modifications to the same front-end page. Therefore, the front-end device can assign a version ID to each modification and associate the modified configuration information, version ID, modified content, and modification events in the database. The database supports a version snapshot mechanism, allowing developers to intuitively understand the differences between versions and enabling version rollback functionality. This ensures parallel batch development of multiple versions while avoiding conflicts.

[0110] Figure 7 This is a functional diagram of a front-end code generation system provided in an embodiment of this application. Figure 7 As shown, the front-end code generation system uniformly parses various types of back-end files, automatically obtaining the data fields required for developing front-end pages. Additionally, it provides a visual configuration platform, allowing developers to build front-end pages through a user interface. Furthermore, it supports features such as switching technology frameworks, version management and rollback, and automatic generation of permission-based code, ensuring the automatic generation of front-end code.

[0111] Figure 8 A complete flowchart is provided for an embodiment of this application, such as... Figure 8 As shown, for the front-end layer, users can configure project initialization, routing, and page components (including interface configuration, data model configuration (i.e., data field configuration), and interaction configuration (i.e., operation attribute configuration)). The multi-type object resolver deployed in the front-end layer can extract configuration information from various configurations and send it to the back-end layer. The back-end layer's permission rule converter can obtain permission configurations from the configuration information and convert them into permission judgment code. A database is used to store various configuration information. The template library stores front-end templates for multiple technology frameworks. When generating the front-end page, the rendering module in the engine layer obtains the permission judgment code, configuration information, and front-end templates from the back-end layer, merges and populates them to generate the front-end page code, and outputs it through the code output module. Additionally, the engine layer includes a debugging module, which is used to debug the front-end page, and outputs the code only after confirming that there are no issues.

[0112] The front-end code generation method provided in this application displays a first interface on a front-end device. Users can perform orchestration operations on the first interface, selecting target page components needed to build the front-end page from a component bar in a visual manner. Furthermore, display attributes and / or operation attributes are configured for the target page components to ensure the display effect and interactivity of the front-end page, thereby generating the front-end page. Compared with traditional front-end development solutions, this application uses a visual interface operation method instead of manually writing front-end code, which can effectively reduce the technical requirements for developers. Moreover, selecting target page components through the interface saves the process of manually writing and validating code, thereby effectively improving the efficiency of front-end code generation.

[0113] The front-end code generation method of this application embodiment can bring the following beneficial effects: 1. This application uses AST parsing to identify multiple file types and generate data in a unified format, thereby enabling full reuse of backend object information without the need for manual conversion of backend data and improving development efficiency.

[0114] 2. The embodiments of this application adopt the method of filling the front-end template with configuration information. The new configuration information can be reused between different technical frameworks. In the scenario where the technical framework needs to be switched during project migration, there is no need to re-encode the front-end code, thereby improving the efficiency of project migration.

[0115] 3. The embodiments of this application can automatically generate permission judgment code without manual writing, thus ensuring the accuracy of the permission judgment code logic.

[0116] 4. The embodiments of this application can test the front-end page in advance to ensure the completeness of the function and reduce the possibility of function errors after going live.

[0117] As can be seen, the above mainly describes the solutions provided by the embodiments of this application from a methodological perspective. To achieve the above functions, the embodiments of this application provide corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, in conjunction with the modules and algorithm steps of the various examples described in the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0118] In an exemplary embodiment, this application also provides a front-end code generation apparatus. This front-end code generation apparatus may be the aforementioned front-end device, or it may be a processor within the front-end device. The front-end code generation apparatus may include one or more functional modules for implementing the front-end code generation method of the above method embodiments.

[0119] For example, Figure 9 This is a schematic diagram illustrating the composition of a front-end code generation device provided in an embodiment of this application. Figure 9 As shown, the front-end code generation device includes a display module 901 and a generation module 902. The display module 901 and the generation module 902 are interconnected.

[0120] Display module 901 is used to display a first interface; the first interface includes a component bar and a canvas; the component bar includes multiple page components; the canvas is used to construct the front-end page. The display module 901 is also used to, in response to the user's arrangement operation on the first interface, select at least one target page component from the component bar to display on the canvas, and configure the display properties and / or operation properties of each target page component to construct the front-end page; The generation module 902 is used to generate configuration information for the front-end page and generate the code for the front-end page based on the configuration information.

[0121] Other optional implementation methods are described in the foregoing method embodiments.

[0122] This application also provides a computer-readable storage medium. All or part of the processes in the above method embodiments can be executed by computer instructions instructing related hardware; for example, the related hardware can be a processor of a computing device. The program instructions can be stored in the above-described computer-readable storage medium, and when executed, they can implement the processes of the above method embodiments. The computer-readable storage medium can be memory. The above-described computer-readable storage medium can also be an external storage device, such as a hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc. Further, the above-described computer-readable storage medium can include both memory and external storage devices. The above-described computer-readable storage medium is used to store the above-described computer program instructions and other programs and data required for the above-described software package translation.

[0123] This application also provides a computer program product, which includes a computer program that, when run on a computing device, causes the computing device to execute any of the front-end code generation methods provided in the above embodiments.

[0124] Although this application has been described herein in conjunction with various embodiments, those skilled in the art, by reviewing the accompanying drawings, disclosure, and appended claims, will understand and implement other variations of the disclosed embodiments in carrying out the claimed application. In the claims, the word "comprising" does not exclude other components or steps, and "a" or "an" does not exclude multiple instances. A single processor or other unit can implement several functions listed in the claims. While different dependent claims may recite certain measures, this does not mean that these measures cannot be combined to produce good results.

[0125] Although this application has been described in conjunction with specific features and embodiments, it is obvious that various modifications and combinations can be made thereto without departing from the spirit and scope of this application. Accordingly, this specification and drawings are merely exemplary illustrations of this application as defined by the appended claims, and are considered to cover any and all modifications, variations, combinations, or equivalents within the scope of this application. Clearly, those skilled in the art can make various alterations and modifications to this application without departing from the spirit and scope of this application. Thus, if such modifications and modifications of this application fall within the scope of the claims of this application and their equivalents, this application is also intended to include such modifications and modifications.

[0126] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A front-end code generation method, characterized in that, Applied to a front-end device, the method includes: Displaying a first interface; the first interface includes a component bar and a canvas; the component bar includes multiple page components; the canvas is used to construct the front-end page; In response to the user's arrangement operation on the first interface, at least one target page component is selected from the component bar and displayed on the canvas, and the display attributes and / or operation attributes of each target page component are configured to construct the front-end page; Generate the configuration information for the front-end page, and generate the code for the front-end page based on the configuration information.

2. The method according to claim 1, characterized in that, The orchestration operation includes a first operation and a second operation; configuring the display attributes of the target page components includes: Retrieve at least one data field; In response to the user's first operation, a mapping relationship is established between the at least one data field and the target page component; In response to the user's second operation, the data fields mapped to the target page component are adjusted to configure the display properties of the target page component.

3. The method according to claim 2, characterized in that, The second operation includes at least one of the following: Modify the content of the data field; Add data fields; Configure display permissions for data fields.

4. The method according to claim 2 or 3, characterized in that, The orchestration operation also includes a third operation; configuring the display properties of the target page components, which further includes: In response to a third user action, the display style of the target page component is configured to configure the display attributes of the target page component.

5. The method according to claim 1, characterized in that, The orchestration operation includes a fourth operation and a fifth operation; Configure the operation properties of the target page components, including: In response to the user's fourth action, select a target event from the event library to configure the operation mode of the target page component; In response to the user's fifth operation, a target interface function is selected from the interface function library to configure the response result of the target page component after responding to the operation method, so as to configure the operation attributes of the target page component.

6. The method according to claim 5, characterized in that, The orchestration operation also includes a sixth operation; configuring the operation attributes of the target page components also includes: In response to the user's sixth action, configure the operation permissions for the target page component.

7. The method according to claim 5 or 6, characterized in that, The method further includes: Obtain the backend interface file; the backend interface file includes information on multiple interfaces. For each interface information, an interface function is generated based on the interface address and request method extracted from the interface information to construct the interface function library.

8. The method according to any one of claims 1-7, characterized in that, Before displaying the first interface, the method further includes: The second interface is displayed; the second interface includes the routing structure of the software system to which the front-end page belongs. In response to the user's seventh operation on the routing structure, configure the route name of the front-end page and / or the hierarchy of the front-end page in the routing structure to configure the routing method of the front-end page in the software system.

9. The method according to any one of claims 1-8, characterized in that, The code for generating the front-end page based on the configuration information includes: Obtain the technical framework information of the front-end page; Select a front-end template from the template library that matches the technical framework information; The configuration information is used to populate the front-end template to obtain the code for the front-end page.

10. A computing device, characterized in that, The computing device includes a processor and a memory; the processor is coupled to the memory. The memory is used to store computer instructions; The computer instructions are loaded and executed by the processor to enable the computing device to implement the front-end code generation method as described in any one of claims 1-9.

Images