Data processing method, device and equipment and computer readable storage medium

Abstract

The invention discloses a data processing method and device, equipment and a computer readable storage medium, and the method comprises the steps: responding to an editing operation for a target component in an initial page template, and displaying a component configuration page corresponding to the target component; displaying a configuration object associated with the target component in the component configuration page, and displaying a first form including a first field in response to a data binding operation for the configuration object; the first field is used for binding to a configuration object; when the configuration permission of the first form is set as the operation configuration permission, adding the first form to an operation configuration form for the target component; sending the page template and the operation configuration form to an operator; a first form in the operation configuration forms has a self-defined configuration function provided by the operation configuration authority; by adopting the method and the device, the generation speed of the operation configuration form and the service page can be improved, and the generation efficiency and the generation quality of the service logic code can also be improved.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a data processing method, apparatus, device, and computer-readable storage medium. Background Technology

[0002] With the continuous development of Internet technology, various applications have sprung up like mushrooms after rain. With the emergence of a large number of applications, end users have a wider range of choices.

[0003] To improve user engagement and retention, app operators need to create new business pages based on business requirements or goals. In existing technologies, the operator informs the developers of the business requirements, the developers manually input code to create the business page that meets those requirements, and then return the business page to the operator. Clearly, in existing technologies, whenever there are new business requirements, the operator needs to inform the developers so that they can manually write code to build the new business page. However, manual coding may result in low-quality code. Because the quality of manually inputted code cannot be guaranteed, the efficiency and quality of business page generation are both low, and the delivery cycle of business pages is also increased. Summary of the Invention

[0004] This application provides a data processing method, apparatus, device, and computer-readable storage medium, which can improve the generation speed of operation configuration forms and business pages, and also improve the efficiency and quality of business logic code generation.

[0005] One embodiment of this application provides a data processing method, including:

[0006] In response to an edit operation on the target component in the initial page template, display the component configuration page corresponding to the target component;

[0007] The component configuration page displays the configuration object associated with the target component, responds to data binding operations on the configuration object, and displays a first form including a first field; the first field is used to bind to the configuration object;

[0008] When the configuration permissions of the first form are set to the operational configuration permissions, the first form is added to the operational configuration form for the target component;

[0009] Both the page template and the operation configuration form are sent to the operations team. The page template refers to the initial page template after the target component is configured. The first form in the operation configuration form has the custom configuration function provided by the operation configuration permission. The operations team uses the custom configuration function to configure the first field in the operation configuration form to update the content of the configuration object in the page template that is bound to the first field.

[0010] One embodiment of this application provides a data processing apparatus, including:

[0011] The display module is used to respond to editing operations on the target component in the initial page template and display the component configuration page corresponding to the target component;

[0012] The display module is also used to display the configuration object associated with the target component in the component configuration page, respond to data binding operations for the configuration object, and display a first form including a first field; the first field is used to bind to the configuration object;

[0013] Add a module to add the first form to the operation configuration form for the target component when the configuration permissions of the first form are set to operation configuration permissions;

[0014] The sending module is used to send both the page template and the operation configuration form to the operator. The page template refers to the initial page template after the target component is configured. The first form in the operation configuration form has the custom configuration function provided by the operation configuration permission. The operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

[0015] In one possible implementation, the display module is also used to perform the following operations:

[0016] Import the page graphic files provided by the operator into the template editing application;

[0017] In response to the parsing operation of the page graphic file, display the initial page template and component option list corresponding to the page graphic file; the initial page template includes the target component; the component option list includes component options used to characterize the target component;

[0018] The display module then responds to editing operations on the target component in the initial page template, displaying the component configuration page corresponding to the target component, for performing the following operations:

[0019] In response to a trigger action on a component option, display a tooltip in the initial page template; the tooltip is used to mark the display area of ​​the target component in the initial page template.

[0020] Synchronously display the editing controls for the target component, respond to trigger operations on the editing component, and display the component configuration page corresponding to the target component.

[0021] In one possible implementation, the component configuration page includes a component event configuration page; the configuration object associated with the target component includes the event logic corresponding to the target component;

[0022] The display module shows the configuration object associated with the target component in the component configuration page, and is used to perform the following operations:

[0023] The event addition control is displayed on the component event configuration page. If a trigger operation is performed on the event addition control, the event information area and the logic configuration area are displayed.

[0024] Respond to information input operations targeting the event information area to obtain basic event information;

[0025] Respond to logical input operations for the logical configuration area and obtain the event logic configured for the basic event information.

[0026] In one possible implementation, the event information area includes an event name box and an event type box;

[0027] The display module responds to event information input operations in the event information area, obtains basic event information, and performs the following operations:

[0028] Respond to the name input operation in the event name box and retrieve the event name;

[0029] Respond to the type selection action in the event type box and obtain the event type;

[0030] Combine the event name and event type to form the basic event information.

[0031] In one possible implementation, the display module is also used to perform the following operations:

[0032] If the event type is a triggered event, a hotspot binding box will be displayed in the event information area;

[0033] In response to a hotspot selection operation on a hotspot binding box, obtain the interactive nodes belonging to the target component;

[0034] The display module then combines the event name and event type into basic event information, which is used to perform the following operations:

[0035] Combine the event name, the triggering event type, and the interactive nodes to form the basic event information.

[0036] In one possible implementation, the component configuration page includes the component node configuration page;

[0037] The display module shows the configuration object associated with the target component in the component configuration page, and is used to perform the following operations:

[0038] Display the component node tree corresponding to the target component on the component node configuration page;

[0039] In response to a node selection operation on the component node tree, the selected node is used as a configuration object, and the configuration object is highlighted in the target component.

[0040] In one possible implementation, the display module responds to a data binding operation against a configuration object by displaying a first form, including a first field, for performing the following operations:

[0041] The component configuration page displays the bound field controls for the configuration object, and responds to the triggering operation of the bound field controls to display the data configuration panel; the data configuration panel includes a data source area and a field structure area;

[0042] Display a list of forms in the data source area. If a form add operation is requested for the form list, add the first form to the form list.

[0043] Display the first field of the first form in the field structure area.

[0044] In one possible implementation, if the display module responds to a form add operation for the form list, it adds a first form to the form list for performing the following operations:

[0045] If a trigger action is initiated to add controls to a form in the form list, the form library page is displayed; the form library page includes all forms as well as highlighted recommended forms; the recommended forms are associated with a configuration object;

[0046] If a form selection action is performed on the form library page, the selected form is added to the form list as the first form.

[0047] If a trigger action is initiated to add a control to a form in the form library page, the form editing page will be displayed;

[0048] In the form editing page, respond to drag-and-drop operations on controls and generate a first form that includes the dragged controls.

[0049] In one possible implementation, the display module is also used to perform the following operations:

[0050] In response to a selection operation on the first field, a binding relationship is created between the first field and the configuration object; the binding relationship is used to indicate the display of binding tooltip text in the display area where the bound field control is located.

[0051] In one possible implementation, the display module is also used to perform the following operations:

[0052] In response to a preview action on the second form in the form list, display a form preview subpage;

[0053] The form preview subpage displays the usage information and form content of the second form; the usage information is either "used" or "to be used"; the "used" information indicates that the second form has been used; the "to be used" information indicates that the second form has not been used.

[0054] In one possible implementation, the display module is also used to perform the following operations:

[0055] In response to a modification to the third form in the form list, display the form editing page for the third form;

[0056] The form editing page responds to the editing operation on the third form and identifies the edited third form as the fourth form.

[0057] Update the third form in the form list to the fourth form.

[0058] In one possible implementation, the display module is also used to perform the following operations:

[0059] Respond to the trigger action of the preview control in the form list and display the operation form preview page;

[0060] The operations configuration form is displayed on the operations form preview page.

[0061] In one possible implementation, the display module is also used to perform the following operations:

[0062] Display the permission settings page for the first form, which includes permission settings controls, a title input box, and a field value input box corresponding to the first field.

[0063] In response to the activation operation of the configuration permission for the permission setting control, set the configuration permission of the first form to the operation configuration permission;

[0064] Respond to input operations in the title input box and retrieve the title text of the first form;

[0065] Respond to input operations in the field value input box and retrieve the field value of the first field.

[0066] In one possible implementation, the module adds the first form to the operational configuration form for the target component to perform the following operations:

[0067] Determine the binding status of each field in the first form;

[0068] If a second field in the first form is in a pending binding state, a field prompt message for the second field will be displayed; the field prompt message is used to indicate whether to bind or delete the second field.

[0069] If the binding status of each field in the first form is already bound, then the first form will be added to the operation configuration form for the target component.

[0070] In one possible implementation, the display module is also used to perform the following operations:

[0071] The page template is generated once all components in the initial page template have been configured.

[0072] In response to a preview action on the page template, display the page template and a list of component options; the list of component options includes component options used to characterize the target component;

[0073] In response to a trigger action on a component option, display the operational configuration form for the target component.

[0074] In one possible implementation, the sending module sends both the page template and the operation configuration form to the operator for the following operations:

[0075] Store the page template in the editor engine;

[0076] When responding to a save operation for the target component, a data format description language is generated to represent the first form, as well as a unique identifier corresponding to the first form;

[0077] When confirming the configuration permissions of the first form, extract the initial field values ​​configured in the first form;

[0078] When confirming the binding relationship between the first field and the configuration object, a data binding path for the configuration object is generated; the data binding path includes a unique identifier and a field identifier used to represent the first field;

[0079] Store the data format description language, initial field values, and data binding path carrying a unique identifier in the page protocol;

[0080] The editor engine and page protocol are sent to the operator so that the operator can generate business page code based on the editor engine and page protocol. Business page code refers to the code that generates the business page. The business page is obtained by the operator through the operation configuration form to configure the target components in the page template.

[0081] This application provides a computer device, including: a processor, a memory, and a network interface;

[0082] The processor is connected to the memory and the network interface, wherein the network interface is used to provide data communication functions, the memory is used to store computer programs, and the processor is used to call the computer programs so that the computer device executes the methods in the embodiments of this application.

[0083] One aspect of this application provides a computer-readable storage medium storing a computer program adapted to be loaded by a processor and executed by the method described in this application.

[0084] One embodiment of this application provides a computer program product, which includes a computer program stored in a computer-readable storage medium; a processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the method of the embodiment of this application.

[0085] In this embodiment, the computer device, in response to an editing operation on a target component in the initial page template, can display a component configuration page corresponding to the target component; the component configuration page displays configuration objects associated with the target component; in response to a data binding operation on the configuration objects, it can display a first form including a first field; the first field is used to bind to the configuration object; when the configuration permission of the first form is set to the operation configuration permission, the first form can be added to the operation configuration form for the target component; both the page template and the operation configuration form are sent to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has a custom configuration function provided by the operation configuration permission; the operator uses the custom configuration function to configure the first field in the operation configuration form to update the content of the configuration object in the page template that is bound to the first field. As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved. Attached Figure Description

