WO2016177250A1

WO2016177250A1 - Client page rendering method and apparatus

Info

Publication number: WO2016177250A1
Application number: PCT/CN2016/078605
Authority: WO
Inventors: 陈舒婷; 常敏; 马磊; 叶斌
Original assignee: 阿里巴巴集团控股有限公司; 陈舒婷; 常敏; 马磊; 叶斌
Priority date: 2015-05-05
Filing date: 2016-04-06
Publication date: 2016-11-10
Also published as: HK1231588A1; CN106202096A

Abstract

A client page rendering method and apparatus. An original layout template records only desired key values of various components and position information thereof, so that corresponding component implementation classes pre-stored in a client can be searched according to the key values in the original layout template and further corresponding component description entries are generated in combination with component data in page details data sent by a server, and a details information exhibition page can be obtained by executing page rendering operations according to a target layout template composed of the various component description entries. It can be seen that both the component implementation classes and the original layout template have reusability and extendibility. When exhibition of an added product is required, only the key value of a component required by a preset layout template corresponding to the added product and the position thereof on a page need to be taken into account, without the need of considering how the component is implemented, thus the difficulty in design layout templates is lowered; and also development and release of a new version of the client are not needed, which improves the rate of utilization of the client and lowers development costs.

Description

Client page rendering method and device

Technical field

The present application relates to the field of network technologies, and in particular, to a client page rendering method and apparatus.

Background technique

With the development of mobile communication technologies and the popularization of electronic devices such as mobile phones and tablet computers, applications for electronic devices, that is, clients, are also increasing, such as mobile phone clients provided by various shopping websites. When these clients are running, they can communicate with the corresponding server, so that the product or service information provided by the server is rendered into a corresponding display page according to a certain layout, so that the user can know the above products through the electronic device anytime and anywhere. Service Information.

Generally, each version of the client displays a product or service layout template that is fixed. The layout template specifies which display areas are included in the display page, and which data is displayed in each display area, by associating different areas in the layout template. The data source is rendered to get the display page of different products.

However, as the business expands, the types of products provided by the server will increase accordingly. If the layout templates in the client are not suitable for displaying these new products, you need to develop a new version of the client to increase the display of new products. The layout template leads to higher development costs.

Summary of the invention

To overcome the problems in the related art, the present application provides a client page rendering method and apparatus.

A first aspect of the present application provides a client page rendering method; the method includes:

Receiving and parsing page detail data sent by the server, determining component data of the target page and the original layout template;

Searching for a component implementation class corresponding to each component key value recorded in the original layout template according to a preset first mapping between the key value and the implementation class name;

Generating corresponding component description items according to the component implementation class and component data;

Aggregate each component description item to generate a target layout template;

Performing a rendering operation according to the target layout template to obtain a detailed information display page of the target page.

In conjunction with the first aspect, in a first possible implementation manner of the first aspect, before the receiving the page detail data, the client page rendering method further includes:

Obtaining basic data of the page according to the uniform resource locator URL of the target page;

The rendering operation is performed according to the default layout template and the page basic data stored by the client, and the basic information display page of the target page is obtained.

With reference to the first aspect, or the first possible implementation manner of the first aspect, in the second possible implementation manner of the first aspect, the determining the original layout template of the target page includes:

Determining whether a preset layout template exists in the parsing result of the page detail data;

If the preset layout template exists, determining that the preset layout template is an original layout template;

If the preset layout template does not exist, it is determined that the default layout template is the original layout template.

With reference to the first aspect, or the first possible implementation manner of the first aspect, in the third possible implementation manner of the first aspect, the corresponding component description item is generated according to the component implementation class and component data, including:

Finding a group corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function Piece translation function;

The component translation function is called to process the component data to obtain a corresponding component description item.

A second aspect of the present application provides a client page rendering apparatus; the apparatus includes:

a data parsing unit, configured to receive and parse page detail data sent by the server, and determine component data and an original layout template of the target page;

a component class search unit, configured to search for a component implementation class corresponding to each component key value recorded in the original layout template according to a preset first mapping between the key value and the implementation class name;

a component translation unit, configured to generate a corresponding component description item according to the component implementation class and the component data;

a target template generating unit, configured to summarize each component description item to generate a target layout template;

The detailed information rendering unit is configured to perform a rendering operation according to the target layout template to obtain a detailed information display page of the target page.

