A page rendering method and device

Abstract

This invention discloses a page rendering method and apparatus, comprising: a front-end obtaining a first event component corresponding to an event triggering instruction based on an event triggering instruction of a page element; obtaining event task information of the first event component based on a reporting function called by the first event component; wherein the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the subtasks corresponding to the event component and their execution order; when it is determined that any subtask in the event task information needs to call an intermediate server, the subtask is sent to the intermediate server; the execution result of the subtask is obtained based on the intermediate server, and a second event component is modified according to the execution result; and rendering and display are performed based on the second event component. This reduces the execution code of the event component, simplifies the content of the event component, retains only the rendering function of the event component, thereby improving the reusability of the event component and reducing the difficulty of maintaining and managing the event component.

Description

Technical Field

[0001] This invention relates to the field of financial technology (Fintech), and more particularly to a page rendering method and apparatus. Background Technology

[0002] With the development of computer technology, more and more technologies (such as blockchain, cloud computing or big data) are being applied in the financial field. The traditional financial industry is gradually transforming into financial technology, and big data technology is no exception. However, due to the security and real-time requirements of the financial and payment industries, higher requirements are also placed on the page rendering technology of big data.

[0003] In existing technologies, the visual construction of front-end pages is generally achieved by the management console providing visual editing functions for the front-end pages. Specifically, the management console provides visual page components, and developers select the page components that need to be rendered on the front end (such as button components, input box components, etc.), thereby determining the JSON (JavaScript Object Notation) object array of the page elements to be rendered based on the front-end rendering framework (such as Vue, React, etc.).

[0004] The process of obtaining the page elements displayed on the front end typically involves the front end sending a request to the backend server, receiving a JSON object returned by the backend server, determining the page components based on the JSON object, executing the functions in the page components, and thus rendering the page components into page elements.

[0005] However, the problem with the existing technology is that the page components are isolated from each other and cannot communicate or interact. Moreover, all the execution code of the business logic is redundantly contained in the page components. In other words, the page components contain the execution code of multiple business logics to execute different business logics, thereby rendering page elements with different business logics on the front end. As a result, the code of the page components is complex, numerous, and difficult to maintain and manage. Summary of the Invention

[0006] This invention provides a page rendering method and apparatus to reduce the execution code of page components, simplify the content of page components, improve the reusability of page components, and reduce the difficulty of maintaining and managing page components.

[0007] In a first aspect, embodiments of the present invention provide a page rendering method, including:

[0008] The front-end obtains the first event component corresponding to the event triggering instruction based on the event triggering instruction of the page element;

[0009] The front end obtains the event task information of the first event component based on the reporting function called by the first event component; wherein, the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks corresponding to the event component and their execution order;

[0010] When the front end determines that any subtask in the event task information needs to call the intermediate server, it sends the subtask to the intermediate server.

[0011] The front end obtains the execution result of the subtask based on the intermediate server, and modifies the second event component according to the execution result;

[0012] The front end is rendered and displayed based on the second event component.

[0013] In the above technical solution, the event component includes event task information, which indicates the subtasks and execution order corresponding to the event component for rendering and display. Because for subtasks that need to call the intermediate server, the execution process of the subtask and the determination of the execution result of the subtask are completed by the intermediate server, it is equivalent to the execution code of the event task being set on the intermediate server. This reduces the execution code of the event component, thereby simplifying the content of the event component. Only the rendering function of the event component is retained, which improves the reusability of the event component and reduces the difficulty of maintenance and management of the event component.

[0014] Optionally, the event component can be obtained in the following ways:

[0015] Obtain the task object of the page element; wherein, the task object is configured with a correspondence between the event task name and the event task information;

[0016] Based on the task object, a control object with an event component is formed; the reporting function uses the event task information as a variable.

[0017] Add the control object to the component parameters of the page object;

[0018] An event component is constructed based on the component parameters and component styles of the page object.

[0019] In the above technical solution, the event component is constructed based on the control object, the component parameters of the page object, and the component style of the page object. The control object is used to represent event task information and does not have specific execution code. The component parameters and component style of the page object are used to render and display the event component. Therefore, the execution code of the task is not set in the event component, thereby reducing the execution code of the event component, simplifying the content of the event component, and retaining only the rendering function of the event component, thereby improving the reusability of the event component and reducing the difficulty of maintaining and managing the event component.

[0020] Optionally, when the front-end determines that any subtask in the event task information needs to call the intermediate server, it sends the subtask to the intermediate server, including:

[0021] If the front end determines that the call type of the i-th subtask is a request type, it sends the information of the i-th subtask and the execution result of the (i-1)-th subtask to the intermediate server; the (i-1)-th subtask is the previous subtask of the i-th subtask.

[0022] In the above technical solution, the need to send the subtask to the intermediate server is determined by the subtask's call type, which reduces interaction with the intermediate server and saves computing resources; by sending the execution result of the (i-1)th subtask to the intermediate server, the intermediate server can determine the execution result of the i-th subtask, ensuring the accuracy and real-time performance of the i-th subtask's execution result.

[0023] Optionally, the front-end obtains the execution result of the subtask based on the intermediate server, including:

[0024] When the front end determines that the subtask is a script request, it obtains the task instruction for the subtask from the intermediate server and determines the execution result of the subtask based on the task instruction.

[0025] Once the front-end determines that the subtask is an exec request, it obtains the execution result of the subtask from the intermediate server.

[0026] In the above technical solution, the front end directly obtains the task instructions or execution results of the subtasks according to different request types. If the front end obtains the task instructions of the subtasks, it can obtain the corresponding execution results (such as page pop-up prompts, returning to the top of the page, etc.) based on the event task information (such as the execution result of the (i-1)th subtask, the initial parameters of the i-th subtask, etc.), thereby reducing the amount of computation on the intermediate server and preventing the intermediate server from becoming congested.

[0027] Optionally, obtaining the task instruction for the subtask from the intermediate server and determining the execution result of the subtask based on the task instruction includes:

[0028] The front end receives the string corresponding to the task instruction of the subtask;

[0029] The front-end uses a preset function to convert the string into task instructions and store them;

[0030] The front end determines the execution result of the i-th subtask based on the task instruction, the execution result of the (i-1)-th subtask, and the initial input parameters of the i-th subtask.

[0031] In the above technical solution, the task instructions between the front end and the intermediate server are transmitted in the form of strings to improve data transmission efficiency. By storing the task instructions, when the front end executes a task after the i-th subtask, if the stored task instruction is hit, it does not need to access the intermediate server, thereby reducing the interaction with the intermediate server, reducing the computational load of the intermediate server, and preventing computational congestion on the intermediate server.

[0032] Optionally, before sending the subtask to the intermediate server, the method further includes:

[0033] The front end determines that the task instructions for the subtask are not stored.

[0034] In the above technical solution, if the front end determines that the task instructions of the subtasks are stored, it does not need to access the intermediate server, thereby reducing the interaction with the intermediate server, reducing the amount of computation on the intermediate server, and preventing the intermediate server from becoming congested.

[0035] Optionally, the method further includes:

[0036] If the front end determines that the invocation type of the i-th subtask is a trigger type, then it determines the invocation function based on the unique identifier of the event component to be invoked indicated by the i-th subtask.

[0037] The front end invokes the event component to be invoked based on the invocation function.

[0038] In the above technical solution, when the front end determines that the invocation type of the i-th subtask is a trigger type, it needs to call other event components, that is, the event components to be called, so as to realize the interaction between event components and improve the flexibility of calling event components.

[0039] Secondly, embodiments of the present invention provide a page rendering method, including:

[0040] The intermediate server receives event triggering instructions from the front end based on page elements and sends subtasks of the event components; the subtasks are the subtasks in the event task information that need to call the intermediate server; the event task information is obtained based on the reporting function called by the event component; the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the subtasks corresponding to the event component and their execution order;

[0041] The intermediate server feeds back the task instructions of the subtask or the execution result of the subtask to the front end.

[0042] In the above technical solution, the intermediate server executes the business logic of the subtask and determines the execution result of the subtask. This is equivalent to setting the execution code of the event task on the intermediate server, thereby reducing the execution code of the event component, simplifying the content of the event component, retaining only the rendering function of the event component, thereby improving the reusability of the event component and reducing the difficulty of maintaining and managing the event component.

[0043] Optionally, the intermediate server stores the task instructions for each subtask;

[0044] The intermediate server feeds back the task instructions or execution results of the subtask to the front end, including:

[0045] If the intermediate server determines that the subtask is a script request, it converts the task instruction of the subtask into a string and sends the string to the front end.

[0046] If the intermediate server determines that the subtask is an exec request, it calls the backend server according to the task instruction of the subtask, obtains the execution result of the subtask, and returns the execution result of the subtask to the frontend; the backend server stores the execution results of the task instructions of each exec request.

[0047] In the above technical solution, the intermediate server feeds back the task instructions or execution results of the subtasks according to different request types. For the task instructions of the subtasks, the front end obtains the corresponding execution results (such as page pop-up prompts, returning to the top of the page, etc.) based on the task instructions of the subtasks and event task information (such as the execution result of the (i-1)th subtask, the initial parameters of the i-th subtask, etc.), thereby reducing the amount of computation of the intermediate server and preventing the intermediate server from being congested.

[0048] Thirdly, embodiments of the present invention provide a page rendering apparatus, comprising:

[0049] The acquisition module is used to acquire the first event component corresponding to the event triggering instruction based on the event triggering instruction of the page element;

[0050] The processing module is used to obtain the event task information of the first event component based on the reporting function called by the first event component; wherein, the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks corresponding to the event component and their execution order;

[0051] When it is determined that any subtask in the event task information needs to call the intermediate server, the subtask is sent to the intermediate server;

[0052] The execution result of the subtask is obtained based on the intermediate server, and the second event component is modified according to the execution result;

[0053] The rendering and display are based on the second event component.

[0054] Optionally, the event component can be obtained in the following ways:

[0055] The processing module controls the acquisition module to acquire the task object of the page element; wherein, the task object is configured with the correspondence between the event task name and the event task information;

[0056] The processing module forms a control object with a reporting function having an event component based on the task object; the reporting function uses the event task information as a variable;

[0057] Add the control object to the component parameters of the page object;

[0058] An event component is constructed based on the component parameters and component styles of the page object.