[0086] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0087] Figure 1 This is a schematic diagram of a system architecture provided in an embodiment of this application;

[0088] Figure 2 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 1 ;

[0089] Figure 3 This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 1 ;

[0090] Figure 4a This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 2 ;

[0091] Figure 4b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 3 ;

[0092] Figure 4c This is a schematic diagram of a data processing scenario provided in an embodiment of this application;

[0093] Figure 4d This is a schematic diagram of a data processing scenario provided in an embodiment of this application;

[0094] Figure 5a This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 6 ;

[0095] Figure 5b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 7 ;

[0096] Figure 5c This is a schematic diagram of a data processing scenario provided in an embodiment of this application;

[0097] Figure 6 This is a flowchart illustrating a form processing method provided in an embodiment of this application;

[0098] Figure 7 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 2 ;

[0099] Figure 8aThis is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 9 ;

[0100] Figure 8b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 ;

[0101] Figure 8c This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 one;

[0102] Figure 8d This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 two;

[0103] Figure 9 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 3 ;

[0104] Figure 10 This is a schematic flowchart of a data processing method provided in an embodiment of this application;

[0105] Figure 11 This is a schematic diagram of the structure of a data processing device provided in an embodiment of this application;

[0106] Figure 12 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0107] 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 of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0108] To facilitate understanding, the following brief explanations are provided for some of the terms:

[0109] 1. No-code: refers to a software development methodology that allows non-programmers to build and deploy applications through graphical interfaces, drag-and-drop controls, or other simple interactive methods without writing any code.

[0110] 2. Operational Configuration: This refers to the process of setting and adjusting various operational parameters, rules, and strategies during operations management. It involves optimizing and adjusting various aspects of the operational system to meet business needs and improve operational efficiency.

[0111] 3. Operations Configuration Form: This is a business form used to help operations personnel manage and configure various business-related options and settings. These options and settings can include activity rules, promotional strategies, page layout, etc. The main purpose of the operations configuration form is to enable operations personnel to more easily manage and adjust business strategies to optimize the end-customer experience and improve page effectiveness.

[0112] 4. JSON (JavaScript Object Notation): A text-based representation of literal, array, and scalar data objects in JavaScript (a dynamic programming language). It is typically used for serializing and exchanging structured data over a network, usually between servers and web applications.

[0113] 5. JSON Schema: JSON Schema is a language used to describe JSON data formats. It can be used to validate whether JSON data meets specific conditions. JSON Schema provides a clear, easy-to-understand, and operable structure, while also offering powerful validation capabilities.

[0114] 6. Artificial Intelligence Generated Content (AIGC): This refers to content generated using artificial intelligence technology, and is considered a new method of content creation. Based on the functionality of the AI ​​model, AIGC can currently be divided into the generation of text, images, music, and video.

[0115] 7. Page Protocol: A communication protocol used in low-code development platforms to build and generate web pages.

[0116] Please see Figure 1 , Figure 1 This is a schematic diagram of a system architecture provided in an embodiment of this application. For example... Figure 1 As shown, the system may include a development terminal 10a and an operation terminal 10b. It is understood that the system may include one or more development terminals 10a, and may also include one or more operation terminals 10b. This application does not limit the number of development terminals 10a and operation terminals 10b respectively.

[0117] The development terminal 10a can have a communication connection with the operation terminal 10b. The communication connection is not limited to a specific method. It can be connected directly or indirectly through wired communication, wireless communication, or other methods. This application does not impose any restrictions on this method.

[0118] The development terminal 10a can be an application client with the template editing application installed. This template editing application has the function of editing the initial page template, that is, it has the function of generating page templates and operation configuration forms.

[0119] Operation terminal 10b can be an operation management client with business applications installed. These business applications can be video applications, social applications, instant messaging applications, navigation applications, shopping applications, electronic map applications, browsers, and other application clients. The operation management client is intended for operation management personnel of the business applications. For these applications, the operation management personnel can obtain or generate design drafts (also referred to as page graphic files in this embodiment) and requirement documents that meet business needs or objectives through the operation management client, and send both the design drafts and requirement documents to development terminal 10a. Development terminal 10a can be a client with a template editing application installed. It executes the data processing method provided in this embodiment so that development management personnel (hereinafter referred to as development objects) can import page templates and operation configuration forms into the client corresponding to the template editing application. By adjusting the fields in the operation configuration form, the content in the page template can be adjusted to generate a business page that meets business needs.

[0120] The template editing application can be a standalone client or an embedded sub-client integrated into a client (e.g., a social media client or a browser), without limitation. Similarly, the operations management client can be a standalone client or an embedded sub-client integrated into a client (e.g., a browser), without limitation.

[0121] It is understood that in the specific implementation of this application, data related to user information (such as design drafts) is involved. When the embodiments in this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with relevant laws, regulations and standards.

[0122] like Figure 1 As shown, development terminal 10a can obtain page graphic files (i.e., design drafts) and requirements documents sent by operation terminal 10b. The design draft is a visual mockup of the interface created by the operation personnel corresponding to the business application based on business requirements, using illustrations, graphic design, or other technologies. It is, for example, a PSD graphic file and does not have interactive functionality. The requirements document is a document describing the page's functionality, including the interactive events to be implemented, component configurations, etc.

[0123] In the template editing application, development terminal 10a imports the page graphic file provided by the operator (which can be understood as the operator or operation terminal 10b), responds to the parsing operation of the page graphic file, and displays the initial page template corresponding to the page graphic file. The initial page template does not have interactive functions, but it has the structure of the page graphic file, which can include the overall layout of the page graphic file and various functional components. Each functional component in the initial page template requires configuration data.

[0124] The development terminal 10a responds to editing operations on the target component in the initial page template and can display the component configuration page corresponding to the target component. The component configuration page displays the configuration object associated with the target component, responds to data binding operations on the configuration object, displays the first form including the first field, and the development binding 10a binds the first field to the configuration object, that is, creates a binding relationship between the first field and the configuration object.

[0125] According to the requirements document, the development object corresponding to development terminal 10a sets the configuration permissions of the first form in the template editing application. When the configuration permissions of the first form are set to the operation configuration permissions, development terminal 10a adds the first form to the operation configuration form for the target component. The initial page template may include one or more functional components. The target component can be regarded as any one of the one or more functional components. One functional component corresponds to one operation configuration form.

[0126] Once all functional components in the initial page template have been configured, the development terminal 10a can generate a page template. In other words, a page template is an initial page template in which all functional components have been configured. The page template not only has the structure of a page graphic file, but also has interactive functions through configuration data.

[0127] Furthermore, development terminal 10a sends both the page template and the operation configuration form to the operator. The first form in the operation configuration form has a custom configuration function provided by the operation configuration permissions. The operator can use the custom configuration function to configure the first field in the operation configuration form to update the content of the configuration object in the page template that is bound to the first field. By configuring each field in the operation configuration form, operation terminal 10b can generate a business page that meets the business requirements, and then publish the business page.

[0128] It is understood that the methods provided in this application embodiment can be executed by computer devices, including but not limited to development terminals or operation terminals. Development terminals include but are not limited to mobile phones, computers, smart voice interaction devices, smart home appliances, vehicle terminals, aircraft, etc., while operation terminals include but are not limited to mobile phones, computers, smart voice interaction devices, smart home appliances, vehicle terminals, aircraft, etc.

[0129] As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved.

[0130] Further, please see Figure 2 , Figure 2 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 1 This application's embodiments can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, assisted driving, and audio / video. This application's embodiments are applicable to page template development and distribution scenarios, operational configuration form construction scenarios, and business scenarios such as configuring page templates through operational configuration forms. Specific business scenarios will not be listed here. This data processing method can be developed by a development terminal (e.g., the aforementioned...). Figure 1 The development terminal 10a shown can be used, but it can also be executed by the operation terminal (e.g., the one mentioned above). Figure 1 The method is executed by the operating terminal 10b), as shown, and can also be executed interactively by the development terminal and the operating terminal. For ease of description and understanding, this application embodiment uses the example of the method being executed interactively by the operating terminal and the development terminal, i.e., the operating terminal and the development terminal act as computer devices to execute the data processing method. Figure 2 As shown, the data processing method may include at least the following steps S101-S104.

[0131] Step S101: In response to the editing operation of the target component in the initial page template, display the component configuration page corresponding to the target component.

[0132] Specifically, the template editing application imports the page graphic file provided by the operator; responds to the parsing operation of the page graphic file, and displays the initial page template and component option list corresponding to the page graphic file; the initial page template includes the target component; the component option list includes component options used to represent the target component.

[0133] In response to triggering actions for component options, display a tooltip in the initial page template; the tooltip is used to mark the display area of ​​the target component in the initial page template; simultaneously display the editing controls for the target component, and in response to triggering actions for the editing component, display the component configuration page corresponding to the target component.

[0134] Please see also Figure 3 , Figure 3 This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 1 .like Figure 3 As shown, the operating object 20a is the object that uses the operating terminal 10b. The operator can be understood as either the operating terminal 10b or the operating object 20a. For ease of understanding and description, Figure 3 Let's take the example of the target audience 20a as game operators. The operations platform determines the business needs. Figure 3 The example business requirement is to develop a group-buying game. Therefore, based on the business requirements, operation object 20a creates a visual mockup of the interface in operation terminal 10b using illustrations, graphic design, or other technologies. This visual mockup is the page design draft, such as... Figure 3 Example page graphic file 20b.

[0135] Figure 3 The example page graphic file 20b may include a page title, such as Figure 3 The group-buying game in the game can include one or more functional components (referred to as components). Figure 3 The example page graphic file 20b includes four components: component 201b, component 202b, component 203b, and component 204b. Figure 3 Example component 201b mainly displays game equipment and group purchase information for that game equipment, such as the quantity of game equipment being 9999, the game equipment having exclusive properties, and text describing the game equipment, the number of participants in the group purchase being 3, and the original price of the game equipment being 699 and the group purchase price being 568.

[0136] Figure 3 Example component 202b primarily demonstrates the group-buying process, including the steps: the first step is to start or join a group and pay the group-buying price; the second step is to invite friends to join; and the third step is the group-buying result, such as shipping the goods if the group is successful and refunding if the group is not successful. It also includes information on group members and the remaining time for the group-buying. Component 203b primarily displays the payment and group-buying initiation controls, and component 204b primarily displays the controls for inviting friends to join.

