Page building methods and related equipment

Abstract

This disclosure provides a method for building a page and related equipment. Specifically, the method for building a page includes: displaying a first interface for a target event in the page to be built; wherein the first interface matches a first data model, and the first interface includes a target object; in response to a first operation on a target area of ​​the target object, displaying at least one preset logical node identifier; and in response to a selection operation on any of the logical node identifiers, displaying a logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object in the target area. Using this method, users can edit the first data model through interaction with the first interface, achieving the technical effect of visually configuring logical nodes and logical relationships, and reducing the coding ability requirements for configuring logical actions.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to a method for building a webpage and related equipment. Background Technology

[0002] As cloud services expand from basic infrastructure to advanced business applications, they can be categorized into several service types, including Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). Application Platform as a Service (aPaaS) is a type of PaaS, a solution based on PaaS that supports the development, deployment, and operation of applications in the cloud, providing users with fundamental tools for software development, including data objects, access control, and user interfaces. However, when building web pages using aPaaS, the development of interactive logic is less convenient and may not fully meet user needs. Summary of the Invention

[0003] In view of this, the purpose of this disclosure is to provide a method for building a webpage and related equipment.

[0004] For the purposes described above, this disclosure provides a method for building a webpage, including:

[0005] Display a first interface for the target event in the page to be built; wherein the first interface matches the first data model and includes the target object;

[0006] In response to a first operation targeting the target area of ​​the target object, at least one preset logical node identifier is displayed;

[0007] In response to a selection operation for any of the logical node identifiers, the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object are displayed in the target area;

[0008] The logical nodes and logical relationships are rendered based on a second data model, which is obtained by editing the first data model based on the target object, the target region, and the selected logical node identifier.

[0009] Based on the same inventive concept, embodiments of this disclosure also provide a page building apparatus, including:

[0010] The interface display module is configured to display a first interface for a target event in the page to be built; wherein the first interface matches a first data model and the first interface includes a target object.

[0011] The logical node identification module is configured to: in response to a first operation on the target area of ​​the target object, display at least one preset logical node identification;

[0012] The logical relationship module is configured to: in response to a selection operation for any of the logical node identifiers, display in the target area the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object;

[0013] The logical nodes and logical relationships are rendered based on a second data model, which is obtained by editing the first data model based on the target object, the target region, and the selected logical node identifier.

[0014] Based on the same inventive concept, this disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that the processor executes the program to implement the construction method as described in any of the above.

[0015] Based on the same inventive concept, this disclosure also provides a non-transitory computer-readable storage medium that stores computer instructions, characterized in that the computer instructions are used to cause a computer to execute any of the above-described construction methods.

[0016] As can be seen from the above, the page construction method and related equipment provided in this disclosure, by displaying a first interface including the target object for the target component in the page to be constructed, allows the user to perform a first operation on the target area of ​​the target object, thereby displaying at least one preset logical node identifier; in response to the selection operation of any of the logical node identifiers, the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object can be displayed in the target area, wherein the logical node and the logical relationship are rendered based on a second data model, and the second data model is obtained by editing the first data model matching the first interface based on the target area and the selected logical node identifier. Using this construction method, the user can achieve diverse editing of the first data model through interaction with the first interface, such as merging parallel processes into serial processes, and multiple serial processes can also be combined into parallel processes, achieving the technical effect of visually configuring logical nodes and logical relationships, and reducing the requirements for the user's coding ability in configuring logical actions. Attached Figure Description

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

[0018] Figure 1A This diagram illustrates a page provided in an embodiment of the present disclosure;

[0019] Figure 1B This diagram illustrates a configuration panel structure for page editing logic actions provided by related technologies.

[0020] Figure 1C This diagram illustrates a configuration panel structure for another type of page-building editing logic action provided by related technologies.

[0021] Figure 2A This diagram illustrates a structural diagram of a page building architecture provided in an embodiment of the present disclosure;

[0022] Figure 2B This diagram illustrates the structure of a first data model for first interface matching provided in an embodiment of the present disclosure.

[0023] Figure 2C This diagram illustrates the structure of a first interface provided in an embodiment of the present disclosure.

[0024] Figure 2D This diagram illustrates a structural schematic of a target object and a target location provided in an embodiment of the present disclosure.

[0025] Figure 2E Showing based on Figure 2D The diagram illustrates the effect of adding nodes to the target object and target location;

[0026] Figure 2F This diagram illustrates a structural schematic of yet another target object and target location provided in an embodiment of the present disclosure;

[0027] Figure 2G Showing based on Figure 2F The diagram illustrates the effect of adding nodes to the target object and target location;

[0028] Figure 2H This diagram illustrates a structural schematic of another target object and target location provided in an embodiment of the present disclosure;

[0029] Figure 2I Showing based on Figure 2H The diagram illustrates the effect of adding nodes to the target object and target location;

[0030] Figure 2J This diagram illustrates a structural schematic of another target object and target location provided in an embodiment of the present disclosure;

[0031] Figure 2K Showing based on Figure 2J The diagram illustrates the effect of adding nodes to the target object and target location;

[0032] Figure 3A This diagram illustrates the structure of a right-click menu according to an embodiment of the present disclosure.

[0033] Figure 3B This diagram illustrates the structure of an attribute configuration interface provided in an embodiment of the present disclosure.

