Page access method, client, server and system

Abstract

The present application provides a page access method, a client, a server, and a system. The page access method includes: sending a page access request to the server, where the page access request carries the page identifier of the page to be accessed; receiving the page structure information of the page to be accessed returned by the server, where the page structure information is obtained by the server based on the page identifier by looking up the page table and the component table, the page table records the correspondence between the page identifier and the page information, and the component table records the correspondence between the component identifier and the component information; parsing the page structure information to obtain the target page information and the target component information; and rendering the page to be accessed based on the target page information and the target component information. In this way, there is no need to wait until the version update time to update the page following the release cycle, and the page can be updated in real time according to the requirements, so that the page displayed after page access meets the access requirements, improving the user experience and thus increasing user stickiness.

Description

Technical Field

[0001] This application relates to the field of information processing technologies, and particularly to a page access method. This application also relates to a client, a server, a page access system, a computing device, and a computer-readable storage medium. Background Art

[0002] With the development of the Internet, more and more users choose to handle business or browse information online, and both handling business and browsing information online require accessing the pages of corresponding websites or applications.

[0003] In the prior art, when a user opens a relevant page, the client will obtain the relevant information of the page from the server, and then render the page based on the obtained information and display it to the user for the user to handle business or browse information. However, usually, the development of the front-end page needs to be updated following the release cycle. Due to the regularity and fixity of the release time, the update cycle of a page is relatively long. When accessing the page during this period, the displayed page may not meet the access requirements. Therefore, there is an urgent need for a page access method to solve the above problems. Summary of the Invention

[0004] In view of this, embodiments of this application provide a page access method. This application also relates to a client, a server, a page access system, a computing device, and a computer-readable storage medium to solve the problem in the prior art that the page update cycle is long, resulting in the accessed page not meeting the access requirements.

[0005] According to the first aspect of the embodiments of this application, a page access method is provided, which is applied to a client. The method includes:

[0006] Sending a page access request to the server, where the page access request carries the page identifier of the page to be accessed;

[0007] Receiving the page structure information of the page to be accessed returned by the server, where the page structure information is obtained by the server based on the page identifier to look up a page table and a component table. The page table records the correspondence between the page identifier and the page information, and the component table records the correspondence between the component identifier and the component information;

[0008] Parsing the page structure information to obtain target page information and target component information;

[0009] Rendering the page to be accessed based on the target page information and the target component information.

[0010] According to the second aspect of the embodiments of this application, another page access method is provided, which is applied to a server. The method includes:

[0011] Receive a page access request sent by a client, where the page access request carries a page identifier of a page to be accessed;

[0012] According to the page identifier, look up the target page information corresponding to the page to be accessed in a page table, where the page table records the correspondence between page identifiers and page information, and the page information includes a component identifier;

[0013] Read the target component identifier in the target page information, and according to the target component identifier, look up the target component information corresponding to the target component identifier in a component table, where the component table records the correspondence between component identifiers and component information;

[0014] Concatenate the target page information and the target component information to obtain page structure information, and return the page structure information to the client, where the page structure information is used by the client to render the page to be accessed.

[0015] According to the third aspect of the embodiments of the present application, a client is provided, including:

[0016] A sending module, configured to send a page access request to a server, where the page access request carries a page identifier of a page to be accessed;

[0017] A first receiving module, configured to receive the page structure information of the page to be accessed returned by the server, where the page structure information is obtained by the server looking up a page table and a component table based on the page identifier, the page table records the correspondence between page identifiers and page information, and the component table records the correspondence between component identifiers and component information;

[0018] An analysis module, configured to analyze the page structure information to obtain target page information and target component information;

[0019] A rendering module, configured to render the page to be accessed based on the target page information and the target component information.

[0020] According to the fourth aspect of the embodiments of the present application, a server is provided, including:

[0021] A second receiving module, configured to receive a page access request sent by a client, where the page access request carries a page identifier of a page to be accessed;

[0022] A first lookup module, configured to look up the target page information corresponding to the page to be accessed in a page table according to the page identifier, where the page table records the correspondence between page identifiers and page information, and the page information includes a component identifier;

[0023] A second search module, configured to read a target component identifier in the target page information, and according to the target component identifier, search for target component information corresponding to the target component identifier in a component table, where the component table records the correspondence between component identifiers and component information;

[0024] A splicing module, configured to splice the target page information and the target component information to obtain page structure information, and return the page structure information to the client, where the page structure information is used for the client to render the to-be-accessed page.

[0025] According to a fifth aspect of the embodiments of the present application, a page access system is provided. The page access system includes a client and a server;

[0026] The client sends a page access request to the server, and the page access request carries a page identifier of the to-be-accessed page;

[0027] The server receives the page access request sent by the client, and the page access request carries a page identifier of the to-be-accessed page; according to the page identifier, search for target page information corresponding to the to-be-accessed page in a page table, where the page table records the correspondence between page identifiers and page information, and the page information includes component identifiers; read a target component identifier in the target page information, and according to the target component identifier, search for target component information corresponding to the target component identifier in a component table, where the component table records the correspondence between component identifiers and component information; splice the target page information and the target component information to obtain page structure information, and return the page structure information to the client, where the page structure information is used for the client to render the to-be-accessed page;

[0028] The client receives the page structure information of the to-be-accessed page returned by the server. The page structure information is obtained by the server based on the page identifier by searching the page table and the component table. The page table records the correspondence between page identifiers and page information, and the component table records the correspondence between component identifiers and component information; parse the page structure information to obtain target page information and target component information; render the to-be-accessed page based on the target page information and the target component information.

[0029] According to a sixth aspect of the embodiments of the present application, a computing device is provided, including: a memory and a processor;

[0030] The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions to implement the steps of any of the above page access methods.

[0031] According to a seventh aspect of the embodiments of the present application, there is provided a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the steps of any of the above page access methods.

[0032] The page access method applied to the client provided by the present application sends a page access request to the server, and the page access request carries the page identifier of the page to be accessed; receives the page structure information of the page to be accessed returned by the server, and the page structure information is obtained by the server based on the page identifier to look up the page table and the component table. The page table records the correspondence between the page identifier and the page information, and the component table records the correspondence between the component identifier and the component information; parses the page structure information to obtain the target page information and the target component information; and renders the page to be accessed based on the target page information and the target component information. The above method links the page display of the client with the information storage of the server. When accessing a page, the client can obtain the page information and the component information from the server, and generate the page to be accessed according to the page information and the component information, without waiting for the time of version update to update the page following the release cycle, and can update the page in real time according to the demand, so that the page displayed after page access meets the access requirements, improves the user experience, and further increases the user stickiness. Description of the Drawings

[0033] Figure 1 is a flowchart of a page access method applied to a client provided by an embodiment of the present application;

[0034] Figure 2 is a schematic diagram of a page to be accessed provided by an embodiment of the present application;

[0035] Figure 3a is a schematic diagram of disassembling the underlying data of a component provided by an embodiment of the present application;

[0036] Figure 3b is a schematic diagram of an operation executed after a trigger event provided by an embodiment of the present application;

[0037] Figure 4 is a flowchart of a page access method applied to a server provided by an embodiment of the present application;

[0038] Figure 5 is a schematic diagram of a page access method provided by an embodiment of the present application;

[0039] Figure 6 is a schematic diagram of the structure of a client provided by an embodiment of the present application;

[0040] Figure 7 is a schematic diagram of the structure of a server provided by an embodiment of the present application;

[0041] Figure 8 It is a structural block diagram of a computing device provided by an embodiment of the present application;

[0042] Figure 9 It is a schematic structural diagram of a page access system provided by an embodiment of the present application. Detailed implementation manners

[0043] Many specific details are set forth in the following description in order to provide a thorough understanding of the present application. However, the present application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the connotation of the present application. Therefore, the present application is not limited by the specific implementations disclosed below.

[0044] The terms used in one or more embodiments of the present application are for the purpose of describing specific embodiments only and are not intended to limit one or more embodiments of the present application. The singular forms "a", "said", and "the" used in one or more embodiments of the present application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used in one or more embodiments of the present application refers to and includes any or all possible combinations of one or more of the associated listed items.

[0045] It should be understood that although the terms first, second, etc. may be used in one or more embodiments of the present application to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of one or more embodiments of the present application, the first may also be referred to as the second, and similarly, the second may also be referred to as the first. Depending on the context, the word "if" as used herein may be interpreted as "when" or "while" or "in response to determining".

[0046] First, the noun terms related to the embodiments of the present application are explained.

[0047] JSON (JavaScript Object Notation): It uses the syntax of JS to describe data objects and is a lightweight data exchange format.

[0048] JSON-SCHEMA (JavaScript Object Notation Schema): It is a standard for defining JSON data constraints. According to this convention schema, both parties exchanging data can understand the requirements and constraints of JSON data and can also verify the data accordingly to ensure the correctness of data exchange.

[0049] Rendering: It is the process of converting a series of data at the backend into a page visible to the human eye. The page rendering of this application includes first rendering the page structure according to the page information, then rendering the reference components on the page structure based on the underlying data and the reference component data, and then adjusting the reference components according to the component attribute structure information to obtain the rendered page.

[0050] Page structure information: It includes all the information of the entire page, and a complete page can be described through this page structure information. In the embodiments of this application, the page structure information can be a data structure, and the information describing the page is included in this data structure.

[0051] Page information: Information at the page level, which can be used to describe the overall structure of the page.

[0052] Component information: Information at the component level, including the information of all components in the page, which can be used to describe the components in the page.

[0053] Component attribute structure information: It is the information in the component information used to describe the attributes and structure of the component. For example, the component attribute structure information can include the style size of the component, the position information of the component in the page, etc.

[0054] Component underlying data: It is the data of the data type that describes the underlying layer of the component in the component information.

