Code generation method, device and equipment for page development and storage medium

Abstract

The application relates to a code generation method and device for page development, equipment and a storage medium, wherein the method is suitable for a page editor, and the method comprises the following steps: detecting a first click operation on a component preview control; in response to the first click operation, displaying a component library; wherein the component library pre-stores components used in a page development process; in response to a selection operation on a component in the component library, displaying the selected component on the page editor; in response to an editing operation on the selected component, obtaining an editing operation result of the selected component; and mapping the editing operation result to a code generator, so that the code generator generates a code required for page development according to the editing operation result. The application aims to solve the problems of poor generality and flexibility in the prior art.

Description

Technical Field

[0001] This application relates to the field of software development, and more particularly to a method, apparatus, device, and storage medium for generating code for web page development. Background Technology

[0002] Low-code technology has made significant contributions to improving enterprise R&D efficiency during the R&D process.

[0003] Currently, there are generally three approaches to implementing low-code: the first approach is to directly convert the design draft into code using intelligent methods; the second approach is to describe the page using JSON Schema; and the third approach is to piece together an interface by using a few fixed layout combinations.

[0004] The third option, which uses a fixed layout to piece together a page, requires exhaustively exploring all possible layouts, lacking flexibility and having poor versatility. Summary of the Invention

[0005] This application provides a method, apparatus, device, and storage medium for generating code for page development, in order to solve the problems of poor versatility and flexibility in page development in the prior art.

[0006] In a first aspect, embodiments of this application provide a code generation method for page development, applicable to page editors, the method comprising:

[0007] Detect the first click operation on the component preview control;

[0008] In response to the first click operation, the component library is displayed; wherein, the component library pre-stores components used during the page development process;

[0009] In response to a selection operation on a component in the component library, the selected component is displayed on the page editor.

[0010] In response to an edit operation on the selected component, the result of the edit operation on the selected component is obtained;

[0011] The results of the editing operation are mapped to a code generator, so that the code generator generates the code required for page development based on the results of the editing operation.

[0012] Optionally, the response to the editing operation on the selected component, obtaining the editing operation result of the selected component, includes:

[0013] Display the property names and operation events of the selected component;

[0014] Respond to a first binding operation on the attribute name; wherein the first binding operation is used to bind data to the attribute name;

[0015] A second binding operation is performed in response to the operation event; wherein the second binding operation is used to bind a corresponding response action to the operation event;

[0016] Obtain the binding relationship between the attribute name, the data, the operation event, and the response action;

[0017] The binding relationship is used as the result of the editing operation on the selected component.

[0018] Optionally, the response to the first binding operation of the attribute name includes:

[0019] Obtain a second click operation on the data control; wherein the data control corresponds to the attribute name;

[0020] In response to the second click, display the application interface list;

[0021] Respond to the selection operation of choosing a target application interface from the list of application interfaces;

[0022] Bind the attribute name to the target application interface.

[0023] Optionally, the response to the second click operation, displaying a list of application interfaces, includes:

[0024] When the second click operation is detected, a first request to obtain the latest registered application interface is sent to the server; wherein, the server has the latest registered application interfaces pre-stored.

[0025] Obtain the latest registered application interface on the server;

[0026] Add the newly registered application interface to the current application interface list and display it.

[0027] Optionally, the response to the second click operation, displaying a list of application interfaces, includes:

[0028] In response to the second click operation, the current application interface list is displayed; wherein, the current application interface list is provided with an update control; the update control is used to trigger an update of the current application interface list;

[0029] Detect the third click operation on the update control;

[0030] A second request to obtain the latest registered application interface is generated corresponding to the third click operation, and the second request is sent to the server; wherein the server has the latest registered application interfaces pre-stored.

[0031] Obtain the latest registered application interface on the server;

[0032] Add the newly registered application interface to the current application interface list and display it.

[0033] Optionally, the response to the first binding operation of the attribute name includes:

[0034] Retrieve the data of the attribute name entered in the input box;

[0035] Bind the data to the attribute name.

[0036] Optionally, before responding to the click operation and displaying the component library, the method further includes:

[0037] The component library is obtained by responding to operations that create and / or update the component library.

[0038] Optionally, after displaying the component selected by the selection operation on the page editor, the method further includes:

[0039] In response to a drag operation on the selected component, a visual layout result of the selected component is obtained.

[0040] Secondly, embodiments of this application provide a code generation apparatus for page development, comprising:

[0041] The detection module is used to detect the first click operation on the component preview control;