[0034] Figure 3C This diagram illustrates the structure of yet another attribute configuration interface provided in an embodiment of the present disclosure.

[0035] Figure 3D This diagram illustrates the logical structure of an event-triggered logical action provided in an embodiment of the present disclosure.

[0036] Figure 4 This diagram illustrates a source code export result provided by an embodiment of the present disclosure.

[0037] Figure 5 This diagram illustrates a flowchart of a page construction method provided in an embodiment of the present disclosure.

[0038] Figure 6 This diagram illustrates the structure of a page building apparatus provided in an embodiment of the present disclosure.

[0039] Figure 7 This diagram illustrates the structure of an electronic device provided in an embodiment of the present disclosure. Detailed Implementation

[0040] To make the objectives, technical solutions, and advantages of this disclosure clearer, the following detailed description is provided in conjunction with specific embodiments and the accompanying drawings.

[0041] It should be noted that, unless otherwise defined, the technical or scientific terms used in the embodiments of this disclosure should have the ordinary meaning understood by one of ordinary skill in the art to which this disclosure pertains. The terms "first," "second," and similar words used in the embodiments of this disclosure do not indicate any order, quantity, or importance, but are merely used to distinguish different components. Terms such as "comprising" or "including" mean that the element or object preceding the word encompasses the elements or objects listed following the word and their equivalents, without excluding other elements or objects. Terms such as "connected" or "linked" are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. Terms such as "upper," "lower," "left," and "right" are used only to indicate relative positional relationships; when the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0042] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0043] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0044] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0045] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0046] As cloud services expand from basic to business applications, pages can be built on platforms such as aPaaS platforms. Figure 1AThis diagram illustrates a page 100 according to an embodiment of the present disclosure. Page 100 includes a button component 101, which can execute interactive logic at certain times, such as opening a pop-up window after clicking the button component 101. It should be noted that in the embodiments of the present disclosure, such behavior as clicking the button component 101 is called an event, and the behavior triggered by clicking the button component 101 is called a logical action. That is, an event refers to an action performed on a component, such as clicking, submitting, or loading. It is understood that the executor of an event can be a user or a computer, and this disclosure does not specifically limit this. A logical action refers to the behavior triggered by an event.

[0047] In some complex functional scenarios, such as user login pages on the front end or data retrieval on data report pages, the logical actions triggered by events can be very complex, such as sending requests, verifying permissions, displaying error messages, setting data, and so on. Such complex processes often need to be implemented by developers using code, which requires a high level of professional skills, and the quality of the code produced by developers with different skill levels varies greatly.

[0048] Here, we will illustrate with examples of complex logical actions triggered by events in certain complex functional scenarios. For example:

[0049] On a data report page

[0050] Send a request to confirm access rights.

[0051] If retrieving requested data fails, a pop-up error message will appear.

[0052] When the requested data is successfully retrieved

[0053] • If you do not have permission, a pop-up error message will appear.

[0054] • Permission granted

[0055] Then send a request to retrieve data.

[0056] Simultaneously set the report loading status

[0057] • Once the data acquisition is complete, set it up on the report and display it.

[0058] Clearly, the logical action structure triggered by sending a request to confirm access permissions on the aforementioned data report page is complex, and it would be difficult for users lacking coding skills to set up such a complete logical action structure.

[0059] To reduce the reliance on coding skills during page building, some visual logic action editing methods are provided in related technologies.

[0060] Figure 1B This diagram illustrates a configuration panel structure for page editing logic actions provided by related technologies. For example... Figure 1B As shown, the configuration panel includes event option 102. Event option 102 allows adding events to the selected button component within the page to be built, such as adding a click event. The corresponding logical action needs to be implemented manually in the code area 103. This technical solution offers a high degree of freedom and theoretically can decouple complex logical actions. However, it only achieves partial visualization and cannot completely eliminate the need for manual coding, making it unsuitable for ordinary users.

[0061] In light of this, related technologies have improved the methods for editing logical actions. Figure 1C This diagram illustrates a configuration panel structure for another type of page-building editing logic action provided by related technologies. Figure 1C The function of configuring noodles and rice is demonstrated by clicking a button. Specifically, Figure 1C This displays the logical actions that can be performed by clicking the button, such as opening a link, displaying message 104, or setting a component value. When the user selects any logical action, such as message 104, the logical action can be configured in the configuration parameter area 105.

[0062] Figure 1C The configuration panel shown hides the code layer, making event configuration more visual and easier to understand. Configuring logical actions is achieved through simple operations. However, because the logical actions in the configuration panel are fixed, only simple steps can be implemented. Complex orchestration of logical actions is not possible, such as executing one logical action after another. In other words, Figure 1C The configuration panel can only configure single-step execution logic actions, and cannot implement multi-step execution logic actions.

[0063] To make the technical solutions of this disclosure clearer and easier to understand, the construction method provided by the embodiments of this disclosure will be described below with reference to the accompanying drawings.

[0064] Figure 2A This diagram illustrates the structure of a page building architecture 200 provided in an embodiment of the present disclosure. The building architecture 200 includes a component layer 201, a view interaction layer 202, a data model layer 203, and a code output layer 204.