[0055] Data type: The data type of the JSON data defined by JSON-SCHEMA.

[0056] Component format: It can be considered as the format of the pre-stored template components, and different component formats enable different functions of the components. The template components can be some relatively basic components set in advance.

[0057] Reference component data: It can be considered as the template data of the template components, and this template data is used to describe the component attributes of the template components.

[0058] Reference component: It can be considered as the rendered template component.

[0059] First event: The event corresponding to the conversion between components. For example, when component A is triggered and component B is displayed, it belongs to the first event.

[0060] Second event: The event corresponding to the triggering of a single component. For example, when component A is triggered, it can load data or submit the page, which belongs to the second event.

[0061] Event type: The event type of the second event, including loading type and submission type. Loading type events need to load data, and submission type events can directly submit information without loading data.

[0062] Nested type: A complex data type that nests simple sub - data types. For example, if an object - type data contains two string - type data, then the object type is a nested type.

[0063] Event Bus: An element in the vue framework used for centralized event handling. Vue is a progressive JavaScript framework for building user interfaces.

[0064] Next, a simple description of the application scenario of this application is given.

[0065] It should be noted that existing front - end page development, especially internal enterprise front - end pages, has the following characteristics: Most internal front - end pages are only used for data display and modification. The page structure is relatively simple and does not require redundant style decoration. Therefore, spending a lot of time developing such simple pages is likely to cause waste of manpower and material resources.

[0066] Generally, when facing such pages, there are mainly the following development solutions:

[0067] The first one: Allocate professional personnel to be responsible for development and maintenance. This solution is relatively flexible and can handle some complex pages at the same time. However, in terms of overall integrity, the technical content is low. Continuously writing such low - technical - content code is of no help to the improvement of developers' personal abilities. And when encountering pages with duplicate functions, developers still need to write from scratch, resulting in a high labor repetition rate.

[0068] The second one: Adopt the method of componentizing functions for maintenance. This method summarizes some commonalities of simple pages. For example, the table components required for data display and modification are separately extracted, and by using the method of passing parameters, only the data format needs to be standardized each time, which improves the reusability of the page. However, componentization also requires personnel development and does not fundamentally solve the problem. For pages with specific requirements, such as those that need to implement some complex functions, it may not be possible to achieve only through the above - mentioned method of standardizing data formats by passing parameters. Therefore, this method cannot meet specific requirements.

[0069] At the same time, these two methods also have a common problem: The integration of front - end pages is relatively high. To avoid affecting the use of other functions on the same page, the front - end needs to be released and updated periodically according to the version progress. Due to the standardization and fixity of the release time, the update cycle of a page takes a long time. For the modification of a simple function, it may take 2 - 3 days.

[0070] Therefore, this application provides a page access method that can solve the above problems. The specific implementation of this method can be seen in the following various embodiments.

[0071] In this application, a page access method is provided. This application also provides a client, a server, a page access system, a computing device, and a computer-readable storage medium, which will be described in detail one by one in the following embodiments.

[0072] Figure 1 It is a flowchart of a page access method applied to a client according to an embodiment of the present application, which specifically includes the following steps:

[0073] Step 102: Send a page access request to the server, and the page access request carries the page identifier of the page to be accessed.

[0074] Among them, the page identifier can be an identifier that can uniquely indicate a page. The page identifier can be a combination of any characters such as numbers, letters, and symbols.

[0075] Since the server pre-stores the page structure information of the page, which can be stored in the page table and the component table, therefore, after the client receives the user's access operation for the page to be accessed, it will send a page access request to the server to request the server to return the page structure information of the page to be accessed.

[0076] Further, before the step of sending the page access request to the server, it further includes: obtaining the page information and component information of the page to be configured generated after the user drags and selects components on the page to be configured; sending the page identifier, page information, and component information of the page to be configured to the server for corresponding storage in the page table and the component table.

[0077] In this embodiment, before the client sends a page access request to the server, the user can configure the page to be configured by dragging the components on the page to be configured displayed by the client. In order to obtain the latest page when accessing the page subsequently, the client can send the page information and component information of the page to be configured generated after the user drags and selects components on the page to be configured, as well as the page identifier of the page to be configured to the server. After the server obtains these information sent by the client, it can store the page identifier and page information correspondingly in the page table, and store the component identifier and component information in the page information correspondingly in the component table. Therefore, the client can send a page access request to the server, and the page access request carries the page identifier, and then the server can feedback the page information and component information of the page to be accessed to the client based on the page identifier.

[0078] In some embodiments, this solution applies the JSON-SCHEMA specification for JSON format attributes to the component specification. When generating page information and component information on the client, the page information and component information are simplified into JSON data and sent to the server for storage.

[0079] In this embodiment, the structure of a front-end page is not defined randomly. There are certain constraints and specifications. It is impossible to describe a complex page with dozens of components and CSS (Cascading Style Sheets) styles just by a simple key-value format. Moreover, most of the time, there are complex relationships such as nesting between components. At the same time, considering the problem of back-end storage, the data structure should also be efficient. The data structure in this embodiment uses a structure with specific rules to describe all the attributes of a page. Assuming that the page is composed of different components spliced and nested, the structure needs to include but is not limited to different fields such as component name, component attributes, data types within the component, data formats within the component, and component UI (User Interface) attributes. Assuming that an object is a component, in actual applications, there may also be a nesting relationship between components. Summarizing the above various characteristics, the existing specification of JSON-SCHEMA is selected to generate page information and component information.

[0080] For example, Table 1 shows the descriptions of some JSON-SCHEMA fields:

[0081] Table 1 Some JSON-SCHEMA fields

[0082]

[0083]

[0084] As can be seen from the above table, the syntax of JSON-SCHEMA itself already covers many rules required when generating a page. For example, when it is necessary to use code to generate a component that can be single-selected and multi-selected, the enum attribute can be directly used for specification. When submitting a form, the type field easily helps to constrain the type of the submitted data, and there is no need to write redundant code for verification.

[0085] As an example, the JSON data format corresponding to the page can be as follows:

[0086]

[0087]

[0088] As an example, during the process of configuring a page, after standardizing the JSON data describing the page, it is necessary to map the JSON data to the components rendered on the front end one by one. In view of the current situation that there are many existing front-end development frameworks and the rules are not easy to follow, this application extracts the core functional components and uses a configuration file to complete the mapping from the core components to the framework components. The core functional component is the input component that identifies the input box. There are also such components in native JavaScript. However, in actual applications, when using frameworks such as ElementUI and iView, the numerical characteristics of such frameworks may be different from those of the native ones (for example, there are more prop fields and properties can be defined faster. In terms of data processing, for example, the input number component of iView will process the undefined value as 0). Then the mapping from the core functional component to the framework component actually maintains a JavaScript file with a map inside, which can be modified to facilitate reuse in other frameworks.

[0089] This solution links the front-end page configuration and the back-end information storage, standardizes the page information and component information stored in the back-end using JSON-SCHEMA, dynamically generates a page on the front end according to requirements, achieves the effect of using a visual interface (low-code or even no-code), enabling the front-end page to achieve real-time editing, and sending the page information and component information of the edited front-end page to the server for storage in real time. In this way, there is no need for users to write a large amount of code, nor to follow the release cycle, and the page to be accessed displayed on the client is completely generated from the page structure information returned by the server. That is, each time the page is accessed, the page structure information sent by the back-end to the front-end is the latest. This can reduce the situation where the accessed page does not meet the access requirements, and the front end can dynamically generate a page according to requirements in real time, further avoiding the situation where the accessed page does not meet the access requirements, improving the user experience, and thus increasing user stickiness.

[0090] It should be noted that the front end described in this application can be a client, and the back end can be a server.

[0091] Step 104: Receive the page structure information of the page to be accessed returned by the server. The page structure information is obtained by the server based on the page identifier to query the page table and the component table. The page table records the corresponding relationship between the page identifier and the page information, and the component table records the corresponding relationship between the component identifier and the component information.

[0092] In this embodiment, the server stores a page table and a component table corresponding to pre-configured pages. The page table includes page information, and the component table includes component information. After receiving a page access request sent by the client, the server can look up the page information from the page table according to the page identifier carried in the page access request, then look up the component information according to the component identifier in the page information, and then send the page information and the component information as page structure information to the client. Then the client will receive the page structure information of the page to be accessed sent by the server.

[0093] As an example, the page information includes a content field, and the content field can be a component identifier. Alternatively, the content field may include the component identifiers of the components arranged in sequence in the page to be accessed.

[0094] In some embodiments, the page table includes a page identifier and page information, and the page identifier and the page information are corresponding. The page information may include the business type to which the page belongs, the component identifiers and order included in the page, page layout attributes, footer attributes, etc.

[0095] Exemplarily, referring to Table 2, Table 2 is an exemplary page table. For example, assume that the page identifier carried in the page access request is Page A. After the server receives the page access request, it can look up the page information corresponding to Page A from the page table, and the obtained page information includes Business Type A, the component identifiers and order included in Page A, Page Layout Attribute A, Footer Attribute A, etc.

[0096] Table 2 Page Table

[0097]

[0098] In some embodiments, the component table mainly describes component types, data formats, UI attributes, event information corresponding to the components, etc., and these information are corresponding to the component identifiers. Moreover, the event information corresponding to the components may include first event information between components and second event information of the components themselves. The first event information between components may carry the component identifier of the receiving component. The second event information of the components themselves includes the type of the second event.

[0099] Exemplarily, referring to Table 3, Table 3 is an exemplary component table. For example, assume that the server finds from the page table that the page information corresponding to Page A includes Component A and Component B. Then the server finds from the component table the component information corresponding to Component A, including component type A, style size A of the component, position A of the component in the page, data format A, UI attribute A, event information A corresponding to the component, etc., and the component information corresponding to Component B, including component type B, style size B of the component, position B of the component in the page, data format B, UI attribute B, event information B corresponding to the component, etc.