[0137] Based on business needs, the operation object 20a can build a design draft in PSD format, and can also input a requirements document 20c. The requirements document 20c refers to a document describing the page functions, including information such as the interactive events to be implemented and component configurations. Figure 3 The example corresponds to the requirements document 20c in the page graphic file 20b, which includes Component 1 name: Test Group Buying Activity Item Card, Component 1 event: Implement clicking the image to jump to the external link, Component 1 node 1: Skin Image, Component 1 node 2: Text Input Box.

[0138] Furthermore, the operational object 20a sends the page graphic file 20b, constructed based on business needs, and the requirement document 20c, to the development terminal 10a via the operational terminal 10b. Therefore, the development object corresponding to the development terminal 10a can develop the page based on the design draft (i.e., the page graphic file 20b) and the requirement document, obtaining a page template with the same page content as the page graphic file 20b. However, the page graphic file 20b does not have interactive functionality, while the page template does, and their file formats are different. For example, the page graphic file 20b is in PSD format, containing detailed information saved by the operational object or product personnel during the design phase, while the page template is in Virtual Hyper Text Markup Language (VHTML) format.

[0139] Understandable, Figure 3 The interfaces and controls shown in the various scenario diagrams below are merely some forms of representation for reference. In actual business scenarios, developers can make relevant designs according to product requirements. This application does not limit the specific forms of the interfaces and controls involved.

[0140] Please see also Figure 3 as well as Figure 4a , Figure 4a This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 2 . Figure 3 After receiving the page graphic file 20b and the requirement document 20c sent by the operation terminal 10b, the development terminal 10a can launch the template editing application. This template editing application is a low-code platform for quickly generating front-end template pages and back-end interfaces. Furthermore, the development object can read the page graphic file 20b in the template editing application and perform parsing operations on it. That is, the development terminal 10a responds to the parsing operation on the page graphic file 20b in the template editing application, displaying the file parsing page 20g. The file parsing page 20g can include three parts: the first part is the initial page template 20d displayed by parsing the page graphic file 20b; the second part is the component option list 20e displayed by parsing the page graphic file 20b; and the third part is the page configuration area 20f used to configure the initial page template.

[0141] As described above, the page content of page graphic file 20b is the same as the page content of the page template. In fact, the page content of page graphic file 20b is also the same as the page content of the initial page template 20d. The initial page template 20d is also in VHTML format, but the initial page template 20d does not have interactive functions. For example, if the payment group-buying control in the initial page template 20d is triggered, payment cannot be made. For example, if the invitation to friends to join the group is triggered, friends cannot be invited to join the group. Therefore, it is necessary to develop the initial page template 20d to generate a page template with interactive functions.

[0142] Please see again. Figure 4a The file parsing page 20g displays a page configuration area 20f, which is used to configure the overall information of the initial page template 20d, such as the page title. Figure 4a Example page title: Group Buying Game, for example, page background. Figure 4a Two options are provided for the page background: a color option and an image option. Figure 4a The example development object selects the color option and sets color 1 as the page background color. It is understood that the configuration items in the page configuration area 20f can be set according to the actual application scenario, and this embodiment does not limit this.

[0143] The basic building blocks of an initial page template are components (also called modules), such as... Figure 3 As shown in the example, the page graphic file 20b consists of 4 components. Figure 4a The example initial page template 20d is also from Figure 3 The initial page template is composed of four components, so configuring the initial page template is equivalent to configuring the components.

[0144] The target component described in this application embodiment can be any component in the initial page template. For example, the target component can be... Figure 4a The component represented by any component option in the component option list 20e. Figure 4a The example initial page template 20d includes 4 components, so the component option list 20e indicates that there are 4 component options. The first component option is to test the group buying activity item card, the second component option is the group buying gameplay, the third component option is to pay and start a group, and the fourth component option is to invite friends to join the group.