[0065] In some embodiments, the component layer 201 includes various events for components (e.g., buttons, input boxes, etc.), such as click, submit, load, etc. It should be noted that components can be pre-configured in the page to be built, and each component can have different events. It should be understood that the page to be built refers to the page during the building process, which includes at least one component and at least one event of that component. The building architecture provided in this disclosure can orchestrate logical actions for different components already configured in the page to be built, as well as different events of the same component.

[0066] For example, users can select various components and different events of the same component in the page to be built. The events of the selected component become the starting point for logical orchestration, corresponding to event nodes in the view module 2021 of the view interaction layer 202, for example... Figure 2C Click events in [the context of the event].

[0067] In some embodiments, the data model layer 203 includes a data model 2031 and an editing model action 2023.

[0068] Optionally, the overall structure of Data Model 2031 resembles a two-dimensional array, comprising containers and nodes. Containers include serial containers and parallel containers. It should be noted that serial containers hold nodes with serial relationships, while parallel containers hold nodes with parallel relationships; that is, logical relationships between nodes are constructed through serial and parallel containers. In addition to the event nodes mentioned above, nodes can also be logical nodes, representing the logical actions inherent to the system or exposed by components within Data Model 2031. Each logical action corresponds to a logical node. It should be noted that if the logical action is a secondary confirmation, a conditional `if` statement, etc., the node corresponding to the logical action includes, in addition to the logical node, subordinate branch nodes (participating in...). Figure 3A (Logical node 3011 and branch node 3012 in the image). It should be noted that both logical nodes and branch nodes can be displayed in view module 2021.

[0069] For example, the system's built-in logical actions include page redirection, secondary confirmation, delayed execution, brief prompts, conditional if statements, API requests, and setting variable values.

[0070] For example, the logical actions exposed by a component may include opening and closing a pop-up, setting form data, clearing form data, validating the form, submitting the form, and various logical actions for other components.

[0071] Figure 2BThis diagram illustrates the structure of a first data model for first interface matching provided in an embodiment of the present disclosure. Figure 2B Each hexagon corresponds to a node. For example, the first node is an event node, and the other three nodes are logic nodes. Figure 2B The inner parallelogram represents a parallel container. Two logical nodes within the smaller parallelogram (e.g., delayed execution, variable modification) are in parallel and reside within the same parallel container. The outer rectangle represents a serial container. The four nodes within the serial container—an event node, two parallel logical nodes, and the last logical node (e.g., page jump)—are in series and reside together within a single serial container. Optionally, the first data model can be implemented using code.

[0072] Next, rendering the data model 2031 yields the first interface displayed in the view module 2021. This first interface is the logic editing interface, used to edit logic nodes. It allows for visual orchestration of logic and supports the free combination of serial and parallel logical actions. For example, parallel actions can be merged into serial actions, and multiple serial actions can be combined into parallel arrangements. In other words, the first interface allows for rich and flexible visual orchestration of logical actions, enabling the creation of complex and diverse logical structures. Furthermore, compared to individual triggering methods, the parallel-to-serial logical structure allows the execution of the same logic after triggering multiple actions simultaneously, significantly reducing execution time.

[0073] Figure 2C This diagram illustrates the structure of a first interface 2010 provided in an embodiment of the present disclosure. It should be noted that... Figure 2C The first interface in the middle is Figure 2B The data model is rendered from the data. Figure 2B Each node (represented in data form) is rendered as Figure 2C The nodes in the graph form. Figure 2B The logical relationships between nodes in Figure 2C The logical relationships are represented by connecting lines with arrows. Series or parallel logical relationships can be distinguished by the direction of the connecting lines or the shape of the lines. Of course, logical relationships can be represented in other forms, and this disclosure does not limit this.

[0074] In some embodiments, in addition to the view module 2021, the view interaction layer 202 also includes an interaction module 2022. The data model 2031 can be edited using the interaction module 2022. The editing actions 2032 include, but are not limited to, adding nodes, deleting nodes, moving nodes, and modifying node attributes.

[0075] Below, in conjunction with the appendix Figure 2D~Figure 3CThe document provides a detailed explanation of how to edit data model 2031 using the interactive module 2022.

[0076] First, when a user selects a component event to be edited on the page to be built, the corresponding component event's event node is displayed in the first interface 2010, such as... Figure 2D As shown. At this time, the first data model corresponding to the first interface 2010 includes click nodes and a series of containers.

[0077] Figure 2D This diagram illustrates a structural schematic of a target object and a target location provided in an embodiment of the present disclosure. Figure 2E Showing based on Figure 2D The diagram illustrates the effect of adding nodes to the target object and target location. Next, to ensure that the user's editing operations accurately reflect their intention to edit logical nodes sequentially or in parallel, target areas for sequential and parallel processing are pre-defined. These target areas can be in different directions (up, down, left, right). For an example, see [link to example]. Figure 2D ,exist Figure 2D The left-right arrangement of nodes indicates a sequential relationship between them. Figure 2D The vertical arrangement of nodes indicates a parallel relationship between them. Therefore, users can choose to add nodes to the left or right, or up or down, of a given node, depending on whether the arrangement is serial or parallel. Of course, the target area can also be different areas in the same direction; for example, the upper area on the right side might be serial, while the lower area might be parallel. This disclosure does not limit this.