[0100] Table 3 Component Table

[0101]

[0102] In this embodiment, JSON data is a common data structure used in the interaction between the front end and the back end or the communication between back-end services. Many times, it is necessary to validate JSON data. For example, some fields with numerical values must be within a certain range (student ID must be greater than 0); the values of some fields must be within an enumerated range (network protocol: TCP or UDP); there must be a dependency relationship between two fields and they cannot exist independently (when submitting shopping information, the billing_address field is meaningful only when the credit_card field is filled). If these rules are customized in the user code, it will lead to bloated code, and different developers define the rules in different forms, which will also cause errors in the mutual judgment logic of the code. Therefore, this application uses the JSON-SCHEMA format for standardizing JSON validation to standardize page information and component information.

[0103] In the embodiment of this application, the page structure information can be data information in the JSON SCHEMA format, and the page information and component information can be JSON data. In this way, the stored information can be standardized, and the standardized storage is convenient for subsequent searching, that is, the efficiency of information searching is improved.

[0104] Step 106: Parse the page structure information to obtain the target page information and the target component information.

[0105] Among them, the target page information is the page information of the page to be accessed, and the target component information is the component information of the components in the page to be accessed.

[0106] According to the above steps, it can be seen that the page structure information is composed of page information and component information. Moreover, the page information in the page structure information can carry the identifier of the page information, and the component information can carry the identifier of the component information, so that the client can distinguish the page information and the component information in the page structure information according to the identifier of the page information and the identifier of the component information. That is, by parsing the page structure information, the target page information and the target component information corresponding to the page to be accessed can be obtained.

[0107] In implementation, in order to standardize the stored information, the page structure information of the present application can be data information in JSONSCHEMA format, and the target page information and the target component information are JSON data.

[0108] That is to say, when the client configures the page, both the component information and the page information of the configured page generated by the user dragging the component are JSON data. Then the page structure information stored on the server is data information in JSON SCHEMA format. In this way, the stored information can be standardized, and the standardized storage is convenient for parsing and processing, that is, the efficiency of information parsing is improved.

[0109] The page structure information in the embodiments of the present application can be understood as a data structure, and parsing the page structure information is to parse the data structure. The data structure can include target page information and target component information. First, determine the fields describing the page and the fields describing the component in the data structure, and then determine the page information according to the fields describing the page and determine the component information according to the fields describing the component. In this way, the page information and the component information can be determined.

[0110] Exemplarily, the data structure can be a JSON SCHEMA structure, the field describing the page can be page_name, and the field describing the component can be component n.

[0111] For example, assume the page structure information is as follows:

[0112]

[0113] It is possible to first determine the field page_name describing the page, the fields component1 and component2 describing the component, and then determine the fields between page_name and component1 (including page_name) as the page information, determine the fields between component1 and component2 (including component1) as the component information of component 1, and determine the fields after component2 (including component2) as the component information of component 2. In this way, the target page information and the target component information can be parsed.

[0114] Step 108: Render the page to be accessed based on the target page information and the target component information.

[0115] In this embodiment, the target page information includes information such as the page structure or layout, and the target component information includes component attribute information and underlying component data. First, the page structure can be rendered according to the target page information, then the reference component data can be determined based on the underlying component data, and then the first reference component including the underlying data can be rendered in the rendered page structure. Finally, the first reference component can be adjusted according to the component attribute information, and thus the page to be accessed can be obtained.

[0116] As an example, after parsing the target page information and the target component information through the parsing method of the present application, the target page information and the target component information can be used as parameters for page rendering, and the page to be accessed can be rendered through existing rendering tools.

[0117] In practical applications, the target component information may include component attribute structure information and underlying component data. The specific implementation of the step of rendering the page to be accessed based on the target page information and the target component information may include: rendering the page structure of the page to be accessed based on the target page information; determining the first data type of the underlying component data according to the underlying component data; determining the first component format corresponding to the first data type according to the first data type; determining the first reference component data corresponding to the first component format based on the first component format; rendering the first reference component and the underlying component data of the first reference component in the page to be accessed in the rendered page structure according to the first data type and the first reference component data; adjusting the rendered first reference component according to the component attribute structure information.

[0118] In the embodiment of the present application, the component attribute structure information may be information used to adjust the attributes of the component in the View component layer, the data type may be the type of data processed in the field layer, and the component format may be the format of the template component in the Widget layer.

[0119] As an example, the component attribute structure information is used to describe the information about the structure and attributes of the component. Exemplarily, the component attribute structure information may include the component type, the style size of the component, the position of the component in the page, the UI attributes of the component, the event information corresponding to the component, etc. The underlying component data may be the underlying data required when rendering the component.

[0120] In some embodiments, the target page information may include the business type and page layout attributes of the page to be accessed. The client can determine the page framework corresponding to the page to be accessed according to the business type of the page to be accessed, and then determine the function of each area in the page framework according to the page layout attributes, and render the page structure of the page to be accessed.

[0121] Exemplarily, referring to Figure 2 , Figure 2 is a schematic diagram of a page to be accessed provided by an embodiment of the present application. In Figure 2 the page, the left part is the area of the drag-and-drop component toolbar, which includes layout components, basic components, and single / multiple selection components. The middle part is the page display area, and the right part is the area for configuring the attributes of the page and components, which includes two parts: page configuration and component configuration. Figure 2 Currently shown are the attributes 1, 2, 3, and 4 included in the component configuration.

[0122] In a possible implementation, the field layer mainly processes the data types of the underlying data of the components, such as number, string, boolean values, etc. At this stage, the underlying data of the components can be disassembled from the target component information according to the data type to obtain the underlying data of the components in simple types.

[0123] In another possible implementation, the step of determining the first data type of the underlying data of the component according to the underlying data of the component includes: identifying whether the underlying data of the component is nested data; if so, disassembling the underlying data of the component in a recursive disassembly manner to obtain multiple sub-data; determining the first data type of the multiple sub-data.

[0124] Since for nested data, errors may occur when disassembling by a simple disassembly method, therefore, the data type of the underlying data of the component can be identified first. If the data is nested data, the underlying data of the component can be disassembled in a recursive disassembly manner to obtain multiple sub-data, and then the first data type of each sub-data can be determined.

[0125] As an example, the nested data type can be a data type including sub-data types. For example, the nested data type can be object or array, and these two data types may include simple types such as number, string, boolean, etc.

[0126] Exemplarily, assume that the data structure of the submitted underlying data of the component is as follows:

[0127]

[0128] Among them, username is a field of a simple data type, and its data type is string. While address is an object type field that contains two string type fields. One cannot perceive the content type from the address field itself. Therefore, when disassembling the address field, it needs to be recursively disassembled in the same way as when disassembling the info field, and disassembled into the data structure shown below:

[0129]

[0130] As an example, see Figure 3a , Figure 3a which is a schematic diagram of disassembling the underlying data of a component provided by an embodiment of the present application. In Figure 3a , first determine the data type of the underlying data of the component through the data type processing layer (field), including several data types such as array (matrix type), boolean (Boolean logic type), integer (integer type), number (numeric type), object (object type), and string (string type). Since the two data types of array and boolean are nested types, the underlying data of the component is disassembled in a recursive disassembly manner. For the underlying data of components of other data types, their data types can be determined as the first data type.

[0131] In the embodiments of the present application, for the nested underlying data of the component, the nested underlying data of the component is disassembled by a recursive disassembly method, and then the first data type of the underlying data of the component is determined, so that sub-data of a simple type can be disassembled, and the data type is determined based on the sub-data, which improves the accuracy of determining the data type.

[0132] In some embodiments, the client can pre-store a first mapping relationship table of data types and component formats, and a second mapping relationship table of component formats and reference component data. Alternatively, the first mapping relationship table and the second mapping relationship table can be stored in the server and sent to the client. Therefore, after determining the data type of the underlying data of the component, the first component format corresponding to the first data type can be found from the first mapping relationship table according to the first data type, and then the first reference component data corresponding to the first component format can be found from the second mapping relationship table. Then, according to the first data type and the first reference component data, the first reference component and the underlying data of the first reference component in the page to be accessed are rendered in the rendered page structure.

[0133] As an example, the relationship between data types and component formats is not one-to-one. For example, for the multi-selection box, time information, or text input box displayed on the front end, the data types corresponding to their underlying data are all string, but they respectively correspond to different external display forms. The specific mapping relationship can be seen in Table 4, which is an exemplary first mapping relationship table.

[0134] Table 4 First Mapping Relationship Table

[0135]

[0136]

[0137] As can be seen from Table 4, for the components with the three component formats of checkbox, time range, and multi-selection box, the data types of their underlying data are all Array, and for the components with the two component formats of digital timestamp and digital input box, the data types of their underlying data are both Number / Integer.

[0138] Exemplarily, see Figure 3a in Figure 3a after determining the data types of the underlying data of the component, namely integer (integer type), number (numeric type), object (object type), string (string type), the component format corresponding to this data type can be determined. Or rather, the component format corresponding to the data type is determined at the widget layer.

[0139] As an example, the reference component data can include the template data of the components of this component format. For example, the external display form of the radio button type component is a square box with a border, the external display form of the search box type component is a rounded rectangle box without a border, and the external display form of the toggle box type component is a cubic box. And the component format and the reference component data can be in a one-to-one correspondence, or one component format can correspond to multiple reference component data. In the case where one component format corresponds to multiple reference component data, any one of them can be selected as the first reference component data. See Table 5, which is an exemplary second mapping relationship table.

[0140] Table 5 Second Mapping Relationship Table

[0141] Widget Reference component data Select Reference component data 1 DateTime Reference component data 2, Reference component data 3 Input Reference component data 4