[0059] Optionally, the processing module is specifically used for:

[0060] If the invocation type of the i-th subtask is determined to be a request type, then the information of the i-th subtask and the execution result of the (i-1)-th subtask are sent to the intermediate server; the (i-1)-th subtask is the previous subtask of the i-th subtask.

[0061] Optionally, the processing module is specifically used for:

[0062] If the subtask is determined to be a script request, the task instruction for the subtask is obtained from the intermediate server, and the execution result of the subtask is determined based on the task instruction.

[0063] Once the subtask is determined to be an exec request, the execution result of the subtask is obtained from the intermediate server.

[0064] Optionally, the processing module is specifically used for:

[0065] Receive the string corresponding to the task instruction of the subtask;

[0066] The string is converted into task instructions and stored using a preset function;

[0067] The execution result of the i-th subtask is determined based on the task instruction, the execution result of the (i-1)-th subtask, and the initial input parameters of the i-th subtask.

[0068] Optionally, the processing module is further configured to:

[0069] Before sending the subtask to the intermediate server, determine if the task instruction for the subtask is not stored.

[0070] Optionally, the processing module is further configured to:

[0071] If the invocation type of the i-th subtask is determined to be a trigger type, then the invocation function is determined based on the unique identifier of the event component to be invoked indicated by the i-th subtask;

[0072] Based on the function call, the event component to be called is invoked.

[0073] Fourthly, embodiments of the present invention provide a page rendering apparatus, comprising:

[0074] The receiving unit is used to receive the subtasks of the event component sent by the front end based on the event triggering instruction of the page element; the subtasks are the subtasks in the event task information that need to call the intermediate server; the event task information is obtained based on the reporting function called by the event component; the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the subtasks corresponding to the event component and their execution order.

[0075] The processing unit feeds back the task instructions of the subtask or the execution result of the subtask to the front end.

[0076] Optionally, the processing unit is specifically used for:

[0077] If the subtask is determined to be a script request, then the task instruction of the subtask is converted into a string and the string is sent to the front end;

[0078] If the subtask is determined to be an exec request, the background server is invoked according to the task instruction of the subtask to obtain the execution result of the subtask, and the execution result of the subtask is returned to the front end; the background server stores the execution results of the task instructions of each exec request.

[0079] Fifthly, embodiments of the present invention also provide a computer device, comprising:

[0080] Memory, used to store program instructions;

[0081] The processor is used to call the program instructions stored in the memory and execute the above page rendering method according to the obtained program.

[0082] Sixthly, embodiments of the present invention also provide a computer-readable storage medium storing computer-executable instructions for causing a computer to perform the above-described page rendering method. Attached Figure Description

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

[0084] Figure 1 This is a schematic diagram illustrating the determination of DOM elements according to an embodiment of the present invention;

[0085] Figure 2 A schematic diagram illustrating the execution of business logic provided in an embodiment of the present invention;

[0086] Figure 3 A schematic diagram of a system architecture provided for an embodiment of the present invention;

[0087] Figure 4 A flowchart illustrating a page rendering method provided in an embodiment of the present invention;

[0088] Figure 5 A schematic diagram of a task object provided in an embodiment of the present invention;

[0089] Figure 6 A schematic diagram of an event component provided in an embodiment of the present invention;

[0090] Figure 7 This is a flowchart illustrating the process of calling a reporting function, provided in an embodiment of the present invention.

[0091] Figure 8 A schematic diagram illustrating the determination of an execution result provided in an embodiment of the present invention;

[0092] Figure 9 A schematic diagram illustrating the determination of an execution result provided in an embodiment of the present invention;

[0093] Figure 10 This is a schematic diagram illustrating the invocation of an event component according to an embodiment of the present invention;

[0094] Figure 11 A flowchart illustrating a page rendering method provided in an embodiment of the present invention;

[0095] Figure 12 A page rendering method provided in an embodiment of the present invention;

[0096] Figure 13 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of the present invention;

[0097] Figure 14 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of the present invention. Detailed Implementation

[0098] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this invention, and not all of them. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0099] In existing technologies, the page elements displayed on the page (such as buttons, input boxes, etc.) are implemented by the developers through the functions provided by the management console. For example, the management console provides page components for visually editing marketing campaign pages. After submission, the campaign page displayed on the client will be consistent with the configuration of the management console.

[0100] Among them, a page component is a modular code file that defines a framework and can be rendered into elements. It can be used by the execution functions of mainstream front-end frameworks such as Vue or React to render DOM (Document Object Model) elements.

[0101] Page components are abstracted using JSON objects, which are configured visually on the management console (e.g., through drag-and-drop, form modification). These JSON objects contain three main properties that map to the components: the `tag` property, used to identify the page component; the `style` property, used to represent the style of the page component when rendered on the front end (e.g., square, circle, etc.); and the `props` property, used to provide logical execution parameters during page component rendering (e.g., title text in pop-up windows, page redirection, etc.).

[0102] Taking the Vue framework as an example, the process of rendering page components on the front end includes the following steps;

[0103] S1. Iterate through each JSON object and parse the parameters of the tag, style, and props attributes of each JSON object.

