Rendering Method, Device, Computer Device and Storage Medium of Interactive Page

Abstract

The present invention relates to the technical field of data processing, and in particular to a method for rendering an interactive page. Data to be displayed is parsed according to a data parsing rule to obtain initial data. If there is a difference between the initial data and the stored historical data, variable data is preprocessed to obtain a preprocessing result. According to the preprocessing result, a target rendering style code corresponding to the preprocessing result is determined, and the target rendering style code is executed to render the preprocessing result and regular data to obtain a target interactive page. The data to be displayed is independently parsed through a model layer, and the page is independently rendered through a view layer, avoiding mutual influence between the model layer and the view layer, achieving complete decoupling of data and the interactive page, being able to generate the same interactive page according to different data, improving the reuse rate of the interactive page, and also being able to generate different interactive pages according to the same data, improving the reuse rate of parsing design, thereby improving the flexibility of interactive page rendering.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular, to a method, apparatus, computer device, and storage medium for rendering an interactive page. Background Art

[0002] Currently, with the rapid development of front-end technologies, various front-end frameworks have given rise to a variety of interactive components. These interactive components are usually hot-pluggable, that is, they can be used directly out of the box and can directly generate an interactive page based on the data to be displayed, thereby improving the flexibility of the front-end display architecture.

[0003] However, due to the strong correlation between the data structure of the interactive component and the data to be displayed, when replacing or modifying the interactive component, it is necessary to synchronously modify the parsing process of the data to be displayed, which greatly reduces the reuse rate of the parsing design and the interactive page, thereby limiting the flexibility of the interactive page rendering. Therefore, how to improve the flexibility of the interactive page rendering has become an urgent problem to be solved. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method, apparatus, computer device, and storage medium for rendering an interactive page to solve the problem of low flexibility in rendering an interactive page.

[0005] In a first aspect, an embodiment of the present invention provides a method for rendering an interactive page. The architecture of the interactive page includes a model layer, a view layer, and a connection layer. The rendering method includes:

[0006] According to the preset data parsing rules in the model layer, parse the data to be displayed obtained to obtain initial data, where the initial data includes variable data and regular data;

[0007] Detect whether there is a difference between the initial data and the historical data stored in the connection layer. If there is a difference between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result;

[0008] According to the preprocessing result, determine a target rendering style code that meets the preprocessing result among at least one rendering style code configured in the view layer, and execute the target rendering style code to render the preprocessing result and the regular data to obtain a target interactive page.

[0009] In a second aspect, an embodiment of the present invention provides a device for rendering an interactive page. The architecture of the interactive page includes a model layer, a view layer, and a connection layer. The rendering device includes:

[0010] A data parsing module, configured to perform data parsing on the to-be-displayed data obtained according to a preset data parsing rule in the model layer, so as to obtain initial data, where the initial data includes variable data and regular data;

[0011] A preprocessing module, configured to detect whether there is a difference between the initial data and the historical data stored in the association layer. If there is a difference between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result;

[0012] A page rendering module, configured to determine a target rendering style code that meets the preprocessing result from at least one rendering style code configured in the view layer according to the preprocessing result, and execute the target rendering style code to render the preprocessing result and the regular data to obtain a target interactive page.

[0013] In a third aspect, an embodiment of the present invention provides a computer device, including a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the rendering method described in the first aspect is implemented.

[0014] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium storing a computer program, and when the computer program is executed by a processor, the rendering method described in the first aspect is implemented.

[0015] The beneficial effects of the embodiments of the present invention compared with the prior art are:

[0016] The architecture of the interactive page includes a model layer, a view layer, and a connection layer. According to the preset data parsing rules in the model layer, the to-be-displayed data obtained is parsed to obtain initial data. The initial data includes variable data and regular data. It is detected whether there are differences between the initial data and the historical data stored in the connection layer. If there are differences between the initial data and the historical data, the variable data is preprocessed to obtain a preprocessing result. According to the preprocessing result, among at least one rendering style code configured in the view layer, the target rendering style code that meets the preprocessing result is determined, and the target rendering style code is executed to render the preprocessing result and the regular data to obtain the target interactive page. The to-be-displayed data is independently parsed through the model layer, and the view layer independently performs page rendering according to the output result of the connection layer, avoiding the mutual influence between the model layer and the view layer, realizing the complete decoupling of data and the interactive page, ensuring that the to-be-displayed data and the interactive page rendering code can be designed independently, improving the scalability of the interactive page rendering, and communicating through the connection layer. Only by updating the variable data can the generation and update of the interactive page be conveniently carried out. It can generate the same interactive page according to different to-be-displayed data, improving the reuse rate of the interactive page, and can also generate different interactive pages according to the same to-be-displayed data, improving the reuse rate of the parsing design, thereby improving the flexibility of the interactive page rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for use in the embodiments or the description of the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0018] Figure 1 FIG. 1 is a schematic diagram of an application environment of a method for rendering an interactive page provided in Embodiment 1 of the present invention;

[0019] Figure 2 FIG. 2 is a schematic flowchart of a method for rendering an interactive page provided in Embodiment 1 of the present invention;