[0145] In this embodiment, the component indicated by the component option selected by the developer in component option list 20e is called the target component. If the developer selects the first component option in component option list 20e, namely the option "Test Group Buying Activity Item Card", then the development terminal 10a responds to the trigger operation for that component option and displays the component editing page. Please also refer to... Figure 4a as well as Figure 4b , Figure 4b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 3 .like Figure 4b As shown, the development terminal 10a responds to component options ( Figure 4a Triggered by the option "Test Group Buying Activity Item Card", the component editing page 20h is displayed. In component editing page 20h, the first component option in component option list 20e (i.e., option "Test Group Buying Activity Item Card") is highlighted, and the initial page template 20d displays a tooltip 201h. This tooltip 201h is used to mark the target component in the initial page template 20d. Figure 4b (Taking the first component as an example) is the display area.

[0146] Please see again. Figure 4b The development terminal 10a can display the component name 202h corresponding to the target component in the area adjacent to the target component on the component editing page 20h. Figure 4b The example is a test of a group-buying activity item card. Understandably, the initial page template 20d itself may not be able to highlight the display area of ​​the component. However, the tooltip 201h and the component name 202h can highlight the currently selected component (i.e., the target component), thereby assisting the developer in developing (i.e., editing) the target component.

[0147] Figure 4a The file parsing page 20g displays a page configuration area 20f, which is used to configure the overall information of the initial page template 20d. Figure 4b The component editing page 20h displays a component editing area 20i, which is used to configure basic information about the target component, such as... Figure 4b As shown, the component editing area 20i displays the component name of the target component, namely the test group-buying activity item card, and displays editing prompts, such as... Figure 4b The example shows "Please view and edit the component information", and displays the edit control 202h.

[0148] The component editing area 20i also displays basic information and events of the target component. The basic information includes the target component's content 203h, the target component's identifier, and... Figure 4b The example is CC...VV. This means that the identifier of the target component is unique, and it can be mapped to another target component. Basic information may also include the target component's name and category. Figure 4b The example is an activity-game group buying, along with a description of the target component. Figure 4b The example is a group-buying activity item card.

[0149] The content displayed on the file parsing page 20g and the content displayed on the component editing page 20h can be parsed. Figure 3 The example page graphic file 20b was obtained.

[0150] Please see again. Figure 4b If the development object triggers the editing control 202h, the development terminal 10a will respond to the trigger operation for the editing component 202h and display the component configuration page corresponding to the target component. Please refer to [link / reference]. Figures 4a-4c , Figure 4c This is a schematic diagram of a data processing scenario provided in an embodiment of this application. For example... Figure 4c As shown, the development terminal can display the component configuration page 20j. It can be understood that the component configuration page 20j is a page used to configure the target component. It can include three configuration functions: the first configuration function is upload and parsing, the second configuration function is event configuration, and the third configuration function is data field binding.

[0151] Figure 4c The displayed component configuration page 20j mainly shows the upload and parsing configuration functions. This configuration function is mainly used to configure the basic information of the target component. Figure 4b The basic information displayed in the component editing area 20i can be obtained by parsing the page's graphic file. Figure 4c The upload and parsing configuration function can display the basic information obtained from parsing the page's graphic file by default. It also supports developers to modify the basic information. For example, if a developer clicks on a trigger control, the component name of the target component can be modified. If a developer triggers a re-upload control, the cover of the target component can be re-uploaded.

[0152] If the developer confirms the content displayed by the upload and parsing configuration function, the next control 201j can be triggered. At this time, the development terminal displays the configuration page corresponding to the event configuration function.

[0153] Step S102: Display the configuration object associated with the target component in the component configuration page, respond to the data binding operation for the configuration object, and display the first form including the first field; the first field is used to bind to the configuration object.

[0154] Specifically, the component configuration page includes the component event configuration page; the configuration object associated with the target component includes the event logic corresponding to the target component; the component event configuration page displays an event addition control, and if a trigger operation is performed on the event addition control, the event information area and the logic configuration area are displayed; the basic event information is obtained in response to the information input operation in the event information area; and the event logic configured for the basic event information is obtained in response to the logic input operation in the logic configuration area.

[0155] The event information area includes an event name box and an event type box. The specific process of obtaining basic event information in response to event information input operations in the event information area may include: obtaining the event name in response to name input operations in the event name box; obtaining the event type in response to type selection operations in the event type box; and combining the event name and event type into basic event information.

[0156] This step may further include: if the event type is a triggered event type, then display a hotspot binding box in the event information area; respond to the hotspot selection operation for the hotspot binding box and obtain the interactive node belonging to the target component; then the specific process of combining the event name and event type into basic event information may include: combining the event name, triggered event type and interactive node into basic event information.

[0157] Specifically, the component configuration page displays the bound field controls for the configuration object, and responds to the trigger operation for the bound field controls to display the data configuration panel; the data configuration panel includes a data source area and a field structure area; a list of forms is displayed in the data source area, and if a form add operation is performed on the form list, the first form is added to the form list; the first field in the first form is displayed in the field structure area.

[0158] Specifically, if responding to a form addition operation on the form list, the process of adding the first form to the form list may include: if responding to a trigger operation to add a control to a form in the form list, displaying the form library page; the form library page includes all forms and highlighted recommended forms; the recommended forms are associated with a configuration object; if responding to a form selection operation on the form library page, adding the selected form as the first form to the form list; if responding to a trigger operation to add a control to a form in the form library page, displaying the form editing page; and responding to a drag-and-drop operation on the control in the form editing page to generate the first form including the dragged control.

[0159] This step may also include: responding to a selection operation on the first field, creating a binding relationship between the first field and the configuration object; the binding relationship is used to indicate the display of binding tooltip text in the display area where the bound field control is located.

[0160] The basic building blocks of an initial page template are components, such as... Figure 3 As shown in the example, the page graphic file 20b consists of 4 components. Figure 4a The example initial page template 20d is also from Figure 3 The page consists of four components, so configuring the initial page template is essentially configuring the components. Each component requires the following configuration information:

[0161] 1. Basic Information

[0162] 2. Event

[0163] 3. Data Fields

[0164] Among them, basic information is mandatory, while event configuration or data field configuration is determined according to the requirements document. That is, if the requirements document includes component events, then event configuration is performed; if the requirements document includes controls, then data field binding is performed.

[0165] This application primarily describes event configuration; for data field binding, please refer to the following text. Figure 7 The description in the corresponding embodiments.

[0166] Please participate as well. Figure 4c as well as Figure 4d , Figure 4d This is a schematic diagram of a data processing scenario provided in an embodiment of this application. For example... Figure 4d As shown, the development terminal displays the component event configuration page 20k, which in this embodiment is also referred to as the configuration page corresponding to the event configuration function. In actual application, the component event configuration page 20k displays an initial page template, similar to the initial page template 20d in the component configuration page 20j above. However, for the sake of page simplicity, this embodiment does not depict an initial page template in the component event configuration page 20k.

[0167] Please see again. Figure 4d The component event configuration page (20KB) includes configuration prompts. Figure 4d The example is "Please set the user's executable actions and feedback in this component"; corresponding to the component composition of the initial page template and the various nodes (also called elements) contained in the component, the component event configuration page 20k includes the node tree; the component event configuration page 20k includes the event addition control 201k.

[0168] If the requirements document includes component events for the target component, then the development object triggers the event and adds control 201k. Therefore, the development terminal responds to the trigger operation of adding control 201k for the event and displays the component event configuration page 20m. For example... Figure 4d As shown, the component event configuration page 20m can display the event information area 201m and the logic configuration area 202m. The event information area 201m can include an event name box and an event type box. Therefore, the developer can enter the event name in the event name box, and the development terminal can respond to the name input operation in the event name box and obtain the event name. Figure 4d Example of an event name: Click the jump link.

[0169] The developer can enter the event type in the event type box. This embodiment of the application can provide multiple candidate event types for the developer, such as... Figure 4d When a user clicks, enters a component, leaves a component, or when data changes, the development object can choose from a variety of candidate event types. The development terminal obtains the candidate event type selected by the development object. For example, when the development object selects to enter a component, the development terminal can combine the event name and event type into basic event information.

[0170] If the developer selects the "Click" event type from multiple candidate event types (i.e., the event type described above is the trigger event type), please also refer to... Figure 5a , Figure 5a This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 6 .like Figure 5a As shown, the development terminal can display a component event configuration page 20n. In the event information area 201n of the component event configuration page 20n, a hot zone binding box is displayed. This hot zone binding box is used to configure interactive nodes so that when the terminal object clicks or triggers the interactive node, it jumps to a link.

[0171] To accurately and efficiently bind interactive nodes, the component event configuration page 20n can display the node tree corresponding to the target component. This node tree can include nodes with hierarchical relationships, where a node can represent an element in the target component. Figure 5a Examples of nodes with hierarchical relationships are given, such as node 1 including node 1.1, node 1.1 including node 1.1.1, and node 1.1.2, which includes the image IMG node and node 1.1.2.2.

[0172] In practical applications, the component event configuration page 20n displays an initial page template, similar to the initial page template 20d in the component configuration page 20j above. However, for the sake of page simplicity, this embodiment does not depict the complete initial page template in the component event configuration page 20n; only the target component 20p is described. For example… Figure 5a Node 1 in the image can represent target component 20p, and the image IMG node can represent equipment image 201p in target component 20p.

[0173] When the development object selects an image IMG node in the node tree as a hotspot (i.e., an interactive node), the development terminal responds to the hotspot selection operation against the hotspot binding box, obtaining the interactive nodes belonging to the target component, i.e. Figure 5a Example image IMG; when the development terminal determines that the image IMG node is an interactive node, it can highlight the equipment image 201p represented by the image IMG node in the target component 20p.

[0174] Please see again. Figure 4d The logical configuration area 202m can display logical configuration prompts, such as... Figure 4d The example "Please select from the logic below" can display a logic search box 203m, and can also display candidate event logic. Figure 4d Two types of candidate event logic are shown: one is page interaction logic, including event logic such as opening pop-ups, closing pop-ups, and page navigation; the other is data acquisition logic, including countdown components and area avatars and nicknames.

[0175] Combination Figure 4d as well as Figure 5a After binding the hotspot, the development object can input event logic in the logic configuration area 202n. Therefore, the development terminal responds to the logic input operation for the logic configuration area 202n and obtains the event logic configured for the basic event information. Figure 5a In the example development object, the query term, i.e., external link, is entered in the logic search box 203n. At this time, the development terminal can search in the event logic library according to the query term, obtain the event logic containing the query term, and display it in the logic configuration area 202n. Figure 5a The example event logic library contains an event logic that includes an external link, namely "Open External Link". Therefore, the "Open External Link" event logic is displayed in the logic configuration area 202n, along with basic information about the "Open External Link" event logic, such as its name (i.e., Figure 5a (open external links in the text) and description (i.e.) Figure 5a (Opening a new window to redirect to a new page)

[0176] If the development object triggers the "Open External Link" event logic, the development terminal can update the display of logical configuration area 202n to logical configuration area 20q. It can be understood that the state of logical configuration area 202n is the logical pending configuration state, and the state of logical configuration area 20q is the logical configured state. Please refer to [further details omitted]. Figure 5a The logic configuration area 20q displays the event logic configured for the basic event information, i.e., "Open external link". Because the event logic requires external link parameters, the logic configuration area 20q is configured for the configuration object ( Figure 5a (Example: Event logic) It displays a bound field control 201q. Since the component event is a click-to-link event, the bound field control 201q is used to bind a URL field. The bound field control 201q can also display the field binding status. Figure 5a The example shows an unbound data field because the development object has not yet bound fields to the open external link event logic.

[0177] Furthermore, embodiments of this application can provide multiple parameters for an event logic, for example... Figure 5aThe example external link event logic can bind multiple URL fields, so when the page is landed, multiple URLs can be provided for the terminal object to choose from.

[0178] Please see also Figure 5a as well as Figure 5b , Figure 5b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 7 . Develop object trigger Figure 5a In the context of the bound field control 201q, the development terminal responds to a trigger operation targeting the bound field control 201q and displays... Figure 5b The data configuration panel 30a is included. The data configuration panel 30a includes a configuration prompt area 301a, used to display basic text prompts and currently bound content information. Figure 5b The example data configuration panel is used for... Figure 5a Event logic in (i.e.) Figure 5a The "Open External Link" option in the code binds data (i.e., fields), therefore... Figure 5b The example configuration prompt area 301a displays "Configuring a field for the 'URL field'. Please select a field from the panel below."

[0179] The data configuration panel 30a includes a data source area 302a and a field structure area 303a. The data source area 302a displays the data sources, including three types: event data, form data, and loop data. Event data originates from the event input / output parameters of all components in the initial page template. Form data refers to the configurable data in forms added by the developer; the forms in the data configuration panel refer to the forms in the form list. Loop data is business-level data and only exists when node (DOM) data is configured and the currently bound DOM node is within the loop, helping developers quickly select loop data.

[0180] The field structure area 303a displays field structure information. After the developer selects a data source in the data source area 302a, the field structure area 303a will display the corresponding selectable field structures for the developer to choose from. A field structure represents the fields of the data. For example, if you select data A, A = {name:'a', age:18}, the field structure of this data is name and age.

[0181] This application primarily describes form data, specifically the data within a form list. For example... Figure 5b As shown, the tree structure displayed below the form data represents all forms selected by the current component (i.e., the target component), i.e., the form list. Figure 5bThe example target component's form list includes one form, namely form 3a. Within the form list (which can also be understood as form data), operations such as previewing, setting, adding, and deleting forms can be performed. The specific operations and functions are described below.

[0182] Please see again. Figure 5b When the developer triggers the form addition control 304a in the data configuration panel 30a, the development terminal responds to the trigger operation for the form addition control 304a and displays the form library page 30b. The form library page 30b includes all forms and highlighted recommended forms. All forms refer to the forms created for the initial page template and the general forms provided by the template editing application. The forms created for the initial page template are those created by the developer for the initial page template, and their generation process is the same as the generation process of the forms generated on the form editing page described below, so it will not be repeated. The general forms provided by the template editing application are those provided by the template editing application for the developer, that is, generated by the backend corresponding to the template editing application. By using general forms, the developer can avoid creating commonly used and general forms, thus improving the configuration efficiency of the developer.

[0183] Recommended forms are associated with configuration objects. This means they are part of the full set of forms. The development terminal can run AIGC in the template editing application. When binding fields to configuration objects, AIGC identifies the data fields required for configuration and pushes the recommended forms from the full set that include those fields. For example, if a developer wants to bind an image address to a node in a target component, the system (the development terminal or the backend server corresponding to the template editing application) identifies this through AIGC and displays the recommended image selector form in the form library page. In this case, the developer doesn't need to search for the image selector form in the form library page. Therefore, recommended forms improve the efficiency of form creation and addition.

[0184] Please see again. Figure 5a as well as Figure 5b In this application, an example of configuring the URL field for the external link event logic is provided. This data field is used to input the URL, so the recommendation form may include a string box form, and the fields of this form may include input boxes. Figure 5b The example full forms include a text toast form and a text input form. The text toast form has a field for the text, and the text input form has a field for entering text content. Forms library page 30b also includes a navigation control for navigating through forms, such as... Figure 5b The control 302b allows you to navigate to subsequent forms, and the control 301b allows you to navigate to previous forms. The form library page 30b can also display the total number of forms, such as... Figure 5b The 91 entries indicate that there are a total of 91 forms.

[0185] If the response is to a form selection operation on form library page 30b, such as selecting a development object. Figure 5b Please refer to the string box form in the document as well. Figure 5c , Figure 5c This is a schematic diagram of a data processing scenario provided in an embodiment of this application. For example... Figure 5c As shown, the development terminal will select the form ( Figure 5c by Figure 5b The string box form example in the text is added to the form list as the first form, therefore... Figure 5c The example list of forms includes, in addition to Figure 5b In addition to form 3a, it also includes the newly added first form, namely the string box form.

[0186] Furthermore, if the developer selects the first form from the form list, such as... Figure 5c The example string box form will display the first field of the first form in the field structure area 303a, such as... Figure 5c The example shows an input field for entering text. The developer terminal responds to a trigger action on the first field and can display basic information about the first field, such as the text format shown in 5c, i.e., the string "string".

[0187] When the development object triggers the confirmation control 301c in the data configuration panel 30c, the development terminal creates a binding relationship between the first field and the configuration object. This means that after the development object selects the first field, the text prompt information and currently bound content information displayed in the configuration prompt area 301a of the data configuration panel 30c will appear, such as... Figure 5c The message "Configuring field for 'URL field', please select a field from the panel below" can be updated to "Configuring field for 'URL field', currently bound to: string box - input box".

[0188] The development terminal can respond to the 302c response for the cancel control (or close control or return control). Figure 5c If the close and back controls are not displayed, the system will return to the component event configuration page, which can then display... Figure 5c The logical configuration area 30d in the text. (Compare) Figure 5b The field binding status of the 201q bound field control. Figure 5c The field binding status of the 201q field control in the bound field control is "field bound". Figure 5cExample binding field control 201q displays the bound data path (equivalent to the binding prompt text), which is the form field text.

[0189] When the saved control 301d in the logic configuration area 30d of the development object is triggered, the development terminal can update the display component event configuration page, such as displaying... Figure 5c The component event configuration page 30e. (Compare) Figure 4d The component event configuration page is 20k. Figure 5c The component event configuration page 30e adds a component event for the target component. The event name is "Click to Jump Link," and the component event is configured with event logic named "Open External Link." This component event is invoked when clicked. If the development object triggers the expand control for the "Click to Jump Link" event, the development terminal can expand and display the content of the "Click to Jump Link" event. The component event configuration page 30e can also display a functional area for the "Click to Jump Link" event. This functional area can display an edit control 301e for the "Click to Jump Link" event, which can modify the current component event, such as changing the event name or bound fields. The functional area can also display a delete control 302e for the "Click to Jump Link" event, which is used to delete the "Click to Jump Link" event. The functional area can also display a details control 303e for the "Click to Jump Link" event, which is used to jump to the details page of the "Click to Jump Link" event to display its detailed content.

[0190] Step S103: When setting the configuration permission of the first form to the operation configuration permission, add the first form to the operation configuration form for the target component.

[0191] Specifically, determine the binding status of each field in the first form; if a second field in the first form has a pending binding status, display a field prompt message for the second field; the field prompt message is used to indicate whether to bind or delete the second field; if each field in the first form has a bound status, add the first form to the operation configuration form for the target component.

[0192] The operational configuration forms for the target component include forms for configuring all objects that need to be operated for the target component. The operations team will record the component events (which can be understood as custom component events) and component nodes (which can be understood as custom component nodes) that need to be configured in the requirements document. Therefore, when configuring the target component, the development team first configures the event logic for the component events that need to be configured according to the component events recorded in the requirements document, then binds data fields to the event logic, and adds the form to which the data field belongs to the operational configuration form. Similarly, the forms containing the fields bound to the component nodes are added to the operational configuration form.

[0193] As can be seen from steps S102 and S103, this application embodiment provides a solution for quickly building operation configuration forms with zero code. Through interactive processes such as visual drag-and-drop form creation, form recommendation, and form splicing, it helps development and operation objects to quickly generate operation form configurations, solves problems such as personalized operation forms, repetitive form development, and high business integration costs, improves the efficiency of operation form development, and realizes the construction of operation configuration forms with zero code.

[0194] Step S104: Send both the page template and the operation configuration form to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has the custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

[0195] Specifically, the page template is stored in the editor engine; when responding to a save operation for the target component, a data format description language representing the first form and a unique identifier corresponding to the first form are generated; when confirming the configuration permissions of the first form, the initial field values ​​configured in the first form are extracted; when confirming the binding relationship between the first field and the configuration object, a data binding path for the configuration object is generated; the data binding path includes a unique identifier and a field identifier representing the first field; the data format description language carrying the unique identifier, the initial field values, and the data binding path are stored in the page protocol; the editor engine and the page protocol are sent to the operator respectively, so that the operator can generate business page code based on the editor engine and the page protocol; the business page code refers to the code that generates the business page; the business page is obtained by the operator through the operation configuration form to configure the target component in the page template.

[0196] It is understandable that developing the initial page template (i.e., configuring information) involves configuring each component within the initial page template. Each component needs to be configured with basic information, events, and data fields. This application's embodiments primarily describe the configuration of basic information and component events. If a component needs to configure multiple events, the configuration process for each event is the same as the component event configuration process described in step S102 above. The following... Figure 7 The corresponding implementation will describe in detail the process of binding a field to a node in the component.

[0197] When a component completes event configuration and / or field binding, the component is considered configured. At this point, the component's operational configuration form can also be generated. Once all components in the initial page template are configured, the development terminal can generate the page template, i.e., the initial page template after configuration.

[0198] This application provides a solution for building operation configuration forms with zero code. It provides a standardized operation configuration form generation solution through product interaction and form protocol JSON Schema, realizing visual and rapid generation of operation form configurations for low-code platforms, improving the efficiency and quality of business logic code generation, and reducing the external delivery cycle.

[0199] Please see also Figure 6 , Figure 6 This is a flowchart illustrating a form processing method provided in an embodiment of this application. Figure 6 As shown, the method may include at least the following steps 1-8, wherein steps 1-6 are executed by the development terminal and steps 7-8 are executed by the operation terminal.

[0200] Step 1: Edit the form and save it using the data format description language JSON Schema.

[0201] The development terminal configures the target components in the initial page template, specifically by binding fields to the event logic of component events and / or binding fields to component nodes. The bound fields originate from form data, therefore, forms need to be created or edited within the form list.

[0202] After the developer confirms, saves, and uses the form, the development terminal sends the form's basic information (including the form name and description) and form content (fields such as input boxes and dropdown lists) to the development platform's backend. The form content is saved to the database in JSON Schema format. Once the form is edited, the system will automatically use it by default on the development terminal. Developers can also return to the form list and select a different form.

[0203] When a development object binds fields to a configuration object, the development terminal or backend can identify the type of the DOM node, such as text (TEXT) or image (IMG). For text types, a text configuration form is recommended. For image types (IMG), an image selector form is recommended. Similarly, the development terminal or backend can analyze the input parameter types of event logic and recommend logical configuration items, reducing the time spent searching forms and improving efficiency.

[0204] Step 2: Combine the forms with operational configuration permissions into an operational configuration form, and record the operational configuration form using the data format description language JSON Schema.

[0205] After the development terminal confirms the form, it needs to configure the form's permissions according to the requirements document provided by the operator. If the configuration permission of a form is set to the operation configuration permission, a unique identifier for that form is generated. All forms with the configuration permission set to the operation configuration permission for a component are combined and assembled into an operation configuration form. That is, an operation configuration form is composed of one or more forms with the configuration permission set to the operation configuration permission.

[0206] Step 3: Record the data in the operation configuration form in JSON format.

[0207] Among them, the default values ​​in the fields configured in forms with operational configuration permissions will be extracted separately and used for data binding and data display in page templates.

[0208] Step 4: Record the data binding path.

[0209] When developers use forms to bind data, the system records the data binding path in the page protocol to facilitate data linkage for subsequent code generation, as described above. Figures 5a-5c For example, the development object configures the "Open External Link" event logic for the target component, and binds the "Open External Link" event logic to the first form (such as...). Figure 5c The first field in the "string box" form (e.g.) Figure 5c The data binding path for the "Open External Link" event logic is the "string box" form - input field.

[0210] Step 5: Save to page agreement.

[0211] The data generated in steps 2-4 is saved to the page protocol.

[0212] Step 6: Save the page template to the editor engine.

[0213] Step 7: In the page protocol, configure the data in the operation configuration form and adjust the data of the page template in the editor engine.

[0214] Step 8: Generate the page.

[0215] In conjunction with the descriptions in steps 7 and 8, the editor engine uses the cached operational configuration form JSON Schema, form data, data binding paths, etc. in the page protocol to generate code, that is, to generate the code for the business page, implement the operational configuration of the target component in the page template, and render the bound data in real time.

[0216] Through steps 1-8 above, the creation, selection, rendering, and code generation of the form are achieved, ultimately enabling the rendering of the operation configuration form in component configuration and operation data.

[0217] In this embodiment, the computer device, in response to an editing operation on a target component in the initial page template, can display a component configuration page corresponding to the target component; the component configuration page displays configuration objects associated with the target component; in response to a data binding operation on the configuration objects, it can display a first form including a first field; the first field is used to bind to the configuration object; when the configuration permission of the first form is set to the operation configuration permission, the first form can be added to the operation configuration form for the target component; both the page template and the operation configuration form are sent to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has a custom configuration function provided by the operation configuration permission; the operator uses the custom configuration function to configure the first field in the operation configuration form to update the content of the configuration object in the page template that is bound to the first field. As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved.

[0218] Further, please see Figure 7 , Figure 7 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 2 This method can be implemented by a business server (e.g., the one mentioned above). Figure 1 The business server 100 shown can execute the service, or it can be executed by a terminal device (e.g., the one described above). Figure 1The method can be executed by the terminal device 200a), or it can be executed interactively by the business server and the terminal device. For ease of understanding, this application embodiment uses the execution of the method by the terminal device as an example, that is, the terminal device executes the data processing method as a computer device. Figure 7 As shown, the method may include at least the following steps S201-S208.

[0219] Step S201: In response to the editing operation of the target component in the initial page template, display the component configuration page corresponding to the target component.

[0220] For details, please refer to [link / reference]. Figure 4c The above text Figure 2 The corresponding embodiments describe in detail the configuration page corresponding to the event configuration function, namely the component event configuration page. This application embodiment will describe in detail the field binding of nodes in the target component. Node field binding can occur after event configuration, for example, when completing event configuration for the target component. Please refer to [further details needed]. Figure 5c If a trigger operation is initiated for the next control 304e in the component event configuration page 30e, the development terminal can display the component node configuration page. Node binding can occur before event configuration. For example, if a development object triggers the data field binding function in component configuration page 20j while the development terminal is displaying component configuration page 20j, the development terminal can directly display the component node configuration page. Similarly, if a development object triggers the data field binding function in component event configuration page 20k while the development terminal is displaying component event configuration page 20k, the development terminal can display the component node configuration page.

[0221] Please see also Figure 8a , Figure 8a This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 9 .like Figure 8a As shown, the development terminal displays component node configuration page 70a. It's understandable that when the development terminal displays the page corresponding to a specific function, that function will be highlighted, for example... Figure 4c The component configuration page 20j displays basic information about the target component, and the upload and parsing functions are highlighted in the component configuration page 20j at this time; for example... Figure 4d The component event configuration page 20k is displayed to configure events for the target component. At this time, the event configuration function is highlighted in the component event configuration page 20k. Figure 8a The component node configuration page 70a is used to configure the nodes in the target component, so the data field binding function is highlighted.

[0222] Step S202: Display the configuration object associated with the target component on the component configuration page, respond to the data binding operation for the configuration object, and display a first form including a first field; the first field is used to bind to the configuration object.

[0223] Specifically, the component configuration page includes a component node configuration page; the component node tree corresponding to the target component is displayed on the component node configuration page; in response to the node selection operation for the component node tree, the selected node is used as the configuration object and the configuration object is highlighted in the target component.

[0224] This step may also include: responding to a preview operation for the second form in the form list and displaying a form preview subpage; displaying usage information and form content of the second form in the form preview subpage; the usage information is either used or pending; the used information indicates that the second form has been used; the pending information indicates that the second form has not been used.

[0225] This step may also include: responding to a modification operation on the third form in the form list and displaying a form editing page for the third form; responding to the editing operation on the form editing page and designating the edited third form as the fourth form; and updating the third form in the form list to the fourth form.

[0226] This step may also include: responding to a trigger action on a preview control in the form list and displaying the operational form preview page; and displaying the operational configuration form on the operational form preview page.

[0227] Please see again. Figure 8a The component node configuration page 70a displays the component node tree 70b, the meaning of which can be found in [reference needed]. Figure 5a The description of the DOM tree in the middle node is not elaborated here.

[0228] In component node tree 70b, one node corresponds to one element in the target component. Therefore, developers can configure elements in the target component by selecting nodes in component node tree 70b. Figure 8a The example development object selects node 1.1.2.2 in component node tree 70b, which corresponds to text element 70c in target component 20p. The text content of text element 70c is "exclusive equipment". For example... Figure 8a As shown, when node 1.1.2.2 is selected in the development object, the development terminal highlights the text element 70c represented by node 1.1.2.2 in the target component 20p, and displays the node selection information 701a in the component node configuration page 70a, namely "Currently selected node: node 1.1.2.2".

[0229] The developer determines the configuration content of the nodes in the target component based on the requirements document. This embodiment of the application... Figure 8a The example demonstrates three types of configuration content. The first type is a status control, representing the display / hidden state control of nodes. By binding fields, the rendering conditions, i.e., the display conditions, of the configured nodes can be determined. The second type is a loop control, representing loop configuration. The loop setting control 702a allows you to set whether a configured node participates in the loop. If it participates, the looping object of the configured nodes can be determined by binding fields. The third type is attribute control, representing the configuration of node DOM style attributes, including the style name (classname), style, and text.

[0230] By setting the above three types of configuration content, the developer object can configure the currently selected node. Specifically, the developer object triggers the binding field controls corresponding to the three types of configuration content. For example, triggering the binding field control 703a can configure the currently selected node (such as...). Figure 8a The loop object of node 1.1.2.2), for example, triggers the binding field control 704a, and can configure the style name of the currently selected node.

[0231] The data configuration page can be displayed on the development terminal for any bound field control (including bound field controls 703a and 704a) in the component node configuration page 70a of the development object triggering component. Please refer to the documentation for further details. Figure 8b , Figure 8b This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 .like Figure 8b As shown, the development terminal responds to the trigger operation of the bound field control and displays the data configuration panel 70e. The meaning of the content in the data configuration page 70e is the same as that described above. Figure 5b The content in the data configuration page 30a has the same meaning, so it will not be repeated here. Please refer to the description above.

[0232] Data configuration page 70e can display data selection prompts 701e in the field structure area. Figure 8b The example is "Please select data from the left panel." This is understandable. Figure 8b The function of adding control 702e in the above text is the same. Figure 5b The functionality of the form addition control 304a is the same, therefore the development terminal responds to the trigger operation for the form addition control 702e by displaying the form library page, which can be found here. Figure 5bThe form library page 30b is used for development. Developers can select a form on the form library page and add it as the first form to the form list. The implementation process here is the same as the event logic parameter binding process described above, so it will not be repeated here.

[0233] If the form library does not contain the form that the developer wants to bind to, the developer can trigger the addition of new controls to the form in the form library page, such as... Figure 5b The form adds a new control 30z, so the development terminal responds to the trigger operation of adding control 30z to the form and displays the form editing page. Please refer to [link / reference]. Figure 8c , Figure 8c This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 1. For example Figure 8c As shown, the form editing page includes three types of areas: the control area 701f, the form construction area 702f, and the attribute configuration area 703f. The control area 701f can provide different types of controls. Figure 8c Examples of input controls and layout controls are provided, including but not limited to... Figure 8c The form includes input boxes, multi-line inputs, switches, and checkbox groups. Layout controls include, but are not limited to, cards and tabs. The form construction area 702f is used to construct the form. Specifically, developers can drag and drop controls provided in the control area 701f to the form construction area 702f. After dragging one or more controls (such as input boxes) to the form construction area 702f, developers can configure the properties of the dragged controls in the property configuration area 703f, such as control grid width, control width, label alignment, control alignment, etc.

[0234] After configuring the properties of the controls in the form construction area 702f, the developer object can trigger... Figure 8c When the control 704f is saved and used, the development terminal generates a first form including the dragged control and adds the first form to the... Figure 8b The example data configuration page 70e.

[0235] Please see again. Figure 8b If the development object triggers form 3a (which can be understood as the second form) in the data configuration page 70e, the development terminal can display the field structure of form 3a in the field structure area, that is, the current field of form 3a. At this time, the development object can select a field from the current field of form 3a as the first field, that is, to bind to the configuration object.

[0236] Please see again. Figure 8bThe development terminal responds to the preview operation of the "string box" form (which can be understood as a second form), displaying the form preview subpage 70g. The form preview subpage 70g displays the usage information of the "string box" form. Figure 8b The example shows the used information, and also displays the form content of the "string box" form, i.e., the fields and field values. Figure 8b Only the field is shown as an example, namely the input box for entering text; no example field values ​​are provided.

[0237] The developer object can modify the forms in the form list, for example, to... Figure 8b When you modify form 3a (which can be understood as the third form), the modified form 3a (which can be understood as the fourth form) will be displayed in the form list when you confirm the changes to form 3a. In addition, form 3a in the form library page will also be updated to the modified form 3a.

[0238] Please see again. Figure 8b If the development object triggers the preview control 703e in the form data (referred to as the form list in this embodiment), the development terminal can display the operation form preview page 70h. This operation form preview page 70h displays all forms configured with operation configuration permissions for the target component. Figure 8b Examples of forms include Form 3a and the "String Box" form.

[0239] Step S203: Display the permission settings page for the first form, which includes permission settings controls, a title input box, and a field value input box corresponding to the first field.

[0240] Step S204: In response to the configuration permission activation operation for the permission setting control, the configuration permission of the first form is set to the operation configuration permission.

[0241] Step S205: Respond to the input operation for the title input box and obtain the title text of the first form.

[0242] Step S206: Respond to the input operation for the field value input box and obtain the field value of the first field.

[0243] Specifically, referring to steps S203-S206, the first form is determined on the form library page (it can be a newly added form or a form selected from the form library). Further details can be found in the documentation. Figure 5b , Figure 5bThe example selects the "String Box" form from the recommended forms, thus designating it as the first form. This triggers a 303b response to the next control, and the development terminal displays the permission settings page for the first form. Please refer to [link / reference]. Figure 8d , Figure 8d This is a schematic diagram of a data processing scenario provided in an embodiment of this application. Figure 10 2. For example Figure 8d As shown, the development terminal displays the permission settings page 70i. The permission settings page 70i mainly includes two areas. The first area is the selected form area, used to display the configured forms, i.e., the first form. Figure 5b as well as Figure 8d The embodiments of this application use Figure 5b The "string box" form example in the image is the first form. The second area is the attribute configuration area, used to configure the attributes of the first form. This includes two types of attributes. The first type is display settings, also known as permission settings, which determines whether the first form has operational configuration permissions, such as... Figure 8d As shown, whether to set it as an operation configuration item is equivalent to setting whether the first form has operation configuration permissions. If "yes" is checked, the first form has operation configuration permissions; if "no" is checked, the first form does not have operation configuration permissions.

[0244] In addition, the attribute configuration area also supports modifying the title of the first form, such as Figure 8d As shown, to facilitate understanding and review of the purpose of the first form by the developer, the developer enters the title text of the first form in the title input box, namely "Jump to external link address". Therefore, the title of the first form in the selected form area is not... Figure 5b The "string box" shown is not the "redirect link address" entered in the property configuration area.

[0245] The second type of attribute supported by the attribute configuration area is the default item setting, which refers to the default field values ​​displayed in the first form, such as... Figure 8d The input fields in the first form, as shown, default to displaying w...w:xx.vv. When the first form does not have operational configuration permissions, the fields in the first form need to be configured with values ​​to ensure that the first field in the generated page template has a value. If the first form has operational configuration permissions, the fields in the first form can be configured with values ​​or not.

[0246] Step S207: Add the first form to the operation configuration form for the target component.

[0247] For details, please refer to [link / reference]. Figure 8dWhen responding to a trigger operation of the confirm control in the permission settings page 70i, the development terminal can add the first form to the operation configuration form for the target component.

[0248] This application provides a no-code method for creating operation configuration forms through page interaction on the development side, thus enabling zero-code construction of operation configuration forms. Furthermore, standardized form generation is achieved through product interaction and JSON Schema. Visual operation is supported, thereby increasing the speed of form generation. Because operation configuration forms are built with zero code, the efficiency and quality of business logic code generation are optimized. Improving code generation efficiency reduces the delivery cycle, i.e., reduces the time for external (i.e., operation-side) delivery, and increases response speed.

[0249] Step S208: Send both the page template and the operation configuration form to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has the custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

[0250] For details on the implementation of step S208, please refer to the above text. Figure 2 Step S104 in the corresponding embodiment will not be described in detail here.

[0251] As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved.

[0252] Further, please see Figure 9 , Figure 9 This is a flowchart illustrating a data processing method provided in an embodiment of this application. Figure 3 This data processing method can be performed by a business server (e.g., the one mentioned above). Figure 1 The business server 100 shown can execute the service, or it can be executed by a terminal device (e.g., the one described above). Figure 1 The method can be executed by the terminal device 200a), or it can be executed interactively by the business server and the terminal device. For ease of understanding, this application embodiment uses the execution of the method by the terminal device as an example, that is, the terminal device executes the data processing method as a computer device. Figure 9As shown, the data processing method may include at least the following steps S301-S307.

[0253] Step S301: In response to the editing operation of the target component in the initial page template, display the component configuration page corresponding to the target component.

[0254] For the specific implementation process of step S301, please refer to the above text. Figure 2 Step S101 in the corresponding embodiment will not be described in detail here.

[0255] Step S302: Display the configuration object associated with the target component on the component configuration page, respond to the data binding operation for the configuration object, and display a first form including a first field; the first field is used to bind to the configuration object.

[0256] Specifically, the embodiments of this application in the product include zero-code form creation, zero-code form data binding, zero-code operation configuration form generation, and zero-code operation configuration. The first three are implemented by the development terminal, and the last one is implemented by the operation terminal. These four components can connect the entire chain of zero-code operation configuration form creation from setup to implementation.

[0257] There are three main scenarios where form data is used: binding event logic forms, binding DOM data field forms, and generating operational configuration forms.

[0258] There are two scenarios when binding data sources to development objects: binding event logic parameters and binding DOM data (rendering, looping, text, images, styles). Data can be taken from event data and form data. Event data comes from the logical input and output parameters set when the component is initialized, clicked, or leaves; form data comes from the data structure of added form controls.

[0259] In addition to form data and event data, to help developers quickly select data within the DOM loop, this application embodiment calculates the loop data for the developers, such as... Figure 8b The loop data is displayed in the image. Please refer to [link / reference]. Figure 10 , Figure 10 This is a schematic flowchart (four) illustrating a data processing method provided in an embodiment of this application. Figure 10 As shown, the method may include the following steps:

[0260] Step 41: Select a node in the component.

[0261] Specifically, only DOM nodes can be bound to loop data. The use of loop data is divided into two scenarios: binding loop data and selecting loop data.

[0262] Step 42: Is it within a loop?

[0263] Specifically, only DOM nodes within the loop can select loop data. Therefore, if the current node is within the loop, proceed to step 43; otherwise, proceed to step 44.

[0264] Step 43: Display the selectable loop data.

[0265] Specifically, when loop data is bound to a DOM node, a unique loop identifier will be generated for the loop to ensure that it will not be repeated in the component, and a unique loop index and a unique loop item will be generated based on the loop data field name and cached in the page protocol.

[0266] Within a loop, the node can display the loop data bound to its parent DOM node, and select the field data under the loop item. The loop scheme in this embodiment satisfies all DOM loop scenarios, such as single-level loops, multi-level loops, and multi-level loops with the same field.

[0267] Step 44: Select data without loops.

[0268] Specifically, if not within a loop, there is no selectable loop data.

[0269] Step S303: When setting the configuration permission of the first form to the operation configuration permission, add the first form to the operation configuration form for the target component.

[0270] For the specific implementation process of step S303, please refer to the above text. Figure 2 Step S103 in the corresponding embodiment will not be described in detail here.

[0271] Step S304: Once all components in the initial page template have been configured, generate the page template.

[0272] Specifically, based on the product interactions described above, the operational process for generating the form in this application mainly involves four different scenarios:

[0273] 1. In the form editor (including the form editing page mentioned above), edit general business forms using a visual drag-and-drop method.

[0274] 2. In the page editor of the template editing application (including the component configuration page mentioned above), assemble one or more business forms into a component operation form and cache it to the page protocol via JSON Schema.

[0275] 3. In the PageCraft editor (referring to the template editing page corresponding to the operator), the editor engine renders the operation configuration form of the component and performs operation configuration on the bound data.

[0276] 4. The landing page (i.e. the business page) implements the linkage between the data configured in the form and the canvas.

[0277] Step S305: In response to the preview operation for the page template, display the page template and the component option list; the component option list includes component options used to characterize the target component.

[0278] Step S306: In response to the triggered operation for the component option, display the operation configuration form for the target component.

[0279] Step S307: Send both the page template and the operation configuration form to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has the custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

[0280] It is understood that the embodiments involved in this application, such as Figure 2 , Figure 7 as well as Figure 10 The respective embodiments can be combined to generate new embodiments.

[0281] As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved.

[0282] Further, please see Figure 11 , Figure 11 This is a schematic diagram of the structure of a data processing apparatus provided in an embodiment of this application. The aforementioned data processing apparatus 1 can be a computer program (including program code) running on a computer device; for example, the data processing apparatus 1 is an application software. The data processing apparatus 1 can be used to execute the corresponding steps in the method provided in the embodiments of this application. Figure 11 As shown, the data processing device 1 may include a display module 11, an adding module 12, and a sending module 13.

[0283] Display module 11 is used to respond to editing operations on the target component in the initial page template and display the component configuration page corresponding to the target component;

[0284] The display module 11 is also used to display a configuration object associated with the target component in the component configuration page, respond to data binding operations for the configuration object, and display a first form including a first field; the first field is used to bind to the configuration object;

[0285] Add module 12 to add the first form to the operation configuration form for the target component when the configuration permission of the first form is set to the operation configuration permission;

[0286] The sending module 13 is used to send both the page template and the operation configuration form to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has the custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

[0287] In one possible implementation, display module 11 is also used to perform the following operations:

[0288] Import the page graphic files provided by the operator into the template editing application;

[0289] In response to the parsing operation of the page graphic file, display the initial page template and component option list corresponding to the page graphic file; the initial page template includes the target component; the component option list includes component options used to characterize the target component;

[0290] Then, display module 11 responds to the editing operation of the target component in the initial page template, displays the component configuration page corresponding to the target component, and performs the following operations:

[0291] In response to a trigger action on a component option, display a tooltip in the initial page template; the tooltip is used to mark the display area of ​​the target component in the initial page template.

[0292] Synchronously display the editing controls for the target component, respond to trigger operations on the editing component, and display the component configuration page corresponding to the target component.

[0293] In one possible implementation, the component configuration page includes a component event configuration page; the configuration object associated with the target component includes the event logic corresponding to the target component;

[0294] Display module 11 displays the configuration object associated with the target component in the component configuration page, and performs the following operations:

[0295] The event addition control is displayed on the component event configuration page. If a trigger operation is performed on the event addition control, the event information area and the logic configuration area are displayed.

[0296] Respond to information input operations targeting the event information area to obtain basic event information;

[0297] Respond to logical input operations for the logical configuration area and obtain the event logic configured for the basic event information.

[0298] In one possible implementation, the event information area includes an event name box and an event type box;

[0299] Display module 11 responds to event information input operations in the event information area, obtains basic event information, and performs the following operations:

[0300] Respond to the name input operation in the event name box and retrieve the event name;

[0301] Respond to the type selection action in the event type box and obtain the event type;

[0302] Combine the event name and event type to form the basic event information.

[0303] In one possible implementation, display module 11 is also used to perform the following operations:

[0304] If the event type is a triggered event, a hotspot binding box will be displayed in the event information area;

[0305] In response to a hotspot selection operation on a hotspot binding box, obtain the interactive nodes belonging to the target component;

[0306] Then, display module 11 combines the event name and event type into basic event information, which is used to perform the following operations:

[0307] Combine the event name, the triggering event type, and the interactive nodes to form the basic event information.

[0308] In one possible implementation, the component configuration page includes the component node configuration page;

[0309] Display module 11 displays the configuration object associated with the target component in the component configuration page, and performs the following operations:

[0310] Display the component node tree corresponding to the target component on the component node configuration page;

[0311] In response to a node selection operation on the component node tree, the selected node is used as a configuration object, and the configuration object is highlighted in the target component.

[0312] In one possible implementation, the display module 11 responds to a data binding operation against a configuration object by displaying a first form including a first field for performing the following operations:

[0313] The component configuration page displays the bound field controls for the configuration object, and responds to the triggering operation of the bound field controls to display the data configuration panel; the data configuration panel includes a data source area and a field structure area;

[0314] Display a list of forms in the data source area. If a form add operation is requested for the form list, add the first form to the form list.

[0315] Display the first field of the first form in the field structure area.

[0316] In one possible implementation, if the display module 11 responds to a form add operation for the form list, it adds a first form to the form list for performing the following operations:

[0317] If a trigger action is initiated to add controls to a form in the form list, the form library page is displayed; the form library page includes all forms as well as highlighted recommended forms; the recommended forms are associated with a configuration object;

[0318] If a form selection action is performed on the form library page, the selected form is added to the form list as the first form.

[0319] If a trigger action is initiated to add a control to a form in the form library page, the form editing page will be displayed;

[0320] In the form editing page, respond to drag-and-drop operations on controls and generate a first form that includes the dragged controls.

[0321] In one possible implementation, display module 11 is also used to perform the following operations:

[0322] In response to a selection operation on the first field, a binding relationship is created between the first field and the configuration object; the binding relationship is used to indicate the display of binding tooltip text in the display area where the bound field control is located.

[0323] In one possible implementation, display module 11 is also used to perform the following operations:

[0324] In response to a preview action on the second form in the form list, display a form preview subpage;

[0325] The form preview subpage displays the usage information and form content of the second form; the usage information is either "used" or "to be used"; the "used" information indicates that the second form has been used; the "to be used" information indicates that the second form has not been used.

[0326] In one possible implementation, display module 11 is also used to perform the following operations:

[0327] In response to a modification to the third form in the form list, display the form editing page for the third form;

[0328] The form editing page responds to the editing operation on the third form and identifies the edited third form as the fourth form.

[0329] Update the third form in the form list to the fourth form.

[0330] In one possible implementation, display module 11 is also used to perform the following operations:

[0331] Respond to the trigger action of the preview control in the form list and display the operation form preview page;

[0332] The operations configuration form is displayed on the operations form preview page.

[0333] In one possible implementation, display module 11 is also used to perform the following operations:

[0334] Display the permission settings page for the first form, which includes permission settings controls, a title input box, and a field value input box corresponding to the first field.

[0335] In response to the activation operation of the configuration permission for the permission setting control, set the configuration permission of the first form to the operation configuration permission;

[0336] Respond to input operations in the title input box and retrieve the title text of the first form;

[0337] Respond to input operations in the field value input box and retrieve the field value of the first field.

[0338] In one possible implementation, module 12 adds the first form to the operational configuration form for the target component, for the following operations:

[0339] Determine the binding status of each field in the first form;

[0340] If a second field in the first form is in a pending binding state, a field prompt message for the second field will be displayed; the field prompt message is used to indicate whether to bind or delete the second field.

[0341] If the binding status of each field in the first form is already bound, then the first form will be added to the operation configuration form for the target component.

[0342] In one possible implementation, display module 11 is also used to perform the following operations:

[0343] The page template is generated once all components in the initial page template have been configured.

[0344] In response to a preview action on the page template, display the page template and a list of component options; the list of component options includes component options used to characterize the target component;

[0345] In response to a trigger action on a component option, display the operational configuration form for the target component.

[0346] In one possible implementation, the sending module 13 sends both the page template and the operation configuration form to the operator for the following operations:

[0347] Store the page template in the editor engine;

[0348] When responding to a save operation for the target component, a data format description language is generated to represent the first form, as well as a unique identifier corresponding to the first form;

[0349] When confirming the configuration permissions of the first form, extract the initial field values ​​configured in the first form;

[0350] When confirming the binding relationship between the first field and the configuration object, a data binding path for the configuration object is generated; the data binding path includes a unique identifier and a field identifier used to represent the first field;

[0351] Store the data format description language, initial field values, and data binding path carrying a unique identifier in the page protocol;

[0352] The editor engine and page protocol are sent to the operator so that the operator can generate business page code based on the editor engine and page protocol. Business page code refers to the code that generates the business page. The business page is obtained by the operator through the operation configuration form to configure the target components in the page template.

[0353] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0354] As described above, the embodiments of this application provide a way to create page templates and operation configuration forms without coding, that is, to support visual operation. Therefore, it can improve the generation speed of operation configuration forms, thereby improving the generation speed of business pages, and can also reduce the external delivery cycle of page templates and operation configuration forms used to configure page templates. By avoiding manual input of development code to configure the target components for building page templates, the efficiency and quality of business logic code generation can be improved.