[0104] S2. The front-end uses its stored collection of "tag attribute parameters and page component mappings" to match the page component on the front-end through the tag attribute parameters of the JSON object. The page component contains the execution code of the business logic. The parameters of the style attribute and props attribute are passed to the page component to obtain the DOM element.

[0105] S3. Display page elements based on DOM elements.

[0106] Furthermore, Figure 1 An exemplary diagram illustrating the determination of DOM elements is shown, such as... Figure 1 As shown, by passing the parameters of the style and props attributes to the page component, the "button" element is obtained, and the "button" is rendered and displayed on the front end.

[0107] After the front-end renders and displays page components, the user initiates a task event by triggering the corresponding page element. This task event is then mapped to the executable code of the page component, thereby determining the execution result. Specifically, Figure 2 A schematic diagram illustrating the execution of business logic is shown as an example of an embodiment of the present invention, such as... Figure 2 As shown, the task event triggering code function defines a method to request the intermediate server service, and requests the execution result of the intermediate server service. After obtaining the execution result, it updates the page component or triggers the mechanism defined inside other page components, and finally updates the front-end page elements.

[0108] However, the problems with the aforementioned existing technologies are as follows:

[0109] First, the page components that are being rendered are isolated from each other, and different page components cannot interact with each other's methods. In other words, it is not possible to call the method of page component A2 from the execution method of page component A1.

[0110] Secondly, the business logic execution code for the event tasks of the page component is integrated within the page component. In order to meet the implementation requirements of a page component in different business scenarios, it is necessary to write all the different business logic execution code into the page component. For example, the page component corresponds to the "button" page element. For the B1 activity, the business logic of the "button" is to jump, and for the B2 activity, the business logic of the "button" is to draw a prize. Therefore, both types of business logic need to be written into the page component. As the business logic increases, the business logic execution code in the page component will also increase. Over time, this leads to a lot of complex code in the page component, which is difficult to maintain and reduces performance.

[0111] Third, due to the aforementioned technical issues, since page components contain execution code for multiple business logics, the same page component may be applied to front-end pages of different activities. If the business logic of the page component is adjusted, the impact and compatibility with the front-end pages using the page component must be considered, resulting in high difficulty in maintaining the front-end pages.

[0112] Therefore, a page rendering method is needed that eliminates the execution code of business logic in page components, simplifies the content of page components, improves the reusability of page components, and reduces the difficulty of maintaining and managing page components.

[0113] Figure 3 An exemplary system architecture applicable to an embodiment of the present invention is shown, which includes a front-end server 310, a data center 320, a control layer 330, a middle server 340, and a back-end server 350.

[0114] Among them, the front-end server 310 is used to render and display the event component, that is, to display the page element corresponding to the event component on the front end so that the user can click to use it and trigger the event triggering command. The front end can be a page of a mobile terminal, such as the page of a mobile phone or laptop.

[0115] Data center 320 is used to provide attribute parameters for event components, such as tag, style, props, and events attributes.

[0116] The control layer 330 is used to intercept the style and props property parameters of the page object corresponding to the page element, and then form a control object with an event component based on the task object. The control object is added to the component parameters of the page object. Based on the component parameters (props parameter) and the component style (style parameter) of the page object, the event component is constructed.

[0117] The intermediate server 340 is used to determine the task instruction of the subtask based on the task name of the subtask, and send the task instruction to the control layer 330 or request the backend server 350 according to the request type and task instruction of the subtask.

[0118] The background server 350 is used to determine the execution result based on the task instructions of the subtask and return it to the intermediate server 340.

[0119] Among them, the front-end server 310, the data center 320 and the control layer 330 belong to the front end, while the middle server 340 and the back-end server 350 belong to the back end.

[0120] In this embodiment of the invention, the attribute parameters of the event component stored in the data center 320 and the parameters of the page elements rendered and displayed by the front end 310 are bidirectionally data bound. Here, bidirectional data binding means binding the data of the parameters to the page elements. Changing the data automatically triggers the re-rendering of the page elements, and the event call of the page elements can also trigger the modification of the parameter data. For example, if the parameter is used to represent the title text, and the parameter data "yes" is changed to "no", then the text displayed on the page element will be re-rendered from "yes" to "no". Conversely, if the text displayed on the page element is changed from "yes" to "no", then the corresponding parameter data will be changed from "yes" to "no".

[0121] By establishing two-way data binding between the data center 320 and page elements, the code of the event component becomes dynamic after development. This allows modification of the underlying logic code of the event component based on page elements, thereby improving the flexibility of the event component.

[0122] It should be noted that the above Figure 3 The structure shown is merely an example, and the embodiments of the present invention are not limited thereto.

[0123] Based on the above description Figure 4 An exemplary flowchart of a page rendering method provided by an embodiment of the present invention is shown, which can be executed by a page rendering device.

[0124] like Figure 4 As shown, the process specifically includes:

[0125] Step 410: The front end obtains the first event component corresponding to the event triggering instruction based on the event triggering instruction of the page element.

[0126] In this embodiment of the invention, the event triggering instruction includes a unique identifier of the event component, such as the id of the event component, which corresponds to the first event component.

[0127] Step 420: The front end obtains the event task information of the first event component based on the reporting function called by the first event component.