[0020] Figure 3 FIG. 3 is a schematic flowchart of a method for rendering an interactive page provided in Embodiment 2 of the present invention;

[0021] Figure 4 FIG. 4 is a schematic structural diagram of a device for rendering an interactive page provided in Embodiment 3 of the present invention;

[0022] Figure 5 FIG. 5 is a schematic structural diagram of a computer device provided in Embodiment 4 of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0023] In the following description, specific details such as specific system architectures, technologies, etc. are presented for purposes of illustration and not limitation, so as to provide a thorough understanding of embodiments of the present invention. However, those skilled in the art should clearly understand that the present invention can also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid unnecessary details from obstructing the description of the present invention.

[0024] It should be understood that when used in the specification of the present invention and the appended claims, the term "comprising" indicates the presence of the described features, wholes, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0025] It should also be understood that the term "and / or" as used in the specification of the present invention and the appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0026] As used in the specification of the present invention and the appended claims, the term "if" can be interpreted, depending on the context, as "when", "once", "in response to determining", or "in response to detecting". Similarly, the phrase "if determined" or "if [the described condition or event] is detected" can be interpreted, depending on the context, as meaning "once determined", "in response to determining", "once [the described condition or event] is detected", or "in response to detecting [the described condition or event]".

[0027] In addition, in the description of the specification of the present invention and the appended claims, the terms "first", "second", "third", etc. are only used for distinguishing descriptions and cannot be understood as indicating or implying relative importance.

[0028] The reference to "one embodiment" or "some embodiments" or the like described in the specification of the present invention means that a specific feature, structure, or characteristic described in connection with that embodiment is included in one or more embodiments of the present invention. Thus, statements such as "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments", etc. that appear in different places in this specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "comprising", "including", "having", and their variants all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0029] It should be understood that the magnitudes of the sequence numbers of the steps in the following embodiments do not imply the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

[0030] To illustrate the technical solutions of the present invention, the following specific embodiments are used for illustration.

[0031] An interactive page rendering method provided in the first embodiment of the present invention can be applied in an application environment such as Figure 1 , where the client communicates with the server. The client includes, but is not limited to, computer devices such as a palm computer, a desktop computer, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a cloud terminal device, and a personal digital assistant (PDA). The server can be implemented by an independent server or a server cluster composed of multiple servers.

[0032] Refer to Figure 2 , which is a schematic flowchart of an interactive page rendering method provided in the first embodiment of the present invention. The above rendering method can be applied to the Figure 1 client. The client is equipped with an interactive page architecture. The architecture of the interactive page includes a model layer, a view layer, and a connection layer. The model layer can be used to perform data parsing on the data to be displayed. The connection layer can be used to perform preprocessing operations according to the data parsing results. The connection layer can communicate with the server to obtain historical data stored in the server. The connection layer can be used to perform interactive page rendering according to the preprocessing results. As Figure 2 shown, the rendering method can include the following steps:

[0033] Step S201: According to the preset data parsing rules in the model layer, perform data parsing on the obtained data to be displayed to obtain initial data.

[0034] Among them, the model layer faces the input object. The input object can refer to the data to be displayed. The data to be displayed can refer to the data used to generate an interactive page for display. The data to be displayed can include user data and business data. The user data can include the user's name, age, place of residence, education level, marital status, occupation, etc. The business data can include the content, theme, summary, precautions, etc. of the business.

[0035] The data parsing rules are pre-set and deployed in the model layer. The data parsing rules may include data processing rules such as variable definition and data initialization. Variable definition may refer to defining variable parameters in the data to be displayed that are needed for subsequent rendering. The definition content includes the variable name and variable type. For example, the user name is defined as a variable, its variable name is defined as "Name", and its variable type is defined as "String", that is, the string type. Data initialization may refer to initializing the sorting and parsing time points of the data to be displayed.

[0036] The initial data includes variable data and regular data. Variable data may refer to the data defined as variables in the data to be displayed, and regular data may refer to the data other than variable data in the data to be displayed.

[0037] Specifically, the initial data output by the model layer is neutral, that is, the model layer can accept the data to be displayed in various data formats. Correspondingly, the model layer needs to pre-configure the data parsing rules corresponding to the data formats in advance. The data format of the initial data output by the model layer is unified, so as to ensure that the model layer can provide initial data for the generation of multiple interactive pages. The data parsing rules preset in the model layer only need to be designed and constructed completely once, and can be used in the process of generating multiple interactive pages, which can effectively improve the design reuse rate.

[0038] In data initialization, the sorting of the data to be displayed is implemented by a sorting function. Therefore, initializing the sorting of the data to be displayed is to initialize the sorting function value. For example, in this embodiment, the sorting function is initialized to 1. Whenever new data to be displayed is received, the value of the sorting function is incremented by 1, and the parsing time point of the new data to be displayed is initialized to the time point when the model layer receives the new data to be displayed.

[0039] The above step of parsing the obtained data to be displayed according to the preset data parsing rules in the model layer to obtain the initial data does not need to consider the data format of the data to be displayed, and converts the data to be displayed into neutral initial data through the preset data parsing rules, so as to provide initial data for different interactive page generation processes, reduce the number of times of designing, constructing and adjusting the data parsing rules, and effectively improve the reuse rate of the parsing design.