[0042] The display module is used to respond to the first click operation and display the component library; wherein, the component library pre-stores the components used in the page development process;

[0043] The display module is used to respond to the selection operation of the component in the component library and display the selected component on the page editor;

[0044] An editing module is used to respond to editing operations on the selected component and obtain the editing operation result of the selected component;

[0045] A mapping module is used to map the results of the editing operation to a code generator, so that the code generator can generate the code required for page development based on the results of the editing operation.

[0046] Optionally, the editing module is configured to display the attribute name and operation event of the selected component; respond to a first binding operation on the attribute name, wherein the first binding operation is used to bind data to the attribute name; respond to a second binding operation on the operation event, wherein the second binding operation is used to bind a corresponding response action to the operation event; obtain the binding relationship between the attribute name, the data, the operation event, and the response action; and use the binding relationship as the editing operation result of the selected component.

[0047] Optionally, the editing module is configured to receive a second click operation on a data control; wherein the data control corresponds to the attribute name; in response to the second click operation, display a list of application interfaces; in response to a selection operation of selecting a target application interface from the list of application interfaces; and bind the attribute name to the target application interface.

[0048] Thirdly, embodiments of this application provide an electronic device, including: a processor, a memory, and a communication bus, wherein the processor and the memory communicate with each other through the communication bus;

[0049] The memory is used to store computer programs;

[0050] The processor is used to execute the program stored in the memory to implement the code generation method for page development described in the first aspect.

[0051] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program, characterized in that, when the computer program is executed by a processor, it implements the code generation method for page development described in the first aspect.

[0052] Compared with the prior art, the technical solution provided in this application has the following advantages: The method provided in this application, based on a page editor, allows users to browse a component library by clicking a component preview control, select the required components from the library, and edit the selected components. The page editor then generates the code required for page development based on the user's editing results. During page development, users can select the required components from the component library according to their needs, edit the selected components as needed, and then use the components to build a page. Code is then generated based on the built page. This allows for flexible selection and editing of components according to individual user needs, meeting the requirements of universality and offering high flexibility. Furthermore, selecting and editing components in the page editor makes component editing more intuitive, and the entire page building process is visualized. Attached Figure Description

[0053] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0054] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0055] Figure 1 A flowchart illustrating a code generation method for page development provided in this application embodiment;

[0056] Figure 2 A schematic diagram illustrating the principle of the code generation method for page development provided in this application embodiment;

[0057] Figure 3 This is a schematic diagram of the structure of the components provided in the embodiments of this application;

[0058] Figure 4 A schematic diagram of a code generation device for page development provided in this application embodiment;

[0059] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0060] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, 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, 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.

[0061] This application addresses the problem in existing technologies where page development employs several fixed layout schemes, failing to meet versatility requirements and exhibiting poor flexibility. The main idea is to establish a component library during page development, compiling business-specific components. Users can select necessary components from this library based on their needs and edit them as required to build a page. This allows for flexible component selection and editing based on individual user needs, meeting versatility requirements and offering high flexibility. Furthermore, the entire page building process is visualized and more intuitive, with users selecting and editing components in the page editor.

[0062] like Figure 1As shown in the figure, this application provides a code generation method for page development. This method is applicable to page editors, and the specific process of the method includes:

[0063] Step 101: Detect the first click operation on the component preview control;

[0064] The page building process is actually the process of building multiple components, and the page is constructed from these components. On the page editor interface, when the first click on the component preview control is detected, the component library is displayed, allowing the user to select the required components from the library.

[0065] Step 102: Respond to the first click operation and display the component library; the component library contains pre-stored components used during the page development process;

[0066] Upon detecting the first click on the component preview control, the component library is displayed to the user, allowing them to select the desired components. The component library primarily provides editable components for the page editor, enabling low-code development of the page and making the entire development process more visual and intuitive. Low-code development refers to a method of implementing business logic with minimal code.

[0067] In this embodiment, there is no restriction on the position of the component library displayed in the page editor; it can be displayed anywhere in the page editor as needed. For example, the component library can be displayed on the left side of the page editor.

[0068] Furthermore, there are no restrictions on the display format of the components in the component library; it can be a dropdown list, a hidden page, etc. For example, the components in the component library can be displayed as a list, such as... Figure 2 As shown.