[0128] In this embodiment of the invention, the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks corresponding to the event component and their execution order.

[0129] Step 430: When the front end determines that any subtask in the event task information needs to call the intermediate server, it sends the subtask to the intermediate server.

[0130] In this embodiment of the invention, the subtask includes a call type, and the subtask is determined whether it needs to call an intermediate server based on the call type.

[0131] Step 440: The front end obtains the execution result of the subtask based on the intermediate server, and modifies the second event component according to the execution result.

[0132] In this embodiment of the invention, after the front end sends the subtask to the intermediate server, the intermediate server determines the task instruction of the subtask and determines the execution result of the subtask according to the task instruction.

[0133] Step 450: The front end renders and displays based on the second event component.

[0134] In step 410, the event component includes a unique identifier. In the prior art, the unique identifier of the page component is generated by an intermediate server. In this embodiment of the invention, the unique identifier of the event component is generated by the front end, such as a 32-bit unique identifier UUID. This allows the front end to establish an association between the various event components. In other words, the function can be called to point to other event components, thus enabling the front end to call any event component.

[0135] In step 420, the event component is established through a constructed reporting function. Specifically, the task object of the page element is obtained; wherein, the task object is configured with a correspondence between event task names and event task information; based on the task object, a control object with an event component reporting function is formed; the reporting function uses the event task information as a variable; the control object is added to the component parameters of the page object; based on the component parameters and component styles of the page object, the event component is constructed.

[0136] Among them, the task object is the field of events. Figure 5 A schematic diagram of a task object is shown as an example of an embodiment of the present invention, such as... Figure 5 As shown, events is a key-value mapping used to represent the correspondence between event task names and event task information; where the key is the event task name and the value is the event task information.

[0137] The control object is based on the task object, and the event task information is used as a variable to generate the reporting function. The control object is determined based on the correspondence between the reporting function, the event task name and the event task information. The event component is formed based on the component parameters (props attribute parameters) of the page object after the control object is added and the component style (style attribute parameters) of the page object.

[0138] Figure 6 An exemplary schematic diagram of an event component is shown, such as... Figure 6As shown, by creating controllers (control objects), merging controllers and props, and combining them with styles to generate event components, the reporting function encapsulates the methods for calling the controller layer. After the user triggers the event trigger command on the front-end server, the front-end server calls the reporting function to report the event task information to the controller layer.

[0139] In one feasible approach, the event component is pre-configured in the front end, such as... Figure 6 As shown, the JSON object of the page element (including parameters of the tag attribute, style attribute, props attribute, and events attribute) is mapped to the event component stored on the front end.

[0140] In another feasible approach, after the front end receives the event triggering instruction from the page element, it determines the event component in real time based on the task object of the page element.

[0141] To better illustrate the above technical solution, Figure 7 A flowchart illustrating a call to a reporting function is shown as an example of the present invention. Figure 7 The process shown includes:

[0142] Step 710, trigger the event trigger command;

[0143] When a user clicks a "button" in the front end, the "button" event trigger instruction is activated; the trigger instruction includes the "button" event component ID.

[0144] Step 720: Call the reporting function.

[0145] The front-end determines the corresponding "button" event component based on the "button" event component ID and executes the "button" event component's reporting function.

[0146] Step 730: Upload the event task information to the control layer.

[0147] The "Button" event component includes "Button" event task information (such as determining the number of draws, drawing a prize, determining the draw result, etc.), and uploads the "Button" event task information to the control layer.

[0148] Furthermore, the event task information is generated from multiple subtask information in an array format; the array format is used to represent the execution order of the multiple subtasks; for example, actions (event task array) includes action (subtask) 1, action 2, and action 3.

[0149] For any subtask, the subtask information includes code (task name), type (call type), and initialParam (initial input parameters); among which, the call type includes dispatch (request type) and call (trigger type); the trigger type includes the unique identifier of the event component to be called.

[0150] In step 430, the front-end control layer executes the subtasks sequentially according to the array order. For any subtask, the call type of the subtask is first determined, and then it is determined whether the subtask information and param (the execution result of the previous subtask) need to be sent to the intermediate server.

[0151] For example, if the front end determines that the call type of the i-th subtask is a request type, it sends the information of the i-th subtask and the execution result of the (i-1)-th subtask to the intermediate server; the (i-1)-th subtask is the subtask preceding the i-th subtask.

[0152] Furthermore, the request type includes a script request or an exec request; when the front end determines that the subtask is a script request, it obtains the task instruction for the subtask from the intermediate server and determines the execution result of the subtask based on the task instruction; when the front end determines that the subtask is an exec request, it obtains the execution result of the subtask from the intermediate server.

[0153] in, <script>标签用于定义客户端脚本，比如JavaScript。script元素既可包含脚本语句，也可以通过"src"属性指向外部脚本文件，在此不做具体限定。

[0154] 在本发明实施例中，若子任务为script请求，则将子任务的任务信息发送至中间服务器，中间服务器会根据任务信息中的任务名，确定出子任务的任务指令，并将子任务的任务指令装换成字符串形式，并将该字符串返回至控制层。

