CN114036425A

CN114036425A - Page access method, client, server and system

Info

Publication number: CN114036425A
Application number: CN202111408032.1A
Authority: CN
Inventors: 赵馨昳
Original assignee: Shanghai Bilibili Technology Co Ltd
Current assignee: Shanghai Bilibili Technology Co Ltd
Priority date: 2021-11-24
Filing date: 2021-11-24
Publication date: 2022-02-11

Abstract

The application provides a page access method, a client, a server and a system. The page access method comprises the following steps: sending a page access request to a server, wherein the page access request carries a page identifier of a page to be accessed; receiving page structure information of a page to be accessed, which is returned by a server, wherein the page structure information is obtained by the server searching a page table and a component table based on page identification, the page table records the corresponding relation between the page identification and the page information, and the component table records the corresponding relation between the component identification and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information. Therefore, the page can be updated in real time according to the requirement without waiting for the time of version updating to follow the version sending period, so that the page displayed after page access meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

Description

Page access method, client, server and system

Technical Field

The application relates to the technical field of information processing, in particular to a page access method. The present application relates to a client, a server, a page access system, a computing device, and a computer-readable storage medium.

Background

With the development of the internet, more and more users select online service handling or information browsing, and the online service handling or information browsing all need to access the page of the corresponding website or application program.

In the prior art, when a user opens a relevant page, a client acquires relevant information of the page from a server, and then renders the page according to the acquired information and displays the page to the user, so that the user performs service handling or information browsing. However, in general, front-end page development needs to be updated along with a publishing period, and due to normalization and fixity of publishing time, an update period of a page is relatively long, during which page access is performed, and a displayed page may not meet access requirements. Therefore, a page access method is needed to solve the above problems.

Disclosure of Invention

In view of this, the present application provides a page access method. The application relates to a client, a server, a page access system, a computing device and a computer readable storage medium, and aims to solve the problem that in the prior art, the page update period is long, and the accessed page is not in line with the access requirement.

According to a first aspect of the embodiments of the present application, there is provided a page access method applied to a client, the method including:

sending a page access request to a server, wherein the page access request carries a page identifier of a page to be accessed;

receiving page structure information of the page to be accessed, which is returned by the server, wherein the page structure information is obtained by the server by searching a page table and a component table based on the page identifier, 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;

analyzing the page structure information to obtain target page information and target component information;

and rendering to obtain the page to be accessed based on the target page information and the target component information.

According to a second aspect of the embodiments of the present application, there is provided another page access method applied to a server, where the method includes:

receiving a page access request sent by a client, wherein the page access request carries a page identifier of a page to be accessed;

searching target page information corresponding to the page to be accessed from a page table according to the page identifier, wherein the page table records the corresponding relation between the page identifier and the page information, and the page information comprises a component identifier;

reading a target component identifier in the target page information, and searching target component information corresponding to the target component identifier from a component table according to the target component identifier, wherein the component table records the corresponding relation between the component identifier and the component information;

and splicing the target page information and the target component information to obtain page structure information, and returning the page structure information to the client, wherein the page structure information is used for rendering the client to obtain the page to be accessed.

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

the sending module is configured to send a page access request to a server, wherein the page access request carries a page identifier of a page to be accessed;

the first receiving module is configured to receive page structure information of the page to be accessed, which is returned by the server, wherein the page structure information is obtained by the server by searching a page table and a component table based on the page identifier, the page table records a corresponding relationship between the page identifier and the page information, and the component table records a corresponding relationship between the component identifier and the component information;

the analysis module is configured to analyze the page structure information to obtain target page information and target component information;

and the rendering module is configured to render the page to be accessed based on the target page information and the target component information.

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

the second receiving module is configured to receive a page access request sent by a client, wherein the page access request carries a page identifier of a page to be accessed;

the first searching module is configured to search target page information corresponding to the page to be accessed from a page table according to the page identifier, the page table records a corresponding relation between the page identifier and the page information, and the page information comprises a component identifier;

the second searching module is configured to read a target component identifier in the target page information, and search target component information corresponding to the target component identifier from a component table according to the target component identifier, wherein the component table records a corresponding relation between the component identifier and the component information;

and the splicing module is 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, wherein the page structure information is used for rendering the client to obtain the page to be accessed.

According to a fifth aspect of embodiments of the present application, there is provided a page access system, including a client and a server;

the client sends a page access request to the server, wherein the page access request carries a page identifier of a page to be accessed;

the server receives a page access request sent by a client, wherein the page access request carries a page identifier of a page to be accessed; searching target page information corresponding to the page to be accessed from a page table according to the page identifier, wherein the page table records the corresponding relation between the page identifier and the page information, and the page information comprises a component identifier; reading a target component identifier in the target page information, and searching target component information corresponding to the target component identifier from a component table according to the target component identifier, wherein the component table records the corresponding relation between the component identifier and the component information; splicing the target page information and the target component information to obtain page structure information, and returning the page structure information to the client, wherein the page structure information is used for rendering by the client to obtain the page to be accessed;

the client receives page structure information of the page to be accessed, which is returned by the server, wherein the page structure information is obtained by the server by searching a page table and a component table based on the page identifier, the page table records the corresponding relation between the page identifier and the page information, and the component table records the corresponding relation between the component identifier and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information.

According to a sixth aspect of embodiments herein, there is provided a computing device comprising: a memory and a processor;

the memory is used for storing computer executable instructions, and the processor is used for executing the computer executable instructions to realize the steps of any page access method.

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

The page access method applied to the client sends a page access request to a server, wherein the page access request carries a page identifier of a page to be accessed; receiving page structure information of a page to be accessed, which is returned by a server, wherein the page structure information is obtained by the server searching a page table and a component table based on page identification, the page table records the corresponding relation between the page identification and the page information, and the component table records the corresponding relation between the component identification and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information. According to the method, the page display of the client and the information storage of the server are linked, when the page is accessed, the client can acquire 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, the page is updated along with the version sending period without waiting for the time of version update, and the page can be updated according to the requirement in real time, so that the page displayed after the page is accessed meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

Drawings

Fig. 1 is a flowchart of a page access method applied to a client according to an embodiment of the present application;

FIG. 2 is a schematic diagram of a page to be accessed according to an embodiment of the present application;

FIG. 3a is a schematic diagram of the data at the bottom layer of a disassembled component according to an embodiment of the present application;

FIG. 3b is a diagram illustrating operations performed after a trigger event according to an embodiment of the present application;

fig. 4 is a flowchart of a page access method applied to a server according to an embodiment of the present application;

FIG. 5 is a diagram illustrating a page access method according to an embodiment of the present application;

fig. 6 is a schematic structural diagram of a client according to an embodiment of the present application;

fig. 7 is a schematic structural diagram of a server according to an embodiment of the present application;

FIG. 8 is a block diagram of a computing device according to an embodiment of the present application;

fig. 9 is a schematic structural diagram of a page access system according to an embodiment of the present application.

Detailed Description

In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. This application is capable of implementation in many different ways than those herein set forth and of similar import by those skilled in the art without departing from the spirit of this application and is therefore not limited to the specific implementations disclosed below.

The terminology used in the one or more embodiments of the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of the present application. As used in one or more embodiments of the present application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used in one or more embodiments of the present application refers to and encompasses any and all possible combinations of one or more of the associated listed items.

It will be understood that, although the terms first, second, etc. may be used herein in one or more embodiments of the present application to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first aspect may be termed a second aspect, and, similarly, a second aspect may be termed a first aspect, without departing from the scope of one or more embodiments of the present application. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.

First, the terms referred to in the embodiments of the present application will be explained.

JSON (Java Script Object Notation ): the data object is described by using the syntax of JS, and is a lightweight data exchange format.

JSON-SCHEMA (Java Script Object Notation, JavaScript Object Notation mode): is a standard used to define JSON data constraints. According to the appointed mode, two parties exchanging data can understand the requirements and constraints of JSON data, and can verify the data accordingly to ensure the correctness of data exchange.

Rendering: is the process of converting the series of data at the back end into a page visible to the human eye. The page rendering method comprises the steps of firstly rendering according to page information to obtain a page structure, then rendering on the page structure according to bottom data and datum component data to obtain a datum component, and then adjusting the datum component according to component attribute structure information to obtain a rendered page.