[0142] As can be seen from Table 5, the radio button corresponds to one reference component data, namely reference component data 1, and the toggle box corresponds to two reference component data, namely reference component data 2.

[0143] In a possible implementation, since in the first mapping relationship table, the data type and the component format are not in a one-to-one correspondence, based on the data type, multiple component formats may be determined. In this case, the first component format can be determined from the multiple component formats according to the component type in the component attribute structure information, and then the reference component data corresponding to the first component format is determined. If there are multiple pieces of reference component data corresponding to the first component format, one can be randomly selected or selected according to a preset rule as the first reference component data.

[0144] Exemplarily, assume that the first data type is String. The first component formats found from the first mapping relationship table according to this first data type include a text timestamp, a radio box, and an input box. Obtain the component type in the component attribute structure information. Assume that the component type includes a radio type. Then, the radio box can be used as the first component format, and then the first reference component data corresponding to the radio box, that is, reference component data 1, is found from the second mapping table. Based on the first data type String and the reference component data 1, the reference component data and the first data type String are rendered in the rendered page structure, and then a radio box component can be obtained.

[0145] In some embodiments, the first reference component obtained by rendering does not have an attribute structure set, or its attribute structure is the attribute structure of a default template component. Therefore, the first reference component after rendering can be adjusted according to the component attribute structure information.

[0146] As an example, the component attribute structure information may include the style size of the component and the position of the component on the page. The style size of the first reference component can be adjusted according to the style size of the component, and the first reference component is adjusted to the position of the component on the page. In this way, the adjusted first reference component can be obtained, and by rendering the adjusted first reference component into the page structure of the page to be accessed, the page to be accessed can be obtained.

[0147] Exemplarily, after determining the component format, the first reference component data corresponding to the component format can be determined, and then the first reference component is rendered in the page structure based on the first data type and the first reference component data. Refer to Figure 3a and then the rendered first reference component is adjusted according to the component attribute structure information in the view component layer.

[0148] It should be noted that the page to be accessed can be rendered through the above description, and the page access method of the present application is implemented. However, a front-end page can include three parts: data (which data to display) + format (how to layout and display, whether it is a table or a chart, etc.) + interaction (for example, clicking a button has an interaction feedback). Component information can include the underlying data of the component, and page information can include the format of the page. However, if the page to be accessed can include UI interaction functions, then the page to be accessed includes components with UI functions. When a component with UI functions is triggered, its corresponding event will be triggered. Events are an important part of the front-end page. Form submission, data loading, etc. all require events to trigger. Therefore, in the embodiments of the present application, the target component information of the component can further include the event information corresponding to the component. The event can include the first event information between components and the second event information of the component itself. The first event information may be to trigger the first component and then jump to display the second component. The second event may be to trigger the first component to display some information or submit page information. In this case, the triggered event needs to be rendered when rendering the component. It can be seen that different types of events being triggered will also affect the page to be accessed rendered. Therefore, the process of rendering the page to be accessed when different types of events are triggered will be introduced next.

[0149] In a possible implementation manner, the method further includes: when it is recognized that the first event between the initiating component and the receiving component is triggered, read the first event information from the target component information according to the component identifiers of the initiating component and the receiving component; render the event process of the first event according to the first event information.

[0150] In specific implementation, the target component information corresponds to the component identifier, and the first event information included in the target component information corresponds to the component identifier. The corresponding component identifier is the component identifier of the initiating component. To clarify which component the first event is between the initiating component and, the first event can also carry the component identifier of the receiving component. In this way, it can be determined that the first event is generated with its corresponding component as the initiating component and the component corresponding to the component identifier it carries as the receiving component.

[0151] In some embodiments, if the initiating component is triggered, it can be considered that the first event between the initiating component and the receiving component is triggered. The component identifiers of the initiating component and the receiving component can be obtained. First, the target component information corresponding to the component identifier of the initiating component is determined. Since one component may correspond to multiple first events and different first events are for different receiving components, the first event information can be obtained from the target component information according to the component identifier of the receiving component, and then the event process of the first event is rendered according to the first event information. The rendered page to be accessed includes the switching process of the initiating component and the receiving component when the first event is triggered.

[0152] As an example, the initiating component is the component that is triggered, the first event trigger data is the event data obtained when the initiating component is triggered, the receiving component is the component displayed after the first event is triggered, and the first event generated data is the event data generated based on the first event trigger data after the initiating component is triggered. Then, the initiating component is the source of the first event trigger data, and the receiving component is the recipient of the first event generated data.

[0153] In the embodiments of the present application, to facilitate event recording in the widget layer, it can be restricted that within the page described by the JSON structure, all event triggers are completed by button components. For example, assume that the initiating component is a button component. When the button component is triggered, information such as query parameters (i.e., the first event trigger data) can be obtained, and the data generated based on information such as query parameters (i.e., the first event generated data) is transmitted to the receiving component for display.

[0154] As an example, precisely because when configuring the page, the client registers global events for each component in the widget layer and sends the global events to the server for storage as component information. Therefore, when rendering the page to be accessed according to the target page information and target component information from the server, whenever the first event is triggered, the button component sends a message with the component identifier of the receiving component to the global Event Bus. The global Event Bus will find the receiving component in the registered component list according to the component identifier of the receiving component, and obtain the result of the first event (i.e., the first event generated data) from the target component information according to the component identifier of the initiating component and the component identifier of the receiving component. The receiving component is rendered in real time based on the result of the first event, and then the updated receiving component can be obtained. The received first event generated data can be displayed in the receiving component, thus completing an event interaction.

[0155] When the above solution detects the triggering of the first event between components, it renders the event process of the first event between components, achieving the effect of adjusting the page in real time according to requirements, without waiting for the layout cycle or writing redundant and repetitive code, thus improving the flexibility of page generation.

[0156] In another possible implementation, the method further includes:

[0157] When detecting the triggering of the second event of a preset component, according to the component identifier of the preset component, read the second event information from the target component information; according to the second event information, identify the event type of the second event; if the event type is a loading type, send a data acquisition request to the server, where the data acquisition request is used to trigger the server to acquire the data to be loaded according to the data acquisition request; according to the data to be loaded, determine the second data type of the data to be loaded; according to the second data type, determine the second component format corresponding to the second data type; based on the second component format, determine the second reference component data corresponding to the second component format; according to the second data type and the second reference component data, in the rendered page structure, render the second reference component and the data to be loaded of the second reference component in the page to be accessed; according to the component attribute structure information, adjust the rendered second reference component.

[0158] Among them, the preset component can be the component that triggers the second event. For example, the preset component can be a button component. An event of the loading type means that after the second event is triggered, the data to be loaded will be loaded. For example, an event of the loading type can be to obtain a complex data structure from the server according to the problem data and display it on the page.

[0159] In a specific implementation, the target component information corresponds to the component identifier, so the second event information included in the target component information corresponds to the component identifier, and the second event information carries the event type. Therefore, when detecting the triggering of the second event of the preset component, the second event information can be obtained from the target component information according to the component identifier of the preset component, and the event type carried by the second event information is judged. If the event type is a loading type, a data acquisition request needs to be sent to the server to request the server to send the data to be loaded. The data acquisition request can carry URL (Uniform Resource Locator) information, and the server can obtain the data to be loaded based on this URL information, and the data to be loaded can be stored in the server in the form of key-value. Therefore, the data to be loaded received by the client can be data in key-value form. Since the data to be loaded is displayed in a component on the page, the second reference component can be rendered based on the data to be loaded.

[0160] Further, after receiving the data to be loaded, the client can store the data to be loaded in the field layer and verify the data to be loaded through the field layer. If the verification is successful, the data to be loaded can be sent to the widget layer for subsequent component rendering; if the verification fails, "error information" can be displayed on the page, and the "error information" can be displayed in the form of a pop-up box.

[0161] In some embodiments, the second component format corresponding to the second data type can be found from the first mapping table, and then the second reference data corresponding to the second component format can be found from the second mapping table. Then, based on the second data type and the second reference component data, the second reference component and the data to be loaded of the second reference component are rendered in the rendered page structure, and moreover, the rendered second reference component is adjusted according to the component attribute structure information to obtain the second reference component for displaying the data to be loaded.

[0162] For example, refer to Figure 3b , Figure 3b which is a schematic diagram of an operation executed after a trigger event provided by an embodiment of the present application. In Figure 3b , the data type processing layer field disassembles data of nested types (such as array or object types) into data of simple types in a recursive disassembling manner and determines the data type. For data of non-nested types (such as non-array and non-object types), it is disassembled according to the data type. The data type is sent to the widget layer. The widget is a layer outside the data type processing layer field. The field is the layer mainly processing underlying data, and the widget is mainly used to process events / formats / UI, etc. If the preset component is a button component, when the second event of the button component is triggered, the button component will send the component identifier and the second event information to the global event bus (Event Bus). The global Event Bus will determine the data to be loaded of the component corresponding to the component identifier in the component information, send the data to be loaded to the button component, and after receiving the data to be loaded, the button component updates its own view and renders the data to be loaded on the button component.

[0163] It should be noted that the process of rendering the second reference component for displaying the data to be loaded is the same as the process of rendering the first reference component described above. For specific implementation, reference can be made to the above relevant description, and this embodiment will not be elaborated herein.

[0164] In some other embodiments, after determining the data type of the data to be loaded, if the data type is a submission type, the data input in the preset component can be obtained and assembled into a data structure, which is then submitted to the server to complete a series of operations. As an example, if the data type of the data to be loaded is a submission type, the page information and component information of the page to be accessed can be submitted to the server, and the client can display a "submission completed" message, which can be displayed in the form of a pop-up box.