[0078] Next, users can select the target object for editing logic actions by moving the mouse to a node on the first interface, for example, [the node will be selected]. Figure 2D The event node is selected as the target object 205, meaning the event node is used as the target for logical action editing. Since the target object 205 is an event node, the next logical node and the event node can only be sequentially linked. Therefore, you can select the right side as the target location by moving the mouse to the right of the node (indicated by the long arrow in the figure).

[0079] Next, the first interface 2010 will display the logical node selector 207. It should be noted that the logical node selector 207 includes at least one logical node identifier. Here, the logical node identifier is obtained from a pre-set logical action. In some embodiments, the logical actions are stored in the form of an array, and the logical node identifiers included in the logical node selector 207 change accordingly when the user adds or deletes the array corresponding to the logical actions.

[0080] In addition, the logical node selector 207 includes a logical search bar for searching the listed logical nodes. The user can then select the desired logical node. In response to the user's selection of a logical node, the selected logical node data is added to the first data model in the data model layer 203 to obtain a second data model. The first interface 2010, rendered based on the second data model, is shown below. Figure 2E As shown. Figure 2E The first interface 2010 includes the original target object 205, the newly added logical node 208, and the serial logical relationship 209 between the target object 205 and the logical node 208.

[0081] Optionally or additionally, exemplary embodiments of this disclosure also provide implementations in which anchor points are configured in various regions of the target object, and in response to a user's mouse moving to one side of a node, the first interface can display the anchor point of the corresponding region. For example, as shown... Figure 2D As shown, when the user moves the mouse to the right side of the node, the first interface 2010 displays anchor point 206 on the right. In response to the user's preset action on the anchor point (such as clicking), logical node selector 207 is displayed.