Page structure information: including all information of the entire page, by which a complete page can be described. In an embodiment of the present application, the page structure information may be a data structure including information describing a page.

Page information: the information of the page level can be used for describing the whole structure of the page.

Component information: component level information, including information for all components in a page, may be used to describe the components in the page.

Component attribute structure information: is information in the component information for describing the attributes and structure of the component. For example, the component property structure information may include a style size of the component, position information of the component in the page, and the like.

Component bottom layer data: is the data in the component information that describes the type of data underlying the component.

Data type: the data type of JSON data defined by JSON-SCHEMA.

Component format: the format of the template component can be considered to be pre-stored, and the component format is different, and the functions that the component can realize are different. The template component may be a pre-set number of comparison-based components.

Reference component data: can be thought of as template data for the template component that describes the component properties of the template component.

A reference component: may be considered a rendered template component.

A first event: corresponding events are converted between the components. If the component A is triggered, the component B is displayed to belong to the first event.

A second event: the individual components are triggered to corresponding events. The second event may be a load of data or a commit of the page if component a is triggered.

Event type: the event types of the second event include a load class and a commit class. Data is required to be loaded when the event is loaded, and information is directly submitted when the event is submitted without loading the data.

Embedding type: a complex data type in which simple child data types are nested. If the object type data contains two string types of data, the object type is nested.

Event Bus: vue elements for handling events collectively, vue is a set of progressive JavaScript frames for building user interfaces.

Next, an application scenario of the present application will be briefly described.

It should be noted that, the existing front-end page development, especially the front-end page inside an enterprise, has the following characteristics: most of internal front-end pages are only used for displaying and modifying data, the page structure is simple, unnecessary style modification is not needed, and therefore a large amount of time is spent in developing the simple pages, and the phenomenon of manpower and material resource waste is easily caused.

In general, in the face of such pages, there are several major developments:

the first method comprises the following steps: and the separated professional staff is responsible for development and maintenance. The scheme has relatively high flexibility and can simultaneously deal with some complex pages, but has low technical content in the whole, and the code with lower technical content is always written without any help for the improvement of the personal ability of the developer. And when the page with repeated functions is encountered, developers need to write from scratch, and the labor repetition rate is high.

And the second method comprises the following steps: and maintaining by adopting a method of modularizing the functions. The method summarizes some commonalities of the simple pages, for example, table components needed to be used for data display and modification are separately extracted, a parameter transmission mode is adopted, only a data format needs to be specified each time, and the reusability of the pages is improved. However, componentization also requires human development, the problem is not solved fundamentally, and for a page with specific requirements, if some complex functions need to be realized, the method cannot be realized only by the above method of standardizing the data format by transmitting parameters, so that the method cannot meet the specific requirements.

At the same time, the two methods have common problems: the integration of the front-end page is relatively high, and in order not to affect the use of other functions in different pages, the front-end needs to send versions, and updates are periodically carried out along with the version progress. Due to the normative and fixed version-issuing time, the time consumption of one page updating period is long, and for the modification of a simple function, the time of waiting for 2-3 days may be needed.

Therefore, the present application provides a page access method, which can solve the above problem, and specific implementation of the method can be seen in the following embodiments.

The present application provides a page access method, and also provides a client, a server, a page access system, a computing device, and a computer-readable storage medium, which are described in detail in the following embodiments one by one.

Fig. 1 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:

step 102: and sending a page access request to the server, wherein the page access request carries the page identifier of the page to be accessed.

The page identifier may be an identifier capable of uniquely indicating one page. The page identifier may be any combination of characters such as numbers, letters, symbols, and the like.

The server stores the page structure information of the page in advance, and can store the page structure information in the page table and the component table, so that the client sends a page access request to the server after receiving the access operation of the user for the page to be accessed, and requests the server to return the page structure information of the page to be accessed.

Further, before the step of sending the page access request to the server, the method further includes: acquiring page information and component information of a page to be configured, which are generated after a user drags and selects a component on the page to be configured; and sending the page identification, the page information and the component information of the page to be configured to a server so as to be correspondingly stored in the page table and the component table.

In this embodiment, before the client sends a page access request to the server, the user may configure the page to be configured by dragging a component on the page to be configured, which is displayed by the client, and in order to obtain the latest page when the page is subsequently accessed, the client may send, to the server, page information and component information of the page to be configured, which are generated after the user drags and selects the component on the page to be configured, and a page identifier of the page to be configured. After the server acquires the information sent by the client, the page identifier and the page information can be correspondingly stored in the page table, and the component identifier and the component information in the page information can be correspondingly stored in the component table. Therefore, the client can send a page access request to the server, where the page access request carries a page identifier, and the server can feed back page information and component information of a page to be accessed to the client based on the page identifier.

In some embodiments, the scheme applies the JSON-SCHEMA attribute capable of specifying the JSON format to the component specification, and when the client generates the page information and the component information, the page information and the component information are simplified into JSON data and sent to the server for storage.

In this embodiment, the structure of a front page is not randomly defined, and certain constraints and specifications are required. A complex page with tens of components and CSS (Cascading Style Sheets) styles cannot be described in a simple key-value format, and most of the time, complex relationships such as nesting exist between components. At the same time, the data structure should also be efficient in view of back-end storage issues. The data structure in this embodiment, that is, a structure body with a specific rule is used to describe all attributes of a page, assuming that the page is formed by splicing and nesting different components, therefore, the structure body needs to include but is not limited to: component name, component attributes, data type within the component, data format within the component, User Interface (UI) attributes, and the like. Assuming that an object is a component, in practical application, there may be a nested relationship between components, summarizing the above characteristics, and selecting the existing specification JSON-SCHEMA to generate page information and component information.

For example, Table 1 is a description of a portion of the JSON-SCHEMA field:

TABLE 1 part JSON-SCHEMA field

From the above table, it can be seen that the syntax of JSON-SCHEMA itself already covers many of the rules required when generating pages. For example, when a single-choice component or a multi-choice component needs to be generated by using codes, the enum attribute can be directly used for specification. When a form is submitted, the type field easily helps to restrict the type of submitted data, and redundant code does not need to be written for verification.

As an example, the JSON data format corresponding to a page may be as follows:

as an example, in the process of configuring a page, after JSON data describing the page is specified, the JSON data needs to be mapped with components rendered by a front end one by one. According to the method and the system, the core functional components are extracted according to the current situations that the existing front-end development frames are multiple and the rules are not easy to realize, and the mapping from the core components to the frame components is completed by utilizing the configuration files. The core function component is an input component for identifying an input box, and there are such components in js that are native, but in practical application, a framework such as elementui iview is used, and the framework may be different from the native in numerical characteristics (for example, more prop fields can be used, attributes can be defined more quickly, and in terms of data processing, for example, the input number component of iview processes an undefined value to 0). Then, mapping from the core function component to the framework component is that a js file is maintained, a map is arranged in the js file, and the js file can be modified and can be conveniently reused to other frameworks.

According to the scheme, the front-end page configuration and the rear-end information storage are linked, the JSON-SCHEMA is used for standardizing the page information and the component information stored at the rear end, the page is dynamically generated at the front end according to the requirement, a visual interface (low codes and even no codes) is utilized, the effect of real-time editing of the front-end page can be achieved, and the page information and the component information of the edited front-end page are sent to the server side for storage in real time. Therefore, a large number of codes do not need to be written by a user, a page to be accessed displayed by a client is generated by page structure information returned by a server, namely when the page is accessed at every time, the latest page structure information is sent to the front end by the rear end, the condition that the accessed page is not in line with the access requirement can be reduced, the page can be dynamically generated by the front end according to the requirement in real time, the condition that the accessed page is not in line with the access requirement is further avoided, the use experience of the user is improved, and the viscosity of the user can be further improved.

It should be noted that the front end described in this application may be a client, and the back end may be a server.

Step 104: and receiving page structure information of the page to be accessed, which is returned by the server, wherein the page structure information is obtained by the server by searching a page table and a component table based on the page identifier, the page table records the corresponding relation between the page identifier and the page information, and the component table records the corresponding relation between the component identifier and the component information.