[0040] Step S202, detect whether there is a difference between the initial data and the historical data stored in the connection layer. If there is a difference between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result.

[0041] Among them, the connection layer can refer to the intermediate layer connecting the model layer and the view layer. The functions of the connection layer can include input verification functions and data preprocessing functions, etc. The input verification function can be used to detect whether there are differences between the initial data input to the connection layer and the historical data stored in the connection layer. The historical data can refer to the data used for historical interaction page rendering stored by the connection layer through communicating with the server.

[0042] The data preprocessing function can refer to preprocessing the variable data in the initial data. The preprocessing can refer to data format conversion, instruction generation, etc. The data format conversion can be used to convert the data format of the variable data into the data format corresponding to the interaction page rendering. The instruction generation can refer to generating rendering instructions for rendering the variable data into the corresponding interaction page. The rendering instructions are used to be sent to the view layer to instruct the view layer to perform rendering processing. The preprocessing results can include the variable data after data format conversion and the rendering instructions.

[0043] Specifically, detecting whether there are differences between the initial data and the historical data stored in the connection layer can adopt a strict comparison method. The strict comparison method can refer to determining the groups of elements for comparison according to the positions of the initial data and the historical data, and comparing each group of elements one by one. Only when the comparison results of each group of elements are all consistent, it is determined that there are no differences between the initial data and the historical data. Otherwise, it is determined that there are differences between the initial data and the historical data. It should be noted that the historical data stored in the connection layer includes at least one historical data. When detecting whether there are differences between the initial data and the historical data stored in the connection layer, each historical data needs to be traversed, and each traversed historical data is compared with the initial data. When any traversed historical data has differences with the initial data, the step of preprocessing the variable data is executed.

[0044] Optionally, the historical data includes historical variable data;

[0045] After detecting that there are differences between the initial data and the historical data, it further includes:

[0046] Performing a similarity comparison between the variable data and each historical variable data to obtain a comparison result;

[0047] According to the comparison result, determining the historical variable data most similar to the variable data as the reference data;

[0048] Obtaining the reference interaction components used in the historical rendering of the reference data.

[0049] Among them, the historical variable data can refer to the data defined as variables in the historical data. The reference interaction component contains data format information and can be used to represent the data format of the reference data in historical rendering. The interaction component can refer to encapsulated basic general components, map components, visualization components, etc.

[0050] The similarity comparison can refer to the calculation of cosine similarity. The reference data can refer to the historical variable data that is closest to the variable data.

[0051] Specifically, the calculation formula of cosine similarity is Among them, A can refer to the variable data, B can refer to the historical variable data, |A| can refer to the modulus of the variable data, |B| can refer to the modulus of the historical variable data, cos(A, B) can refer to the cosine similarity between the variable data and the historical variable data. The value range of cos(A, B) is [0, 1]. 0 indicates that the variable data and the historical variable data are completely dissimilar, and 1 indicates that the variable data and the historical variable data are completely similar. Within the value range, the greater the cosine similarity, the more similar the variable data and the historical variable data are guaranteed to be.

[0052] When the interaction page to be rendered by the undetermined variable data is input in advance, a better interaction page should be determined for the variable data. By using cosine similarity to select the historical variable data that is relatively similar to the variable data from the historical variable data and determining the data format for the conversion of the variable data according to the reference interaction component of the selected historical variable data, the display effect after the subsequent interaction page is rendered can be improved.

[0053] In this embodiment, the reference data is screened out through the similarity between the variable data and the historical variable data, and the reference interaction component of the reference data is used to guide the data format conversion of the variable data. When the rendering target of the variable data is not clearly defined, it can assist the variable data to render an interaction page with a better display.

[0054] Optionally, the preprocessing of the variable data includes:

[0055] According to the reference interaction component, the data format of the variable data is converted to obtain the converted variable data;

[0056] Determine that the instruction for generating the target interaction page is the rendering instruction.

[0057] Among them, the target interaction page can be the interaction page to be rendered by the variable data.

[0058] The data format conversion can refer to converting the data format of the variable data into a format that conforms to the target interaction page. The converted variable data can refer to the result of the variable data format conversion. The rendering instruction is used to instruct the view layer to render the preprocessing result and the regular data.

[0059] Specifically, the data preprocessing function of the connection layer can convert variable data into various data formats, such as HyperText Markup Language format (.html), programming language (Javascript), and a format combining Extensible Markup Language (XML) and HyperText Markup Language (HTML) template format (.Vue). In this embodiment, the convertible data formats can also be extended by updating the data conversion content. Similarly, the syntax versions of data conversion can be extended by updating the data conversion content, such as programming language TypeScript (TS) and programming language JavaScript (JS). It should be noted that when extending the syntax version of data conversion, it is necessary to ensure that the extended syntax meets the parsing capabilities of mainstream browsers, that is, it is compatible with the syntax of mainstream browsers.