[0165] When the above method recognizes that the second event of the component is triggered, the event result of the second event can be rendered, achieving the effect of adjusting the page in real time according to the operation, without waiting for the layout cycle and without writing redundant and repetitive code, improving the flexibility of page generation.

[0166] In the embodiments of the present application, the view component layer can be used to define a structure that can describe all the attributes of the component and is responsible for passing values from the front-end configuration page to JSON data. Therefore, during the generation process of a front-end page, all the information related to the component (i.e., component information) is received through the view component layer that can be interactively modified in real time. In the widget layer, the corresponding component is rendered according to the component information, and events are added. Finally, the type of the actual data inside this component is defined in the field layer.

[0167] It should be noted that through the above description, the page access method of the present application can already be implemented to obtain the page to be accessed. However, in this solution, since the page can be generated through visual operations on the front end, after generating the page to be accessed, if it is necessary to update a certain component in the page to be accessed or add a component to the page to be accessed, an update operation can be performed, and the updated component information and page information are fed back to the server so that the server can store the latest page structure information, and thus the latest page that meets the access requirements can be obtained when accessing the page later.

[0168] Therefore, after the step of rendering the page to be accessed based on the target page information and target component information, it further includes:

[0169] In the case of receiving an update request for the page to be accessed, display the editing page corresponding to the page to be accessed; receive the component editing information input on the editing page; according to the component editing information, update the component information of the page to be accessed, and send the updated component information to the server, where the updated component information is used by the server to update the page table and component table.

[0170] That is to say, if the page to be accessed needs to be updated, the corresponding edit page of the page to be accessed can be displayed first, and then the component edit information input by the user through the client on the edit page can be received. The component information of the page to be accessed can be updated according to the component edit information, and the updated component information can be sent to the server, so that the server can update the page table and the component table according to the updated component information.

[0171] As an example, after the page to be accessed is rendered, the client will display the page to be accessed to the user. If you want to modify the function of the page to be accessed, you can trigger the edit control in the page to be accessed. Then the client will receive an update request for the page to be accessed. In response to the update request, the client can display the component edit page. The user inputs the component edit information on the component edit page. Then the client updates the component information of the page to be accessed according to the component edit information. Then the information of the page to be accessed has changed. To ensure the synchronization of the client page editing and the server information storage, the updated component information needs to be sent to the server. Then the server can update the page table and the component table according to the updated component information, so that the information stored on the server related to the page to be accessed is all the latest, and the latest page can be displayed when accessing the page.

[0172] By the above method, when the requirement changes, the page to be accessed can be immediately re-edited, that is, the page to be accessed can be updated in real time, shortening the page update cycle and improving the page update efficiency. And the updated component information is sent to the server for storage, so the information stored on the server can also be updated in real time. Therefore, after receiving the page access request subsequently, the page to be accessed generated according to the page structure information returned by the server must also be the updated page, meeting the access requirements.

[0173] In some embodiments, the step of updating the component information of the page to be accessed according to the component edit information includes:

[0174] Identifying the component edit type according to the component identifier carried in the component edit information; in the case where the component edit type is to update the component, updating the component information corresponding to the updated component in the component information of the page to be accessed according to the component update information carried in the component edit information; in the case where the component edit type is to add a component, adding the component information of the added component to the component information of the page to be accessed.

[0175] That is to say, the component editing type can be determined first according to the component identifier in the component editing information. If the component editing type is to update the component, then the existing component (updated component) on the page to be accessed is updated, and the component information of the updated component can be modified to the component update information carried by the component editing information. If the component editing type is to add a component, then the new component can be added to the page to be accessed by dragging the component, and the component information of the new component can be added to the component information of the page to be accessed.

[0176] As an example, the component editing information can carry a component identifier. If the component identifier exists in the page information of the page to be accessed, it means that this update is to update the existing component on the page to be accessed, that is, the component editing type can be determined to be to update the component. If the component identifier does not exist in the page information of the page to be accessed, it means that this update is to add a new component to the page to be accessed, that is, the component editing type can be determined to be to add a component.

[0177] In the case where the component editing type is to update the component, the component information of the updated component in the component information of the page to be accessed can be determined first, and then the component information of the updated component can be modified to the component update information. In the case where the component editing type is to add a component, the component update information can be added as the component information of the new component to the component information of the page to be accessed.

[0178] By the above method, the component information of the page to be accessed is updated by different methods according to the component editing type, which can realize the update of the components on the page to be accessed, without writing code and with stronger real-time performance.

[0179] In this application, custom components that can be described by available JSON data are written on the client side, and the process of generating page JSON is visualized as the dragging and splicing of components. Developers can intuitively combine the desired page through simple drag-and-drop operations without code, and at the same time realize the splicing and nesting of JSON data. Moreover, since the generation of the page to be accessed in this application completely depends on the page structure information of the server side, and this page structure information can be changed and stored in real time during the process of configuring the page on the client side, the problem of long release cycle of the front-end page in the prior art is solved, and the real-time modification of the front-end page is truly achieved.

[0180] The page access method applied to the client provided by the embodiment of the present application sends a page access request to the server, and the page access request carries the page identifier of the page to be accessed; receives the page structure information of the page to be accessed returned by the server, and the page structure information is obtained by the server based on the page identifier to search the page table and the component table. The page table records the corresponding relationship between the page identifier and the page information, and the component table records the corresponding relationship between the component identifier and the component information; parses the page structure information to obtain the target page information and the target component information; based on the target page information and the target component information, renders the page to be accessed. The above method links the page display of the client and the information storage of the server. When accessing a page, the client can obtain the page information and component information from the server, and generate the page to be accessed according to the page information and component information, without waiting for the version update time to update the page following the release cycle, and can update the page in real time according to the requirements, so that the page displayed after page access meets the access requirements, improves the user experience, and further increases user stickiness.

[0181] Figure 4 It is a flowchart of a page access method applied to a server according to an embodiment of the present application, and specifically may include the following steps:

[0182] Step 402: Receive a page access request sent by the client, and the page access request carries the page identifier of the page to be accessed.

[0183] In this embodiment, when accessing a page, the server will receive a page access request from the client, and the page access request carries the page identifier of the page to be accessed. Then the server can obtain the information related to the page to be accessed based on the page identifier. That is, the server can pre-store the page information and component information of the configured page.

[0184] Therefore, before the step of receiving the page access request sent by the client, the method further includes:

[0185] Receive the page identifier, page information, and component information of the page to be configured sent by the client. Among them, the page information and component information of the page to be configured are generated after the client obtains that the user drags and selects components on the page to be configured. The page information includes the component identifiers of the dragged and selected components; record the page identifier and page information of the page to be configured in the pre-created page table in a corresponding record manner; record the component identifier of the dragged and selected component and the component information of the page to be configured in the pre-created component table in a corresponding record manner.

[0186] Among them, the page to be configured is the page that needs to be configured and is displayed on the client side. The page identifier can be used to uniquely identify the page to be configured. The page information may include information such as the business type, layout attributes, component identifier, and order of the page to be configured. The component information may include information such as the structure and configuration of the components displayed on the page to be configured. Moreover, the page identifier corresponds to the page information, and the component identifier corresponds to the component information.

[0187] In some embodiments, the page to be configured is displayed on the client side, and the configuration of the page to be configured is achieved by the user dragging components, realizing the function of dynamic configuration of the front-end page. To store it so that it can be continuously displayed when accessing the page next time, or to be modified when the requirements change to achieve true dynamic update, the cooperation of the back-end is also required. Therefore, when dragging and selecting a component to the page display area, the component identifier of the dragged and selected component can be obtained, the component information of the component can be obtained based on the component identifier, and the component identifier of the dragged and selected component, the position information and order of the dragged and selected component in the page to be configured, etc. are added to the page information of the page to be configured, and the page information, component information, and page identifier are sent to the server. Then, the server can store the page identifier and page information correspondingly in a pre-created page table, and store the component identifier and component information of the dragged and selected component correspondingly in a pre-created component table.

[0188] For example, referring to Figure 2 , the user can configure the page to be configured by dragging the layout component of the component toolbar of the page to be configured to the page display area.

[0189] Furthermore, after configuring the page to be configured, the client will also set the global events for each component and record the event information of the global events in the component information of the corresponding component. Moreover, the global events include a first event and a second event. The detailed descriptions of the first event and the second event can refer to the relevant descriptions in the above embodiments.

[0190] In the embodiments of the present application, the page to be configured on the client is configured by dragging and selecting components, and the page information of the page to be configured is stored in the page table of the server, and the component information of the page to be configured is stored in the component table of the server. Then, the server can record all the information related to the page to be configured, so that when accessing the page, the stored page information and component information can be fed back to the client, and the client can display the page. Moreover, each time the client configures the page to be configured, the server will store the page information and component information, that is, all the information related to the page to be configured can be stored in a timely manner.

[0191] Step 404: According to the page identifier, look up the target page information corresponding to the page to be accessed in the page table. The page table records the correspondence between the page identifier and the page information, and the page information includes the component identifier.

[0192] In some embodiments, the page table includes the correspondence between the page identifier and the page information. Exemplarily, referring to Table 2, according to the page identifier, the page information corresponding to the page identifier can be looked up in the page table, and the found page information is determined as the target page information corresponding to the page to be accessed.

[0193] For example, the found target page information is as follows:

[0194]

[0195]

[0196] Among them, page_name can represent the page name, id can represent the page identifier, content includes the component identifiers of the components arranged in sequence on the page, and order includes the sequence of the components.

[0197] Step 406: Read the target component identifier in the target page information. According to the target component identifier, look up the target component information corresponding to the target component identifier in the component table. The component table records the correspondence between the component identifier and the component information.