In conjunction with the second aspect, in a first possible implementation manner of the second aspect, the client page rendering apparatus further includes:

a basic information rendering unit, configured to acquire basic page data according to a uniform resource locator URL of the target page before the data parsing unit receives the page detail data, and execute according to a default layout template and page basic data stored by the client The rendering operation gets the basic information display page of the target page.

With reference to the second aspect, or the first possible implementation manner of the second aspect, in the second possible implementation manner of the second aspect, the data parsing unit includes:

a layout template determining module, configured to determine whether a preset layout template exists in the parsing result of the page detail data, and if the preset layout template exists, determining the preset layout template as an original layout template, otherwise determining The default layout template is the original layout template.

With reference to the second aspect, or the first possible implementation manner of the second aspect, in the third possible implementation manner of the second aspect, the component translation unit includes:

a translation function search module, configured to search for a component translation function corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function;

The component data processing module is configured to invoke the component translation function to process the component data to obtain a corresponding component description item.

According to the above technical solution, in the embodiment of the present application, the original layout template records only the key values of each component and the location information thereof, and searches for the corresponding implementation class according to the key value when performing page rendering, so that the implementation class corresponding to the same component can be restored. Used for different layout templates, so when a new product appears, or the corresponding preset layout template is designed for the new product, and added to the page details data to return to the client, and the design new product corresponding When you preset a layout template, you only need to consider the required component key value and its position on the page. You don't need to think about how to implement the component, so you can reduce the design difficulty of the original layout template for new products. Or for this new Add product-specific new components, and add the mapping between its component key values and component implementation classes to the client, so that you can find the implementation class that calls the new component without modifying the query code. It can be seen that the embodiment of the present application can reduce the design difficulty of the layout template, and the component and the layout template have reusability and scalability. When the new product needs to be displayed, there is no need to develop and release a new version of the client, which can improve the utilization of the client. Reduce development costs.

It should be understood that the above general description and the following detailed description are merely exemplary and explanatory. This does not limit the application.

DRAWINGS

The accompanying drawings, which are incorporated in the specification of FIG

FIG. 1 is a flowchart of a method for rendering a client page according to an embodiment of the present application.

2 is a signal flow diagram of a client page rendering method provided by an embodiment of the present application.

FIG. 3 is a flowchart of a method for determining an original layout template in a client page rendering method provided by an embodiment of the present application.

FIG. 4 is a block diagram of a client page rendering apparatus according to an embodiment of the present application.

FIG. 5 is a block diagram of another client page rendering apparatus provided by an embodiment of the present application.

detailed description

Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. The following description refers to the same or similar elements in the different figures unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Instead, they are merely examples of devices and methods consistent with aspects of the invention as detailed in the appended claims.

FIG. 1 is a flowchart of a method for rendering a client page according to an embodiment of the present application. As shown in Figure 1, the method includes the following steps.

S11. Receive and parse page detail data sent by the server, and determine component data and an original layout template of the target page.

S12. Search for the original layout template according to a preset first mapping between the key value and the implementation class name. The component implementation class corresponding to each component key value recorded.

S13. Generate a corresponding component description item according to the component implementation class and the component data.

S14. Aggregate each component description item to generate a target layout template.

S15. Perform a rendering operation according to the target layout template to obtain a detailed information display page of the target page.

The embodiment of the present application adopts a componentized layout manner, that is, a display page is drawn in units of components, and each component represents at least one element in the page, such as a product preview image, a text box displaying a product name, etc., and different components are combined or Different layout templates can be obtained by setting the same component in different locations. In view of this, the embodiment of the present application sets a corresponding key value for each component and implements the implementation class of the component, and pre-stores the mapping relationship between the key value of each component and the implementation class that implements the component in the client. Correspondingly, only the key values of the required components and the position information of each component in the page are recorded in the original layout template; and then the client converts the original layout template into the target layout template by performing the above steps S12 to S14, the target The component description item corresponding to each component is recorded in the layout template, and the corresponding page element is drawn according to each component description item, and finally the target page is obtained.