[0060] In this embodiment, the variable data is preprocessed to obtain the variable data after converting the data format and the rendering instruction, so as to ensure that the variable data can quickly generate a rendered interactive page. At the same time, scalability is provided for the variable data to facilitate compatibility with new rendering methods.

[0061] The above steps of detecting whether there are differences between the initial data and the historical data stored in the connection layer. If there are differences between the initial data and the historical data, the variable data is preprocessed to obtain the preprocessing result. The variable data in the unrendered initial data is preprocessed to obtain the preprocessing result that can be used for rendering the interactive page. Thus, even when the model layer and the view layer are decoupled, the normal execution of the interactive page rendering process can still be ensured, and it is easy to expand the data format and syntax version, thereby improving the flexibility of the interactive page rendering.

[0062] Step S203, according to the preprocessing result, among at least one rendering style code configured in the view layer, determine the target rendering style code that meets the preprocessing result, and execute the target rendering style code to render the preprocessing result and the regular data to obtain the target interactive page.

[0063] Among them, the preprocessing result can refer to the variable data and the rendering instruction after data format conversion. The rendering style code is usually an open-source interactive page rendering style code, or can be designed and developed by front-end personnel. The rendering style code can be directly introduced and used without re-design. The rendering style code can correspond to the coding information, and the coding information can refer to the serial number coding of the rendering style code, which is used to quickly search for the corresponding rendering style code.

[0064] The view layer can be used for Document Object Model (DOM) node operations and displaying and rendering pages. The Document Object Model can refer to representing information such as tags, attributes, text, and comments in an interactive page as nodes, and node operations can refer to modifying, creating, and deleting operations on the above nodes. The target interactive page can refer to an interactive page obtained by rendering the data to be displayed according to the corresponding rendering style code.

[0065] Specifically, the way of directly introducing and using the built rendering style code is the hot-plugging method, without the need to make adaptive changes to the rendering style code according to the data to be displayed. The rendering style code can refer to web page frameworks (such as Bootstrap), interactive page frameworks (such as Element-UI), etc. In this embodiment, the data format of the view layer is not limited to mainstream data formats. Mainstream data formats can refer to the above-mentioned formats combined with Javascript and XML (.JSX), HTML-based template syntax (.Vue), etc., and can also adopt templated data formats, such as markup syntax (.md) data format, which can directly break through the barriers between different front-end data formats, so that it is possible to use the same data to be displayed to parse different interactive pages at the same time.

[0066] Optionally, after determining the target rendering style code that meets the preprocessing result, it further includes:

[0067] Detect whether the view layer is configured with the target rendering style code;

[0068] If the view layer is not configured with the target rendering style code, generate an update instruction and send it to the connection layer.

[0069] Among them, the view layer is configured with at least one rendering style code, and the detection process can refer to querying whether the encoding serial number of the rendering style code configured in the view layer contains the encoding serial number corresponding to the target rendering style code.

[0070] The update instruction can include updating the rendering style code and updating the data format. Updating the rendering style code can refer to the encoding serial number of the target rendering style code, and updating the data format can refer to the data format adapted to the target rendering style code.

[0071] Specifically, to ensure the lightweight feature of the view layer, the view layer will be configured with at least one relatively common rendering style code. Only when the target rendering style code corresponding to the received variable data is not configured, an update instruction will be generated and sent to the connection layer to request an update.

[0072] In this embodiment, an update method for the unconfigured rendering style code is set, which avoids deploying redundant rendering style codes in the view layer, simplifies the complexity of the view layer, and ensures the lightweight feature of the view layer.

[0073] Optionally, the connection layer is configured with network access capabilities;

[0074] After generating and sending an update instruction to the connection layer, it further includes:

[0075] Based on the network access capabilities, the connection layer downloads the update information corresponding to the update instruction and sends the update information to the view layer.

[0076] The view layer updates the configuration of the target rendering style code according to the update information.

[0077] Among them, network access may mean that the connection layer can download information in the form of accessing the network. The update information may refer to the information corresponding to the update instruction. The update information may include the target rendering style code and the data format adapted to the target rendering style code.

[0078] Specifically, the view layer is only used for rendering and displaying the interactive page, so as to minimize the computing load and improve the rendering speed. Therefore, the update information is obtained through the connection layer. The obtaining method can be downloading through accessing the corresponding port of the network, or directly communicating with the server through the connection layer. It should be noted that since the server also needs to store historical data, the implementer can decide whether to store the rendering style code to be configured in the server according to the actual situation. In addition, if the rendering style code to be configured is stored in the server, the server also needs to access the network to update and add the rendering style code stored in the server.

[0079] In this embodiment, by accessing the network through the connection layer to obtain the update information and sending it to the view layer for configuration update, the computing load of the view layer can be minimized as much as possible, so that the computing resources of the view layer are all used for rendering and displaying the interactive page, thereby improving the rendering efficiency of the interactive page.

[0080] Optionally, the rendering style code corresponds to a standard interactive page;

[0081] After obtaining the target interactive page, it further includes:

[0082] Performing template matching between the target interactive page and the standard interactive page corresponding to the target rendering style code to determine that the matching result is the first integrity;