[0155] 前端的控制层在接收到字符串后，需要将字符串对应的装换成任务指令，以此得到子任务的任务指令；具体的，前端接收所述子任务的任务指令对应的字符串；使用预设函数，将所述字符串转换为任务指令并存储；根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。其中，预设函数可以为eval函数等，在此不做具体限定。

[0156] 在本发明实施例中，为了减少前端与中间服务器之间的交互，在第i子任务发送至中间服务器之前，前端会根据第i子任务的任务名确定自身是否存储有第i子任务的任务指令。若存储有第i子任务的任务指令，则直接执行第i子任务的任务指令，若没有，则将第i子任务的任务信息发送至中间服务器，请求第i子任务的任务指令。

[0157] 图8为本发明实施例示例性示出的一种确定执行结果的示意图，如图8所示，步骤包括：

[0158] S810、针对script请求的子任务的消费，控制层根据子任务的任务名确定自身是否存有子任务对应的任务指令，若控制层自身存有子任务对应的任务指令，则直接执行子任务的任务指令，确定子任务的执行结果；

[0159] S820、若控制层自身未存有子任务对应的任务指令，则将子任务信息发送至中间服务器；由中间服务器通过校验后台服务器和自身登录状态，确定自身是否与后台服务器同步登录，以保证子任务的实时性；若否，则抛出异常。

[0160] S830、中间服务器确定自身与后台服务器同步登录，则进一步判断自身是否存在子任务的任务名对应的任务指令，如存在，则通过eval函数将子任务的任务指令转换为字符串，并将字符串发送至前端的控制层，否则抛出异常。

[0161] S840、前端的控制层在得到字符串后，通过eval函数将字符串转换为任务指令，并根据该任务指令、该子任务的前一子任务的执行结果和该子任务的初始输入参数确定第i子任务的执行结果(如修改数据中心组件JSON结果、目标页面的跳转、页面弹窗提示、回到页面顶部等)。

[0162] 子任务为exec请求时，由中间服务器确定子任务的执行结果，具体的，中间服务器在确定子任务的任务指令之后，执行任务指令，从后台确定子任务的执行结果，并将执行结果返回至前端，且该子任务的执行结果作为后一子任务的param。

[0163] 图9为本发明实施例示例性示出的一种确定执行结果的示意图，如图9所示，步骤包括：

[0164] S910、针对exec请求的子任务的消费，控制层将子任务信息发送至中间服务器；由中间服务器通过校验后台服务器和自身登录状态，确定自身是否与后台服务器同步登录，以保证子任务的实时性；若否，则抛出异常。

[0165] S920、中间服务器确定自身与后台服务器同步登录，则进一步判断自身是否存在子任务的任务名对应的任务指令，如存在，则在后台服务器中执行子任务的任务指令得到执行结果，并将执行结果发送至前端的控制层；否则抛出异常。

[0166] 总结来说，本发明实施例中，针对script请求的子任务，中间服务器不执行子任务的任务指令，将任务指令转译成字符串返回至前端，再由前端确定执行结果；例如，前端得到字符串对应的任务指令之后，运用Vuex的能力，修改数据中心的组件JSON数据，触发Vue的双向数据绑定重新渲染页面元素，即更新前端显示的页面元素。

[0167] 针对exec请求的子任务，由中间服务器执行任务指令，确定执行结果；例如，中间服务器请求后台服务器，执行需要与中间服务器交互的任务指令，如获取、新增删除数据的操作。

[0168] 示例性的，前端确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；基于所述调用函数，调用所述待调用事件组件。

[0169] 具体的，控制层预设有事件派发器；事件派发器包括多个调用函数与各调用函数与待调用事件组件之间的映射关系；事件派发器用于根据触发指令确定调用函数；根据调用函数与待调用事件组件之间的映射关系调用待调用事件组件；其中，事件派发器是一个发布订阅模型，内部可以创建多个仓库，可以把任意调用函数的指针插入对应的仓库，然后通过内部的方法在仓库中命中调用函数并执行。

