Page rendering method and device of code engine

Abstract

The embodiment of the invention provides a page rendering method of a code engine, which is applied to the field of page rendering, and comprises the following steps: when a hierarchy type is a specified type, acquiring page hierarchy data from a code engine server, analyzing the page hierarchy data to obtain page display data, and when the hierarchy type is a non-specified type, displaying the page display data on the code engine server. The method comprises the steps of obtaining page display data obtained by analyzing page level data from a code engine server, obtaining size information of display equipment, determining a current display position, determining page display elements and page style information from the page display data according to the current display position, rendering the page display elements, and displaying the page display elements. According to the method, the page hierarchy data is analyzed at the server side or the client side according to different page types, and only the required content is analyzed according to the current display position and is rendered and displayed, so that the processing cost of a code engine server is reduced, the page loading speed is increased, and the network burden is relieved.

Description

Technical Field

[0001] The present application relates to the field of page rendering, and in particular to a page rendering method and device of a code engine. Background Art

[0002] Low-Code Engine is a software development tool or platform that aims to help developers quickly build applications without writing a lot of code by providing a visual development environment and pre-built components. The goal of the low-code engine is to reduce the complexity and time cost of application development, so that non-professional developers can also participate in application development. The low-code engine provides a graphical user interface, and developers can build applications by dragging and dropping components, configuring properties, and connecting modules.

[0003] As low-code technology has been applied in the Internet field, the implementation methods of low-code engines are not uniform. The parsing and rendering of pages by related technologies may limit the loading speed and response time of pages. In the case of large pages and weak networks, the transmission of very long strings usually slows down the overall response of the page or even crashes, resulting in poor user experience. Summary of the invention

[0004] In view of the above problems, a page rendering method and device of a code engine are proposed to overcome the above problems or at least partially solve the above problems, including:

[0005] In a first aspect of the implementation of the present application, a page rendering method of a code engine is first provided, which is applied to a code engine client, wherein the code engine client is communicatively connected with a code engine server, and the method comprises:

[0006] Acquire page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines page level data; wherein the code engine server stores a plurality of page level data, and the page level data at least includes a level type;

[0007] When the level type is a specified type, obtaining page level data from the code engine server, and parsing the page level data to obtain page display data;

[0008] When the level type is a non-specified type, obtaining page display data obtained by parsing the page level data from the code engine server;

[0009] Acquire size information of the display device, and determine the current display position according to the size information;

[0010] Determining page display elements and page style information from the page display data according to the current display position;

[0011] The page display elements are rendered using the page style information.

[0012] In an optional embodiment of the present application, the specified type is a static level, and the parsing of the page level data to obtain page display data includes:

[0013] Parsing the page level data to obtain static display elements and static style information;

[0014] The using the page style information to render the page display element includes:

[0015] The static display element is rendered using the static style information.

[0016] In an optional embodiment of the present application, determining the page display element and the page style information from the page display data according to the current display position includes:

[0017] Obtaining the underlying frame of the page, and determining the target display layer according to the underlying frame of the page and the current display position;

[0018] Acquire a target display component in the target display layer from the code engine server, and determine the target display component as a page display element;

[0019] According to the target display component, the page style information of the target display component is determined from the page presentation data.

[0020] In an optional embodiment of the present application, the acquiring size information of the display device and determining the current display position according to the size information includes:

[0021] Obtaining a height parameter of a visible area in the display device;

[0022] The current display position is determined according to the height parameter.

[0023] In an optional embodiment of the present application, the method further includes:

[0024] In response to a page sliding operation, determining a page position after the page sliding operation is performed, wherein the page sliding operation is sliding upward or sliding downward;

[0025] The page position after the page sliding operation is performed is determined as the current display position.

[0026] In an optional embodiment of the present application, after rendering the page display element using the page style information, the method further includes:

[0027] Acquire the user's editing operation on the page display element, obtain the edited page display element and page style information corresponding to the edited page display element;

[0028] The page style information is used to render the edited page display element.

[0029] In a second aspect of the implementation of the present application, a page rendering method of a code engine is also provided, which is applied to a code engine server, and the code engine server is communicatively connected with a code engine client, and the method includes:

[0030] Acquire page identification information from the code engine client, and acquire page metadata from a preset storage location according to the page identification information;

[0031] Decomposing the page metadata to obtain page level data, wherein the page level data at least includes a level type;

[0032] In the case where the level type is a non-specified type, determining whether desensitization configuration information exists in the page level data;

[0033] In the case where it is determined that the page-level data has desensitization configuration information, desensitizing the page-level data to obtain desensitized page-level data;

[0034] The desensitized page-level data is determined as page display data, and the page display data is sent to the code engine client.

[0035] In an optional embodiment of the present application, after the method of decomposing the page metadata to obtain page level data, the method further includes:

[0036] When the level type is a specified type, determining the page level data as page display data;

[0037] The page display data is sent to the code engine client.