[0083] When the first integrity is less than the preset abnormal judgment threshold, generate abnormal information and send it to the maintenance personnel.

[0084] Among them, the standard interaction page may refer to the schematic page after the rendering style code is rendered. Template matching may refer to matching methods such as correlation matching, standard correlation matching, and cross-correlation matching. The first integrity may refer to a value used to characterize whether there is a missing part in the target interaction page.

[0085] The preset abnormal judgment threshold may refer to the threshold used to judge whether the missing degree of the target interaction page reaches the abnormal level. Abnormal information may refer to the information sent to the maintenance personnel to indicate that the maintenance personnel should conduct an architecture investigation.

[0086] Specifically, since the ultimate function of the interaction page is to be presented to the user, in this embodiment, the interaction page is regarded as image data, and then the template matching operation is performed. The standard interaction page is a schematic page, that is, the interaction page rendered under the condition of no abnormality.

[0087] Since the target interaction page should have the same size as the standard interaction page and the content is also almost the same, in this embodiment, the template matching is directly performed by comparing pixel values point by point, expressed as Among them, M1 may refer to the first integrity, i represents the abscissa of the pixel point, j represents the ordinate of the pixel point, I represents the number of rows of the image data corresponding to the standard interaction page, J represents the number of columns of the image data corresponding to the standard interaction page, p(i, j) represents the pixel value of the pixel point with the coordinate (i, j) in the image data corresponding to the target interaction page, and q(i, j) represents the pixel value of the pixel point with the coordinate (i, j) in the image data corresponding to the standard interaction page. That is, the larger the first integrity, the less complete the target interaction page is, and the closer the first integrity is to 0, the more complete the target interaction page is. Correspondingly, in this embodiment, the preset abnormal judgment threshold is set to 150. It should be noted that if any image data does not obtain a pixel value at a certain coordinate, the pixel value of the image data at that coordinate is set to 0.

[0088] In this embodiment, the rendering effect of the target interaction page is determined through template matching, so as to judge whether there is an abnormal situation and generate abnormal information to be sent to the maintenance personnel, which is beneficial to improving the operation and maintenance efficiency of the architecture of the interaction page and avoiding the repeated occurrence of rendering abnormal situations.

[0089] Optionally, the abnormal information includes view layer abnormal information and model layer abnormal information;

[0090] Generating abnormal information includes:

[0091] Except for the target rendering style code, any one rendering style code is selected as the comparison rendering style code, and the comparison rendering style code is executed to render the preprocessing result and the conventional data to obtain a comparison interaction page;

[0092] Perform template matching between the comparison interaction page and the standard page corresponding to the comparison rendering style code to determine that the matching result is the second integrity level;

[0093] Calculate the absolute value of the difference between the first integrity level and the second integrity level. If the calculation result is greater than or equal to the preset difference threshold, generate view layer exception information;

[0094] If the calculation result is less than the difference threshold, generate model layer exception information.

[0095] Among them, the view layer exception information is used to instruct the maintenance personnel to conduct exception troubleshooting on the view layer, the model layer exception information is used to instruct the maintenance personnel to conduct exception troubleshooting on the model layer, the comparison rendering style code can refer to the rendering style code other than the target rendering style code, and the comparison interaction page can refer to the interaction page obtained by rendering the preprocessing result and the regular data using the comparison rendering style code for subsequent calculation of the second integrity level.

[0096] The second integrity level can be used to characterize whether there are missing values in the comparison interaction page. The difference threshold can be used to determine the threshold for exceptions in the view layer and the model layer.

[0097] Specifically, when the calculation result of taking the absolute value of the difference between the first integrity level and the second integrity level is greater than or equal to the preset difference threshold, since the first integrity level is larger, when the calculation result is greater than the difference threshold, it means that the second integrity level is smaller, indicating that the integrity of the interaction page obtained when using different rendering style codes is normal, so there is no exception in the data to be displayed provided by the model layer. Therefore, at this time, it is more likely that there is an exception in the view layer. When the calculation result of taking the absolute value of the difference between the first integrity level and the second integrity level is less than the preset difference threshold, since the first integrity level is larger, when the calculation result is less than the difference threshold, it means that the second integrity level is also larger, indicating that the integrity of the interaction page obtained regardless of the rendering style code used is abnormal, so it is more likely that there is an exception in the data to be displayed provided by the model layer. In this embodiment, the difference threshold is set to 100.

[0098] It should be noted that the implementer can use a mapping function to map the above integrity levels to normalize the integrity levels. At this time, the difference threshold should also be adaptively modified. For example, using the mapping function f(M)=e -αM , the integrity level M can be normalized. At this time, the closer the mapping value is to 1, the higher the integrity level, and the closer the mapping value is to 0, the lower the integrity level. α is the adjustment weight, which is recommended to be set to a number greater than 0 and less than 1 to avoid too fast gradient descent of the mapping function. In this embodiment, α is set to 0.01, and correspondingly, the difference threshold is adaptively modified to 0.3.

[0099] In this embodiment, by replacing the rendering style code and comparing the integrity of the interactive page obtained before and after the replacement, the abnormal position in the architecture of the interactive page is determined, which avoids the difficulty in tracing the source when the interactive page is abnormal and improves the operation and maintenance efficiency of the interactive page architecture.