[0170] 进一步地，事件派发器将vue组件methods(传递函数)中的所有公有方法(前缀带"_”的为私有方法，其余为公有方法)添加装饰器。通过"待调用事件组件id_公有方法名”的拼接形式入对应的仓库。

[0171] 举例来说，前端在确定第i子任务的调用类型为触发类型时，确定调用指令"target(待调用事件组件id)_code(任务名)”，进而通过装饰器可以确定"公有方法名”，再根据"公有方法名”可以确定第i子任务对应的调用待调用事件组件的调用函数。

[0172] 前端在得到调用函数之后，根据调用函数、第i-1子任务的执行结果和第i子任务的初始输入参数触发待调用事件组件的事件任务。

[0173] 图10为本发明实施例示例性示出的一种调用待调用事件组件的示意图，如图10所示，针对任一触发类型的子任务，控制层确定是否通过待调用事件组件id确定出第i子任务的调用函数，若是，则根据调用函数控制待调用事件组件的事件任务。否则抛出异常。

[0174] 把发明实施例中，通过业务逻辑的执行代码由控制层和中间服务器承载，减少了事件组件内的代码，进而提升了事件组件的复用性，降低了事件组件的维护与管理难度。

[0175] 且现有技术方案是将业务逻辑写死在页面组件中，所以不具有编排的能力，本发明实施例想实现某种业务流程，只需使用表单配置化的对actions(任务数组)进行编辑，进而提高了业务逻辑的可编排性。

[0176] 还通过将业务逻辑拆分成各子任务，通过code(任务名)命中请求子任务，通过判断子任务的调用类型和任务名，可以确定新的业务逻辑，从而在不同的活动类型中实现不同的业务需求，增加了业务逻辑的灵活性。

[0177] 为了更好的解释上述技术方案，图11示例性的示出了一种页面渲染方法的流程示意图，如图10所示，具体流程包括：

[0178] 步骤1110，中间服务器接收前端基于页面元素的事件触发指令，发送的事件组件的子任务。

[0179] 本发明实施例中，所述子任务为事件任务信息中需调用中间服务器的子任务；事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序。

[0180] 步骤1120，所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

[0181] 本发明实施例中，所述中间服务器存储有各子任务的任务指令；中间服务器通过子任务的任务名来确定子任务的任务指令。

[0182] 进一步地，中间服务器确定子任务为script请求，则将子任务的任务指令转换为字符串，将所述字符串发送至前端；

[0183] 中间服务器确定子任务为exec请求，则根据子任务的任务指令调用后台服务器，得到子任务的执行结果，并将子任务的执行结果返回至前端。

[0184] 图12为本发明实施例示例性示出的一种页面渲染方法，如图12所示，包括以下步骤：

[0185] S1210、用户在前端服务器(如客户端)点击"按钮”，触发"按钮”事件触发指令；根据"按钮”事件触发指令中包括的事件组件唯一标识，确定"按钮”事件组件；

[0186] S1220、前端通过控制层执行"按钮”事件组件的上报函数，将"按钮”事件组件的事件任务信息发送至控制层。

[0187] S1230、控制层解析事件任务，按照数组顺序消费事件任务中的各子任务。

[0188] S1240、控制层若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至中间服务器。

[0189] S1250、控制层若确定第i子任务的调用类型为触发类型，则根据第i子任务指示的待调用事件组件的唯一标识，确定调用指令，再根据调用指令在预设的事件派发器中确定调用待调用事件组件的调用函数；基于调用函数，控制待调用事件组件的事件任务。

[0190] S1260、针对script请求的子任务的消费，根据子任务的任务名确定子任务的任务指令，并将任务指令发送至控制层，由控制层执行任务指令，并对数据中心中的JSON数据进行修改，得到修改后的"按钮”事件组件，然后数据中心将修改后的"按钮”事件组件发送至前端服务器，因为双向数据绑定，前端服务器重新渲染修改后的"按钮”事件组件。

[0191] S1270、针对exec请求的子任务的消费，中间服务器在后台服务器中执行任务指令，从后台服务器确定子任务的执行结果，并将执行结果返回至控制层，且该子任务的执行结果作为后一子任务的param，并执行下一子任务，直至所有事件任务对应的数组中所有的子任务处理完成。

[0192] 基于相同的技术构思，图13示例性的示出了本发明实施例提供的一种页面渲染装置的结构示意图，该装置可以执行页面渲染方法的流程。

[0193] 如图13所示，该装置具体包括：

[0194] 获取模块1310，用于基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

[0195] 处理模块1320，用于基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

[0196] 在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

[0197] 基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

[0198] 基于所述第二事件组件进行渲染显示。

[0199] 可选的，事件组件通过如下方式获得，包括：

[0200] 所述处理模块1320控制获取模块1310获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；

[0201] 所述处理模块1320基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；

[0202] 将所述控制对象加入页面对象的组件参数；

[0203] 基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

[0204] 可选的，所述处理模块1320具体用于：

[0205] 若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至所述中间服务器；所述第i-1子任务为所述第i子任务的前一个子任务。

[0206] 可选的，所述处理模块1320具体用于：

[0207] 在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；

[0208] 在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

[0209] 可选的，所述处理模块1320具体用于：

[0210] 接收所述子任务的任务指令对应的字符串；

[0211] 使用预设函数，将所述字符串转换为任务指令并存储；

[0212] 根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。

[0213] 可选的，所述处理模块1320还用于：

[0214] 将所述子任务发送至中间服务器之前，确定未存储所述子任务的任务指令。

[0215] 可选的，所述处理模块1320还用于：

[0216] 确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；

[0217] 基于所述调用函数，调用所述待调用事件组件。

[0218] 图14示例性的示出了本发明实施例提供的一种页面渲染装置的结构示意图，该装置可以执行页面渲染方法的流程。

[0219] 如图14所示，该装置具体包括：

[0220] 接收单元1410，用于接收前端基于页面元素的事件触发指令，发送的事件组件的子任务；所述子任务为事件任务信息中需调用中间服务器的子任务；所述事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

[0221] 处理单元1420，向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

[0222] 所述处理单元1420具体用于：

[0223] 确定所述子任务为script请求，则将所述子任务的任务指令转换为字符串，将所述字符串发送至所述前端；

[0224] 确定所述子任务为exec请求，则根据所述子任务的任务指令调用后台服务器，得到所述子任务的执行结果，并将所述子任务的执行结果返回至所述前端；所述后台服务器存储于各exec请求的任务指令的执行结果。

[0225] 基于相同的技术构思，本发明实施例还提供一种计算机设备，包括：

[0226] 存储器，用于存储程序指令；

[0227] 处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行上述页面渲染方法。

[0228] 基于相同的技术构思，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行上述页面渲染方法。

[0229] 本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

[0230] 本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和 / 或方框图来描述的。应理解可由计算机程序指令实现流程图和 / 或方框图中的每一流程和 / 或方框、以及流程图和 / 或方框图中的流程和 / 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的装置。

[0231] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能。

[0232] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的步骤。

[0233] 显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。< / script>

Claims

1. A page rendering method, characterized in that, include: The front-end obtains the first event component corresponding to the event triggering instruction based on the event triggering instruction of the page element; The front end obtains the event task information of the first event component based on the reporting function called by the first event component; wherein, the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks corresponding to the event component and their execution order; When the front end determines that any subtask in the event task information needs to call the intermediate server, it sends the subtask to the intermediate server. The front end obtains the execution result of the subtask based on the intermediate server, and modifies the second event component according to the execution result; The front-end is rendered and displayed based on the second event component; The event component obtains its information in the following way: Obtain the task object of the page element; wherein, the task object is configured with a correspondence between the event task name and the event task information; Based on the task object, a control object with an event component is formed; the reporting function uses the event task information as a variable. Add the control object to the component parameters of the page object; An event component is constructed based on the component parameters and component styles of the page object.

2. The method as described in claim 1, characterized in that, When the front-end determines that any subtask in the event task information needs to call the intermediate server, it sends the subtask to the intermediate server, including: If the front end determines that the call type of the i-th subtask is a request type, it sends the information of the i-th subtask and the execution result of the (i-1)-th subtask to the intermediate server; the (i-1)-th subtask is the previous subtask of the i-th subtask.

3. The method as described in claim 1, characterized in that, The front-end obtains the execution result of the subtask based on the intermediate server, including: The front end determines the subtask as script If a request is made, the task instruction for the subtask is obtained from the intermediate server, and the execution result of the subtask is determined based on the task instruction; The front end determines the subtask as exec If a request is made, the execution result of the subtask is obtained from the intermediate server.

4. The method as described in claim 3, characterized in that, The step of obtaining the task instruction for the subtask from the intermediate server and determining the execution result of the subtask based on the task instruction includes: The front end receives the string corresponding to the task instruction of the subtask; The front-end uses a preset function to convert the string into task instructions and store them; The front end determines the execution result of the i-th subtask based on the task instruction, the execution result of the (i-1)-th subtask, and the initial input parameters of the i-th subtask.

5. The method as described in claim 1, characterized in that, Before sending the subtask to the intermediate server, the process also includes: The front end determines that the task instructions for the subtask are not stored.

6. The method as described in claim 1, characterized in that, The method further includes: If the front end determines that the invocation type of the i-th subtask is a trigger type, then it determines the invocation function based on the unique identifier of the event component to be invoked indicated by the i-th subtask. The front end invokes the event component to be invoked based on the invocation function.

7. A page rendering method, characterized in that, include: The intermediate server receives event triggering instructions from the front end based on page elements and sends subtasks of the event components; The subtask is the subtask in the event task information that needs to call the intermediate server; The event task information is obtained based on the reporting function called by the event component; The reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks and execution order corresponding to the event component. The intermediate server feeds back the task instructions of the subtask or the execution result of the subtask to the front end; The event component obtains its information in the following way: Obtain the task object of the page element; wherein, the task object is configured with a correspondence between the event task name and the event task information; Based on the task object, a control object with an event component is formed; the reporting function uses the event task information as a variable. Add the control object to the component parameters of the page object; An event component is constructed based on the component parameters and component styles of the page object.

8. The method as described in claim 7, characterized in that, The intermediate server stores the task instructions for each subtask; The intermediate server feeds back the task instructions or execution results of the subtask to the front end, including: The intermediate server determines the subtask as... script If a request is received, the task instruction of the subtask is converted into a string and the string is sent to the front end; The intermediate server determines the subtask as... exec If a request is made, the background server is invoked according to the task instructions of the subtask to obtain the execution result of the subtask, and the execution result of the subtask is returned to the front end; the background server stores the execution result of each subtask in various locations. exec The result of executing the requested task instruction.

9. A page rendering device, characterized in that, include: The acquisition module is used to acquire the first event component corresponding to the event triggering instruction based on the event triggering instruction of the page element; The processing module is used to obtain the event task information of the first event component based on the reporting function called by the first event component; wherein, the reporting function uses the event task information in the task object of the page element as a variable; the event task information is used to indicate the sub-tasks corresponding to the event component and their execution order; When it is determined that any subtask in the event task information needs to call the intermediate server, the subtask is sent to the intermediate server; The execution result of the subtask is obtained based on the intermediate server, and the second event component is modified according to the execution result; Rendering and display are performed based on the second event component; The event component obtains its information in the following way: Obtain the task object of the page element; wherein, the task object is configured with a correspondence between the event task name and the event task information; Based on the task object, a control object with an event component is formed; the reporting function uses the event task information as a variable. Add the control object to the component parameters of the page object; An event component is constructed based on the component parameters and component styles of the page object.

Images