In this embodiment, a page table and a component table corresponding to a preconfigured page are stored in a server, where the page table includes page information, and the component table includes component information, after receiving a page access request sent by a client, the server may search for the page information from the page table according to a page identifier carried in the page access request, then search for the component information according to the component identifier in the page information, and send the page information and the component information to the client as page structure information, so that the client may receive the page structure information of the page to be accessed sent by the server.

As an example, a content field is included in the page information, and the content field may be a component identification. Alternatively, the content field may include component identifications of the components arranged in order in the page to be accessed.

In some embodiments, the page table includes page identification and page information, and the page identification and the page information correspond to each other, and the page information may include a service type to which the page belongs, an identification and an order of components included in the page, a page layout attribute, a footer attribute, and the like.

Illustratively, referring to Table 2, Table 2 is an exemplary page table. For example, assuming that the page identifier carried by the page access request is page a, after receiving the page access request, the server may search page information corresponding to page a from the page table, where the obtained page information includes service type a, component identifier and sequence included in page a, page layout attribute a, page footer attribute a, and the like.

TABLE 2 Page Table

In some embodiments, the component table primarily describes component types, data formats, UI properties, event information corresponding to the components, and the like, which correspond to component identifications. And, the event information corresponding to the components may include first event information between the components and second event information of the components themselves. First event information between components may carry a component identification of the receiving component. The second event information of the component itself includes the type of the second event.

Illustratively, referring to Table 3, Table 3 is an exemplary component table. For example, assuming that the server finds, from the page table, that the page information corresponding to the page a includes the component a and the component B, the server finds, from the component table, the component information corresponding to the component a, which includes the component type a, the style size a of the component, the position a of the component in the page, the data format A, UI attribute a, the event information a corresponding to the component, and the like, and finds, from the component table, the component information corresponding to the component B, which includes the component type B, the style size B of the component, the position B of the component in the page, the data format B, UI attribute B, the event information B corresponding to the component, and the like.

TABLE 3 component table

In this embodiment, the JSON data is a general data structure used in front-end and back-end interaction or communication between back-end services. Many times JSON data needs to be checked, for example, some fields with numeric values must be within a range (the school number must be greater than 0); some field values must be within enumeration (network protocol: TCP or UDP); some two fields directly have to have dependency relationship and cannot exist independently (when shopping information is submitted, only the credit _ card field is filled in, and the valid _ address field has significance). If the rules are customized in the user code, the code is overstaffed, and the mutual judgment logic errors between the codes can be caused due to different forms of the rules defined by different developers, so that the JSON-SCHEMA format specification page information and component information for specifying JSON verification are adopted in the method.

In the embodiment of the application, the page structure information may be data information in a JSON SCHEMA format, and the page information and the component information may be JSON data, so that the stored information can be normalized, and the normalized storage is convenient for subsequent search, that is, the efficiency of information search is improved.

Step 106: and analyzing the page structure information to obtain target page information and target component information.

The target page information is page information of a page to be accessed, and the target component information is component information of components in the page to be accessed.

According to the above steps, the page structure information is composed of page information and component information, and the page information in the page structure information may carry an identifier of the page information, and the component information may carry an 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 analyzing the page structure information, the target page information and the target component information corresponding to the page to be accessed can be obtained.

In implementation, in order to normalize the stored information, the page structure information of the present application may be data information in JSON SCHEMA format, and the target page information and the target component information are JSON data.

That is, when the client configures the page, the component information and the page information of the configured page generated according to the component dragged by the user are both JSON data, and the page structure information stored by the server is data information in the JSON SCHEMA format, so that the stored information can be normalized, and is stored in a normalized manner to facilitate parsing, that is, the information parsing efficiency is improved.

The page structure information in the embodiment of the present application may be understood as a data structure, and analyzing the page structure information is to analyze the data structure. The data structure can comprise target page information and target component information, a field describing a page and a field describing a component in the data structure are determined, then page information is determined according to the field describing the page, component information is determined according to the field describing the component, and therefore the page information and the component information can be determined.

Illustratively, the data structure may be a JSON SCHEMA structure, the field describing the page may be page _ name, and the field describing the component may be component n.

For example, assume that the page structure information is as follows:

the fields page _ name describing the page, component1 and component2 describing the component may be determined first, then the fields between page _ name and component1 (including page _ name) are determined as page information, the fields between component1 and component2 (including component1) are determined as component information of component1, and the fields after component2 (including component2) are determined as component information of component 2. Therefore, the target page information and the target component information can be obtained through analysis.

Step 108: and rendering to obtain the page to be accessed based on the target page information and the target component information.

In this embodiment, the target page information includes information such as a page structure or layout, the target component information includes component attribute information and component bottom layer data, the page structure may be rendered according to the target page information, then the reference component data is determined according to the component bottom layer data, then a first reference component including the bottom layer data is rendered in the rendered page structure, and finally the first reference component is adjusted according to the component attribute information, so that the page to be accessed may be obtained.

As an example, after the target page information and the target component information are obtained through parsing in the parsing manner of the present application, the target page information and the target component information may be used as parameters for page rendering, and a page to be accessed is obtained through rendering by using an existing rendering tool.

In actual applications, the target component information may include component property structure information and component underlying data. Based on the target page information and the target component information, the specific implementation of the step of rendering the page to be accessed may include: rendering a page structure of a page to be accessed based on the target page information; determining a first data type of the component bottom layer data according to the component bottom layer 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 assembly in a page to be accessed and assembly bottom layer data of the first reference assembly in a rendered page structure according to the first data type and the first reference assembly data; and adjusting the rendered first reference assembly according to the assembly attribute structure information.

In this embodiment of the application, the component attribute structure information may be information used for adjusting attributes and the like of the component in the View component layer, the data type may be a type of data processed in the field layer, and the component format may be a format of the component in the Widget layer.

As one example, component property structure information is used to describe information about the structure and properties of a component. Illustratively, the component property structure information may include a component type, a style size of the component, a position of the component in the page, a UI property of the component, event information corresponding to the component, and the like. The component bottom layer data can be bottom layer data needed to be used when the component is rendered.

In some embodiments, the target page information may include a service type and a page layout attribute of the page to be accessed, and the client may determine a page frame corresponding to the page to be accessed according to the service type of the page to be accessed, then determine an action of each region in the page frame according to the page layout attribute, and render to obtain a page structure of the page to be accessed.

Illustratively, referring to fig. 2, fig. 2 is a schematic diagram of a page to be accessed according to an embodiment of the present application. In the page of fig. 2, the left part is a region of the toolbar of the dragging component, the region includes a layout component, a base component and a single-selection/multiple-selection component, the middle part is a page display region, the right part is a region for configuring the attributes of the page and the components, including two parts of page configuration and component configuration, and fig. 2 currently illustrates the attributes 1, 2, 3 and 4 included in the component configuration.

In one possible implementation, the field layer mainly handles the data types of the component underlying data, such as number, string, borolean values, etc. At this stage, the component bottom layer data can be disassembled from the target component information according to the data type, so as to obtain the component bottom layer data of simple type.

In another possible implementation manner, the step of determining a first data type of the component bottom layer data according to the component bottom layer data includes: identifying whether the bottom data of the component is nested data; if so, disassembling the data at the bottom of the component by adopting a recursive disassembling mode to obtain a plurality of subdata; a first data type of the plurality of sub-data is determined.

Because the nested data can be disassembled in a simple disassembling mode to cause errors, the data type of the component bottom layer data can be identified firstly, if the data is the nested data, the component bottom layer data is disassembled in a recursive disassembling mode to obtain a plurality of subdata, and then the first data type of each subdata is determined.

As an example, a nested data type may be a data type that includes a child data type. For example, nested data types may be object or array, which may include simple types such as number, string, borolean, etc.

Illustratively, assume that the data structure of the submitted component underlying data is as follows:

the username is a field of a simple data type, and the data type is string. And address is an object type field containing two string type fields. The address field alone does not itself sense its content type. Therefore, when parsing the address field, it needs to be recursively parsed in the same way as when parsing the info field, and parsed into the following types of data structures:

as an example, referring to fig. 3a, fig. 3a is a schematic diagram of data at the bottom layer of a disassembled component according to an embodiment of the present application. In fig. 3a, the data type of the component bottom layer data is determined by the data type processing layer (field), including several data types, such as array (matrix type), boolean (boolean), integer (integer type), number (numeric), object (object type), string (string type), and since the two data types, which are array and boolean, are nested, the component bottom layer data is disassembled by recursive disassembly, and for the component bottom layer data of other data types, the data type can be determined as the first data type.