[0069] When showcasing the component library, the names of each component in the library are displayed. The component library contains multiple pre-stored components. When creating the library, component names are defined to be easily understood by users, allowing them to grasp the component's function from its name. Specifically, the component name includes keywords describing the component's function. For example, if the library contains a first component and a second component, where the first component is named "Title" and the second component is named "Search," users can immediately tell that the first component is related to titles and the second to search. When building a title component, they can select the first component, and when building a search component, they can select the second component, allowing users to easily choose components based on their needs during page development.

[0070] During page development, a component library is pre-built and continuously updated. Specifically, an "Add" button can be added to the component library interface. Developers can click this button to add new components to the library during page development, thus continuously updating and enriching the library to meet diverse development needs and further improve its versatility and flexibility.

[0071] Step 103: Respond to the selection operation of a component in the component library and display the selected component on the page editor;

[0072] Select a component from the component library and display it in the page editor. For example, selecting a component named "Title" from the component library will display that component in the page editor; the component's structure is as follows. Figure 3 As shown, the component mainly consists of four parts: metadata, properties, data, and event handlers.

[0073] Metadata primarily describes the name and type of a component. Components can be categorized into static and dynamic components. For example, a component named "Title" might be classified as a static component. The main difference between static and dynamic components lies in how they retrieve data. For static components, the data is edited and written by the user during page development and remains constant. For dynamic components, data is dynamically retrieved through application programming interfaces (APIs). This dynamic data retrieval method defines the component type as a dynamic component.

[0074] Attributes are primarily used to describe the abstractions related to the business logic of a component. They can be understood as a simplified description of the component's characteristics. Attributes include: attribute name and attribute value. For attribute values, in dynamic components, the attribute value is dynamically entered by the user after the page is generated; in static components, the attribute value is fixed. For example, in a title component, the attribute name is "text," and the actual text content is the attribute value. Similarly, if a user wants to use a title-related component when building a page, and the title component's attribute name is "text," then "headline" is the attribute value. Another example is an attribute name being "color," where the actual color is the attribute value, such as "green."

[0075] Data within components is categorized into static data and dynamic data based on its acquisition method. Static data can be understood as fixed data input by the user during development. Dynamic data is data obtained from the server through an Application Programming Interface (API). An API is a predefined convention used to describe data communication between systems. In practical implementation, data retrieval requests can be authenticated and routed to the appropriate server via an API gateway.

[0076] Event handlers are primarily used to define the events that each component will execute. Taking searching for a keyword as an example, first, the user clicks the search box; second, the user enters the specific search term; and finally, the user presses Enter. Clicking the search box, entering the search term, and pressing Enter are the three operation events in the search component.

[0077] Step 104: Respond to the editing operation on the selected component and obtain the editing operation result of the selected component;

[0078] In practice, the editing operations on a component include: displaying the property name and operation event of the selected component; responding to the first binding operation on the property name; wherein the first binding operation is used to bind data to the property name; responding to the second binding operation on the operation event; wherein the second binding operation is used to bind the corresponding response action to the operation event; obtaining the binding relationship between the property name, data, operation event, and response action; and using the binding relationship as the result of the editing operation on the selected component.

[0079] There are two ways to bind data: the first is to bind it statically; the second is to bind it dynamically via API.

[0080] The first method: binding via static method:

[0081] The process of binding data to attribute names using static methods is as follows: obtain the attribute name data entered in the input box; bind the data to the attribute name, that is, use the specific content entered by the user in the data input box as data and bind it to the attribute name.

[0082] The second method: binding via dynamic means:

[0083] To dynamically bind data to attribute names, you can use the API. Specifically, this involves: obtaining a second click operation on a data control; where the data control corresponds to the attribute name; responding to the second click operation by displaying a list of application programming interfaces (APIs); responding to a selection operation from the API list to choose a target API; and binding the attribute name to the target API.

[0084] When performing data binding, APIs can be registered and discovered through ZooKeeper to update the API list. ZooKeeper is a distributed, open-source distributed application coordination service. It is software that provides consistency services for distributed applications, offering functions such as configuration maintenance, domain name service, distributed synchronization, and group services.

[0085] To update the API list through registration and discovery, the process can be as follows: When a second click operation is detected, a first request is sent to the server to retrieve the latest registered application interfaces; the server pre-stores the latest registered application interfaces; the latest registered application interfaces are retrieved from the server; the latest registered application interfaces are added to the current application interface list and displayed.

[0086] Developers pre-deploy the latest registered application interfaces to the server according to requirements; this process is called registration. Discovery refers to the automatic triggering of the first request to retrieve the latest registered application interfaces when a user opens the API list, thus automatically updating the API list.