[0038] In a third aspect of the implementation of the present application, a page rendering device of a code engine is also provided, which is applied to a code engine client, the code engine client is communicatively connected with a code engine server, and the device includes:

[0039] The client sending module is configured to obtain the page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines the page level data; wherein the code engine server stores a plurality of page level data, and the page level data at least includes a level type;

[0040] a designated acquisition module, configured to acquire page level data from the code engine server when the level type is a designated type, and parse the page level data to obtain page display data;

[0041] a non-specified acquisition module, configured to acquire, from the code engine server, page display data obtained by parsing the page hierarchy data when the hierarchy type is a non-specified type;

[0042] A position determination module is configured to obtain size information of a display device and determine a current display position according to the size information;

[0043] A display content determination module, configured to determine page display elements and page style information from the page display data according to the current display position;

[0044] The rendering module is configured to render the page display element using the page style information.

[0045] In a fourth aspect of the implementation of the present application, a page rendering device of a code engine is also provided, which is applied to a code engine server, and the code engine server is communicatively connected with a code engine client, and the device includes:

[0046] A server-side acquisition module is configured to acquire page identification information from the code engine client, and acquire page metadata from a preset storage location according to the page identification information;

[0047] A page decomposition module is configured to decompose the page metadata to obtain page level data, wherein the page level data at least includes a level type;

[0048] A configuration information determination module, which determines whether there is desensitized configuration information in the page level data when the level type is a non-specified type;

[0049] A data desensitization module is configured to perform desensitization processing on the page-level data to obtain desensitized page-level data when it is determined that the page-level data has desensitization configuration information;

[0050] The data sending module is configured to determine the desensitized page-level data as page display data and send the page display data to the code engine client.

[0051] The embodiments of the present application have the following advantages:

[0052] By obtaining the page identification information input by the user and sending the page identification information to the code engine server; when the hierarchy type is a specified type, obtaining the page hierarchy data from the code engine server, and parsing the page hierarchy data to obtain the page display data; when the hierarchy type is a non-specified type, obtaining the page display data obtained by parsing the page hierarchy data from the code engine server, obtaining the display device size information and determining the current display position, according to the current display position, determining the page display elements and page style information from the page display data, rendering the page display elements, parsing the page hierarchy data on the server or client side according to the page type, and only parsing the required content according to the current display position and rendering it for display, thereby reducing the processing cost of the code engine server, accelerating the page loading speed and reducing the network burden. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] In order to more clearly illustrate the technical solution of the present application, the drawings required for use in the description of the present application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0054] Figure 1 It is a flowchart of the steps of a page rendering method of a code engine provided in an embodiment of the present application;

[0055] Figure 2 It is a flowchart of the steps of another page rendering method of a code engine provided in an embodiment of the present application;

[0056] Figure 3 It is a structural block diagram of a page rendering device of a code engine provided in an embodiment of the present application;

[0057] Figure 4 It is a structural block diagram of a page rendering device of another code engine provided in an embodiment of the present application. DETAILED DESCRIPTION

[0058] In order to make the above-mentioned purposes, features and advantages of the present application more obvious and easy to understand, the present application is further described in detail below in conjunction with the accompanying drawings and specific implementation methods. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0059] Reference Figure 1 , shows a flowchart of a page rendering method of a code engine provided by an embodiment of the present application, which is applied to a code engine client, and the code engine client is connected to the code engine server for communication, and specifically may include the following steps:

[0060] Step 101: Obtain page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines page level data; wherein the code engine service stores multiple page level data, and the page level data at least includes a level type.

[0061] The code engine may refer to a low-code engine, which is a software framework or tool used to build a low-code development platform. The low-code development platform allows developers to quickly build applications through a graphical interface and a small amount of coding, thereby reducing the complexity and time cost of traditional programming. The low-code engine is the core component of these platforms, responsible for providing a basic development environment and functions, enabling developers to efficiently create and manage applications.

[0062] The page identification information refers to the unique identifier corresponding to the page that the user needs to edit. Each page has its own unique identifier. In the specific implementation, the user can pass the page identification information through the URL (Uniform Resource Locator) to initiate a data acquisition request.

[0063] Page-level data refers to internal structure data that can be understood and rendered by computers. Page-level data is obtained by parsing page metadata, and page metadata refers to page metadata included in the page source code. These page metadata can exist in JSON (JavaScript Object Notation) format, including page component logical structure, component events, property settings, and style setting data.

[0064] In the specific implementation, the page metadata is divided into multiple rendering levels. Therefore, after parsing the page metadata, multiple page level data can be obtained. Each page level data contains a part of page elements and style information, and each page level corresponds to a level type.

[0065] Step 102: When the level type is a specified type, the page level data is obtained from the code engine server, and the page level data is parsed to obtain page display data.