According to the above technical solution, in the embodiment of the present application, the original layout template records only the key values of each component and the location information thereof, and searches for the corresponding implementation class according to the key value when performing page rendering, so that the implementation class corresponding to the same component can be restored. Used for different layout templates, so when a new product appears, or the corresponding preset layout template is designed for the new product, and added to the page details data to return to the client, and the design new product corresponding When you preset a layout template, you only need to consider the required component key value and its position on the page. You don't need to think about how to implement the component, so you can reduce the design difficulty of the original layout template for new products. Or for this new Increase product design specific Add a new component and add the mapping between its component key value and the component implementation class to the client, so that you can find the implementation class that calls the new component without modifying the query code. It can be seen that the embodiment of the present application can reduce the design difficulty of the layout template, and the component and the layout template have reusability and scalability. When the new product needs to be displayed, there is no need to develop and release a new version of the client, thereby improving the utilization of the client. Rate, reduce development costs.

In addition, in the three-layer logical architecture developed by the program, the program corresponding to the above page rendering method can also be divided into three levels, which are a data layer, a componentized template translation layer and a UI layer from bottom to top; wherein the above step S11 is performed by The data layer is executed, steps S12 to S14 are performed by the componentized template translation layer, and step S15 is performed by the UI layer.

In a possible embodiment of the present application, before the step S11, the following steps are further included:

The page basic data is obtained according to the uniform resource locator URL of the target page, and the rendering operation is performed according to the default layout template and the page basic data, and the basic information display page of the target page is obtained.

In the actual application, the process of obtaining the page detail data from the server and rendering the detailed information display page takes a certain time. To avoid the page blank time being too long, the client receives the page display instruction and then services the service. The request is sent to obtain the corresponding page detail data, and on the other hand, the basic information of the target page is obtained by analyzing the Uniform Resoure Locator (URL) of the target page to be displayed, and according to the default layout stored by the client. The template is rendered to get the basic information display page of the target page. The basic information may include a name, a header, a price, and the like of the product, and the step of rendering the basic information display page by the foregoing is directly performed by the UI layer.

The client page rendering method provided by the present application is performed with reference to the signal flow diagram shown in FIG. 2 Explain in detail.

As shown in FIG. 2, in step S21, the client receives a page display instruction sent by the user; after receiving the instruction, the client sends a page detail data acquisition request to the server, that is, step S22, and according to the default. The URL of the layout template and the target page performs the first rendering operation to obtain the basic information display page, that is, step S23; when the server returns the page detail data, the client receives the page detail data, as in step S24; and in step S25, the client The end parses the page detail data to determine the component data of the target page and the original layout template, and performs a secondary rendering operation according to the component data and the original layout template to obtain a detailed information display page of the target page, and the specific content of the secondary rendering operation. The steps are as described in steps S12 to S15 above, and are not described herein again.

It can be seen that, in the above embodiment, the client performs the rendering operation twice, wherein the first rendering operation does not depend on the data returned by the server, and can be executed in a short time to obtain a page for displaying basic information, thereby avoiding obtaining detailed information. Before the page is displayed, the page display window appears blank for a long time, which improves the user experience.

In another possible embodiment of the present application, the determining the original layout template of the target page in the foregoing step S11 may include the following steps:

Determining whether there is a preset layout template in the parsing result of the page detail data, and if the preset layout template exists, determining that the preset layout template is an original layout template, otherwise determining that the default layout template is the Original layout template.

In the page detail data, the data object description rule json (ie, JavaScript Object Notation) based on the JavaScript language may be used to record the related data of the preset layout template, that is, each data object related to the preset layout template is named “name: The value is recorded in the form of a plurality of data objects forming a json string; correspondingly, as shown in FIG. 3, the target can be determined by the following steps The original layout template for the page:

S111, determining whether there is a json string in the page detail data, if yes, executing step S112, otherwise performing step S115;

S112. Parse the json string in the page detail data.

S113, determining whether the json string can be successfully parsed, obtaining a layout template, if successful parsing, step S114 is performed, otherwise step S115 is performed;

S114. Mark the layout template obtained by parsing the json string as the original layout template of the target page.

S115. Mark the default layout template stored by the client as the original layout template of the target page.

According to the above steps, if the json string exists in the page detail data and the layout template can be successfully parsed, the parsed layout template is the preset layout template, that is, the preset layout template exists in the page detail data, so the preset is The layout template is marked as the original layout template of the target page; if there is no json string, or the json string cannot be successfully parsed, it is determined that the preset layout template does not exist in the page detail data, so the default layout template is marked as the original layout template of the target page. .