[0082] The target object can be a node (e.g. Figure 2D The event node shown can also include multiple logical nodes. The following combines... Figure 2F , Figure 2G Please provide a detailed explanation.

[0083] Figure 2F This diagram illustrates a structural schematic of yet another target object and target location provided in an embodiment of the present disclosure; Figure 2G Showing based on Figure 2F The diagram illustrates the effect of adding nodes to the target object and target location. (Example) Figure 2F As shown, if a user wants to add a serial logical node to two parallel logical nodes (corresponding to executing two logical actions in parallel and then performing a single logical action together), the user can select the two parallel logical nodes as target objects 205, then move the mouse to the right and use the right side as the target area. With the anchor point 206 displayed on the right side of the first interface, clicking the anchor point 206 will display the logical node selector. After the user completes the selection of logical nodes, the first data model is edited based on the target object, target position, and the selected logical node identifier to obtain the second data model. The rendering of the second data model can produce the following result: Figure 2G The first interface 2010 is shown. Specifically, in the first data model, data corresponding to the selected logical node identifier is added, and then this data and the data corresponding to the target object 205 are placed in the same serial container and placed after the data corresponding to the target object 205. Correspondingly, Figure 2GIn the process, the newly added logical node 208 (corresponding to the newly added logical node data) and the target object 205 are connected through a serial connection pad 209, that is, a serial node is added after the parallel node.

[0084] In addition to the above-described scheme of adding serial nodes, this disclosure also provides an example of adding parallel nodes.

[0085] Figure 2H This diagram illustrates a structural schematic of another target object and target location provided in an embodiment of the present disclosure; Figure 2I Showing based on Figure 2H The diagram illustrates the effect of adding nodes to the target object and target location. Specifically, Figure 2H The first interface 2010 shows the target object 205 and the target location (anchor point 206 in the figure). The target location is located below the target object and can be used to add logical nodes parallel to the target object 205. Here, the change in the data model is explained as follows: In the first data model, add data (array) corresponding to the logical node identifier, and place this data and the data corresponding to the target object 205 in the same parallel container to obtain the second data model. It should be understood that the data corresponding to the added logical node identifier can be preset, such as an array, or other forms of data, and this disclosure does not limit it.

[0086] It should be noted that if a parallel container does not exist in the first data model, it can be created when editing the first data model. Those skilled in the art can choose the method for creating the parallel container in the first data model as needed; no limitation is made here.

[0087] The first interface (2010) rendered based on the second data model is as follows. Figure 2I As shown, the new logical node 208 is connected to the target object via a serial logical relationship 209. When the target object 205 includes multiple serial nodes, this method allows for the addition of parallel nodes below a batch of serial nodes.

[0088] In addition to the various serial and parallel schemes described above, this disclosure also provides an implementation scheme that expands a portion of a serial node into a parallel one.

[0089] Figure 2J This diagram illustrates another target object and target location provided in an embodiment of the present disclosure. Figure 2K Showing based on Figure 2J The diagram illustrates the effect of adding nodes to the target object and target location. Figure 2JSelect one node from the serial nodes as the target object 205. When a new logical node is added below the target object 205, the corresponding part of the target object 205 can be expanded into parallel processing. The first interface after expansion is as follows. Figure 2K As shown.

[0090] As can be seen from the above embodiments, users only need to select the target object and target area as needed, so that the position of the new logical node can be determined based on the position of the target object. The connection method of the logical nodes (parallel or serial) can be determined according to the target area. This method enables flexible addition of new logical nodes with simple operations, greatly reducing the threshold for users to build pages and improving user satisfaction. The above embodiments describe the addition of nodes in the editing action 2032 in the data model layer 203. The following will combine... Figure 3A~Figure 3C This section introduces the other actions in Edit Action 2032.

[0091] During the editing of logical nodes, users may need to adjust some logical nodes. Therefore, an exemplary embodiment of this disclosure also provides a right-click menu for implementing functions such as deleting and moving logical nodes.

[0092] Figure 3A This diagram illustrates a right-click menu according to an embodiment of the present disclosure. Users can select a target object 301 using an input tool such as a mouse. When a user selects the target object 301 and performs a preset operation (e.g., right-clicking), a right-click menu 302 is displayed on the first interface in response to the preset operation. For example, the right-click menu 302 includes operations such as copying a node, pasting a node, cutting a node, and deleting a node. In response to the user selecting or pointing to an option in the right-click menu, a next-level menu 303 can be displayed. Here, the next-level menu 303 can be used to define the scope, location, etc., of the operation corresponding to the option.

[0093] For example, the next level menu 303 of the copy node option may include sub-options such as copy the current section before (and branches), copy node and subsequent nodes.

[0094] For example, the next level menu for the Paste Node option may include Left, Right, Bottom, Confirm, Cancel, etc.

[0095] Specifically, taking moving target object 301 as an example, the function of the right-click menu 302 is explained. When the user selects target object 301, the right-click menu 302 is displayed in response to the user's preset operation. The user selects "Cut Node" and then selects "Cut Current Node (and Branch)" through the next-level menu 303. At this point, the data of target object 301 in the first data model is cut. Next, the user can select a new target object, the right-click menu 302 is displayed again, and the user selects "Paste Node." Then, the user selects "Below" through the next-level menu 303. The cut data and the data of the new target object are placed in the same parallel container to obtain the second data model. A new first interface can be obtained by rendering based on the second data model.

[0096] In some alternative embodiments, keyboard shortcuts can also be used to implement functions such as copying nodes, cutting nodes, and deleting nodes, which will not be described in detail in this disclosure.

[0097] It should be noted that any operation performed by the user on the target object selected in the first interface can be responded to in the corresponding first data model to obtain the second data model, which can then be rendered to obtain a new first interface.

[0098] For logic editing, in addition to editing the overall logical structure (such as the number of logical nodes and logical relationships), it is also necessary to edit the parameters of the logical nodes.

[0099] Figure 3B This diagram illustrates the structure of an attribute configuration interface provided in an embodiment of the present disclosure. Figure 3C This diagram illustrates the structure of yet another attribute configuration interface provided in an embodiment of the present disclosure. Figure 3B On the left is the first interface 2010. In response to the user adding or selecting a logical node, the corresponding attribute configuration interface 3010 is displayed. The attribute configuration interface 3010 is used to configure the attribute information of the logical node. Here, the specific content of the attribute configuration interface 3010 varies depending on the logical node. The attribute configuration interface 3010 displayed may differ when the user selects different logical nodes.

[0100] In some cases, the attributes of logical nodes involve parameter configuration. To facilitate user configuration of these parameters, the attribute configuration interface 3010 includes a data link component 304. Users can click the data link component 304, and the attribute configuration interface 3010 will display at least one linkable object. This linkable object includes data from the page to be built 306 (see...). Figure 3C Optionally, the data in the page to be built can be data from the page such as variables, component exposed values, slot context, etc. Figure 3CAs shown, when the name Zhang San is entered as request parameter 1 in the page 306 to be built, the logical node can obtain the string based on the linkable object.

[0101] Users can select at least one linkable object. In response to the selection of any of the linkable objects, parameter configuration options for the linkable objects can be displayed in the attribute configuration interface 3010. Considering that some linkable objects have a large number of parameter configuration options and long paths, a parameter configuration function area 305 for the linkable objects can also be displayed outside the attribute configuration interface 3010 (e.g., ...). Figure 3C (As shown). Using the parameter configuration function area 305, users can configure the parameters of linkable objects in detail.

[0102] Therefore, this disclosure provides a technical effect where, based on a first interface, complex logical structures can be edited by selecting target objects and target areas. This achieves the effect of editing event logic actions under visual conditions, much like workflow orchestration. The logical flow is intuitive, the entire process is simple to operate, and easy to understand. It can complete most daily logic orchestration functions and offers a level of orchestration freedom approaching that of writing code. Furthermore, the data link component 304 can be used to construct relationships between logical nodes and data in the page to be built, making the parameter settings of logical nodes more flexible and meeting diverse user needs.

[0103] For example, using the logical node editing method provided in this disclosure embodiment, the logical actions triggered by sending a request to confirm whether there is access permission on this data report page, as listed above, can be easily edited, and the editing result is as follows: Figure 3D As shown.

[0104] In some embodiments, after completing the editing to obtain such Figure 3D Following the first interface shown, data from the first data model in data model layer 203 can be exported as code, corresponding to the code output layer of architecture 200. Optionally, code output may include serial wait, parallel Promise.all, code output for each node, or wrapper event functions, etc. Figure 4 This diagram illustrates a source code export result provided by an embodiment of the present disclosure. Figure 4 The code 400 corresponding to the first page displayed in the upper middle is located at the bottom.

[0105] It should be noted that the exported code functions can be passed to the properties of the corresponding components, and when an event is triggered, the orchestrated logic actions can be executed. Those skilled in the art can choose the specific method of exporting the code functions as needed; this disclosure will not elaborate further.

[0106] This disclosure provides a method for building a webpage. Figure 5This diagram illustrates a flowchart of a page construction method provided in an embodiment of this disclosure. Figure 5 As shown, the construction method specifically includes:

[0107] Step S502: Display the first interface 2010 for the target event in the page to be built (see...) Figure 2C~Figure 2I , Figure 3B and Figure 3C ); wherein, the first interface matches the first data model, and the first interface includes target objects 205 and 301; here, the page to be built includes component 101, an event refers to the behavior acting on the component, and the target event is a pre-determined event acting on the target component; the target object can be a node in the first interface, which may include one node (e.g., an event node or a logical node), or multiple nodes, and when multiple nodes are included, the logical relationship between the nodes is also included; when a node is selected, it can become a target object. Here, the first interface can be rendered by the first data model. Step S504: In response to the first operation on the target area of ​​the target object, display at least one preset logical node identifier (see Figure 2D (Logical node selector 207); Here, the first operation can be preset, such as moving the mouse to the target area, or pointing to the target area by voice, etc., and this disclosure does not limit it;

[0108] Step S506: In response to a selection operation for any of the logical node identifiers, display in the target area the logical node 208 corresponding to the selected logical node identifier and the logical relationship 209 between the logical node and the target object;

[0109] The logical node 208 and the logical relationship 209 are rendered based on the second data model, which is obtained by editing the first data model based on the target object 205, the target area, and the selected logical node identifier.

[0110] This approach enables the free arrangement of logical nodes in parallel or serial order without relying on code, making it simple and intuitive.

[0111] In some embodiments, the logical relationship is selected from serial logical relationships or parallel logical relationships, and the serial logical relationship or the parallel logical relationship is determined based on the target region.

[0112] In some embodiments, displaying the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object in the target area includes:

[0113] In response to determining that the target area and the first preset area correspond (e.g.)Figure 2D~2K (in the left and right directions), displaying the serial logical relationship between the logical node and the target object;

[0114] In response to determining the correspondence between the target area and the second preset area (e.g.) Figure 2D~2K (Up and down directions) to display the parallel logical relationship between the logical node and the target object.

[0115] By comparing the target area, the first preset area, and the second preset area, it is possible to quickly determine whether the logical relationship between the logical node that the user wants to add and the target object is parallel or serial.

[0116] In some embodiments, the data corresponding to the target object and the logical node connected by the serial logical relationship are located in the same serial container of the second data model; here, the serial container indicates that there is a serial relationship between the two data.

[0117] The target object does not contain event nodes, and the data corresponding to the target object and the logic node connected by the parallel logical relationship are located in the same parallel container of the second data model; here, the parallel container indicates that there is a parallel relationship between the two data. Here, the event node is the start of a logical action, so it does not have parallel logical actions.

[0118] In some embodiments, the target area is configured with anchor points 206;

[0119] The step of displaying at least one preset logical node identifier in response to a first operation targeting a target region of any of the target objects includes:

[0120] In response to a second operation targeting the target area, anchor point 206 is displayed in the target area; here, the second operation may be moving the mouse to the target area, or a voice instruction, etc.

[0121] In response to a third operation on the anchor point 206, at least one preset logical node identifier is displayed. Here, the third operation can be a click, such as a single click, double click, etc.

[0122] Using anchor point 206 helps increase the accuracy of target area selection.

[0123] In some embodiments, it also includes:

[0124] In response to a fourth operation on target object 301, a first preset menu is displayed; wherein, the first preset menu is used to edit target object 301. Here, the fourth operation can be a right-click, or of course, any other preset operation. Here, editing the target object refers to a positional operation on the entire target object, including but not limited to moving, deleting, copying, and pasting.

[0125] In some embodiments, it also includes:

[0126] In response to the selection of an editing action for the first preset menu, a second preset menu 303 is displayed; wherein, the second preset menu 303 is used to determine the location parameters of the editing action. Here, the location parameters include the area range (e.g., for the operation of copying a node, the corresponding area range is: current node, current node and subsequent nodes) and the orientation (e.g., for the operation of pasting a node, the corresponding orientation is up, down, left, right, etc.).

[0127] In some embodiments, it also includes:

[0128] In response to a selection operation on the logical node identifier (corresponding to a newly added logical node) or a selection operation on the logical node (corresponding to an existing logical node), a second interface 3010 is displayed; wherein, the second interface 3010 is used to configure the attribute information of the logical node or the logical node corresponding to the logical node identifier.

[0129] In this way, users can operate the second interface 3010 and configure the attribute information of logical nodes.

[0130] In some embodiments, the second interface 3010 includes a data link component 304;

[0131] The construction method also includes:

[0132] In response to a fifth operation on the data linking component 304, at least one linkable object is displayed; wherein the linkable object includes data from the page to be built. Here, the fifth operation may be a click.

[0133] In some embodiments, it also includes:

[0134] In response to a selection operation for any of the linkable objects, the parameter configuration function area 305 for the linkable object is displayed.

[0135] In some embodiments, the target object includes multiple logical nodes and their logical relationships, and the construction method further includes:

[0136] In response to the sixth operation for the target object, a code function corresponding to the target object is derived.

[0137] It should be noted that the method of this disclosure embodiment can be executed by a single device, such as a computer or server. The method of this embodiment can also be applied to a distributed scenario, where multiple devices cooperate to complete the task. In such a distributed scenario, one of these devices may execute only one or more steps of the method of this disclosure embodiment, and the multiple devices will interact with each other to complete the method described.

[0138] It should be noted that the above description describes some embodiments of this disclosure. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in a different order than that shown in the above embodiments and still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired result. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0139] Based on the same inventive concept, corresponding to any of the methods in the above embodiments, this disclosure also provides a page building apparatus. (Reference) Figure 6 The assembly device includes:

[0140] The interface display module 602 is configured to: display a first interface for a target event in the page to be built; wherein the first interface matches a first data model and the first interface includes a target object; the logical node identification module 604 is configured to: display at least one preset logical node identification in response to a first operation on a target area of ​​the target object.

[0141] The logical relationship module 606 is configured to: in response to a selection operation for any of the logical node identifiers, display in the target area the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object;

[0142] The logical nodes and logical relationships are rendered based on a second data model, which is obtained by editing the first data model based on the target object, the target region, and the selected logical node identifier.

[0143] In some embodiments, the logical relationship is selected from serial logical relationships or parallel logical relationships, and the serial logical relationship or the parallel logical relationship is determined based on the target region.

[0144] In some embodiments, the logical relationship module 606 is further configured to:

[0145] In response to determining that the target area corresponds to the first preset area, the serial logical relationship between the logical node and the target object is displayed;

[0146] In response to determining the correspondence between the target region and the second preset region, the parallel logical relationship between the logical node and the target object is displayed.

[0147] In some embodiments, the data corresponding to the target object and the logical node connected by the serial logical relationship are located in the same serial container of the second data model;

[0148] The target object does not contain event nodes, and the data corresponding to the target object and the logical node connected by the parallel logical relationship are located in the same parallel container of the second data model.