[0100] In the above step of determining the target rendering style code that meets the preprocessing result among at least one rendering style code configured in the view layer according to the preprocessing result, and executing the target rendering style code to render the preprocessing result and the regular data to obtain the target interactive page, the interactive components are used in a hot-pluggable manner without redesigning the rendering style code, so that the interactive components can be applied to multiple pieces of data to be displayed, improving the reuse rate of the interactive page and the flexibility of interactive page rendering.

[0101] In this embodiment, the data to be displayed is independently parsed through the model layer, and the view layer independently performs page rendering according to the output result of the connection layer, avoiding the mutual influence between the model layer and the view layer, realizing the complete decoupling of the data and the interactive page, ensuring that the data to be displayed and the rendering code of the interactive page can be designed independently, improving the scalability of interactive page rendering, and communicating through the connection layer, and only by updating the variable data, the generation and update of the interactive page can be conveniently performed. The same interactive page can be generated according to different data to be displayed, improving the reuse rate of the interactive page, and different interactive pages can also be generated according to the same data to be displayed, improving the reuse rate of parsing design, thereby improving the flexibility of interactive page rendering.

[0102] See Figure 3 , which is a schematic flowchart of a method for rendering an interactive page provided in Embodiment 2 of the present invention. When obtaining the comparison rendering style code, any rendering style code other than the target rendering style code can be selected as the comparison rendering style code, or a rendering style code with better comparison effect can be selected as the comparison rendering style code.

[0103] Among the rendering style codes other than the target rendering style code, any rendering style code is selected as the comparison rendering style code. The above process can be referred to in Embodiment 1 and will not be elaborated here.

[0104] The process of selecting a rendering style code with better comparison effect as the comparison rendering style code includes:

[0105] Step S301, according to the preprocessing result, filter out a set of rendering style codes from the rendering style codes other than the target rendering style code.

[0106] Step S302, calculate the similarity between the standard page corresponding to each rendering style code in the set of rendering style codes and the standard page corresponding to the target rendering style code.

[0107] Step S303: Determine the rendering style code corresponding to the standard page with the lowest similarity as the comparison rendering style code.

[0108] Among them, the preprocessing result can refer to the data format after the variable data undergoes data format conversion, and the rendering style code set can refer to a set composed of rendering style codes with the same data format requirements.

[0109] The similarity can refer to the cosine similarity, and the comparison rendering style code can refer to the rendering style code with better comparison effect except for the target rendering style code.

[0110] Specifically, determine the data format according to the preprocessing result, and filter out the rendering style codes that require this data format, so as to avoid the situation that the integrity difference between the comparison interaction page and the target interaction page is too large due to different data formats. Then, select the rendering style code corresponding to the standard page with the lowest similarity from the rendering style code set as the comparison rendering style code, so as to avoid the situation that the comparison effect is not obvious due to the similarity of the interaction pages.

[0111] In this embodiment, the rendering style codes other than the target rendering style code are screened by using the preprocessing result and the similarity between the corresponding standard page and the standard page corresponding to the target rendering style code, which can avoid the influence of data format and standard page on the comparison effect, thereby improving the comparison effect and facilitating the subsequent more accurate determination of the source of the anomaly.

[0112] Corresponding to the rendering method of the interaction page in the above embodiment, Figure 4 The structural block diagram of the rendering device for the interaction page provided in Embodiment 3 of the present invention is shown. The above rendering device is applied to the client, and the computer device corresponding to the client is equipped with an interaction page architecture. The architecture of the interaction page includes a model layer, a view layer, and a connection layer. The model layer can be used to perform data parsing on the data to be displayed. The connection layer can be used to perform preprocessing operations according to the data parsing result. The connection layer can communicate with the server to obtain the historical data stored in the server. The connection layer can be used to perform interaction page rendering according to the preprocessing result. For the sake of simplicity, only the parts related to the embodiments of the present invention are shown.

[0113] See Figure 4 The architecture of the interaction page includes a model layer, a view layer, and a connection layer;

[0114] The rendering device includes:

[0115] A data parsing module 41, configured to perform data parsing on the obtained data to be displayed input into the model layer according to the preset data parsing rules in the model layer, and obtain initial data, where the initial data includes variable data and regular data;

[0116] A preprocessing module 42, configured to detect whether there are differences between the initial data and the historical data stored in the contact layer. If there are differences between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result;

[0117] A page rendering module 43, configured to determine, according to the preprocessing result, a target rendering style code that meets the preprocessing result from at least one rendering style code configured in the view layer, and execute the target rendering style code to render the preprocessing result and the regular data to obtain a target interactive page.

[0118] Optionally, the historical data includes historical variable data;

[0119] The above-mentioned rendering device further includes:

[0120] A data comparison module, configured to compare the similarity between the variable data and each piece of historical variable data to obtain a comparison result;

[0121] A reference data determination module, configured to determine, according to the comparison result, the historical variable data that is most similar to the variable data as the reference data;