In another possible embodiment of the present application, the component description item generated according to the component implementation class and the component data described in the foregoing step S13 includes the following steps:

Finding a component translation function corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function;

According to the above steps, in the embodiment of the present application, the client is preset with two mapping tables, one of which records a mapping relationship between the component key value and the class name of the component implementation class, that is, the first mapping. The other record has a mapping relationship between the class name of the component implementation class and the component translation function, that is, the second mapping described above. The client performs the following operations on the component key values in the original layout template to obtain corresponding component description items: the component implementation class corresponding to the component key value is searched based on the first mapping, and then the component implementation class is included based on the second mapping The component translation function initializes the component translation function, reads the corresponding field in the component data as input data, and runs the component translation function to obtain the corresponding component description item.

The above-mentioned mapping table-based searching method is beneficial to realize multiplexing and expansion of components, that is, when new components need to be added according to product display requirements, only need to add corresponding mapping relationships in two mapping tables, according to the new The key value of the component is found to the corresponding component translation function, and the corresponding component description item is obtained.

FIG. 4 is a structural block diagram of a client page rendering apparatus according to an embodiment of the present application. Referring to FIG. 4, the apparatus includes: a data parsing unit 110, a component class searching unit 120, a component translating unit 130, a target template generating unit 140, and a detail information rendering unit 150.

The data parsing unit 110 is configured to receive and parse the page detail data sent by the server, and determine the component data of the target page and the original layout template.

The component class search unit 120 is configured to search for a component implementation class corresponding to each component key value searched in the original layout template according to a preset first mapping between the key value and the implementation class name.

The component translation unit 130 is configured to generate a corresponding component description item according to the component implementation class and component data.

The target template generation unit 140 is configured to summarize the respective component description item generation target layout templates.

The detailed information rendering unit 150 is configured to perform a rendering operation according to the target layout template Do, get the details information display page of the target page.

According to the above technical solution, in the embodiment of the present application, the original layout template records only the key values of each component and the location information thereof. When the page rendering is performed, the component class searching unit searches for the corresponding implementation class according to the key value, so that the same component corresponds. The implementation class can be reused for different layout templates, so when a new product appears, or a corresponding preset layout template is designed for the new product, and added to the page detail data to return to the client, and the new design Adding a preset layout template corresponding to the product only needs to consider the required component key value and its position on the page, and does not need to consider how to implement the component, thereby reducing the design difficulty of the original layout template applicable to the newly added product; Or design a specific new component for the new product, and add a mapping relationship between the component key value and the component implementation class to the client, so that the new component can be found and called without modifying the query code. Implementation class. It can be seen that the embodiment of the present application can reduce the design difficulty of the layout template, and the component and the layout template have reusability and scalability. When the new product needs to be displayed, there is no need to develop and release a new version of the client, thereby improving the utilization of the client. Rate, reduce development costs.

Referring to FIG. 5, in other embodiments of the present application, the client page rendering apparatus further includes: a basic information rendering unit 160.

The basic information rendering unit 160 is configured to obtain the page basic data according to the uniform resource locator URL of the target page before the data parsing unit 110 receives the page detail data, and according to the default layout template and the page basic stored by the client. The data performs a rendering operation to get a basic information display page of the target page.

It can be seen that, in the client page rendering apparatus provided by the embodiment of the present application, before the detailed information display page is rendered according to the page detail data returned by the server, the rendering operation is performed according to the URL of the target page and the default layout template, and the basic information display page is obtained. , to avoid showing details Before the page, the page display window appears blank for a long time, which improves the user experience.

In addition, in contrast to the three logical layers of the data layer, the componentized template translation layer and the UI layer, the data parsing unit belongs to the data layer, and the component class search unit, the component translation unit and the target target generating unit belong to the componentized template translation layer, and the detailed information Both the rendering unit and the basic information rendering unit belong to the UI layer.

In a possible embodiment of the present application, the data parsing unit 110 includes at least: a layout template determining module, and the layout template determining module is configured to determine whether a preset layout template exists in the parsing result of the page detail data. If the preset layout template exists, it is determined that the preset layout template is an original layout template, otherwise the default layout template is determined to be the original layout template.