[0355] Further, please see Figure 12 , Figure 12 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. For example... Figure 12 As shown, the computer device 1000 may include: at least one processor 1001, such as a CPU, at least one network interface 1004, a user interface 1003, a memory 1005, and at least one communication bus 1002. The communication bus 1002 is used to implement communication between these components. In some embodiments, the user interface 1003 may include a display screen and a keyboard, and the network interface 1004 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface). The memory 1005 may be high-speed RAM or non-volatile memory, such as at least one disk drive. Optionally, the memory 1005 may also be at least one storage device located remotely from the aforementioned processor 1001. Figure 12 As shown, the memory 1005, which serves as a computer storage medium, may include an operating system, a network communication module, a user interface module, and a device control application program.

[0356] exist Figure 12 In the computer device 1000 shown, the network interface 1004 provides network communication functionality; the user interface 1003 is mainly used to provide an input interface for the user; and the processor 1001 can be used to call the device control application stored in the memory 1005 to achieve:

[0357] In response to an edit operation on the target component in the initial page template, display the component configuration page corresponding to the target component;

[0358] The component configuration page displays the configuration object associated with the target component, responds to data binding operations on the configuration object, and displays a first form including a first field; the first field is used to bind to the configuration object;

[0359] When the configuration permissions of the first form are set to the operational configuration permissions, the first form is added to the operational configuration form for the target component;