[0198] In some embodiments, the component identifier is recorded in the page information, and the component table includes the correspondence between the component identifier and the component information. Exemplarily, the page information includes a content field, and the component identifiers of the components displayed on the page are recorded in sequence in this content field. Exemplarily, referring to Table 2 and Table 3, the target component identifier is obtained from the target page information, and then the component information corresponding to the component identifier is looked up in the component table, and the found component information is determined as the target component information corresponding to the component identifier.

[0199] For example, the target component information corresponding to component 1 is obtained from the component table (component table) as follows:

[0200]

[0201] Among them, component_name represents the component name, and width represents the width of the component.

[0202] Step 408: Concatenate the target page information and the target component information to obtain the page structure information, and return the page structure information to the client. The page structure information is used for the client to render the page to be accessed.

[0203] For example, the target page information and the obtained target component information are concatenated to obtain the page structure information as follows:

[0204]

[0205]

[0206] It should be noted that through the above steps, the server can obtain the page structure information of the page to be accessed, and then return the page structure information to the client. The client disassembles and renders the page structure information according to the method provided in the corresponding embodiment, and then the page to be accessed can be obtained. Figure 1 The corresponding embodiment provides a method for disassembling and rendering the page structure information, and the page to be accessed can be obtained.

[0207] During the process of the client displaying the page to be accessed, the page to be accessed can be updated in real time, that is, the page information and / or component information of the page to be accessed are modified, and after the modification, the changed page information and / or component information are sent to the server. Therefore, the server will receive the updated component information, and update the stored page table and component table based on the updated component information.

[0208] Furthermore, the method further includes: if the updated component information of the target component sent by the client is received, then according to the component identifier of the target component, the component information corresponding to the component identifier of the target component in the component table is updated to the updated component information.

[0209] In a specific implementation, the target component may be an existing component in the page or a newly added component. Different ways of updating the component information may be adopted for the existing component and the newly added component.

[0210] In some embodiments, if the target component is an existing component in the page, therefore, the component information of the target component can be found from the component table based on the component identifier, and the component information of the target component is modified to the updated component information.

[0211] In other embodiments, if the target component is a newly added component in the page, therefore, the component identifier of the target component and the updated component information can be stored in the component table in a corresponding form to update the component table.

[0212] As an example, the updated component information may further include the position information of the target component in the page, then the server can store the component identifier of the target component in the page information of the page according to the position information of the target component in the page to update the page table.

[0213] In the embodiments of the present application, every time the client makes any update to the page, it can promptly inform the server, and the server can promptly update the page table and the component table, achieving the effect of real-time dynamic page update.

[0214] It should be noted that for the implementation manners not described in this embodiment, reference may be made to the relevant descriptions of the above embodiments.

[0215] The page access method applied to the server provided by the embodiments of the present application receives a page access request sent by the client. The page access request carries the page identifier of the page to be accessed. According to the page identifier, the target page information corresponding to the page to be accessed is found from the page table. The page table records the corresponding relationship between the page identifier and the page information, and the page information includes the component identifier. The target component identifier in the target page information is read, and according to the target component identifier, the target component information corresponding to the target component identifier is found from the component table. The component table records the corresponding relationship between the component identifier and the component information. After the client configures the page by dragging components, the page information and the component information are sent to the server for storage, realizing the linkage between the page configuration of the client and the information storage of the server. When accessing the page, the server obtains the page information from the page table and the component information from the component table according to the page access request of the client, and returns them to the client, so that the client can generate the page to be accessed according to the page information and the component information. There is no need to wait until the version update time to update the page following the release cycle. The page can be updated in real time according to the requirements, so that the page displayed after page access meets the access requirements. Moreover, any update made by the client to the page can notify the server to update in time, achieving the effect of real-time dynamic page update, and ensuring that the page obtained each time is the latest configured page, improving the user experience and thus increasing user stickiness.

[0216] Figure 5 It is a schematic diagram of a page access method according to an embodiment of the present application. Taking accessing page X as an example, the specific implementation process of this method is as follows:

[0217] The user accesses page X through the client, then the client generates a page access request and sends it to the server to request the page structure information. The page access request includes the page ID of page X. The server obtains the page information of page X from the page table (page table) based on the page ID. The page information includes a content field, and the content field includes component identifiers arranged in sequence. According to the component identifiers in the page information, the component information of the components displayed in page X is found from the component table. The server splices the component information and the page information into complete page structure information and returns it to the client.

[0218] The client receives the page structure information sent by the server, disassembles the page structure information, and obtains the disassembled schema fields. The schema fields include page information, component attribute structure information, and component underlying data. Then, it starts to render the page structure of page X based on the page information in the schema fields. Since global events are set for each component when configuring page X, the global events include a first event and a second event, and the second event includes a loading type event. If the loading type second event is triggered, the data to be loaded needs to be obtained and rendered on the corresponding component. Therefore, before rendering the components in page X, it is necessary to determine whether to load the data to be loaded.

[0219] Since the second event is usually the event corresponding to the button component, if the button component is triggered, the second event information corresponding to the button component can be obtained, and the event type of the second event can be determined according to the second event information. When the second event is of the loading type, it is considered that the data to be loaded needs to be loaded. That is, if so, the client sends a data acquisition request carrying the URL link to the server, and the server obtains the data to be loaded based on the URL link. The data to be loaded is stored in the server in the key-value form, and the server sends the data to be loaded in the key-value form to the field layer of the client. The client verifies the data to be loaded, for example, it can be verified through a preset verification algorithm. If the verification fails, an error message can be popped up, such as displaying "Error message" in a pop-up box, indicating that the obtained data to be loaded is incorrect. The user can choose to continue triggering the button component to re-obtain the data to be loaded, or stop triggering the button component. If the verification is successful, the client sends the data to be loaded to the Widget layer. In the Widget layer, the reference component and the component underlying data of the reference component in the page to be accessed are rendered. Specifically, in the Widget layer, according to the data type of the component underlying data in the schema fields, the component format is determined from the first mapping relationship table, and then the reference component data is determined from the second mapping relationship table according to the component format. Then, according to the data type and the reference component data, the reference component and the component underlying data of the reference component in the page to be accessed are rendered in the rendered page structure, and then enter the view layer, and the rendered reference component is adjusted based on the component attribute structure information to enrich other configuration information of the reference component, such as length, whether it is editable, etc., and page X is rendered.

[0220] After rendering, if the functions of page X need to be changed due to changed requirements, page X can be updated. Therefore, after rendering, it can be determined whether the requirements have changed. In a specific implementation, if the requirements have not changed, it means that the rendering is completed; if you want to modify the functions of page X, you can trigger the editing control displayed on page X, and the client will receive an update request for page X, which can be considered that the requirements have changed. That is, if so, the client displays an editing page, and this editing page can display the component information of all components in page X. The user can enter component editing information carrying component identifiers on the editing page, determine the component editing type according to the component identifiers. If the component editing type is to update a component, such as updating an existing component A, the component information corresponding to the updated component A can be modified to the component update information carried by this component editing information. That is, in the form representing component information in the view layer, the component information of the updated component A is modified to the component update information; if the component editing type is to add a component, the newly added component can be dragged from the component table recorded by the client to the corresponding position in the page display area, and the component information of the newly added component is added to the form representing component information in the view layer. After updating the component is completed, the new page information and component information are saved, and the new page information and component information are sent to the server so that the server can update the page table and component table it stores. Therefore, when reloading and entering page X, since the information stored by the server has been updated, the obtained front-end page X will be updated in real time and display the updated page.

[0221] For example, before adding a component, assume that page X includes component 1 (component 1) and component 2 (component 2). After adding component 3 (component 3), page X includes component 1, component 2, and component 3, then the page information changes, and the component information in the component table also adds the component information of component 3.

[0222] The component information of this component 1 includes:

[0223] "id:1,

[0224] component_type:string,

[0225] component_name:'comp1',

[0226] component_title:'Test component 1',

[0227] options:{}"

[0228] The component information of this component 2 includes:

[0229] "id:2,

[0230] component_type: string,

[0231] component_name: 'comp2',

[0232] component_title: 'Test Component 2',

[0233] options: {}”

[0234] The page information of page X is as follows:

[0235] “page_id: 0,

[0236] page_name: example,

[0237] page_content: comp1 comp2”

[0238] After adding component 3, the component information of this component 3 includes:

[0239] “id: 3,

[0240] component_type: string,

[0241] component_name: 'comp3',

[0242] component_title: 'Test Component 3',

[0243] options: {}”

[0244] After adding component 3, the new page information is as follows:

[0245] “page_id: 0,

[0246] page_name: example,

[0247] page_content: comp1 comp2 comp3”

[0248] Among them, id can represent the component identifier, component_type can represent the underlying data type of the component, component_name can represent the component name, component_title can represent the component title, page_id: can represent the page identifier, page_name can represent the page name, and page_content can represent the component names of the components displayed on the page.

[0249] In the embodiments of the present application, when accessing a page, as long as the page is entered through the client, a request for the page structure information of the page will be sent to the server. A page is generated according to the page structure information returned by the server. If a new component is added to the client, the component information of the new component and the page information after the page is updated can be sent to the server. Therefore, when the page is accessed next time, the page displayed by the client is a page including the new component. In this way, the page configuration of the client can be linked with the information storage of the server. When accessing a page, the client can obtain the page information and component information from the server, and generate the page to be accessed according to the page information and component information, without waiting until the version update time to update the page following the release cycle. The page can be updated in real time according to the requirements, so that the page displayed after the page is accessed meets the access requirements, improving the user experience and further increasing user stickiness.

[0250] Corresponding to Figure 1 the method embodiments, the present application also provides client embodiments. Figure 6 FIG. Figure 6 is a schematic structural diagram of a client according to an embodiment of the present application. As

[0251] shown, the client includes:

[0252] A sending module 602, configured to send a page access request to the server, where the page access request carries the page identifier of the page to be accessed;