In the embodiment of the application, for the nested component bottom layer data, the nested component bottom layer data is disassembled in a recursive disassembling mode, and then the first data type of the component bottom layer data is determined, so that the simple type subdata can be obtained through disassembling, the data type is determined based on the subdata, and the accuracy of determining the data type is improved.

In some embodiments, the client may store a first mapping table of data types and component formats in advance, and a second mapping table of component formats and reference component data. Alternatively, the first mapping relation table and the second mapping relation table may be stored in the server and sent to the client. Therefore, after the data type of the component bottom layer data is determined, a first component format corresponding to the first data type can be searched from the first mapping relation table according to the first data type, then first benchmark component data corresponding to the first component format is searched from the second mapping relation table, and then the first benchmark component in the page to be accessed and the component bottom layer data of the first benchmark component are rendered in the rendered page structure according to the first data type and the first benchmark component data.

As an example, the relationship between the data types and the component formats is not one-to-one, for example, for a multi-box or a time information or text input box displayed at the front end, the data types corresponding to the underlying data are string, but correspond to different external display forms respectively. Specific mapping relationships can be seen in table 4, where table 4 is an exemplary first mapping relationship table.

TABLE 4 first mapping relation Table

As can be seen from table 4, the data types of the components in the three component formats, i.e., the check box, the time interval, and the multi-check box, are all in the component formats of Array, the digital timestamp, and the digital input box, and the data types of the components in the bottom layer data are all Number/Integer.

For example, referring to fig. 3a, in fig. 3a, after determining the data types integer, number, object, and string of the component bottom layer data, the component format corresponding to the data type may be determined, or in other words, the component format corresponding to the data type may be determined at the Widget layer (Widget layer).

As one example, the benchmark component data may include template data for components in the component format. For example, the external display form of the component of the radio box class is a square box including a border, the external display form of the component of the search box class is a rounded rectangle box not including a border, and the external display form of the component of the switching box class is a cube-type box. The component format and the reference component data may be in a one-to-one correspondence relationship, or one component format may correspond to a plurality of reference component data. In the case where one component format corresponds to a plurality of reference component data, one of them may be selected as the first reference component data. Referring to table 5, table 5 is an exemplary second mapping table.

TABLE 5 second mapping relationship Table

Component format (Widget)	Benchmark component data
		Select (radio frame)	Benchmark component data 1
DateTime (text timestamp)	Reference component data 2, reference component data3
		Input (Input box)	Benchmark component data 4

As can be seen from table 5, the radio frame corresponds to one piece of reference component data, i.e., reference component data 1, and the switch frame corresponds to two pieces of reference component data, i.e., reference component data 2.

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

Exemplarily, assuming that the first data type is String, the first component format obtained by searching from the first mapping relation table according to the first data type includes a text timestamp, a radio box, and an input box, and obtains a component type in the component attribute structure information, assuming that the component type includes a radio type, the radio box may be used as the first component format, then the first reference component data corresponding to the radio box, i.e., reference component data 1, is searched from the second mapping table, and the reference component data and the first data type String are rendered in the rendered page structure based on the first data type String and the reference component data 1, and then a radio box component may be obtained.

In some embodiments, the rendered first reference component has no attribute structure, or the attribute structure thereof is the default attribute structure of the template component, so that the rendered first reference component can be adjusted according to the component attribute structure information.

As an example, the component attribute structure information may include a style size of the component and a position of the component in the page, the style size of the first reference component may be adjusted according to the style size of the component, and the first reference component is adjusted to the position of the component in the page, so that the adjusted first reference component may be obtained, and the page to be accessed may be obtained by rendering the adjusted first reference component into the page structure of the page to be accessed.

For example, after the component format is determined, first benchmark component data corresponding to the component format may be determined, and then the first benchmark component is rendered in the page structure based on the first data type and the first benchmark component data, as shown in fig. 3a, and then the rendered first benchmark component is adjusted according to the component attribute structure information at a view component layer (view component layer).

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. A front page may contain three parts: data (which data to display) + format (how to compose and display, whether a form or a diagram, etc.) + interaction (for example, there is an interaction feedback when a button is clicked, etc.), component information may include component bottom data, and page information may include a page format, but if a page to be accessed may include a UI interaction function, the page to be accessed includes a component having a UI function, when the component having the UI function is triggered, the event may trigger a corresponding event, the event is an important ring in a front-end page, and the submission of a form, the loading of data, etc. all require an event to trigger. Therefore, in this embodiment of the application, the target component information of the component may further include event information corresponding to the component, where the event may include first event information between the components and second event information of the component itself, where the first event information may trigger the first component and then jump to display the second component, and the second event may trigger the first component to display some information or submit page information, and in this case, the triggered event needs to be rendered when the component is rendered. Therefore, different types of events triggered can also influence the rendered page to be accessed. Therefore, the process of rendering a page to be accessed when different types of events are triggered is described next.

In one possible implementation, the method further includes: under the condition that a first event between the initiating component and the receiving component is identified to be triggered, reading first event information from target component information according to component identifications of the initiating component and the receiving component; and rendering the event process of the first event according to the first event information.

In a specific implementation, the target component information corresponds to the component identifier, then 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, in order to make clear that the first event is an event between the initiating component and which component, the first event may also carry the component identifier of the receiving component, so that it may be determined that the first event is the first event generated by using the component corresponding to the first event as the initiating component and using the component corresponding to the component identifier carried by the first event as the receiving component.

In some embodiments, if the initiating component is triggered, it may be considered that it is detected that a first event between the initiating component and the receiving component is triggered, component identifiers of the initiating component and the receiving component may be acquired, target component information corresponding to the component identifier of the initiating component is determined first, since one component may correspond to a plurality of first events and different first events are for different receiving components, first event information may be acquired from the target component information according to the component identifier of the receiving component, an event process of the first event is rendered according to the first event information, and a rendered page to be accessed includes a switching process of the initiating component and the receiving component when the first event is triggered.

As an example, the initiating component is a triggered component, the first event trigger data is event data acquired when the initiating component is triggered, the receiving component is a component exposed after the first event is triggered, the first event generation data is event data generated based on the first event trigger data after the initiating component is triggered, the initiating component is a source of the first event trigger data, and the receiving component is a receiver of the first event generation data.

In the embodiment of the application, in order to facilitate the recording of the event in the widget layer, the page described by the JSON structure can be restricted, and the triggering of the event is completed by the button component. For example, assuming that the initiating component is a button component, when the button component is triggered, information such as a query parameter (i.e., first event trigger data) may be obtained and data generated based on the information such as the query parameter (i.e., first event generation data) may be transmitted to the receiving component for presentation.

As an example, just when configuring a page, a client registers a global Event for each component in a widget layer and sends the global Event as component information to a server for storage, so that, when a page to be accessed is rendered according to target page information and target component information from the server, each time a first Event is triggered, a button component sends information with a component identifier of a receiving component to a global Event Bus, the global Event Bus finds the receiving component in an already registered component list according to the component identifier of the receiving component and obtains a result of the first Event (i.e. first Event generation data) from the target component information according to the component identifier of an initiating component and the component identifier of the receiving component, and the receiving component is rendered in real time based on the result of the first Event, so that an updated receiving component can be obtained, and the received first event generation data can be shown in the receiving component, so that one event interaction is completed.

According to the scheme, when the first event between the assemblies is identified to be triggered, the event process of the first event between the assemblies is rendered, the effect of adjusting the page in real time according to the requirement is achieved, the typesetting period does not need to be waited, complicated and repeated codes do not need to be written, and the flexibility of page generation is improved.

In another possible implementation manner, the method further includes:

under the condition that a second event of the preset assembly is identified to be triggered, reading second event information from the target assembly information according to the assembly identification of the preset assembly; 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, wherein the data acquisition request is used for triggering 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 assembly in the page to be accessed and data to be loaded of the second reference assembly in the rendered page structure according to the second data type and the second reference assembly data; and adjusting the rendered second reference assembly according to the assembly attribute structure information.