[0066] Among them, page display data refers to the data to be displayed on the page. Although each page-level data contains page elements and style information, some page elements may need to be hidden, while some page elements need to be displayed. Therefore, it is necessary to parse the page-level data to obtain the page display data that needs to be displayed.

[0067] In some implementations of this embodiment, the specified type may refer to a static hierarchy. The code engine server filters and processes the page hierarchy data, traverses the page components of each layer in the page, verifies its integrity, whether it is expired, and other operations. If it is incomplete or the hierarchy has expired, the hierarchy is discarded and no subsequent processing is performed. After verifying the integrity and expiration operations, it is also necessary to determine the hierarchy type of the page hierarchy. When the hierarchy type is a static hierarchy, the server does not need to perform subsequent processing and it is directly returned to the code engine client. In other words, when the hierarchy type is a static hierarchy, the embodiment of the present application can directly obtain the page hierarchy data from the code engine server, and parse it locally on the code engine client to obtain the page display data that needs to be displayed.

[0068] Step 103: When the hierarchy type is a non-specified type, the page display data obtained by parsing the page hierarchy data is obtained from the code engine server.

[0069] Among them, the non-specified type refers to the dynamic level type. The code engine server not only needs to decompose the page metadata to obtain the page level data, but also needs to parse the page level data to obtain the page display data.

[0070] In some implementations of this embodiment, the process of parsing the page level data by the code engine server includes data filtering and data processing, traversing the page components of each layer in the page level data, verifying its integrity, whether it is expired, etc. If it is incomplete or expired, the level is discarded and no subsequent processing is performed. In addition, it is also necessary to determine the level type corresponding to the page level. If it is a dynamic page level, the server traverses the page level data to determine whether its filled data is dynamic. If it is dynamic, the data is obtained through the configured interface. If it is static, it is determined whether it is required to achieve a personalized display effect for thousands of people.

[0071] Step 104: Acquire the size information of the display device, and determine the current display position according to the size information.

[0072] In some implementations of this embodiment, the size information of the display device can be obtained through JavaScript code, and the screen center position where the center of the current page is located is calculated based on the obtained display device size information, and this position is the current display position.

[0073] In some embodiments of the present application, step 104 may include the following sub-steps:

[0074] Sub-step 11: Obtaining a height parameter of a visible area in a display device;

[0075] Sub-step 12: Determine the current display position according to the height parameter.

[0076] The height parameter of the visible area in the display device refers to the viewport height of the browser window. The viewport height is the height of the visible content in the browser window, excluding the scroll bar and the browser toolbar.

[0077] Determining the current display position according to the height parameter refers to determining the position of the page content currently being viewed by the user according to the viewport height.

[0078] In some embodiments of the present application, after sub-step 12, the following steps are further included:

[0079] Sub-step 21: In response to a page sliding operation, determining a page position after the page sliding operation is performed, wherein the page sliding operation is sliding upward or sliding downward;

[0080] Sub-step 22: determining the page position after the page sliding operation is performed as the current display position.

[0081] The page sliding operation refers to an operation in which a user moves the page content up and down or left and right in a viewport by using an input device such as a mouse wheel, a touch pad, a touch screen or a keyboard.

[0082] In some implementations of this embodiment, the page position after the page sliding operation is performed can be determined by obtaining the scrolling position and the viewport height. In the process of the user sliding the page up and down, the page display data should change in real time. Therefore, in response to the page sliding operation, the embodiment of the present application recalculates the page position after the page sliding operation is performed to obtain a new display position, that is, the current display position. For example, the current scrolling position can be obtained by listening to the scrolling event, and the page area currently being viewed by the user can be calculated in combination with the viewport height. In JavaScript, window.scrollY or document.documentElement.scrollTop can be used to obtain the current vertical scrolling position. It can be understood that sub-steps 21-22 can be before or after any step in the embodiment of the present application, and the page display elements can be loaded and rendered according to the new display position.

[0083] Step 105: Determine page display elements and page style information from the page display data according to the current display position.

[0084] Among them, the page display element refers to the page element that needs to be displayed in the current display position, such as an input box, a radio button, etc. The page style information refers to the CSS (Cascading Style Sheets) style information. CSS is a style sheet language used to describe the appearance and format of HMTL (HyperText Markup Language). Its main purpose is to separate the content of the document from the way the document is presented.

[0085] Each layer corresponds to different page display elements. In some implementations of this embodiment, the page component relationship corresponding to each layer can be obtained through the page component system of the code engine server, that is, which page components need to be displayed and which page components do not need to be displayed in each layer, where the page display element is the sum of the page components that need to be displayed. Therefore, through the current display position and according to the page component relationship corresponding to each layer, the page display element to be displayed and the style information corresponding to the page display element are determined from the page display data.

[0086] In some embodiments of the present application, step 105 may include the following sub-steps:

[0087] Sub-step 31: obtaining the underlying frame of the page, and determining the target display layer according to the underlying frame of the page and the current display position;