[0360] Both the page template and the operation configuration form are sent to the operations team. The page template refers to the initial page template after the target component is configured. The first form in the operation configuration form has the custom configuration function provided by the operation configuration permission. The operations team uses the custom configuration function to configure the first field in the operation configuration form to update the content of the configuration object in the page template that is bound to the first field.

[0361] It should be understood that the computer device 1000 described in the embodiments of this application can perform the data processing methods or apparatus described in the preceding embodiments, and will not be repeated here. Furthermore, the beneficial effects of using the same methods will also not be repeated.

[0362] This application also provides a computer-readable storage medium storing a computer program. When executed by a processor, the computer program implements the data processing methods or apparatus described in the preceding embodiments, which will not be repeated here. Furthermore, the beneficial effects of using the same methods will also not be repeated.

[0363] The aforementioned computer-readable storage medium can be an internal storage unit of the data processing apparatus or computer device provided in any of the foregoing embodiments, such as a hard disk or memory of the computer device. The computer-readable storage medium can also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc., provided on the computer device. Furthermore, the computer-readable storage medium may include both internal and external storage units of the computer device. The computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. The computer-readable storage medium can also be used to temporarily store data that has been output or will be output.

[0364] This application also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, enabling the computer device to perform the data processing methods or apparatus described in the preceding embodiments, which will not be repeated here. Furthermore, the beneficial effects of using the same method will also not be repeated here.