Wherein the preset component may be a component that triggers the second event. For example, the preset component may be a button component. The event of the loading type means that the data to be loaded is loaded after the second event is triggered. For example, a load-type event may be based on problem data, a complex data structure is obtained from a server and displayed on a page.

In a specific implementation, the target component information corresponds to the component identifier, and then second event information included in the target component information corresponds to the component identifier, and the second event information carries an event type. Therefore, when it is recognized that the second event of the preset component is triggered, the second event information may be acquired 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 determined, 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 may carry URL (uniform resource locator) information, the server may acquire the data to be loaded based on the URL information, and the data to be loaded may be stored in the server in a key-value form, so that the data to be loaded received by the client may be data in a key-value form. Since the data to be loaded is displayed in the component on the page, the second reference component can be rendered based on the data to be loaded.

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

In some embodiments, a second component format corresponding to the second data type may be searched from the first mapping table, then second reference data corresponding to the second component format is searched from the second mapping table, then, based on the second data type and the second reference component data, data to be loaded of the second reference component and the second reference component is rendered in the rendered page structure, and the rendered second reference component is adjusted according to the component attribute structure information, so as to obtain a second reference component showing the data to be loaded.

For example, referring to fig. 3b, fig. 3b is a schematic diagram of an operation performed after a trigger event according to an embodiment of the present application. In fig. 3b, the data type handling layer field recursively parses the data of the nested type (such as array or object type) into simple type data and determines the data type. And (4) disassembling data of non-nested types (such as non-array and object types) according to data types. The data type is sent to the widget layer (widget layer), widget is a layer that is wrapped outside the data type handling layer field, field is a layer that mainly handles underlying data, widget is mainly used to handle events/formats/UIs, etc. If the preset component is a button component, when a second Event of the button component is triggered, the button component sends a component identifier and second Event information to a global Event Bus (Event Bus), the global Event Bus determines data to be loaded of a component corresponding to the component identifier in the component information, the data to be loaded is sent to the button component, the button component updates a view of the button component after receiving the data to be loaded, and the data to be loaded is rendered on the button component.

It should be noted that the process of rendering to obtain the second reference component displaying the data to be loaded is the same as the process of rendering to obtain the first reference component, and for specific implementation, reference may be made to the above related description, and details are not described herein again in this embodiment.

In other embodiments, after determining the data type of the data to be loaded, if the data type is a commit type, the data input in the preset component may be obtained, pieced together into a data structure, and 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 submit type, the page information and the component information of the page to be accessed may be submitted to the server, and the client may present information of "submit complete", where the information of "submit complete" may be presented in a form of a pop-up box.

According to the method, when the second event of the component is identified to be triggered, the event result of the second event can be rendered, the effect of adjusting the page in real time according to the operation is achieved, the typesetting period does not need to be waited, redundant and repeated codes do not need to be written, and the flexibility of page generation is improved.

In the embodiment of the application, the view component layer can be used for defining a structure body which can describe all attributes of the component and is responsible for transmitting values to JSON data from the configuration page at the front end. Therefore, in the generation process of a front-end page, all information (namely component information) related to the component is received through a view component layer capable of being interactively modified in real time, the corresponding component is rendered according to the component information in a widget layer, an event is added, and finally the type of actual data in the component is defined in a field layer.

It should be noted that, by the above description, the page access method of the present application can be implemented to obtain the page to be accessed. However, in the present solution, since the page can be generated at the front end through a visual operation, after the page to be accessed is generated, 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 updated component information and page information are fed back to the server, so that the server can store the latest page structure information, and the latest page meeting the access requirement can be obtained when the page is subsequently accessed.

Therefore, after the step of rendering the page to be accessed based on the target page information and the target component information, the method further comprises the following steps:

displaying an editing page corresponding to a page to be accessed under the condition of receiving an updating request aiming at the page to be accessed; receiving component editing information input on an editing page; and updating the component information of the page to be accessed according to the component editing information, and sending the updated component information to the server, wherein the updated component information is used for updating the page table and the component table by the server.

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

As an example, after a page to be accessed is rendered, a client displays the page to be accessed to a user, if a function of the page to be accessed is desired to be modified, and an editing control in the page to be accessed can be triggered, the client receives an update request for the page to be accessed, in response to the update request, the client can display a component editing page, the user inputs component editing information in the component editing page, the client updates component information of the page to be accessed according to the component editing information, the information of the page to be accessed changes, in order to ensure synchronization between client page editing and server information storage, the updated component information needs to be sent to a server, the server can update a page table and a component table according to the updated component information, so that information stored by the server and related to the page to be accessed is up-to-date, the latest page can be exposed when the page is accessed.

By the mode, the page to be accessed can be edited immediately when the requirement changes, namely the page to be accessed can be updated in real time, the page updating period is shortened, the page updating efficiency is improved, the updated component information is sent to the server for storage, the information stored by the server can be updated in real time, and therefore the page to be accessed generated according to the page structure information returned by the server is also the updated page after the page access request is subsequently received, and the access requirement is met.

In some embodiments, the step of updating the component information of the page to be accessed according to the component editing information includes:

identifying the editing type of the component according to the component identifier carried by the editing information of the component; under the condition that the component editing type is an updating component, updating component information corresponding to the updating component in the component information of the page to be accessed according to component updating information carried by the component editing information; and under the condition that the component editing type is the newly added component, adding the component information of the newly added component in the component information of the page to be accessed.

That is, the component edit type may be determined according to the component identifier in the component edit information, and if the component edit type is an update component, the existing component (update component) in the page to be accessed is updated, and the component information of the update component may be modified into component update information carried by the component edit information; if the component editing type is a newly added component, the newly added component can be added in the page to be accessed in a component dragging mode, and the component information of the newly added component is added in the component information of the page to be accessed.

As an example, the component editing information may carry a component identifier, and if the component identifier exists in the page information of the page to be accessed, it is indicated that the updating is to update the existing component in the page to be accessed, and it may be determined that the component editing type is an updated component; if the component identifier does not exist in the page information of the page to be accessed, it indicates that the update is to add a new component to the page to be accessed, and it can be determined that the component editing type is the newly added component.

In the case that the component edit type is an updated component, the component information of the updated component in the component information of the page to be accessed may be determined, and then the component information of the updated component may be modified into the component update information. In the case where the component edit type is a newly added component, the component update information may be added as component information of the newly added component to the component information of the page to be accessed.

By the method, the component information of the page to be accessed is updated by different methods according to the component editing type, so that the components in the page to be accessed can be updated without compiling codes, and the real-time performance is higher.

According to the method, the user-defined component which can be described by JSON data is written at the client, the process of generating the page JSON is visualized as the dragging and splicing of the component, developers can intuitively combine the desired page through simple code-free dragging operation, and the splicing and nesting of the JSON data are realized at the same time. In addition, the generation of the page to be accessed completely depends on the page structure information of the server, and the page structure information can be changed and stored in real time in the process of configuring the page by the client, so that the problem of long version sending period of the front-end page in the prior art is solved, and real-time modification of the front-end page is really achieved.

The page access method applied to the client side, provided by the embodiment of the application, is used for sending a page access request to the server side, wherein the page access request carries a page identifier of a page to be accessed; receiving page structure information of a page to be accessed, which is returned by a server, wherein the page structure information is obtained by the server searching a page table and a component table based on page identification, the page table records the corresponding relation between the page identification and the page information, and the component table records the corresponding relation between the component identification and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information. According to the method, the page display of the client and the information storage of the server are linked, when the page is accessed, the client can acquire 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, the page is updated along with the version sending period without waiting for the time of version update, and the page can be updated according to the requirement in real time, so that the page displayed after the page is accessed meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

Fig. 4 is a flowchart of a page access method applied to a server according to an embodiment of the present application, which may specifically include the following steps:

step 402: and receiving a page access request sent by a client, wherein the page access request carries a page identifier of a page to be accessed.

In this embodiment, when accessing a page, a server receives a page access request of a client, where the page access request carries a page identifier of the page to be accessed, and the server may obtain information related to the page to be accessed based on the page identifier. That is, the server may store the page information and the component information of the configured page in advance.

Therefore, before the step of receiving a page access request sent by a client, the method further comprises:

receiving a page identifier, page information and component information of a page to be configured sent by a client, wherein the page information and the component information of the page to be configured are generated after the client acquires a component dragged and selected by a user on the page to be configured, and the page information comprises the component identifier of the dragged and selected component; recording the page identification and the page information of the page to be configured into a pre-established page table in a corresponding recording mode; and recording the component identification of the dragging and selecting component and the component information of the page to be configured into a pre-created component table in a corresponding recording mode.

The page to be configured is a page to be configured displayed by the client, the page identifier can be used for uniquely identifying the page to be configured, the page information can include information such as a service type, a layout attribute, a component identifier and a sequence of the page to be configured, the component information can include information such as a structure and configuration of a component displayed in the page to be configured, the page identifier corresponds to the page information, and the component identifier corresponds to the component information.

In some embodiments, a page to be configured is displayed at a client, the configuration of the page to be configured is realized in a manner that a user drags a component, a function of front-end page dynamic configuration is realized, and the front-end page dynamic configuration needs to be stored so as to be continuously displayed when the page is accessed next time, or the front-end page dynamic configuration needs to be modified when the requirement is changed so as to realize real dynamic update, and the back-end coordination is also needed. Therefore, when the dragging component is dragged to the page display area, the component identifier of the dragging component can be acquired, the component information of the component is acquired based on the component identifier, the component identifier of the dragging component, the position information of the dragging component in the page to be configured, the sequence and the like are added to the page information of the page to be configured, and the page information, the component information and the page identifier are sent to the server, so that the server can correspondingly store the page identifier and the page information into a pre-created page table, and correspondingly store the component identifier and the component information of the dragging component into a pre-created component table.

For example, referring to fig. 2, a user may implement configuration of a page to be configured by dragging a layout component of a component toolbar of the page to be configured to a page display area.

Further, after the configuration of the page to be configured is completed, the client sets a global event of each component, and records event information of the global event in component information of the corresponding component. And, the global event includes a first event and a second event, and the detailed description of the first event and the second event may refer to the related description of the above embodiments.

In the embodiment of the application, the page to be configured of the client is configured by dragging and selecting the component, 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, so that the server can record all information related to the page to be configured, when the page is accessed, the stored page information and the component information can be fed back to the client, and the client can display the page. Moreover, after the client configures the page to be configured, the server stores the page information and the component information, namely all information related to the page to be configured can be stored in time.

Step 404: and searching target page information corresponding to the page to be accessed from a page table according to the page identifier, wherein the page table records the corresponding relation between the page identifier and the page information, and the page information comprises a component identifier.

In some embodiments, the page table includes a correspondence of page identification and page information. For example, referring to table 2, according to the page identifier, the page information corresponding to the page representation may be searched from the page table, and the searched page information is determined as the target page information corresponding to the page to be accessed.

For example, the searched target page information is as follows:

the page _ name may represent a page name, the id may represent a page identifier, the content includes component identifiers of components arranged in order in the page, and the order includes a sequence of the components.

Step 406: reading a target component identification in the target page information, and searching target component information corresponding to the target component identification from a component table according to the target component identification, wherein the component table records the corresponding relation between the component identification and the component information.

In some embodiments, the page information records a component identifier, and the component table includes a correspondence between the component identifier and the component information. Illustratively, the page information includes a content field in which component identifications of components shown in the page are recorded in order. Illustratively, referring to tables 2 and 3, the target component identifier is obtained from the target page information, then the component information corresponding to the component identifier is searched from the component table, and the searched component information is determined as the target component information corresponding to the component identifier.

For example, target component information corresponding to component1 is acquired from a component table (component table), as follows:

wherein, component _ name represents the component name, and width represents the width of the component.

Step 408: and splicing the target page information and the target component information to obtain page structure information, and returning the page structure information to the client, wherein the page structure information is used for rendering the client to obtain the page to be accessed.

For example, the target page information and the acquired target component information are spliced to obtain page structure information as follows:

it should be noted that, through the above steps, the server may obtain the page structure information of the page to be accessed, and then return the page structure information to the client, and the client performs parsing and rendering on the page structure information according to the method provided in the embodiment corresponding to fig. 1, so as to obtain the page to be accessed.

In the process of displaying the page to be accessed by the client, the page to be accessed can be updated in real time, namely, the page information and/or the component information of the page to be accessed are modified, and the modified page information and/or the modified component information are sent to the server, so that the server receives the updated component information and updates the stored page table and the stored component table based on the updated component information.

Further, the method further comprises: and if receiving the updated component information of the target component sent by the client, updating the component information corresponding to the component identifier of the target component in the component table into the updated component information according to the component identifier of the target component.

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

In some embodiments, if the target component is an existing component in the page, the component information of the target component may be found from the component table based on the component identifier, and the component information of the target component may be modified to update the component information.

In other embodiments, if the target component is a newly added component in the page, the component identifier and the updated component information of the target component may be stored in the component table in a corresponding form, so as to update the component table.

As an example, the update component information may further include location information of the target component in the page, and the server may store the component identifier of the target component into the page information of the page according to the location information of the target component in the page, so as to implement the update of the page table.

In the embodiment of the application, any update of the page by the client can be informed to the server in time every time, and the server can update the page table and the component table in time, so that the effect of dynamically updating the page in real time is achieved.

It should be noted that, in the embodiments, reference may be made to the description of the embodiments above for implementation manners that are not described in the embodiments.

The page access method applied to the server side provided by the embodiment of the application receives a page access request sent by a client side, the page access request carries a page identifier of a page to be accessed, target page information corresponding to the page to be accessed is searched from a page table according to the page identifier, the page table records the corresponding relation between the page identifier and the page information, the page information comprises a component identifier, the target component identifier in the target page information is read, the target component information corresponding to the target component identifier is searched from the component table according to the target component identifier, and the component table records the corresponding relation between the component identifier and the component information. The method comprises the steps that after a client configures a page in a dragging component mode, page information and component information are sent to a server for storage, linkage of page configuration of the client and information storage of the server is achieved, when page access is conducted, the server acquires the page information from a page table according to a page access request of the client, acquires the component information from the component table and returns the component information to the client, so that the client generates a page to be accessed according to the page information and the component information, the page is updated without waiting for version update time and following a version sending period, the page can be updated in real time according to requirements, the page displayed after page access meets the access requirements, the server can be informed to update the page in time when any update is conducted on the page by the client, the effect of updating the page in real time is achieved, and the page obtained each time is guaranteed to be the latest configured page, the use experience of the user is improved, and the viscosity of the user is further improved.

Fig. 5 is a schematic diagram of a page access method according to an embodiment of the present application, taking page X as an example, a specific implementation process of the method is as follows:

the method comprises the steps that a user accesses a page X through a client, the client generates a page access request and sends the page access request to a server to request page structure information from the server, the page access request comprises a page ID of the page X, the server obtains the page information of the page X from a page table (page table) according to the page ID, the page information comprises a content field, the content field comprises component identifications arranged in sequence, the component information of a component shown in the page X is searched from the component table according to the component identification in the page information, and the server splices the component information and the page information into complete page structure information and returns the complete page structure information to the client.

The client receives page structure information sent by the server, disassembles the page structure information to obtain a disassembled schema field, wherein the schema field comprises the page information, the component attribute structure information and the component bottom layer data, and then starts to render the page structure of the page X according to the page information in the schema field. When the page X is configured, a global event is set for each component, where the global event includes a first event and a second event, the second event includes a load-class event, and if the load-class second event is triggered, data to be loaded needs to be acquired and rendered on the corresponding component.

The second event is usually an event corresponding to the button assembly, so that if the button assembly is triggered, second event information corresponding to the button assembly can be acquired, the event type of the second event is determined according to the second event information, when the second event is a loading type, it is considered that data to be loaded needs to be loaded, that is, if the second event is triggered, the client sends a data acquisition request carrying a URL link to the server, the server acquires the data to be loaded based on the URL link, the data to be loaded is stored in the server in a key-value form, the server sends the data to be loaded to a field layer of the client in the key-value form, and the client verifies the data to be loaded, for example, the data to be loaded can be verified through a preset verification algorithm. If the verification fails, an error message can be popped up, for example, "error message" is displayed in the form of a pop-up frame, which prompts that the acquired data to be loaded is incorrect, and the user can select to continue triggering the button assembly to reacquire the data to be loaded, or stop triggering the button assembly. If the verification is successful, the client sends the data to be loaded to a Widget layer, and renders the reference component and the component bottom layer data of the reference component in the page to be accessed on the Widget layer, specifically, determines a component format from a first mapping relation table according to the data type of the component bottom layer data in the schema field, determines the reference component data from a second mapping relation table according to the component format, renders the reference component and the component bottom layer data of the reference component in the page to be accessed in the rendered page structure according to the data type and the reference component data, then enters a view layer, adjusts the rendered reference component based on the component attribute structure information, and renders to obtain the page X by enriching other configuration information of the reference component, such as length, editable state and the like.