[0087] In addition, updating the API list can also be achieved through user-triggered remote calls. The specific method is as follows: Respond to the second click operation and display the current application interface list; an update control is set on the current application interface list; the update control is used to trigger an update of the current application interface list; detect a third click operation on the update control; generate a second request corresponding to the third click operation to retrieve the latest registered application interfaces, and send the second request to the server; the server pre-stores the latest registered application interfaces; retrieve the latest registered application interfaces from the server; add the latest registered application interfaces to the current application interface list and display them.

[0088] For data updates implemented via remote calls, users need to manually trigger the update to generate a second request to obtain the latest registered application interfaces, which is a method of manually updating the API list.

[0089] In the actual implementation, the method for updating the API list can be selected according to the requirements.

[0090] Additionally, it should be noted that both the first and second requests first undergo authentication and routing through the API gateway to the corresponding servers. These servers primarily consist of two types: microservices and Faas functions. Microservices mainly handle general business processing, such as receiving update requests. Faas (Function as a Service, also known as serverless computing) functions are mainly responsible for processing customized business logic. The microservice and Faas function components are orchestrated to obtain the corresponding new API, which is then updated to the current API list as the most recently registered API.

[0091] The second binding operation for operation events is mainly used to bind corresponding response actions to the operation events. For ease of understanding, let's take searching as an example. First, the user clicks the search box; second, the user enters the specific search terms; and finally, the user presses Enter. Clicking the search box, entering the search terms, and pressing Enter are the three operation events in the search component.

[0092] The second binding operation for the operation events is to bind the corresponding response actions to the three operation events: clicking the search box, entering the search term, and pressing Enter.

[0093] For example: Bind a response action to display historical search records in the dropdown list when the search box is clicked; bind a response action to display candidate search results when a user enters a search term; for example, if a user enters the search term "coat," the dropdown list will display candidate search results such as "women's coats," "men's coats," and "spring / autumn coats"; bind a response action to redirect to the search results page when the user presses Enter; when a user enters a search term and presses Enter, the user will be redirected to the page corresponding to the search term.

[0094] Once the page is developed, users can receive and process operation events through the event bus during actual use.

[0095] In addition, during page development, editing operations may also include responding to drag operations on the selected component and obtaining a visual layout result of the selected component.

[0096] In the visual page editor, users can drag and drop to change the position of components, making the component layout more aesthetically pleasing, the operation simple, and the page development process more intuitive.

[0097] Step 105: Map the editing operation results to the code generator so that the code generator can generate the code required for page development based on the editing operation results.

[0098] Among them, the code generator enables rapid development with zero coding, and can automatically generate code based on code templates and key configuration data, greatly improving development efficiency.

[0099] When mapping the results of editing operations to the code generator, a publish-subscribe model can be used. The publish-subscribe model is a messaging paradigm in software architecture, where the sender of a message is called a publisher, and the receiver of a message is called a subscriber. Subscribers do not receive all messages sent by publishers, but only messages from their subscribed topics.

[0100] In addition, other models in the observer pattern can be reflected in the code generator to generate the code needed for page development.

[0101] In this embodiment, users can browse the component library by clicking the component preview control, select the required components, and edit the selected components. Based on the editing results, the code required for page development is generated. During page development, users can select the necessary components from the component library according to their needs, edit the selected components as needed, and then use the components to build a page. Code is then generated based on the built page. This allows for flexible selection and editing of components according to individual user needs, meeting the requirements of universality and offering high flexibility. Furthermore, the user-edited components in the page editor provide a more intuitive experience, making the entire page building process visual.

[0102] Furthermore, in the previous R&D process, product managers used prototyping tools to draw prototypes, visual designers generated design drafts, and these were delivered to the R&D personnel. The R&D personnel then combined the design drafts and prototypes to carry out development. However, since the data displayed on the design drafts is static, while in actual applications, some data is dynamic, and static data can only generate static components, it cannot effectively handle dynamic events and lacks the dynamism of data and response events. This is the problem with the first approach mentioned in the background technology section.

[0103] Through the embodiments of this application, once the component library and API list are ready, visual business design can be performed through a page editor, revolutionizing the previous development process. Product managers can combine and visually layout components using the visual page editor, and edit and bind component attributes, data, and events. Combined with responsive front-end design, the results of editing operations on attributes, events, and data are reflected in the code generator through the model provided by the observer pattern, ultimately generating complete code. The technical solution provided by the embodiments of this application allows for data binding both statically and dynamically via APIs, solving the problem of lacking dynamic data and responsive events in the first approach.