[0253] A first receiving module 604, configured to receive the page structure information of the page to be accessed returned by the server, where the page structure information is obtained by the server based on the page identifier by looking up a page table and a component table. The page table records the corresponding relationship between the page identifier and the page information, and the component table records the corresponding relationship between the component identifier and the component information;

[0253] A parsing module 606, configured to parse the page structure information to obtain target page information and target component information;

[0254] A rendering module 608, configured to render the page to be accessed based on the target page information and the target component information.

[0255] Optionally, the target component information includes component attribute structure information and component underlying data;

[0256] The rendering module 608 is further configured to:

[0257] Render the page structure of the page to be accessed based on the target page information;

[0258] Determine a first data type of the underlying component data according to the underlying component data;

[0259] Determine a first component format corresponding to the first data type according to the first data type;

[0260] Determine first reference component data corresponding to the first component format based on the first component format;

[0261] Render a first reference component in the to-be-accessed page and the underlying component data of the first reference component in the rendered page structure according to the first data type and the first reference component data;

[0262] Adjust the rendered first reference component according to the component attribute structure information.

[0263] Optionally, the rendering module 608 is further configured to:

[0264] When it is recognized that a first event between the initiating component and the receiving component is triggered, read first event information from the target component information according to the component identifiers of the initiating component and the receiving component;

[0265] Render an event process of the first event according to the first event information.

[0266] Optionally, the rendering module 608 is further configured to:

[0267] When it is recognized that a second event of a preset component is triggered, read second event information from the target component information according to the component identifier of the preset component;

[0268] Identify an event type of the second event according to the second event information;

[0269] If the event type is a loading type, send a data acquisition request to the server, where the data acquisition request is used to trigger the server to acquire data to be loaded according to the data acquisition request;

[0270] Determine a second data type of the data to be loaded according to the data to be loaded;

[0271] Determine a second component format corresponding to the second data type according to the second data type;

[0272] Determine second reference component data corresponding to the second component format based on the second component format;

[0273] According to the second data type and the second reference component data, in the rendered page structure, render the second reference component in the to-be-accessed page and the to-be-loaded data of the second reference component.

[0274] Adjust the rendered second reference component according to the component attribute structure information.

[0275] Optionally, the rendering module 608 is further configured to:

[0276] Identify whether the underlying data of the component is nested data;

[0277] If so, use a recursive decomposition method to decompose the underlying data of the component to obtain multiple sub-data;

[0278] Determine the first data type of the multiple sub-data.

[0279] Optionally, the client further includes:

[0280] A display module, configured to display the editing page corresponding to the to-be-accessed page when receiving an update request for the to-be-accessed page;

[0281] A third receiving module, configured to receive component editing information input in the editing page;

[0282] A first update module, configured to update the component information of the to-be-accessed page according to the component editing information and send the updated component information to the server, where the updated component information is used by the server to update the page table and the component table.

[0283] Optionally, the first update module is further configured to:

[0284] Identify the component editing type according to the component identifier carried in the component editing information;

[0285] In the case where the component editing type is to update a component, update the component information corresponding to the updated component in the component information of the to-be-accessed page according to the component update information carried in the component editing information;

[0286] In the case where the component editing type is to add a component, add the component information of the newly added component to the component information of the to-be-accessed page.

[0287] Optionally, the sending module 602 is further configured to:

[0288] Obtain the page information and component information of the to-be-configured page generated after the user drags and selects a component on the to-be-configured page;

[0289] Send the page identifier, page information, and component information of the page to be configured to the server for corresponding storage in the page table and the component table.

[0290] Optionally, the page structure information is data information in JSON SCHEMA format, and the target page information and target component information are JSON data.

[0291] The client provided by the embodiment of the present application sends a page access request to the server, and the page access request carries the page identifier of the page to be accessed; receives the page structure information of the page to be accessed returned by the server, and the page structure information is obtained by the server based on the page identifier by looking up the page table and the component table. The page table records the corresponding relationship between the page identifier and the page information, and the component table records the corresponding relationship between the component identifier and the component information; parses the page structure information to obtain the target page information and the target component information; renders the page to be accessed based on the target page information and the target component information. The above method links the page display of the client and the information storage of the server. When accessing a page, the client can obtain the page information and component information from the server, and generate the page to be accessed according to the page information and component information, without waiting until the version update time to update the page following the release cycle, and can update the page in real time according to the needs, so that the page displayed after page access meets the access requirements, improves the user experience, and further increases user stickiness.

[0292] The above is a schematic solution of a client in this embodiment. It should be noted that the technical solution of this client and the technical solution of the above page access method applied to the client belong to the same concept. For the details not described in detail in the technical solution of this client, reference can be made to the description of the technical solution of the above page access method applied to the client.

[0293] Corresponding to Figure 4 the method embodiment of Figure 7 FIG. shows a schematic structural diagram of a server provided by an embodiment of the present application. As Figure 7 shown, the server includes:

[0294] A second receiving module 702, configured to receive a page access request sent by a client, where the page access request carries a page identifier of a page to be accessed;

[0295] A first lookup module 704, configured to look up, according to the page identifier, target page information corresponding to the page to be accessed from a page table, where the page table records a corresponding relationship between a page identifier and page information, and the page information includes a component identifier;

[0296] A second search module 706, configured to read a target component identifier in the target page information, and according to the target component identifier, search for target component information corresponding to the target component identifier in a component table, where the component table records the correspondence between component identifiers and component information;

[0297] A splicing module 708, configured to splice the target page information and the target component information to obtain page structure information, and return the page structure information to the client, where the page structure information is used for the client to render the to-be-accessed page.

[0298] Optionally, the second receiving module 702 is further configured to:

[0299] Receive a page identifier, page information, and component information of a page to be configured sent by the client, where the page information and component information of the page to be configured are generated by the client after the user drags and selects a component on the page to be configured, and the page information includes the component identifier of the dragged and selected component;

[0300] Record the page identifier and page information of the page to be configured in a pre-created page table in a corresponding record manner;

[0301] Record the component identifier of the dragged and selected component and the component information of the page to be configured in a pre-created component table in a corresponding record manner.

[0302] Optionally, the server further includes:

[0303] A second update module, configured to, if receiving updated component information of a target component sent by the client, update the component information corresponding to the component identifier of the target component in the component table to the updated component information according to the component identifier of the target component.

[0304] The server provided by the embodiment of the present application receives a page access request sent by a client. The page access request carries the page identifier of the page to be accessed. According to the page identifier, the server searches for the target page information corresponding to the page to be accessed in the page table. The page table records the corresponding relationship between the page identifier and the page information, and the page information includes the component identifier. The server reads the target component identifier in the target page information, and according to the target component identifier, searches for the target component information corresponding to the target component identifier in the component table. The component table records the corresponding relationship between the component identifier and the component information. After the client configures the page by dragging components, the client sends the page information and the component information to the server for storage, realizing the linkage between the page configuration of the client and the information storage of the server. When accessing the page, the server obtains the page information from the page table and the component information from the component table according to the page access request of the client, and returns them to the client, so that the client can generate the page to be accessed according to the page information and the component information. There is no need to wait until the version update time to update the page following the release cycle. The page can be updated in real time according to the requirements, so that the page displayed after page access meets the access requirements. Moreover, any update made by the client to the page can notify the server to update in time, achieving the effect of real-time dynamic page update, and ensuring that the page obtained each time is the latest configured page, improving the user experience and thus increasing user stickiness.

[0305] The above is a schematic solution of a server in this embodiment. It should be noted that the technical solution of this server and the technical solution of the above page access method applied to the server belong to the same concept. For the details not described in detail in the technical solution of this server, reference can be made to the description of the technical solution of the above page access method applied to the server.

[0306] Figure 8 It is a structural block diagram of a computing device 800 according to an embodiment of the present application. The components of the computing device 800 include, but are not limited to, a memory 810 and a processor 820. The processor 820 is connected to the memory 810 through a bus 830, and a database 850 is used to store data.

[0307] The computing device 800 also includes an access device 840, which enables the computing device 800 to communicate via one or more networks 860. Examples of such networks include the Public Switched Telephone Network (PSTN), Local Area Network (LAN), Wide Area Network (WAN), Personal Area Network (PAN), or a combination of communication networks such as the Internet. The access device 840 may include one or more of any type of wired or wireless network interfaces (e.g., Network Interface Card (NIC)), such as IEEE 802.11 Wireless Local Area Networks (WLAN) wireless interfaces, World Interoperability for Microwave Access (Wi-MAX) interfaces, Ethernet interfaces, Universal Serial Bus (USB) interfaces, cellular network interfaces, Bluetooth interfaces, Near Field Communication (NFC) interfaces, and so on.

[0308] In one embodiment of the present application, the above components of the computing device 800 and Figure 8 other components not shown may also be connected to each other, for example, via a bus. It should be understood that Figure 8 the block diagram of the computing device shown is for illustrative purposes only and is not a limitation on the scope of the present application. Those skilled in the art can add or replace other components as needed.

[0309] The computing device 800 can be any type of stationary or mobile computing device, including mobile computers or mobile computing devices (e.g., tablet computers, personal digital assistants, laptop computers, notebook computers, netbooks, etc.), mobile phones (e.g., smartphones), wearable computing devices (e.g., smartwatches, smart glasses, etc.) or other types of mobile devices, or stationary computing devices such as desktop computers or PCs. The computing device 800 can also be a mobile or stationary server.

[0310] Wherein, when the processor 820 executes computer instructions, the steps of any of the above page access methods are implemented.

[0311] The above is a schematic solution of a computing device according to this embodiment. It should be noted that the technical solution of this computing device and the technical solutions of any of the above page access methods belong to the same concept. For the details not described in the technical solution of the computing device, reference can be made to the descriptions of the technical solutions of any of the above page access methods.