After rendering is completed, if the function of the page X needs to be changed due to the change of the demand, the page X can be updated, and therefore, after rendering is completed, whether the demand is changed or not can be judged. In specific implementation, if the requirement is not changed, rendering is finished; if the function of the page X is required to be modified, an editing control displayed by the page X can be triggered, the client receives an updating request for the page X, and the requirement can be considered to be changed, namely if the function is required to be modified, the client displays an editing page which can display component information of all components in the page X, a user can input component editing information carrying component identification in the editing page, the component editing type is determined according to the component identification, if the component editing type is an updating component, if the existing component A is updated, the component information corresponding to the updating component A can be modified into component updating information carried by the component editing information, namely in a form of which a view layer represents the component information, the component information of the updating component A is modified into the component updating information; if the component editing type is a newly added component, the newly added component can be dragged to the corresponding position of the page display area from the component table recorded by the client, and the component information of the newly added component is added to the form of the component information represented by the view layer. After the component is updated, saving new page information and component information, and sending the new page information and the new component information to the server, so that the server can update the stored page table and the stored component table, therefore, when reloading enters the page X, because the information stored by the server is updated, the acquired front-end page X can be updated in real time, and the display is the updated page.

For example, before adding a component newly, assume that page X includes component 1(component 1) and component 2(component 2). When the component 3(component 3) is newly added and the page X includes the component1, the component2, and the component 3, the page information changes, and the component information of the component 3 is also added to the component information in the component table.

The component information of the component1 includes:

“id:1,

component_type:string,

component_name:'comp1',

component _ title: 'test component 1',

options:{}”

the component information of the component2 includes:

“id:2,

component_type:string,

component_name:'comp2',

component _ title: 'test component 2',

options:{}”

the page information of page X is as follows:

“page_id:0,

page_name:example,

page_content:comp1 comp2”

after a component 3(component 3) is newly added, the component information of the component 3 includes:

“id:3,

component_type:string,

component_name:'comp3',

component _ title: 'test component 3',

options:{}”

after adding a component 3, the new page information is as follows:

“page_id:0,

page_name:example,

page_content:comp1 comp2 comp3”

the id may represent a component identifier, the component _ type may represent a component underlying data type, the component _ name may represent a component name, the component _ title may represent a component title, the page _ id may represent a page identifier, the page _ name may represent a page name, and the page _ content may represent a component name of a component shown in the page.

In the embodiment of the application, when a page is accessed, the page structure information of the page is requested to the server once as long as the page is entered through the client, the page is generated according to the page structure information returned by the server, and if a new component is added to the client, the component information of the new component and the page information after page updating can be sent to the server, so that the client displays the page including the new component when the page is accessed next time. Therefore, the page configuration of the client and the information storage of the server can be linked, when the page is accessed, the client can acquire the page information and the component information from the server, the page to be accessed is generated according to the page information and the component information, the page is updated without waiting for the version updating time and following the version sending period, the page can be updated according to the requirement in real time, the page displayed after the page is accessed meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

Corresponding to the method embodiment of fig. 1, the present application further provides a client embodiment, and fig. 6 is a schematic structural diagram of a client provided according to an embodiment of the present application. As shown in fig. 6, the client includes:

a sending module 602, 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;

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

an analyzing module 606 configured to analyze the page structure information to obtain target page information and target component information;

a rendering module 608 configured to render the page to be accessed based on the target page information and the target component information.

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

the rendering module 608, further configured to:

rendering the page structure of the page to be accessed based on the target page information;

determining a first data type of the component bottom layer data according to the component bottom layer 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 assembly in the page to be accessed and the assembly bottom layer data of the first reference assembly in a rendered page structure according to the first data type and the first reference assembly data;

and adjusting the rendered first reference assembly according to the assembly attribute structure information.

Optionally, the rendering module 608 is further configured to:

under the condition that a first event between an initiating component and a receiving component is identified to be triggered, reading first event information from the target component information according to component identifications of the initiating component and the receiving component;

and rendering the event process of the first event according to the first event information.

Optionally, the rendering module 608 is further configured to:

under the condition that a second event of a preset component is identified to be triggered, reading second event information from the target component information according to a 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, wherein the data acquisition request is used for triggering 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 benchmark component in the page to be accessed and the data to be loaded of the second benchmark component in a rendered page structure according to the second data type and the second benchmark component data;

and adjusting the rendered second reference component according to the component attribute structure information.

Optionally, the rendering module 608 is further configured to:

identifying whether the component bottom layer data is nested data;

if so, disassembling the bottom layer data of the component in a recursive disassembling mode to obtain a plurality of subdata;

a first data type of the plurality of sub data is determined.

Optionally, the client further includes:

the display module is configured to display an editing page corresponding to the page to be accessed under the condition that an updating request for the page to be accessed is received;

a third receiving module configured to receive component editing information input on the editing page;

and the first updating module is configured to update the component information of the page to be accessed according to the component editing information, and send the updated component information to the server, wherein the updated component information is used for the server to update the page table and the component table.

Optionally, the first update module is further configured to:

identifying the editing type of the component according to the component identification carried by the component editing information;

under the condition that the component editing type is an updating component, updating component information corresponding to the updating component in the component information of the page to be accessed according to component updating information carried by the component editing information;

and under the condition that the component editing type is a newly added component, adding component information of the newly added component in the component information of the page to be accessed.

Optionally, the sending module 602 is further configured to:

acquiring page information and component information of a page to be configured, which are generated after a user drags and selects a component on the page to be configured;

and sending the page identification, the page information and the component information of the page to be configured to the server so as to be correspondingly stored in the page table and the component table.

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

The client side sends a page access request to the server side, wherein the page access request carries a page identifier of a page to be accessed; receiving page structure information of a page to be accessed, which is returned by a server, wherein the page structure information is obtained by the server searching a page table and a component table based on page identification, the page table records the corresponding relation between the page identification and the page information, and the component table records the corresponding relation between the component identification and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information. According to the method, the page display of the client and the information storage of the server are linked, when the page is accessed, the client can acquire 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, the page is updated along with the version sending period without waiting for the time of version update, and the page can be updated according to the requirement in real time, so that the page displayed after the page is accessed meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

The foregoing is an exemplary scheme of the client in this embodiment. It should be noted that the technical solution of the client belongs to the same concept as the technical solution of the above-mentioned page access method applied to the client, and details that are not described in detail in the technical solution of the client can be referred to the description of the above-mentioned technical solution of the page access method applied to the client.

Corresponding to the method embodiment of fig. 4, the present application further provides a server embodiment, and fig. 7 shows a schematic structural diagram of a server provided in an embodiment of the present application. As shown in fig. 7, the server includes:

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;

a first searching module 704, configured to search, 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 correspondence between the page identifier and page information, and the page information includes a component identifier;

a second searching module 706, configured to read a target component identifier in the target page information, and search, according to the target component identifier, target component information corresponding to the target component identifier from a component table, where a corresponding relationship between the component identifier and the component information is recorded in the component table;

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 rendering the client to obtain the page to be accessed.

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

receiving a page identifier, page information and component information of a page to be configured sent by the client, wherein the page information and the component information of the page to be configured are generated after the client acquires a component dragged and selected by a user on the page to be configured, and the page information comprises a component identifier of the dragged and selected component;

recording the page identification and the page information of the page to be configured into a pre-established page table in a corresponding recording mode;

and recording the component identification of the dragging and selecting component and the component information of the page to be configured into a pre-created component table in a corresponding recording mode.

Optionally, the server further includes:

and the second updating module is configured to 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 if the updated component information of the target component sent by the client is received.