[0365] The terms "first," "second," etc., in the specification, claims, and drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the term "comprising," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, apparatus, product, or device that includes a series of steps or units is not limited to the listed steps or modules, but may optionally include steps or modules not listed, or may optionally include other step units inherent to these processes, methods, apparatuses, products, or devices.

[0366] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software 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 implementations should not be considered beyond the scope of this application.

[0367] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A data processing method, characterized by, include: In response to an editing operation on a target component in the initial page template, the component configuration page corresponding to the target component is displayed; The component configuration page displays a configuration object associated with the target component, and in response to a data binding operation for the configuration object, displays a first form including a first field; the first field is used to bind to the configuration object. When the configuration permission of the first form is set to the operation configuration permission, the first form is added to the operation configuration form for the target component; The page template and the operation configuration form are both sent to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has a custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

2. The method of claim 1, wherein, The method further includes: Import the page graphic files provided by the operator into the template editing application; In response to the parsing operation of the page image file, an initial page template and a component option list corresponding to the page image file are displayed; the initial page template includes a target component; the component option list includes component options for representing the target component; The response to the editing operation of the target component in the initial page template displays the component configuration page corresponding to the target component, including: In response to a trigger operation for the component option, a prompt box is displayed in the initial page template; the prompt box is used to mark the display area of ​​the target component in the initial page template. The editing controls for the target component are displayed synchronously, and the component configuration page corresponding to the target component is displayed in response to the trigger operation for the editing component.