[0149] In some embodiments, the target area is configured with anchor points;

[0150] The logical node identification module 604 is also configured to: display anchor points in the target area in response to a second operation targeting the target area;

[0151] In response to a third operation on the anchor point, at least one preset logical node identifier is displayed.

[0152] In some embodiments, it also includes:

[0153] The menu module is configured to display a first preset menu in response to a fourth operation on the target object; wherein the first preset menu is used to edit the target object.

[0154] In some embodiments, the menu module is further configured to: display a second preset menu in response to a selection operation of an editing action on the first preset menu; wherein the second preset menu is used to determine the location parameters of the editing action.

[0155] In some embodiments, it also includes:

[0156] The attribute configuration module is configured to display a second interface in response to a selection operation on the logical node identifier or the logical node itself; wherein the second interface is used to configure the attribute information of the logical node or the logical node corresponding to the logical node identifier.

[0157] In some embodiments, the second interface includes a data link component; the attribute configuration module is further configured to:

[0158] In response to a fifth operation on the data linking component, at least one linkable object is displayed; wherein the linkable object includes data from the page to be built.

[0159] In some embodiments, the attribute configuration module is further configured as follows:

[0160] In response to a selection operation for any of the linkable objects, the parameter configuration area for the linkable object is displayed.

[0161] In some embodiments, the target object includes multiple logical nodes and their logical relationships, and also includes a code module configured to: in response to a sixth operation for the target object, derive a code function corresponding to the target object.

[0162] For ease of description, the above apparatus is described in terms of its functions, divided into various modules. Of course, in implementing this disclosure, the functions of each module can be implemented in one or more software and / or hardware.

[0163] The apparatus described above is used to implement the corresponding construction method in any of the foregoing embodiments and has the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0164] Based on the same inventive concept, corresponding to the methods of any of the above embodiments, this disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the construction method described in any of the above embodiments. Figure 7 This embodiment illustrates a more specific hardware structure of an electronic device. The device may include a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, memory 1020, input / output interface 1030, and communication interface 1040 are interconnected internally via the bus 1050.

[0165] The processor 1010 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0166] The memory 1020 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program code is stored in the memory 1020 and is called and executed by the processor 1010.

[0167] The input / output interface 1030 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components within the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touchscreens, microphones, various sensors, etc., while output devices may include displays, speakers, vibrators, indicator lights, etc.

[0168] The communication interface 1040 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0169] Bus 1050 includes a pathway for transmitting information between various components of the device, such as processor 1010, memory 1020, input / output interface 1030, and communication interface 1040.

[0170] It should be noted that although the above-described device only shows the processor 1010, memory 1020, input / output interface 1030, communication interface 1040, and bus 1050, in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the embodiments of this specification, and not necessarily all the components shown in the figures.

[0171] The electronic devices described above are used to implement the corresponding construction methods in any of the foregoing embodiments and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0172] Based on the same inventive concept, corresponding to the methods of any of the above embodiments, this disclosure also provides a non-transitory computer-readable storage medium that stores computer instructions for causing the computer to execute the construction method as described in any of the above embodiments. The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device.