Based on the above-mentioned layout template determining module, when a new product or service needs to be displayed, a preset layout template suitable for the newly added product or service may be set in the corresponding page detail data, so that the layout template determining module will give the preset layout. The template is used as the original layout template of the target page, and performs component data processing and rendering operations to obtain a detailed information display page with the best display effect; and for the original product or service, the page detail data may not set the data related to the layout template, thereby The layout template determination module uses the default layout template pre-stored by the client as the original layout template. Since the default layout template is designed according to the original product and service, the default layout template can also be used for the original product or service. Good details display page.

In another possible embodiment of the present application, the component translation unit 130 includes a translation function lookup module and a component data processing module.

The translation function lookup module is configured to search for a component translation function corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function.

The above-mentioned mapping table-based component implementation class and component translation function search mode is beneficial to realize multiplexing and expansion of components, that is, when new components need to be added according to product display requirements, only need to add corresponding in two mapping tables. Mapping the relationship, you can find the corresponding component translation function according to the key value of the newly added component, and then get the corresponding component description item.

With regard to the apparatus in the above embodiments, the specific manner in which the respective modules perform the operations has been described in detail in the embodiment relating to the method, and will not be explained in detail herein.

In addition, the embodiment of the present application further provides a computer storage medium, such as a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, and an optical data storage device. The computer storage medium stores a program. When the program in the storage medium is executed by the processor of the terminal device, the terminal device is enabled to perform some or all of the steps of the client page rendering method described in the foregoing method embodiments.

Other embodiments of the invention will be apparent to those skilled in the <RTIgt; The present application is intended to cover any variations, uses, or adaptations of the present invention, which are in accordance with the general principles of the present invention and include common general knowledge or conventional technical means in the art not disclosed herein. . The specification and examples are to be considered as illustrative only,

It is to be understood that the invention is not limited to the details of the details of The scope of the invention is limited only by the appended claims.

Claims

A client page rendering method, comprising:

Receiving and parsing page detail data sent by the server, determining component data of the target page and the original layout template;

Searching for a component implementation class corresponding to each component key value recorded in the original layout template according to a preset first mapping between the key value and the implementation class name;

Generating corresponding component description items according to the component implementation class and component data;

Aggregate each component description item to generate a target layout template;

Performing a rendering operation according to the target layout template to obtain a detailed information display page of the target page.
The client page rendering method according to claim 1, wherein before the receiving the page detail data, the method further comprises:

Obtaining basic data of the page according to the uniform resource locator URL of the target page;

The rendering operation is performed according to the default layout template and the page basic data stored by the client, and the basic information display page of the target page is obtained.
The client page rendering method according to claim 1 or 2, wherein the determining the original layout template of the target page comprises:

Determining whether a preset layout template exists in the parsing result of the page detail data;

If the preset layout template exists, determining that the preset layout template is an original layout template;

If the preset layout template does not exist, it is determined that the default layout template is the original layout template.
The client page rendering method according to claim 1 or 2, wherein the component description item is generated according to the component implementation class and component data, including:

Finding a component translation function corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function;

The component translation function is called to process the component data to obtain a corresponding component description item.
A client page rendering device, comprising:

a data parsing unit, configured to receive and parse page detail data sent by the server, and determine component data and an original layout template of the target page;

a component class search unit, configured to search for a component implementation class corresponding to each component key value recorded in the original layout template according to a preset first mapping between the key value and the implementation class name;

a component translation unit, configured to generate a corresponding component description item according to the component implementation class and the component data;

a target template generating unit, configured to summarize each component description item to generate a target layout template;

The detailed information rendering unit is configured to perform a rendering operation according to the target layout template to obtain a detailed information display page of the target page.
The device according to claim 5, further comprising:

a basic information rendering unit, configured to acquire basic page data according to a uniform resource locator URL of the target page before the data parsing unit receives the page detail data, and execute according to a default layout template and page basic data stored by the client The rendering operation gets the basic information display page of the target page.
The device according to claim 5 or 6, wherein the data parsing unit comprises:

a layout template determining module, configured to determine whether a preset layout template exists in the parsing result of the page detail data, and if the preset layout template exists, determining the preset layout template as an original layout template, otherwise determining The default layout template is the original layout template.
The device according to claim 5 or 6, wherein the component translation unit comprises:

a translation function search module, configured to search for a component translation function corresponding to the component implementation class according to a preset second mapping between the implementation class name and the function;

The component data processing module is configured to invoke the component translation function to process the component data to obtain a corresponding component description item.