3. The method according to claim 1, characterized in that, The component configuration page includes a component event configuration page; the configuration object associated with the target component includes the event logic corresponding to the target component; Displaying the configuration object associated with the target component on the component configuration page includes: The component event configuration page displays an event addition control. If a trigger operation is performed on the event addition control, the event information area and the logic configuration area are displayed. Responding to information input operations targeting the event information area, basic event information is obtained; Responding to logical input operations for the logical configuration area, the event logic configured for the event basic information is obtained.

4. The method according to claim 3, characterized in that, The event information area includes an event name box and an event type box; The response is based on the event information input operation in the event information area to obtain basic event information, including: Respond to the name input operation in the event name box to obtain the event name; In response to a type selection operation in the event type box, obtain the event type; The event name and the event type are combined to form the basic event information.

5. The method according to claim 4, characterized in that, Also includes: If the event type is a triggered event type, a hotspot binding box will be displayed in the event information area; In response to a hotspot selection operation on the hotspot binding box, obtain the interactive nodes belonging to the target component; The step of combining the event name and the event type into basic event information includes: The event name, the triggering event type, and the interactive node are combined to form the basic event information.

6. The method according to claim 1, characterized in that, The component configuration page includes a component node configuration page; Displaying the configuration object associated with the target component on the component configuration page includes: The component node tree corresponding to the target component is displayed on the component node configuration page; In response to a node selection operation on the component node tree, the selected node is used as a configuration object, and the configuration object is highlighted in the target component.

7. The method according to claim 1, characterized in that, The response to the data binding operation of the configuration object displays a first form including a first field, comprising: The component configuration page displays bound field controls for the configuration object, and responds to trigger operations on the bound field controls to display a data configuration panel; the data configuration panel includes a data source area and a field structure area; A list of forms is displayed in the data source area. If a form add operation is requested for the form list, a first form is added to the form list. The first field of the first form is displayed in the field structure area.

8. The method according to claim 7, characterized in that, The step of adding a first form to the form list in response to a form addition operation in the form list includes: If a trigger operation is initiated to add controls to a form in the form list, the form library page is displayed; the form library page includes all forms and highlighted recommended forms; the recommended forms are associated with the configuration object. If a form selection operation is performed on the form library page, the selected form is added as the first form to the form list; If a trigger operation is initiated in response to adding a control to a form in the form library page, the form editing page is displayed; In the form editing page, in response to drag-and-drop operations on controls, a first form including the dragged controls is generated.

9. The method according to claim 7, characterized in that, Also includes: In response to a selection operation on the first field, a binding relationship is created between the first field and the configuration object; The binding relationship is used to indicate the display of binding prompt text in the display area where the binding field control is located.

10. The method according to claim 7, characterized in that, Also includes: In response to a preview operation on the second form in the form list, a form preview subpage is displayed; The form preview subpage displays the usage information and form content of the second form; the usage information is either used information or pending information; the used information is used to indicate that the second form has been used. The pending information is used to indicate that the second form is not in use.

11. The method according to claim 7, characterized in that, Also includes: In response to a modification operation on the third form in the form list, a form editing page for the third form is displayed; The form editing page responds to the editing operation on the third form and determines the edited third form as the fourth form; Update the third form in the form list to the fourth form.

12. The method according to claim 7, characterized in that, Also includes: In response to a trigger operation on the preview control in the form list, the operation form preview page is displayed; The operation configuration form is displayed on the operation form preview page.

13. The method according to claim 1, characterized in that, The method further includes: Display the permission settings page for the first form, and display permission settings controls, a title input box, and a field value input box corresponding to the first field on the permission settings page; In response to the configuration permission activation operation for the permission setting control, the configuration permission of the first form is set to the operation configuration permission; In response to an input operation in the title input box, obtain the title text of the first form; In response to an input operation to the field value input box, the field value of the first field is obtained.

14. The method according to claim 1, characterized in that, Adding the first form to the operation configuration form for the target component includes: Determine the binding status of each field in the first form; If a second field in the first form is in a pending binding state, a field prompt message for the second field is displayed; the field prompt message is used to indicate whether to bind the second field or delete the second field. If the binding status of each field in the first form is already bound, then the first form is added to the operation configuration form for the target component.

15. The method according to claim 1, characterized in that, Also includes: Once all components in the initial page template have been configured, the page template is generated. In response to a preview operation on the page template, the page template and a component option list are displayed; the component option list includes component options for representing the target component; In response to a triggered action for the component option, an operational configuration form for the target component is displayed.

16. The method according to claim 1, characterized in that, Sending both the page template and the operation configuration form to the operator includes: Store the page template in the editor engine; In response to a save operation targeting the target component, a data format description language for representing the first form and a unique identifier corresponding to the first form are generated. When confirming the configuration permissions of the first form, extract the initial field values ​​configured in the first form; When confirming the binding relationship between the first field and the configuration object, a data binding path for the configuration object is generated; the data binding path includes the unique identifier and a field identifier used to represent the first field; The data format description language carrying the unique identifier, the initial field value, and the data binding path are stored in the page protocol; The editor engine and the page protocol are sent to the operator, so that the operator can generate business page code based on the editor engine and the page protocol; the business page code refers to the code that generates the business page; the business page is obtained by the operator through the operation configuration form to configure the target component in the page template.

17. A data processing apparatus, characterized in that, include: The display module is used to respond to editing operations on the target component in the initial page template and display the component configuration page corresponding to the target component; The display module is further configured to display a configuration object associated with the target component in the component configuration page, respond to a data binding operation for the configuration object, and display a first form including a first field; the first field is used to bind to the configuration object; An add module is used to add the first form to the operation configuration form for the target component when the configuration permission of the first form is set to the operation configuration permission; The sending module is used to send both the page template and the operation configuration form to the operator; the page template refers to the initial page template after the target component is configured; the first form in the operation configuration form has a custom configuration function provided by the operation configuration permission; the operator is used to configure the first field in the operation configuration form through the custom configuration function to update the content of the configuration object in the page template that is bound to the first field.

18. A computer device, characterized in that, include: Processor, memory, and network interface; The processor is connected to the memory and the network interface, wherein the network interface is used to provide data communication functions, the memory is used to store computer programs, and the processor is used to invoke the computer programs so that the computer device executes the method according to any one of claims 1-16.

19. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program adapted to be loaded and executed by a processor to cause a computer device having the processor to perform the method of any one of claims 1-16.

20. A computer program product, characterized in that, The computer program product includes a computer program stored in a computer-readable storage medium, the computer program being adapted to be read and executed by a processor to cause a computer device having the processor to perform the method of any one of claims 1-16.

Images