[0088] Sub-step 32: Obtain a target display component in a target display layer from a code engine server, and determine the target display component as a page display element;

[0089] Sub-step 33: According to the target display component, determine the page style information of the target display component from the page presentation data.

[0090] Among them, the underlying framework of the page includes the layout structure of the page, the hierarchical relationship and arrangement of elements.

[0091] In some implementations of this embodiment, the vertical hierarchical arrangement list of the entire page can be obtained by obtaining the underlying framework of the page. The vertical hierarchical arrangement list refers to arranging the page elements according to their vertical hierarchical relationship in the page to form a list. The vertical hierarchical arrangement list can be used to calculate the layer height of each layer, and find the middle layer of the page according to the current display position obtained in step 104, and continue to determine all layers in the screen according to the middle layer and the layer height, that is, the target display layer to be displayed. In a specific implementation, the page component system can be used to manage the hierarchical relationship between different layers and components.

[0092] In some implementations of this embodiment, the page component relationship corresponding to each layer is obtained through the page component system, and then the target display component in the layer displayed at the current display position is loaded according to the relationship. The page component relationship can be a tree structure json. Traversing the json can obtain the target display component at the end, that is, the minimum display granularity. Each node is a DOM (Document Object Model), and then different DOMs can be obtained. In a specific implementation, the frame DOM in the current screen can be located according to the current display position. Starting from the frame DOM, multiple DOM page display elements (i.e., target display components) and corresponding page style information contained in the DOM can be extracted layer by layer and level by level; the rendering results of each DOM are rendered layer by layer and level by level using the compilation component, and the rendered rendering results are obtained and displayed on the screen layer by layer.

[0093] Step 106: Rendering the page display elements using the page style information.

[0094] After the page display elements and the style information corresponding thereto are determined, the page display elements may be rendered using the page style information to obtain a rendered page, and the rendered page may be displayed to the user.

[0095] In some implementations of this embodiment, after determining the current display position and determining the page display elements and page style information from the page display data according to the current display position, dynamic layer-by-layer and step-by-step rendering can be used. That is, according to the page browsing direction, each page level data contains a part of the page elements and style information. The low-code engine client starts from the current display position and uses the corresponding style information to render the page elements of each level layer by layer. After each level is rendered, the component display effect will be loaded, and finally a complete page with the current screen content that can be browsed is constructed. In other words, the page metadata stored in the code engine server is presented layer by layer and step by step, starting from the most basic elements, and gradually constructing a complete visual content. Unlike traditional one-time rendering, it allows users to see part of the content instantly while loading the page without having to wait for the entire page to be rendered. In a specific implementation, it is also possible to load only the page display elements and page style information for the current display position through lazy loading. Among them, lazy loading is an optimization technology for delaying the loading of certain resources in the page until these resources are about to enter the user's viewport. The embodiment of the present application further reduces the initial page loading time and improves page performance by lazy loading.

[0096] In some embodiments of the present application, the following steps may be further included after step 106:

[0097] Acquire the user's editing operation on the page display element, obtain the edited page display element and the page style information corresponding to the edited page display element;

[0098] The page style information is used to render the edited page display elements.

[0099] In some of the described methods of this embodiment, through the page component design tool, the user can perform operations such as dragging and dropping page components, convert the operated page into executable code, and generate descriptive information such as the relevant page components, run the compiled executable code and dynamically render the relevant page components, generate visual page components, adjust and confirm the page component position, properties and other characteristics on the page component design tool, and complete the component design within the page.

[0100] In addition, the code security and specification detection can be performed on the page display elements, the sensitive words can be filtered for the data content in the page, the designed page display elements can be separated layer by layer according to the vertical position of the page, and the page display element arrangement list in the vertical distance can be obtained, and the layers can be compiled to obtain the underlying framework of the page, and the page display element arrangement list can be decomposed and drilled down layer by layer to obtain the minimum display granularity of the page display element, which can be compiled into a single display element, and the unique value corresponding to the display element can be generated and saved, and the corresponding relationship between the underlying framework of the page and the single display element can be established through the code engine server. Among them, the security and specification detection can detect the code specification, code security and specification according to the code detection rules formulated by the enterprise itself; sensitive word filtering can detect banned words and illegal terms according to the actual needs of the enterprise, and perform sensitive display after detection. The process of the page component system includes defining layers, configuring layered behaviors, and managing component behaviors at runtime, which improves the interactivity of the code engine.

[0101] The page component system is used to adopt a common and consistent approach to the process of the page component system, including defining page layers, configuring page layer behavior, and managing the behavior of page layers at runtime. Definition refers to defining the available layers in the page component. The layers allow users to insert content or components. Configuration refers to providing configurable properties or options for the layers so that users can define the behavior of the layers based on these configuration properties or options. Management refers to dynamically rendering the page based on the content or components provided by the user in the page component layer.

[0102] Furthermore, when the page component system manages the behavior of page components, authorized users can perform the following operations:

[0103] First, you can define a page layer name, such as dx-floor, and use special tags or placeholders in the component template to identify the layer, which is similar to Vue.js <slot>Elements, React's children attribute, etc.

[0104] The events and data attributes of the page hierarchy are defined to realize the event and data communication between the page hierarchy and the parent component; specifically, it uses custom events or attributes to transfer data. The hierarchy and page components are a tree structure, and each component contains 0-1 parent components and 0-n child components.

[0105] You can also define and use multiple page components in the same layer according to page rendering requirements; specifically, configure multiple page components for each layer and specify a name for each page component. Users can define and use multiple page components in each layer as needed. Each component corresponds to a named layer, and each layer is independent of each other.

[0106] Based on page component properties or data binding, data is dynamically bound to the page components placed in the layer. Specifically, through component properties or data binding, users are allowed to pass dynamic data or dynamic styles to components, and then display the content; or based on page component properties or data binding, static data is stored in the corresponding page component. Event binding is performed on the components in each layer, and the context content is passed to the event parameters.

[0107] In this embodiment, component behaviors (styles, events, properties) are uniformly encapsulated in the same layer, which means that developers can define and configure component behaviors in a centralized location without having to set them up in different code segments. This unified encapsulation method makes it more efficient and consistent to manage and modify component behaviors without having to deeply understand the internal implementation details of each component.

[0108] At runtime, these layers can be dynamically applied to components to enable the configuration of component styles, events, and properties. This approach not only simplifies the development process, but also improves the maintainability of the code because developers can more easily manage and update component behavior without having to deeply modify the component's source code; this unified encapsulation processing method helps improve development efficiency and provides developers with greater flexibility to meet the needs of different application scenarios.

[0109] In some embodiments of the present application, when the specified type is a static level, step 102 may include the following sub-steps:

[0110] The page level data is parsed to obtain static display elements and static style information.

[0111] From the above content, we can know that the code engine server filters and processes the page level data, that is, it traverses the page components of each layer in the page, verifies its integrity, whether it is expired, etc. If it is incomplete or expired, the level will be discarded and no further processing will be performed. Determine the level type corresponding to the page level. If it is a static page level, the server does not need to perform subsequent processing and can directly return it to the code engine client. In other words, the code engine client can directly obtain the page level data corresponding to the static level.

[0112] The code engine client parses the page level data that has not been processed by the code engine server to obtain the corresponding static display elements and static style information.

[0113] In some embodiments of the present application, when the specified type is a static level, step 106 may include the following sub-steps:

[0114] The static display element is rendered using the static style information.

[0115] After the code engine client parses and obtains the static display element and the static style information, the static style information can be used to render the static display element. For example, if the static element is a QR code and the style information is a red frame around the QR code, the QR code is rendered using the style information to obtain a static effect.

[0116] In other embodiments of the present application, resources can be replaced and rendered offline on the code engine client. In a specific implementation, the page resources corresponding to the page identification information are cached locally on the code engine client, and dynamically loaded and provided in an offline state with the help of offline loading technology. More specifically, by defining which resources can be cached by the user device and which resources cannot be cached by the user device. It is not difficult to understand that when the user is online, the latest resources can be automatically obtained from the code engine server. The page resources corresponding to the page identification information may include but are not limited to HTML, CSS, JavaScript files and other resources, such as images and fonts. When the code engine client initiates a data request to the code engine server, these page resources can be cached to the code engine client, so that the resources can be obtained from the local cache in subsequent requests without having to be downloaded from the server again.

[0117] When the code engine client needs to load a page resource, it first checks whether there is a local cached copy. If there is a local cache, the resource will be obtained from the cache and used in the code engine server. When the user is online, this is a network priority strategy because it still tries to get the latest resource from the network. If the user is offline, the previously downloaded page resources can be extracted from the cache to ensure that the application continues to run even without a network connection.

[0118] Based on the above process, the code engine client is able to manage resources more efficiently and continue to provide access to developers in offline situations, which not only improves performance but also provides a better user experience because users can continue to use the application offline without worrying about network connection issues.

[0119] The embodiment of the present application obtains page identification information input by the user and sends the page identification information to the code engine server; when the hierarchy type is a specified type, obtains page hierarchy data from the code engine server, and parses the page hierarchy data to obtain page display data; when the hierarchy type is a non-specified type, obtains page display data obtained by parsing the page hierarchy data from the code engine server, obtains display device size information and determines the current display position, determines page display elements and page style information from the page display data based on the current display position, renders the page display elements, parses the page hierarchy data on the server or client side according to the page type, and only parses the required content according to the current display position and renders it for display, thereby reducing the processing cost of the code engine server, accelerating page loading speed and alleviating network burden.

[0120] Reference Figure 2 , shows a flowchart of the steps of another code engine page rendering method provided by an embodiment of the present application, which is applied to a code engine server, and the code engine server is connected to the code engine client for communication, and specifically may include the following steps:

[0121] Step 201: Obtain page identification information from the code engine client, and obtain page metadata from a preset storage location based on the page identification information;

[0122] The preset storage location refers to a location for storing the page source code corresponding to the page representation information. The preset storage location may be located in a persistent storage medium, specifically a cloud storage, a storage system, and the like.

[0123] According to the page identification information, the corresponding storage location can be located, and the page meta code can be obtained from the storage location, including the page metadata. The page metadata exists in JSON format, including the page component logical structure, component events, property settings, and style setting data.

[0124] Step 202: Decompose the page metadata to obtain page level data, where the page level data at least includes a level type;

[0125] Decomposition refers to decomposing and parsing page metadata to obtain page-level data.

[0126] In some implementations of this embodiment, the code engine server needs to classify and parse the obtained page source code. The process includes parsing the component structure tree, event list, attribute list, and style list, and then obtaining the corresponding page hierarchy data, among which the attribute list stores the hierarchy type, that is, whether a certain layer is a static layer or a dynamic layer.

[0127] The code engine server also needs to filter and process the page level data, that is, traverse the page components of each layer in the page, verify their integrity, whether they are expired, determine the version and status, etc., locate the layer, parse JavaScript events, and process dynamically loaded resources. For example, when checking the integrity, if it is determined to be incomplete, the layer will be discarded; if it is determined to be expired, the layer will be discarded and no further processing will be performed; in addition, it is necessary to determine the level type in the page level data. Specifically, the level type can be determined from the attribute list. If it is a dynamic page level, further processing is required; if it is a static page level, the code engine server does not need to process it and it can be directly returned to the code engine client.

[0128] Step 203: When the level type is a non-specified type, determine whether there is desensitization configuration information in the page level data.

[0129] Among them, non-specified types refer to dynamic page levels. If it is a dynamic page level, further processing is required. Desensitized configuration information refers to the processing of sensitive information through configuration to prevent this information from being obtained by unauthorized personnel. The purpose of desensitized configuration is to protect user privacy and system security.

[0130] In some implementations of this embodiment, the code engine server determines whether there is desensitization configuration information in the page-level data by traversing the page-level data. If there is desensitization configuration information, a desensitization method can be used to desensitize the data. The desensitization method refers to hiding some information, such as replacing the middle digits of the ID card number with asterisks (such as 1234********5678), and for another example, desensitizing the mobile phone number, the system defaults to desensitizing the middle 4 digits.

[0131] In other implementations of this embodiment, it is also possible to determine whether the filling data in the page-level data is dynamic. If it is dynamic, the data is obtained through the configured interface, and asynchronous execution can be used to obtain data and fill it. If the filling data is static, it can be determined whether it is required. If it is required, it is determined. If it is not filled, the default data is used. If a person tag is set, it is determined whether to display it by checking the person tag of the current page. Through dynamic acquisition of filling data or default filling of static data, thousands of faces can be achieved.

[0132] Step 204: When it is determined that the page-level data has desensitization configuration information, desensitize the page-level data to obtain desensitized page-level data;

[0133] Continuing with the above example of desensitizing the mobile phone number, the system desensitizes the middle 4 digits of the mobile phone number by default to obtain the desensitized page-level data, such as 132xxxx0000.

[0134] Step 205: Determine the desensitized page-level data as page display data, and send the page display data to the code engine client.

[0135] The page display data refers to the data results that can be understood and rendered by the computer. The data structure of the page display data includes DOM (browser document object model), CSSOM (CSS object model), and event handlers. CSSOM represents CSS styles as a tree structure, and style rules and attributes are represented as objects. These objects are connected through parent-child and sibling relationships.

[0136] After desensitizing the page-level data, the desensitized data replaces the original data and serves as the page display data. The page display data is sent to the code engine client so that the code engine client can further parse, filter, render and display it.

[0137] In some embodiments of the present application, the following steps may be further included after step 201:

[0138] When the level type is a specified type, the page level data is determined as page display data;

[0139] Send the page display data to the code engine client.

[0140] Among them, the specified type refers to the static hierarchy. When the corresponding hierarchy type in the attribute list in the page hierarchy data is the static hierarchy, the page hierarchy data does not need to be processed by the code engine server. In other words, the page hierarchy data is equivalent to the page display data. The page display data can be directly returned to the code engine client, and the code engine client will parse and render it.

[0141] In other embodiments of the present application, the code engine server can also detect code specifications and code security according to the code detection rules formulated according to the enterprise's own requirements; the code engine server can also detect banned words, illegal terms, etc. formulated according to the actual needs of the enterprise; further, a general and consistent method can be used to define, configure and manage the behavior of page components in the design and compilation process; it can also include a code security and specification detection function. In a specific implementation, the code security and specification detection function is used to detect potential defects and errors in the code. In this embodiment, the code security and specification detection function can identify common programming errors, potential performance problems and security vulnerabilities by analyzing bytecode; in addition, the code security and specification detection function can also continuously check the code quality, detect defects and vulnerabilities in the code, and provide detailed reports and analysis. Further, the code engine server can also include a page positioning function, which is used to define the relative position of the page where the component is located. The page position allows the user to insert content or components, and multiple page components can be defined and used in the same hierarchical component.