[0312] An embodiment of the present application further provides a computer-readable storage medium, which stores computer instructions. When the computer instructions are executed by a processor, the steps of any of the above-mentioned page access methods are implemented.

[0313] The above is a schematic solution of a computer-readable storage medium according to this embodiment. It should be noted that the technical solution of this storage medium and the technical solutions of any of the above page access methods belong to the same concept. For the details not described in the technical solution of the storage medium, reference can be made to the descriptions of the technical solutions of any of the above page access methods.

[0314] The above describes specific embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve the desired result. Additionally, the processes depicted in the figures do not necessarily require the particular order or sequential order shown to achieve the desired result. In certain implementations, multitasking and parallel processing are also possible or may be advantageous.

[0315] The computer instructions include computer program code, which may be in the form of source code, object code, executable files, or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electrical carrier signals, telecommunication signals, and software distribution media, etc.

[0316] The present application also provides a page access system, Figure 9 FIG. is a schematic structural diagram of a page access system according to an embodiment of the present application. The page access system includes a client 902 and a server 904.

[0317] The client 902 sends a page access request to the server, and the page access request carries the page identifier of the page to be accessed;

[0318] The server 904 receives a page access request sent by the client, and the page access request carries the page identifier of the page to be accessed; according to the page identifier, the target page information corresponding to the page to be accessed is found from the page table, and the page table records the corresponding relationship between the page identifier and the page information, and the page information includes the component identifier; the target component identifier in the target page information is read, and according to the target component identifier, the target component information corresponding to the target component identifier is found from the component table, and the component table records the corresponding relationship between the component identifier and the component information; the target page information and the target component information are spliced to obtain page structure information, and the page structure information is returned to the client, and the page structure information is used for the client to render the page to be accessed;

[0319] The client 902 receives the page structure information of the page to be accessed returned by the server, and the page structure information is obtained by the server based on the page identifier to find the page table and the component table, and the page table records the corresponding relationship between the page identifier and the page information, and the component table records the corresponding relationship between the component identifier and the component information; the page structure information is parsed to obtain the target page information and the target component information; based on the target page information and the target component information, the page to be accessed is rendered.

[0320] In the page access system provided by the embodiments of the present application, after the client configures the page by dragging components, the client sends the page information and the component information to the server for storage, realizing the linkage between the page configuration of the client and the information storage of the server. When accessing the page, the client can obtain the page information and the component information from the server, and generate the page to be accessed according to the page information and the component information, without waiting for the version update time to update the page following the release cycle, and can update the page in real time according to the requirements, so that the page displayed after the page access meets the access requirements, improving the user experience and thus increasing the user stickiness.

[0321] The above is a schematic solution of a page access system in this embodiment. It should be noted that the technical solution of this page access system and the technical solution of the above page access method belong to the same concept. For the details not described in detail in the technical solution of this page access system, reference can be made to the description of the technical solution of the above page access method.

[0322] It should be noted that, for the foregoing method embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should know that this application is not limited by the described action sequence, because according to this application, some steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

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

[0324] The preferred embodiments of the present application disclosed above are only used to help explain the present application. The alternative embodiments do not describe all the details in detail, nor do they limit the invention to the specific embodiments described. Obviously, many modifications and variations can be made according to the content of the present application. The present application selects and specifically describes these embodiments to better explain the principle and practical application of the present application, so that those skilled in the art can well understand and utilize the present application. The present application is only limited by the claims and their full scope and equivalents.

Claims

1. A page access method, characterized in that, Applied to a client, the method includes: Sending a page access request to a server, where the page access request carries a page identifier of a page to be accessed; Receiving the page structure information of the page to be accessed returned by the server, where the page structure information is obtained by the server based on the page identifier to look up a page table and a component table, the page table records the correspondence between page identifiers and page information, and the component table records the correspondence between component identifiers and component information; Parsing the page structure information to obtain target page information and target component information; Rendering the page to be accessed based on the target page information and the target component information; Wherein, the target component information includes component attribute structure information and component underlying data; The step of rendering the page to be accessed based on the target page information and the target component information includes: Rendering the page structure of the page to be accessed based on the target page information; Determining a first data type of the component underlying data according to the component underlying data; Determining a first component format corresponding to the first data type according to the first data type; Determining first reference component data corresponding to the first component format based on the first component format; Rendering a first reference component in the page to be accessed and the component underlying data of the first reference component in the rendered page structure according to the first data type and the first reference component data; Adjusting the rendered first reference component according to the component attribute structure information; Wherein, the component underlying data is the data of the data type that describes the component underlying in the component information; The reference component data is the template data of a template component, and the template data is used to describe the component attributes of the template component.

2. The method according to claim 1, wherein The method further includes: When it is recognized that a first event between a triggering component and a receiving component is triggered, reading first event information from the target component information according to the component identifiers of the triggering component and the receiving component; Rendering the event process of the first event according to the first event information.

3. The method according to claim 1, characterized in that The method further includes: When it is recognized that a second event of a preset component is triggered, reading second event information from the target component information according to the component identifier of the preset component; Identifying the event type of the second event according to the second event information; If the event type is a loading type, sending a data acquisition request to the server, where the data acquisition request is used to trigger the server to acquire data to be loaded according to the data acquisition request; Determining a second data type of the data to be loaded according to the data to be loaded; Determining a second component format corresponding to the second data type according to the second data type; Determining second reference component data corresponding to the second component format based on the second component format; Rendering a second reference component in the page to be accessed and the data to be loaded of the second reference component in the rendered page structure according to the second data type and the second reference component data; Adjust the rendered second reference component according to the component attribute structure information.

4. The method according to claim 1, wherein The step of determining the first data type of the underlying component data according to the underlying component data includes: Identifying whether the underlying component data is nested data; If so, disassemble the underlying component data in a recursive manner to obtain multiple sub-data; Determine the first data type of the multiple sub-data.

5. The method according to any one of claims 1-4, characterized in that, After the step of rendering the to-be-accessed page based on the target page information and the target component information, the method further includes: When receiving an update request for the to-be-accessed page, display the editing page corresponding to the to-be-accessed page; Receive the component editing information input on the editing page; According to the component editing information, update the component information of the to-be-accessed page, and send the updated component information to the server, where the updated component information is used by the server to update the page table and the component table.

6. The method according to claim 5, characterized in that The step of updating the component information of the to-be-accessed page according to the component editing information includes: Identify the component editing type according to the component identifier carried in the component editing information; When the component editing type is to update a component, update the component information corresponding to the updated component in the component information of the to-be-accessed page according to the component update information carried in the component editing information; When the component editing type is to add a component, add the component information of the newly added component to the component information of the to-be-accessed page.

7. The method according to any one of claims 1-4, characterized in that Before the step of sending a page access request to the server, the method further includes: Obtain the page information and component information of the to-be-configured page generated after the user drags and selects a component on the to-be-configured page; Send the page identifier, page information, and component information of the to-be-configured page to the server for corresponding storage in the page table and the component table.

8. The method according to any one of claims 1-4, characterized in that, The page structure information is data information in JSONSCHEMA format, and the target page information and target component information are JSON data.

9. A page access method, characterized in that, Applied to the server, the method includes: Receive a page access request sent by the client, where the page access request carries the page identifier of the to-be-accessed page; According to the page identifier, look up the target page information corresponding to the to-be-accessed page in the page table. The page table records the corresponding relationship between the page identifier and the page information, and the page information includes the component identifier; Read the target component identifier in the target page information, and according to the target component identifier, look up the target component information corresponding to the target component identifier in the component table. The component table records the corresponding relationship between the component identifier and the component information; Concatenate the target page information and the target component information to obtain page structure information, and return the page structure information to the client. The page structure information is used by the client to render the to-be-accessed page; Wherein, the target component information includes component attribute structure information and underlying component data; Among them, the client renders the page to be accessed based on the target page information and the target component information, which specifically includes: Render the page structure of the page to be accessed based on the target page information; Determine the first data type of the underlying component data according to the underlying component data; Determine the first component format corresponding to the first data type according to the first data type; Determine the first reference component data corresponding to the first component format based on the first component format; According to the first data type and the first reference component data, render the first reference component in the page to be accessed and the underlying component data of the first reference component in the rendered page structure; Adjust the rendered first reference component according to the component attribute structure information; Among them, the underlying component data is the data of the data type that describes the underlying layer of the component in the component information; The reference component data is the template data of the template component, and the template data is used to describe the component attributes of the template component.

10. The method according to claim 9, characterized in that Before the step of receiving the page access request sent by the client, the method further includes: Receive the page identifier, page information, and component information of the page to be configured sent by the client. Among them, the page information and component information of the page to be configured are generated after the client obtains that the user drags and selects components on the page to be configured, and the page information includes the component identifiers of the dragged and selected components; Record the page identifier and page information of the page to be configured in a corresponding record manner in a pre-created page table; Record the component identifier of the dragged and selected component and the component information of the page to be configured in a corresponding record manner in a pre-created component table.

11. The method according to claim 9 or 10, characterized in that, The method further includes: If the updated component information of the target component sent by the client is received, update the component information corresponding to the component identifier of the target component in the component table to the updated component information according to the component identifier of the target component.

12. A computing device, characterized in that, Include: A memory and a processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions to implement the steps of the method according to any one of claims 1-8 or claims 9-11.

13. A computer-readable storage medium, characterized in that, It stores computer-executable instructions, and when the computer-executable instructions are executed by the processor, the steps of the method according to any one of claims 1-8 or claims 9-11 are implemented.

14. A computer program product, the computer program product comprising computer instructions, characterized in that, When the computer instructions are executed by the processor, the steps of the method according to any one of claims 1-8 or claims 9-11 are implemented.

Images