[0104] Regarding the second approach mentioned in the background section, JSON Schema is essentially a configuration file. Those involved in configuration need to understand the details of various components, resulting in a high learning curve and the file configuration format is not intuitive. However, the technical solution provided in this application's embodiments displays the component's attribute names and operation events intuitively on the page editor when editing components. Data is bound to the attribute names, and response actions are bound to the operation events, making the entire component configuration process highly intuitive.

[0105] Therefore, in summary, the technical solution provided by the embodiments of this application can solve the problems existing in the three low-code implementation methods in the prior art.

[0106] Based on the same concept, this application provides a code generation device for page development. The specific implementation of this device can be found in the description of the method embodiments section; repeated details will not be repeated here. Figure 4 As shown, the device mainly includes:

[0107] Detection module 401 is used to detect the first click operation on the component preview control;

[0108] Display module 402 is used to respond to the first click operation and display the component library; the component library pre-stores the components used in the page development process;

[0109] Display module 403 is used to respond to the selection operation of components in the component library and display the selected component on the page editor;

[0110] The editing module 404 is used to respond to the editing operation on the selected component and obtain the editing operation result of the selected component;

[0111] The mapping module 405 is used to map the results of editing operations to the code generator, so that the code generator can generate the code required for page development based on the results of the editing operations.

[0112] In this embodiment, the editing module 404 is specifically used to display the attribute name and operation event of the selected component; respond to a first binding operation on the attribute name; wherein the first binding operation is used to bind data to the attribute name; respond to a second binding operation on the operation event; wherein the second binding operation is used to bind a corresponding response action to the operation event; obtain the binding relationship between the attribute name, data, operation event and response action; and use the binding relationship as the editing operation result of the selected component.

[0113] In this embodiment, the editing module 404 is specifically used to obtain a second click operation on a data control; wherein the data control corresponds to an attribute name; in response to the second click operation, a list of application interfaces is displayed; in response to a selection operation of selecting a target application interface from the list of application interfaces; and the attribute name is bound to the target application interface.

[0114] In this embodiment, the editing module 404 is specifically used to send a first request to the server to obtain the latest registered application interface when a second click operation is detected; wherein the server has pre-stored the latest registered application interfaces; obtain the latest registered application interface from the server; add the latest registered application interface to the current application interface list and display it; or, the editing module 404 is specifically used to respond to the second click operation and display the current application interface list; wherein the current application interface list is provided with an update control; the update control is used to trigger an update of the current application interface list; detect a third click operation on the update control; generate a second request to obtain the latest registered application interface corresponding to the third click operation and send the second request to the server; wherein the server has pre-stored the latest registered application interfaces; obtain the latest registered application interface from the server; add the latest registered application interface to the current application interface list and display it.

[0115] In this embodiment of the application, the editing module 404 is specifically used to obtain the data of the attribute name entered in the input box; and bind the data with the attribute name.

[0116] The code generation apparatus for page development provided in this application embodiment further includes: a creation module 400, used to obtain the component library in response to the operation of creating and / or updating the component library.

[0117] In the code generation apparatus for page development provided in this application embodiment, the editing module 404 is also used to respond to the drag operation of the selected component and obtain the visual layout result of the selected component.

[0118] Based on the same concept, this application also provides an electronic device, such as... Figure 5 As shown, the electronic device mainly includes a processor 501, a memory 502, and a communication bus 503. The processor 501 and the memory 502 communicate with each other via the communication bus 503. The memory 502 stores programs that can be executed by the processor 501. The processor 501 executes the programs stored in the memory 502 to perform the following steps:

[0119] Detect the first click operation on the component preview control;

[0120] In response to the first click operation, the component library is displayed; wherein, the component library pre-stores components used during the page development process;

[0121] In response to a selection operation on a component in the component library, the selected component is displayed on the page editor.

[0122] In response to an edit operation on the selected component, the result of the edit operation on the selected component is obtained;

[0123] The results of the editing operation are mapped to a code generator, so that the code generator generates the code required for page development based on the results of the editing operation.

[0124] The communication bus 503 mentioned in the above electronic device can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus 503 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0125] The memory 502 may include random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor 501.

[0126] The processor 501 mentioned above can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc., or a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0127] In another embodiment of this application, a computer-readable storage medium is provided, which stores a computer program that, when run on a computer, causes the computer to execute the code generation method for page development described in the above embodiments.