[0173] The computer instructions stored in the storage medium of the above embodiments are used to cause the computer to execute the construction method as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here. Those skilled in the art should understand that the discussion of any of the above embodiments is merely exemplary and is not intended to imply that the scope of this disclosure (including the claims) is limited to these examples; within the framework of this disclosure, the technical features of the above embodiments or different embodiments can also be combined, the steps can be implemented in any order, and there are many other variations of different aspects of the embodiments of this disclosure as described above, which are not provided in detail for the sake of brevity.

[0174] Additionally, to simplify the description and discussion, and to avoid obscuring the embodiments of this disclosure, the provided drawings may or may not show well-known power / ground connections to integrated circuit (IC) chips and other components. Furthermore, the apparatus may be shown in block diagram form to avoid obscuring the embodiments of this disclosure, and this also takes into account the fact that the details of implementation of these block diagram apparatuses are highly dependent on the platform on which the embodiments of this disclosure will be implemented (i.e., these details should be fully understood by those skilled in the art). While specific details (e.g., circuits) have been set forth to describe exemplary embodiments of this disclosure, it will be apparent to those skilled in the art that the embodiments of this disclosure can be implemented without these specific details or with variations thereof. Therefore, these descriptions should be considered illustrative rather than restrictive.

[0175] This disclosure is intended to cover all such substitutions, modifications, and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method of building a page, characterized by, The method comprises: displaying a first interface for a target event in a page to be built; wherein the first interface matches a first data model, and the first interface comprises a target object; in response to a first operation on a target area of the target object, displaying at least one preset logical node identifier; in response to a selection operation on any of the logical node identifiers, displaying a logical node corresponding to the selected logical node identifier and a logical relationship between the logical node and the target object in the target area; the logical relationship is selected from a serial logical relationship or a parallel logical relationship; wherein the logical node and the logical relationship are rendered based on a second data model, the second data model is obtained by editing the first data model based on the target object, the target area, and the selected logical node identifier; the data corresponding to the target object and the logical node connected by the logical relationship are located in the same serial container or the same parallel container of the second data model.

2. The building method according to claim 1, characterized in that, The serial logical relationship or the parallel logical relationship is determined based on the target area.

3. The building method according to claim 2, characterized in that, The step of displaying the logical node corresponding to the selected logical node identifier and the logical relationship between the logical node and the target object in the target area comprises: in response to determining that the target area corresponds to a first preset area, displaying a serial logical relationship between the logical node and the target object; in response to determining that the target area corresponds to a second preset area, displaying a parallel logical relationship between the logical node and the target object.

4. The method of claim 2, wherein, The data corresponding to the target object and the logical node connected by the serial logical relationship are located in the same serial container of the second data model; The target object does not contain an event node, and the data corresponding to the target object and the logical node connected by the parallel logical relationship are located in the same parallel container of the second data model.

5. The method of claim 1, wherein, The target area is configured with an anchor point; The step of displaying at least one preset logical node identifier in response to the first operation on the target area of any of the target objects comprises: in response to a second operation on the target area, displaying an anchor point in the target area; in response to a third operation on the anchor point, displaying at least one preset logical node identifier.

6. The method of claim 1, wherein, Further comprising: in response to a fourth operation on the target object, displaying a first preset menu; wherein the first preset menu is used to edit the target object.

7. The building method according to claim 6, characterized in that, Further comprising: in response to a selection operation of an editing action on the first preset menu, displaying a second preset menu; wherein the second preset menu is used to determine a location parameter of the editing action.

8. The method of claim 1, wherein, Further comprising: in response to a selection operation on the logical node identifier or a selection operation on the logical node, displaying a second interface; wherein the second interface is used to configure attribute information of the logical node or a logical node corresponding to the logical node identifier.

9. The building method according to claim 8, characterized in that, The second interface comprises a data link component; The building method further comprises: in response to a fifth operation on the data link component, displaying at least one linkable object; wherein the linkable object comprises data in the page to be built.

10. The building method according to claim 9, characterized in that, Further comprising: In response to a selection operation on any of the linkable objects, a parameter configuration palette for the linkable object is displayed.

11. The method of claim 1, wherein, The target object includes a plurality of logical nodes and logical relationships therebetween, and the building method further includes: In response to a sixth operation on the target object, a code function corresponding to the target object is derived.

12. A page building apparatus, characterized by comprising: Comprise: The interface display module is configured to display a first interface for a target event in a page to be built; wherein the first interface matches a first data model, and the first interface includes a target object; The logical node identification module is configured to, in response to a first operation on a target area of the target object, display at least one preset logical node identification; The logical relationship module is configured to, in response to a selection operation on any of the logical node identifications, display a logical node corresponding to the selected logical node identification and a logical relationship between the logical node and the target object in the target area; the logical relationship is selected from a serial logical relationship or a parallel logical relationship; The logical node and the logical relationship are rendered based on a second data model, the second data model is obtained by editing the first data model based on the target object, the target area, and the selected logical node identification; and the data corresponding to the target object and the logical node connected by the logical relationship are located in the same container of the second data model.

13. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable by the processor, wherein, The processor implements the building method according to any one of claims 1-11 when executing the computer program.

14. A non-transitory computer-readable storage medium, comprising: The non-transitory computer-readable storage medium stores computer instructions for causing a computer to execute the method according to any one of claims 1-11.

Images