The server receives a page access request sent by a client, where the page access request carries a page identifier of a page to be accessed, and according to the page identifier, target page information corresponding to the page to be accessed is searched from a page table, where the page table records a correspondence between the page identifier and the page information, the page information includes a component identifier, a target component identifier in the target page information is read, according to the target component identifier, target component information corresponding to the target component identifier is searched from a component table, and the component table records a correspondence between the component identifier and the component information. The method comprises the steps that after a client configures a page in a dragging component mode, page information and component information are sent to a server for storage, linkage of page configuration of the client and information storage of the server is achieved, when page access is conducted, the server acquires the page information from a page table according to a page access request of the client, acquires the component information from the component table and returns the component information to the client, so that the client generates a page to be accessed according to the page information and the component information, the page is updated without waiting for version update time and following a version sending period, the page can be updated in real time according to requirements, the page displayed after page access meets the access requirements, the server can be informed to update the page in time when any update is conducted on the page by the client, the effect of updating the page in real time is achieved, and the page obtained each time is guaranteed to be the latest configured page, the use experience of the user is improved, and the viscosity of the user is further improved.

The above is a schematic scheme of the server in this embodiment. It should be noted that the technical solution of the server side and the technical solution of the page access method applied to the server side belong to the same concept, and details of the technical solution of the server side, which are not described in detail, can be referred to the description of the technical solution of the page access method applied to the server side.

Fig. 8 is a 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, memory 810 and a processor 820. The processor 820 is coupled to the memory 810 via a bus 830, and the database 850 is used to store data.

Computing device 800 also includes access device 840, access device 840 enabling computing device 800 to communicate via one or more networks 860. Examples of such networks include a Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a 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 Network Interface (e.g., a Network Interface Card (NIC)) whether wired or Wireless, such as an IEEE802.11 Wireless Local Area Network (WLAN) Wireless Interface, a worldwide Interoperability for Microwave Access (Wi-MAX) Interface, an ethernet Interface, a Universal Serial Bus (USB) Interface, a cellular Network Interface, a bluetooth Interface, a Near Field Communication (NFC) Interface, and so forth.

In one embodiment of the application, the above-described components of the computing device 800 and other components not shown in fig. 8 may also be connected to each other, for example, by a bus. It should be understood that the block diagram of the computing device architecture shown in FIG. 8 is for purposes of example only and is not limiting as to the scope of the present application. Those skilled in the art may add or replace other components as desired.

Computing device 800 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., tablet, personal digital assistant, laptop, notebook, netbook, etc.), a mobile phone (e.g., smartphone), a wearable computing device (e.g., smartwatch, smartglasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. Computing device 800 may also be a mobile or stationary server.

Wherein the processor 820, when executing the computer instructions, performs the steps of any of the above-described page access methods.

The above is an illustrative scheme of a computing device of the present embodiment. It should be noted that the technical solution of the computing device and the technical solution of any page access method described above belong to the same concept, and details that are not described in detail in the technical solution of the computing device can be referred to the description of the technical solution of any page access method described above.

An embodiment of the present application further provides a computer readable storage medium, which stores computer instructions, and the computer instructions, when executed by a processor, implement the steps of any of the page access methods described above.

The above is an illustrative scheme of a computer-readable storage medium of the present embodiment. It should be noted that the technical solution of the storage medium belongs to the same concept as that of any one of the above-mentioned page access methods, and details that are not described in detail in the technical solution of the storage medium can be referred to the description of any one of the above-mentioned page access methods.

The foregoing description of specific embodiments of the present application has been presented. Other embodiments are within the scope of the following 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 desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.

The computer instructions comprise computer program code which may be in the form of source code, object code, an executable file or some intermediate form, or the like. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like.

Fig. 9 is a schematic structural diagram of a page access system provided according to an embodiment of the present application, where the page access system includes a client 902 and a server 904.

The client 902 sends a page access request to a server, where the page access request carries a page identifier of a page to be accessed;

the server 904 receives a page access request sent by a client, wherein the page access request carries a page identifier of a page to be accessed; searching target page information corresponding to the page to be accessed from a page table according to the page identifier, wherein the page table records the corresponding relation between the page identifier and the page information, and the page information comprises a component identifier; reading a target component identifier in the target page information, and searching target component information corresponding to the target component identifier from a component table according to the target component identifier, wherein the component table records the corresponding relation between the component identifier and the component information; splicing the target page information and the target component information to obtain page structure information, and returning the page structure information to the client, wherein the page structure information is used for rendering by the client to obtain the page to be accessed;

the client 902 receives page structure information of the page to be accessed, which is returned by the server, where the page structure information is obtained by the server by looking up a page table and a component table based on the page identifier, the page table records a corresponding relationship between the page identifier and the page information, and the component table records a corresponding relationship between the component identifier and the component information; analyzing the page structure information to obtain target page information and target component information; and rendering to obtain the page to be accessed based on the target page information and the target component information.

According to the page access system provided by the embodiment of the application, after the client configures the page in a component dragging mode, the client sends the page information and the component information to the server for storage, linkage of the page configuration of the client and the information storage of the server is achieved, when the page is accessed, the client can obtain the page information and the component information from the server, the page to be accessed is generated according to the page information and the component information, the page does not need to be updated according to the version update time and the version sending period, the page can be updated according to the requirement in real time, the page displayed after the page is accessed meets the access requirement, the use experience of a user is improved, and the viscosity of the user is further improved.

The above is an illustrative scheme of the page access system of the embodiment. It should be noted that the technical solution of the page access system and the technical solution of the page access method belong to the same concept, and details that are not described in detail in the technical solution of the page access system can be referred to the description of the technical solution of the page access method.

It should be noted that, for the sake of simplicity, the above-mentioned method embodiments are described as a series of acts or combinations, but those skilled in the art should understand that the present application is not limited by the described order of acts, as some steps may be performed in other orders or simultaneously according to the present application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.

In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

The preferred embodiments of the present application disclosed above are intended only to aid in the explanation of the application. Alternative embodiments are not exhaustive and do not limit the invention to the precise embodiments described. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the application and its practical applications, to thereby enable others skilled in the art to best understand and utilize the application. The application is limited only by the claims and their full scope and equivalents.

Claims

1. A page access method is applied to a client, and comprises the following steps:

2. The method of claim 1, wherein the target component information comprises component property structure information and component underlying data;

the step of obtaining the page to be accessed through rendering based on the target page information and the target component information comprises the following steps:

3. The method of claim 1, further comprising:

4. The method of claim 2, further comprising:

5. The method of claim 2, wherein the step of determining the first data type of the component-based data from the component-based data comprises:

identifying whether the component bottom layer data is nested data;

a first data type of the plurality of sub data is determined.

6. The method according to any of claims 1-5, wherein after the step of rendering the page to be accessed based on the target page information and the target component information, the method further comprises:

displaying an editing page corresponding to the page to be accessed under the condition of receiving an updating request aiming at the page to be accessed;

receiving component editing information input on the editing page;

and updating the component information of the page to be accessed according to the component editing information, and sending the updated component information to the server, wherein the updated component information is used for updating the page table and the component table by the server.

7. The method according to claim 6, wherein the step of updating the component information of the page to be accessed according to the component editing information comprises:

8. The method according to any of claims 1-5, wherein prior to the step of sending a page access request to a server, the method further comprises:

9. The method of any of claims 1-5, wherein the page structure information is data information in JSON SCHEMA format, and wherein the target page information and target component information are JSON data.

10. A page access method is applied to a server side, and comprises the following steps:

11. The method according to claim 10, wherein before the step of receiving the page access request sent by the client, the method further comprises:

12. The method according to claim 10 or 11, characterized in that the method further comprises:

and if receiving the updated component information of the target component sent by the client, updating the component information corresponding to the component identifier of the target component in the component table into the updated component information according to the component identifier of the target component.

13. A client, comprising:

14. A server, comprising:

15. The page access system is characterized by comprising a client and a server;

16. A computing device, comprising:

a memory and a processor;

the memory is for storing computer-executable instructions, and the processor is for executing the computer-executable instructions to implement the steps of the method of any one of claims 1-9 or claims 10-12.

17. A computer-readable storage medium storing computer-executable instructions which, when executed by a processor, perform the steps of the method of any one of claims 1 to 9 or claims 10 to 12.