[0128] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. This computer program product includes one or more computer instructions. When these computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another, for example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape, etc.), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive), etc.

[0129] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0130] The above description is merely a specific embodiment of the present invention, enabling those skilled in the art to understand or implement the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the present invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for generating code for page development, characterized in that, Applicable to page editors, the method includes: Detect the first click operation on the component preview control; In response to the first click operation, the component library is displayed; wherein, the component library pre-stores components used during the page development process; In response to a selection operation on a component in the component library, the selected component is displayed on the page editor. In response to an edit operation on the selected component, the result of the edit operation on the selected component is obtained; The result of the editing operation is mapped to the code generator, so that the code generator generates the code required for page development based on the result of the editing operation; The response to the editing operation on the selected component, obtaining the editing operation result of the selected component, includes: Display the property names and operation events of the selected component; Respond to a first binding operation on the attribute name; wherein the first binding operation is used to bind data to the attribute name; A second binding operation is performed in response to the operation event; wherein the second binding operation is used to bind a corresponding response action to the operation event; Obtain the binding relationship between the attribute name, the data, the operation event, and the response action; The binding relationship is used as the result of the editing operation on the selected component; The response to the first binding operation of the attribute name includes: Obtain a second click operation on the data control; wherein the data control corresponds to the attribute name; In response to the second click, display the application interface list; Respond to the selection operation of choosing a target application interface from the list of application interfaces; Bind the attribute name to the target application interface.

2. The code generation method for page development according to claim 1, characterized in that, The response to the second click operation displays a list of application interfaces, including: When the second click operation is detected, a first request to obtain the latest registered application interface is sent to the server; wherein, the server has the latest registered application interfaces pre-stored. Obtain the latest registered application interface on the server; Add the newly registered application interface to the current application interface list and display it.

3. The code generation method for page development according to claim 1, characterized in that, The response to the second click operation displays a list of application interfaces, including: In response to the second click operation, the current application interface list is displayed; wherein, the current application interface list is provided with an update control; the update control is used to trigger an update of the current application interface list; Detect the third click operation on the update control; A second request to obtain the latest registered application interface is generated corresponding to the third click operation, and the second request is sent to the server; wherein the server has the latest registered application interfaces pre-stored. Obtain the latest registered application interface on the server; Add the newly registered application interface to the current application interface list and display it.

4. The code generation method for page development according to claim 1, characterized in that, Before displaying the component library in response to the click operation, the process also includes: The component library is obtained by responding to operations that create and / or update the component library.

5. The code generation method for page development according to claim 1, characterized in that, After displaying the selected component on the page editor, the process further includes: In response to a drag operation on the selected component, a visual layout result of the selected component is obtained.

6. A code generation device for page development, characterized in that, include: The detection module is used to detect the first click operation on the component preview control; The display module is used to respond to the first click operation and display the component library; wherein, the component library pre-stores the components used in the page development process; The display module is used to respond to the selection operation of the component in the component library and display the selected component on the page editor; An editing module is used to respond to editing operations on the selected component and obtain the editing operation result of the selected component; A mapping module is used to map the results of the editing operation to the code generator, so that the code generator can generate the code required for page development based on the results of the editing operation. The editing module is configured to display the attribute name and operation event of the selected component; respond to a first binding operation on the attribute name, wherein the first binding operation is used to bind data to the attribute name; respond to a second binding operation on the operation event, wherein the second binding operation is used to bind a corresponding response action to the operation event; obtain the binding relationship between the attribute name, the data, the operation event, and the response action; and use the binding relationship as the editing operation result of the selected component. The response to the first binding operation on the attribute name includes: Obtain a second click operation on the data control; wherein the data control corresponds to the attribute name; In response to the second click, display the application interface list; Respond to the selection operation of choosing a target application interface from the list of application interfaces; Bind the attribute name to the target application interface.

7. The code generation device for page development according to claim 6, characterized in that, The editing module is configured to receive a second click operation on a data control; wherein the data control corresponds to the attribute name; in response to the second click operation, display a list of application interfaces; in response to a selection operation of selecting a target application interface from the list of application interfaces; and bind the attribute name to the target application interface.

8. An electronic device, characterized in that, include: The processor, memory, and communication bus are used to communicate with each other. The memory is used to store computer programs; The processor is used to execute the program stored in the memory to implement the code generation method for page development as described in any one of claims 1 to 5.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the code generation method for page development as described in any one of claims 1 to 5.

Images