[0122] An interactive component determination module, configured to obtain the reference interactive component used in the historical rendering of the reference data, where the reference interactive component is used to characterize the data format of the reference data in the historical rendering.

[0123] Optionally, the above-mentioned preprocessing module 42 includes:

[0124] A format conversion unit, configured to convert the data format of the variable data according to the reference interactive component to obtain the converted variable data;

[0125] An instruction generation unit, configured to determine that the instruction for generating the target interactive page is a rendering instruction, and the rendering instruction is used to instruct the view layer to render the preprocessing result and the regular data.

[0126] Correspondingly, the preprocessing result includes the converted variable data and the rendering instruction.

[0127] Optionally, the above-mentioned rendering device further includes:

[0128] A configuration detection module, configured to detect whether the view layer is configured with a target rendering style code;

[0129] An update instruction sending module, configured to generate an update instruction and send it to the contact layer if the view layer is not configured with the target rendering style code, where the update instruction includes an updated rendering style code and an updated data format.

[0130] Optionally, the contact layer is configured with a network access function;

[0131] The above-mentioned rendering device further includes:

[0132] An update download module, configured to contact the underlying layer to download update information corresponding to an update instruction based on a network access function, and send the update information to the view layer;

[0133] A configuration update module, configured to update the configuration of the target rendering style code by the view layer according to the update information.

[0134] Optionally, the rendering style code corresponds to a standard interaction page;

[0135] The above-mentioned rendering device further includes:

[0136] A first matching module, configured to perform template matching between the target interaction page and the standard interaction page corresponding to the target rendering style code, and determine that the matching result is a first integrity;

[0137] An exception reminder module, configured to generate exception information and send it to maintenance personnel when the first integrity is less than a preset exception judgment threshold.

[0138] Optionally, the exception information includes view layer exception information and model layer exception information;

[0139] The above-mentioned exception reminder module includes:

[0140] A comparison rendering unit, configured to select any one rendering style code as a comparison rendering style code except for the target rendering style code, and perform rendering on the preprocessing result and regular data by executing the comparison rendering style code to obtain a comparison interaction page;

[0141] A second matching unit, configured to perform template matching between the comparison interaction page and the standard page corresponding to the comparison rendering style code, and determine that the matching result is a second integrity;

[0142] A view exception reminder unit, configured to calculate the absolute value of the difference between the first integrity and the second integrity, and if the calculation result is greater than or equal to a preset difference threshold, generate view layer exception information;

[0143] A model exception reminder unit, configured to generate model layer exception information if the calculation result is less than the difference threshold.

[0144] It should be noted that for the information interaction, execution process, etc. between the above-mentioned modules and units, since they are based on the same concept as the method embodiment of the present invention, their specific functions and the technical effects brought thereby can be specifically referred to in the method embodiment part, and will not be elaborated here.

[0145] Figure 5 This is a schematic structural diagram of a computer device provided in Embodiment 4 of the present invention. As Figure 5 shown, the computer device in this embodiment includes: at least one processor (Figure 5 only one is shown), a memory, and a computer program stored in the memory and executable on at least one processor. When the processor executes the computer program, the steps in any of the above-described rendering method embodiments are implemented.

[0146] The computer device may include, but is not limited to, a processor and a memory. Those skilled in the art can understand that Figure 5 merely an example of a computer device, and does not constitute a limitation on the computer device. The computer device may include more or fewer components than shown in the figure, or combine certain components, or different components. For example, it may also include a network interface, a display screen, and an input device, etc.

[0147] The so-called processor may be a CPU, and the processor may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0148] The memory includes a readable storage medium, an internal memory, etc. Among them, the internal memory may be the memory of the computer device, and the internal memory provides an environment for the operation of the operating system and computer-readable instructions in the readable storage medium. The readable storage medium may be the hard disk of the computer device, and in some other embodiments, it may also be an external storage device of the computer device. For example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device. Further, the memory may also include both the internal storage unit of the computer device and the external storage device. The memory is used to store the operating system, application programs, boot loaders, data, and other programs, etc. The other programs such as the program code of the computer program. The memory may also be used to temporarily store data that has been output or will be output.

[0149] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the above division of each functional unit and module is used as an example. In actual applications, the above functions can be allocated to different functional units and modules according to needs, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. Each functional unit and module in the embodiments can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit. In addition, the specific names of each functional unit and module are only for the convenience of mutual distinction and do not limit the protection scope of the present invention. The specific working processes of the units and modules in the above device can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated herein. If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, to implement all or part of the processes in the above method embodiments of the present invention, a computer program can be used to instruct the relevant hardware to complete. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, the steps of the above method embodiments can be implemented. Among them, the computer program includes computer program code, and the computer program code can be in the form of source code, object code, executable file or some intermediate form, etc. The computer-readable medium can at least include: any entity or device capable of carrying the computer program code, recording medium, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signal, telecommunication signal, and software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disc, etc. In some jurisdictions, according to legislation and patent practice, the computer-readable medium cannot be an electrical carrier signal and a telecommunication signal.

[0150] All or part of the processes in the above method embodiments of the present invention can also be completed by a computer program product. When the computer program product runs on a computer device, it enables the computer device to execute and implement the steps in the above method embodiments.