[0142] The embodiment of the present application is applied to the code engine server, by obtaining page identification information from the code engine client, obtaining page metadata from a preset storage location based on the page identification information, decomposing the page metadata, and obtaining page-level data, wherein the page-level data at least includes a level type. When the level type is a non-specified type, it is determined whether the page-level data has desensitizing configuration information. When it is determined that the page-level data has desensitizing configuration information, the page-level data is desensitized to obtain the desensitized page-level data, and the desensitized page-level data is determined as page display data, and the page display data is sent to the code engine client. The page-level data is parsed on the server or client according to the page type, and only the required content is parsed and rendered for display according to the current display position, thereby reducing the processing cost of the code engine server, accelerating the page loading speed and reducing the network burden. By desensitizing the data with desensitizing configuration information on the code engine server, both the correct parsing of the data and the security of the data are guaranteed.

[0143] It should be noted that, for the method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present application are not limited by the described order of actions, because according to the embodiments of the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present application.

[0144] Reference Figure 3 , shows a schematic diagram of the structure of a page rendering device of a code engine provided in some embodiments of the present application, which is applied to a code engine client, and the code engine client is connected to the code engine server for communication, and may specifically include the following modules:

[0145] The client sending module 301 is configured to obtain the page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines the page level data; wherein the code engine server stores a plurality of page level data, and the page level data at least includes a level type;

[0146] The designated acquisition module 302 is configured to acquire page level data from the code engine server when the level type is a designated type, and parse the page level data to obtain page display data;

[0147] The non-specified acquisition module 303 is configured to acquire, from the code engine server, page display data obtained by parsing the page hierarchy data when the hierarchy type is a non-specified type;

[0148] The position determination module 304 is configured to obtain size information of the display device and determine the current display position according to the size information;

[0149] A display content determination module 305 is configured to determine page display elements and page style information from the page display data according to the current display position;

[0150] The rendering module 306 is configured to render the page display elements using the page style information.

[0151] In an optional embodiment of the present application, the specified type is a static level, and the specified acquisition module 302 includes:

[0152] A first parsing submodule is configured to parse the page level data to obtain static display elements and static style information;

[0153] The rendering module 306 includes:

[0154] The first rendering submodule is configured to render the static display element using the static style information.

[0155] In an optional embodiment of the present application, the display content determination module 305 includes:

[0156] A layer determination submodule is configured to obtain the underlying framework of the page and determine the target display layer according to the underlying framework of the page and the current display position;

[0157] A display element determination submodule is configured to obtain a target display component in the target display layer from the code engine server, and determine the target display component as a page display element;

[0158] The style information determination submodule is configured to determine the page style information of the target display component from the page presentation data according to the target display component.

[0159] In an optional embodiment of the present application, the location determination module 304 includes:

[0160] A first parameter acquisition submodule is configured to acquire a height parameter of a visible area in the display device;

[0161] The first position determination submodule is configured to determine the current display position according to the height parameter.

[0162] In an optional embodiment of the present application, the location determination module 304 further includes:

[0163] A sliding response submodule is configured to determine the page position after the page sliding operation is performed in response to the page sliding operation, wherein the page sliding operation is sliding upward or sliding downward;

[0164] The second position determination submodule is configured to determine the page position after the page sliding operation is performed as the current display position.

[0165] In an optional embodiment of the present application, the device further includes:

[0166] A second acquisition module is configured to acquire the user's editing operation on the page display element, obtain the edited page display element, and obtain the page style information corresponding to the edited page display element;

[0167] The second rendering module is configured to render the edited page display element using the page style information.

[0168] Reference Figure 4 , shows a schematic diagram of the structure of a page rendering device of a code engine provided by an embodiment of the present application, which is applied to a code engine server, and the code engine server is connected to the code engine client for communication, and may specifically include the following modules:

[0169] The server-side acquisition module 401 is configured to acquire page identification information from the code engine client, and acquire page metadata from a preset storage location according to the page identification information;

[0170] A page decomposition module 402 is configured to decompose the page metadata to obtain page level data, wherein the page level data at least includes a level type;

[0171] Configuration information determination module 403, when the level type is a non-specified type, determines whether there is desensitized configuration information in the page level data;

[0172] The data desensitization module 404 is configured to perform desensitization processing on the page-level data to obtain desensitized page-level data when it is determined that the page-level data has desensitization configuration information;

[0173] The data sending module 405 is configured to determine the desensitized page-level data as page display data, and send the page display data to the code engine client.

[0174] In an optional embodiment of the present application, the device further includes:

[0175] a designated data determination module, configured to determine the page level data as page display data when the level type is a designated type;

[0176] The designated data sending module is configured to send the page display data to the code engine client.

[0177] An embodiment of the present application also provides an electronic device, which may include a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the page rendering method of the above code engine is implemented.

[0178] An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the page rendering method of the above code engine is implemented.

[0179] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0180] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0181] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0182] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, devices, or computer program products. Therefore, the embodiments of the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the embodiments of the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0183] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0184] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0185] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable terminal device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0186] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present application.

[0187] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "including a..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the above elements.

[0188] The page rendering method and device of the provided code engine are introduced in detail above. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.< / slot>

Claims

1. A page rendering method of a code engine, characterized in that: Applied to a code engine client, the code engine client is connected to a code engine server for communication, the method comprising: Acquire page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines page level data; wherein the code engine server stores a plurality of page level data, and the page level data at least includes a level type; When the level type is a specified type, obtaining page level data from the code engine server, and parsing the page level data to obtain page display data; When the level type is a non-specified type, obtaining page display data obtained by parsing the page level data from the code engine server; Acquire size information of the display device, and determine the current display position according to the size information; Determining page display elements and page style information from the page display data according to the current display position; The page display elements are rendered using the page style information.

2. The method according to claim 1, characterized in that The specified type is a static level, and the page level data is parsed to obtain page display data, including: Parsing the page level data to obtain static display elements and static style information; The using the page style information to render the page display element includes: The static display element is rendered using the static style information.

3. The method according to claim 1, characterized in that The determining of the page display elements and page style information from the page display data according to the current display position includes: Obtaining the underlying frame of the page, and determining the target display layer according to the underlying frame of the page and the current display position; Acquire a target display component in the target display layer from the code engine server, and determine the target display component as a page display element; According to the target display component, the page style information of the target display component is determined from the page presentation data.

4. The method according to any one of claims 1 to 3, characterized in that: The acquiring size information of the display device and determining the current display position according to the size information includes: Obtaining a height parameter of a visible area in the display device; The current display position is determined according to the height parameter.

5. The method according to claim 4, characterized in that The method further comprises: In response to a page sliding operation, determining a page position after the page sliding operation is performed, wherein the page sliding operation is sliding upward or sliding downward; The page position after the page sliding operation is performed is determined as the current display position.

6. The method according to any one of claims 1 to 3, characterized in that: After the page display element is rendered using the page style information, the method includes: Acquire the user's editing operation on the page display element, obtain the edited page display element and page style information corresponding to the edited page display element; The page style information is used to render the edited page display element.

7. A page rendering method of a code engine, characterized in that: Applied to a code engine server, the code engine server is connected to a code engine client for communication, the method comprising: Acquire page identification information from the code engine client, and acquire page metadata from a preset storage location according to the page identification information; Decomposing the page metadata to obtain page level data, wherein the page level data at least includes a level type; In the case where the level type is a non-specified type, determining whether desensitization configuration information exists in the page level data; In the case where it is determined that the page-level data has desensitization configuration information, desensitizing the page-level data to obtain desensitized page-level data; The desensitized page-level data is determined as page display data, and the page display data is sent to the code engine client.

8. The method according to claim 7, characterized in that After the page metadata is decomposed to obtain page level data, the method includes: In the case where the level type is a specified type, determining the page level data as page display data; The page display data is sent to the code engine client.

9. A page rendering device of a code engine, characterized in that: Applied to a code engine client, the code engine client is connected to a code engine server for communication, and the device comprises: The client sending module is configured to obtain the page identification information input by the user, and send the page identification information to the code engine server, so that the code engine server determines the page level data; wherein the code engine server stores a plurality of page level data, and the page level data at least includes a level type; a designated acquisition module, configured to acquire page level data from the code engine server when the level type is a designated type, and parse the page level data to obtain page display data; a non-specified acquisition module, configured to acquire, from the code engine server, page display data obtained by parsing the page hierarchy data when the hierarchy type is a non-specified type; A position determination module is configured to obtain size information of a display device and determine a current display position according to the size information; A display content determination module, configured to determine page display elements and page style information from the page display data according to the current display position; The rendering module is configured to render the page display element using the page style information.

10. A page rendering device of a code engine, characterized in that: Applied to a code engine server, the code engine server is connected to a code engine client for communication, and the device comprises: A server-side acquisition module is configured to acquire page identification information from the code engine client, and acquire page metadata from a preset storage location according to the page identification information; A page decomposition module is configured to decompose the page metadata to obtain page level data, wherein the page level data at least includes a level type; A configuration information determination module, which determines whether there is desensitized configuration information in the page level data when the level type is a non-specified type; A data desensitization module is configured to perform desensitization processing on the page-level data to obtain desensitized page-level data when it is determined that the page-level data has desensitization configuration information; The data sending module is configured to determine the desensitized page-level data as page display data and send the page display data to the code engine client.

Images