[0151] In the above embodiments, the descriptions of each embodiment have their own emphases. For the parts not detailed or recorded in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0152] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention.

[0153] In the embodiments provided by the present invention, it should be understood that the disclosed device / computer equipment and method can be implemented in other ways. For example, the device / computer equipment embodiments described above are only illustrative. For example, the division of modules or units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces. The indirect coupling or communication connection of the device or unit can be in an electrical, mechanical or other form.

[0154] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place, or can be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0155] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A rendering method for an interactive page, characterized in that, The architecture of the interactive page includes a model layer, a view layer, and a connection layer. The method includes: According to the preset data parsing rules in the model layer, parse the data to be displayed obtained, and obtain initial data, where the initial data includes variable data and regular data; Detect whether there is a difference between the initial data and the historical data stored in the connection layer. If there is a difference between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result; According to the preprocessing result, among at least one rendering style code configured in the view layer, determine the target rendering style code that meets the preprocessing result, and execute the target rendering style code to render the preprocessing result and the regular data to obtain a target interactive page; The historical data includes historical variable data; After detecting that there is a difference between the initial data and the historical data, it further includes: Compare the similarity between the variable data and each historical variable data to obtain a comparison result; According to the comparison result, determine the historical variable data most similar to the variable data as the reference data; Obtain the reference interactive component used in the historical rendering of the reference data, where the reference interactive component is used to represent the data format of the reference data in the historical rendering; The preprocessing of the variable data includes: According to the reference interactive component, convert the data format of the variable data to obtain the converted variable data; Determine the instruction for generating the target interactive page as a rendering instruction, where the rendering instruction is used to instruct the view layer to render the preprocessing result and the regular data; Correspondingly, the preprocessing result includes the converted variable data and the rendering instruction.

2. The rendering method according to claim 1, characterized in that After determining the target rendering style code that meets the preprocessing result, it further includes: Detect whether the target rendering style code is configured in the view layer; If the target rendering style code is not configured in the view layer, generate an update instruction and send it to the connection layer. The update instruction includes an updated rendering style code and an updated data format.

3. The rendering method according to claim 2, wherein The connection layer is configured with a network access function; After generating the update instruction and sending it to the connection layer, it further includes: Based on the network access function, the connection layer downloads the update information corresponding to the update instruction and sends the update information to the view layer; The view layer configures and updates the target rendering style code according to the update information.

4. The rendering method according to any one of claims 1 to 3, characterized in that, The rendering style code corresponds to a standard interactive page; After obtaining the target interactive page, it further includes: Perform template matching between the target interactive page and the standard interactive page corresponding to the target rendering style code to determine the matching result as the first integrity; When the first integrity is less than the preset abnormal judgment threshold, generate abnormal information and send it to the maintenance personnel.

5. The rendering method according to claim 4, wherein The abnormal information includes view layer abnormal information and model layer abnormal information; The generation of the abnormal information includes: In addition to the target rendering style code, optionally select a rendering style code as the comparison rendering style code, and execute the comparison rendering style code to render the preprocessing result and the conventional data to obtain a comparison interaction page; Perform template matching on the comparison interaction page and the standard page corresponding to the comparison rendering style code to determine that the matching result is the second integrity; Calculate the absolute value of the difference between the first integrity and the second integrity. If the calculation result is greater than or equal to a preset difference threshold, generate the view layer exception information; If the calculation result is less than the difference threshold, generate the model layer exception information.

6. A rendering device for an interactive page, characterized in that, The architecture of the interaction page includes a model layer, a view layer, and a connection layer. The rendering device includes: A data parsing module, configured to parse the acquired data to be displayed according to a preset data parsing rule in the model layer to obtain initial data, where the initial data includes variable data and conventional data; A preprocessing module, configured to detect whether there is a difference between the initial data and historical data stored in the connection layer. If there is a difference between the initial data and the historical data, preprocess the variable data to obtain a preprocessing result; A page rendering module, configured to determine a target rendering style code that meets the preprocessing result from at least one rendering style code configured in the view layer according to the preprocessing result, and execute the target rendering style code to render the preprocessing result and the conventional data to obtain a target interaction page; The historical data includes historical variable data, and the rendering device further includes: A data comparison module, configured to compare the similarity of the variable data with each piece of historical variable data to obtain a comparison result; A reference data determination module, configured to determine the historical variable data most similar to the variable data as reference data according to the comparison result; An interaction component determination module, configured to obtain a reference interaction component used in the historical rendering of the reference data, where the reference interaction component is used to characterize the data format of the reference data in the historical rendering; The preprocessing module includes: A format conversion unit, configured to convert the data format of the variable data according to the reference interaction component to obtain the converted variable data; An instruction generation unit, configured to determine that the instruction for generating the target interaction page is a rendering instruction, and the rendering instruction is used to instruct the view layer to render the preprocessing result and the conventional data; Correspondingly, the preprocessing result includes the converted variable data and the rendering instruction.

7. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the rendering method according to any one of claims 1 to 5 is implemented.

8. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, the rendering method according to any one of claims 1 to 5 is implemented.

Images