Method and system for quickly and dynamically constructing and adjusting page based on floor component

Abstract

The invention belongs to the technical field of page display, and discloses a method and a system for quickly and dynamically constructing and adjusting a page based on a floor component, the method comprises the following steps: acquiring configuration information of a rear end to the floor component, the configuration information comprising a style configuration data list and a corresponding content list, the content list comprises at least one to-be-displayed content; traversing the style configuration data list, and extracting a component type and a component parameter of a floor component for displaying each to-be-displayed content; based on the component type, matching a corresponding floor component from a preset component library, and loading each to-be-displayed content into the corresponding floor component to obtain a loaded floor component; based on the component parameters, adding the loaded floor component into a preset external container to obtain an outer-layer container component; and rendering the outer-layer container component to obtain a display page. According to the invention, the floor sequence and the display content in the display area can be flexibly controlled.

Description

Technical Field

[0001] The present invention belongs to the technical field of page display, and in particular relates to a method and system for fast dynamic construction and adjustment of pages based on floor components. Background Art

[0002] Currently, there are two ways to develop pages on the middle screen: 1) Build the entire page on the middle screen and fill in data with the backend interface; 2) Build the page using a template tool on the backend platform. During the construction process, configure the layout attributes and corresponding data of the page elements, and then generate a set of page codes for rendering on the middle screen.

[0003] Method 1) requires code modifications and upgrades when page adjustments are needed. This is particularly problematic when dynamically adjusting page presentation based on user habits. Method 2) statically generating the entire page, while more flexible, is cumbersome. Even adjusting a small part requires regenerating the entire page, resulting in significant impact.

[0004] Therefore, the prior art has at least the following defects: 1) The entire page is built at one time, which makes it difficult to maintain and adjust it later; 2) Building pages and configuring static data through templates based on a single component leads to complex data and page adjustments. Summary of the Invention

[0005] The purpose of the present invention is to provide a method and system for fast dynamic construction and adjustment of pages based on floor components, so as to solve the problems of inconvenient later maintenance and adjustment and complex data and page adjustment existing in the prior art.

[0006] In order to achieve the above object, the present invention adopts the following technical solutions: In a first aspect, the present invention provides a method for quickly and dynamically constructing and adjusting a page based on a floor component, the method comprising: Obtaining backend configuration information for floor components, the configuration information including: a style configuration data list and a corresponding content list, the content list including at least one content to be displayed; Traverse the style configuration data list and extract the component type and component parameters of the floor components used to display the content to be displayed; Based on the component type, the corresponding floor component is matched from the preset component library, and each content to be displayed is loaded into the corresponding floor component to obtain the loaded floor component; Based on the component parameters, add the loaded floor component to the preset outer container to obtain the outer container component; Render the outer container component to get the display page.

[0007] Preferably, the component types include at least: carousel, 1-to-4, 1-to-3, 1 row N columns and grid, where N is a positive integer.

[0008] Preferably, the style configuration data list includes at least: floor title configuration, title display configuration, component type configuration, display background configuration, display parameter configuration and display capacity configuration; wherein, the display capacity configuration includes: maximum content quantity and minimum content quantity; the display parameter configuration includes: aspect ratio, column width ratio, vertical spacing and horizontal spacing.

[0009] Preferably, the content to be displayed is the name and thumbnail of the display object, and the content list further includes: a jump link of the content to be displayed and a corresponding jump type.

[0010] Preferably, the method further comprises: The backend configures the name and thumbnail of each floor component that needs to be displayed, and creates jump links and corresponding jump types; The backend configures the title and component type of the floor component; Backend configuration of floor components’ aspect ratio, column width ratio, vertical spacing and horizontal spacing; The background color or background image of the back-end configuration floor component; The backend configures the display capacity of the floor component, which is the minimum and maximum amount of content displayed by the floor component.

[0011] Preferably, the method also includes: generating content of interest to the user based on an intelligent recommendation algorithm, creating new floor components based on the content of interest to the user, adding the new floor components to the outer container components, and replacing the existing floor components in the outer container components.

[0012] Preferably, the method further comprises: expanding or deleting the component type.

[0013] In a second aspect, the present invention provides a system for rapidly and dynamically constructing and adjusting pages based on floor components, for implementing the aforementioned method for rapidly and dynamically constructing and adjusting pages based on floor components. The system comprises: A configuration acquisition module is used to obtain configuration information of the floor component from the backend, wherein the configuration information includes: a style configuration data list and a corresponding content list, wherein the content list includes at least one content to be displayed; A parameter extraction module is used to traverse the style configuration data list and extract the component type and component parameters of the floor components used to display each content to be displayed; The content loading module is used to match the corresponding floor component from the preset component library based on the component type, and load each content to be displayed into the corresponding floor component to obtain the loaded floor component; The component adding module is used to add the loaded floor component to the preset outer container based on the component parameters to obtain the outer container component; The component rendering module is used to render the outer container component to obtain the display page.

[0014] Beneficial effects: After the present invention obtains the configuration information of the floor components from the back end, the front end can flexibly select the corresponding floor components according to the configuration information, and generate a display area (i.e., an external container) according to the component parameters. The floor order and display content in the display area can be flexibly controlled, which solves the problems of building the page once as a whole, which is inconvenient to maintain and adjust later, and building the page and configuring static data through templates based on a single component, which makes data and page adjustments complicated. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following detailed description, they are used to explain the embodiments of the present invention, but do not constitute a limitation of the embodiments of the present invention. In the accompanying drawings: Figure 1 This is a flow chart of a method for fast dynamic construction and adjustment of a page based on floor components provided by an embodiment of the present invention; Figure 2 This is a schematic diagram of the layout of a display page provided by one embodiment of the present invention; Figure 3 It is a block diagram of a system for fast dynamic construction and adjustment of pages based on floor components provided by one embodiment of the present invention.

[0016] Description of reference numerals: 1. Display panel; 2. External container; 3. Floor area; 4. Floor component; 5. Title bar. DETAILED DESCRIPTION

[0017] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the present invention will be briefly introduced below in conjunction with the drawings and the description of the embodiments or the prior art. Obviously, the following description of the structure of the drawings is only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work. It should be noted that the description of these embodiments is used to help understand the present invention, but does not constitute a limitation of the present invention.

[0018] Example 1 Figure 1 This is a flow chart of a method for quickly and dynamically building and adjusting a page based on floor components provided by an embodiment of the present invention. Figure 1 As shown, this embodiment provides a method for quickly and dynamically building and adjusting a page based on a floor component. The application scenarios of this method include the front-end and the back-end. The front-end is a front-end application (such as an APP), and the back-end can be a cloud server, etc. The front-end and the back-end establish a communication connection via the Internet, and the method runs on the front-end side. The method includes: Step S10: The front end obtains the back end's configuration information of the floor component, wherein the configuration information includes: a style configuration data list and a corresponding content list, wherein the content list includes at least one content to be displayed.

[0019] In this embodiment, the style configuration data list includes at least: floor title configuration, title display configuration, component type configuration, display background configuration, display parameter configuration and display capacity configuration; wherein, the display capacity configuration includes: maximum content quantity and minimum content quantity; the display parameter configuration includes: aspect ratio, column width ratio, vertical spacing and horizontal spacing.

[0020] In this embodiment, the content to be displayed is the name and thumbnail of the display object, and the content list also includes: a jump link of the content to be displayed and a corresponding jump type; wherein the display object includes but is not limited to movies, e-books, games, etc.

[0021] In this embodiment, all floor components are pre-stored in the component library of the front end, and the component types include but are not limited to carousels, 1-to-4, 1-to-3, 1 row and N columns, and grids. The floor component of the carousel has multiple sub-components, and the multiple sub-components are switched in turn. The floor component of 1-to-4 has a main component and four sub-components. The main component is used to display core (important) content, and the four sub-components are used to display other content. The structure of the floor components of 1-to-3 and 1-to-4 is similar; the floor component of 1 row and N columns has N horizontally arranged sub-components, where N is a positive integer, and the floor component of the grid has sub-components arranged in multiple rows and columns.

[0022] In this embodiment, the component types of the floor components are managed by the front end, such as expanding (such as adding new styles) or deleting component types; therefore, this embodiment can uniformly manage the configuration of the floor components through the back end, and each style of floor components can be configured with different attribute parameters, and the front end can display different pages.

[0023] As a further optimization of this embodiment, when the backend generates the configuration information for the floor component, the specific steps of generating are as follows: Step a10: The backend configures the name and thumbnail of each floor component that needs to be displayed, and creates a jump link and corresponding jump type; Step a20: The backend configures the title and component type of the floor component; Step a30: The backend configures the aspect ratio, column width ratio, vertical spacing, and horizontal spacing of the floor component; Step a40: back-end configuration of the background color or background image of the floor component; Step a50: The backend configures the display capacity of the floor component, where the display capacity is the minimum and maximum amount of content displayed by the floor component.

[0024] In this embodiment, if Figure 2 As shown, the page displayed on the panel 1 of the display includes: an external container 2, a floor area 3, a floor component 4 and a title bar 5. The size of the external container 2 is smaller than the size of the panel 1 of the display. Multiple floor areas 3 are deployed in the external container 2, and a floor component 4 is deployed in one floor area 3. The floor component 4 is composed of multiple sub-components; the title bar 5 is used to display the floor title, and the floor title can be configured to be displayed or hidden according to the configuration information.

[0025] The display parameter configuration of this embodiment includes the following types: 1. The top, bottom, left, and right margins and padding of the outermost layout container and floor components; 2. By default, the width of the floor component fills the entire space of the outer container horizontally, and the height of the floor component is dynamically calculated based on the aspect ratio; 3. If the spacing between sub-components within a floor is not set, the default spacing between sub-components within a floor is 0; 4. The subcomponents within a floor occupy the allocated space by default. If the column width ratio is not set, the width of each subcomponent is evenly distributed according to the number of columns by default.

[0026] In this embodiment, the title display configuration is generally as follows: the floor title is displayed by default, and whether the title is displayed can be controlled by attributes. If the title field is empty, no title is displayed.

[0027] In this embodiment, the component type of the carousel is configured as follows: by default, it occupies the entire component area, and different display styles can be configured (1: cascading style, 2: tiled style, etc.).

[0028] In this embodiment, the 1-to-4 component type is configured as follows: by default, the first grid spans two rows and occupies the entire component area, and the other four components are evenly distributed on the right. The horizontal and vertical spacing between components can be configured.

[0029] In this embodiment, the 1-to-3 component type configuration is: by default, the first grid spans two rows and occupies the entire component area, the second and third components occupy the first row and are evenly divided into columns, and the fourth component occupies the second row and spans two columns.

[0030] In this embodiment, the component type configuration of a row of N columns is: the column width ratio does not need to be set, and the default is that the component area width is evenly distributed among the columns. The column width ratio setting method is as follows: 1. 50: means the first column takes up 50% of the space, and the remaining space is divided equally among the other columns; 2. 40:20: means the first column occupies 40%, the second column occupies 20%, and the remaining space is divided equally among the other columns.

[0031] In this embodiment, the grid component type is configured as follows: the height is not fixed, and the height is dynamically calculated based on the specific component content height and the number of rows.

[0032] Therefore, operators only need to build pages based on floor components and bind content based on floor components. Most of the subsequent time, they only need to focus on content updates in floor components.

[0033] For example, a floor component developed on the front end needs to be dynamically adjusted based on operational requirements. Therefore, the component information needs to be configured with different style attributes based on different application scenarios. For example, the aspect ratio of a 1-by-4 floor component on a medium screen is 3.5, while the aspect ratio of a 1-by-4 floor component on a small screen is 3.2. These style attributes need to be entered on the front end and then distributed to the medium and small screens through interface data to control the component's displayed style.

[0034] In this embodiment, the data format code of a certain configuration information is as follows: { "code": 200, "msg": null, "data": [ { "floorTitle": "Title: 1 row 5 columns", / / floor title "showFloorTitle": true, / / whether to display the title "floorType": "row_five_columns", / / Floor style type: 1 row and 5 columns "widthHeightAspectRatio": "10.6", / / Aspect ratio "colWeights": "20:20:20:20:20", / / column width ratio "vGap": 30, / / vertical spacing "hGap": 30, / / horizontal spacing "floorBackgroundColor": "#FF00FF", / / floor background color "minContentNum": 5, / / minimum content number "maxContentNum": 5, / / Maximum number of contents "contents": [ { "title": "Video Name 1", "thumbnailImageUrl": "Movie thumbnail", "pageType": 8, / / jump type after clicking "linkUrl": "", / / Click to jump to the link "sort": 1 }, { "title": "Video Name 2", "thumbnailImageUrl": "Movie thumbnail", "pageType": 7, / / jump type after clicking "linkUrl": "", / / Click to jump to the link "sort": 2 }, { / / Other video content information } ] }, { "floorTitle": "Title: 1 to 4", "showFloorTitle": true, "floorType": "one_plus_four", "widthHeightAspectRatio": "3.08", "colWeights": "44:28:28", "vGap": 30, / / vertical spacing "hGap": 30, / / horizontal spacing "floorBackgroundImg": "https: / / www.xxx.com / xxx / abc.png", / / Floor background image "minContentNum": 5, "maxContentNum": 5, "contents": [ { "title": "Video Name 3", "thumbnailImageUrl": "Movie thumbnail", "pageType": 5, / / jump type after clicking "linkUrl": "", / / Click to jump to the link "sort": 1 }, { "title": "Video Name 4", "thumbnailImageUrl": "Movie thumbnail", "pageType": 2, / / jump type after clicking "linkUrl": "", / / Click to jump to the link "sort": 2 }, { / / Other video content information } ] },{ / / Other floor component information } ] } The meaning of the fields of the data format code is shown in Table 1: Table 1

[0035] Step S20: The front end traverses the style configuration data list and extracts the component type and component parameters of the floor components used to display the content to be displayed. The component parameters include display parameters, display capacity, display background, etc.

[0036] Step S30: The front end matches the corresponding floor component from the preset component library based on the component type, and loads each content to be displayed into the corresponding floor component to obtain the loaded floor component.

[0037] Step S40: Based on the component parameters, the front end adds the loaded floor component to the preset external container to obtain the outer container component. For example, according to the parameters such as aspect ratio, column width ratio, vertical spacing and horizontal spacing in the above data format code, the floor component is added to the external container so that the floor component can fill the entire external container.

[0038] Step S50: The front end renders the outer container component to obtain a display page.

[0039] In this embodiment, after the front end completes rendering of the outer container component, the obtained display page is sent to the display for visual display.

[0040] As a further optimization of this embodiment, the method also includes: generating content of interest to the user based on an intelligent recommendation algorithm, creating new floor components based on the content of interest to the user, adding the new floor components to the outer container components, and replacing the existing floor components in the outer container components.

[0041] In this embodiment, the intelligent recommendation algorithm can be an artificial intelligence algorithm such as a neural network, a long short-term memory model, etc., which collects the user's viewing history and behavioral data such as clicks and searches, analyzes the user's content of interest, creates new floor components based on the content of interest, and continuously provides users with high-quality content.

[0042] Therefore, the component library of the present invention can be continuously expanded based on operational needs. After the operator has built the page, the order of the page floors and the order of the specific content on each floor can be flexibly controlled. This solves the problems of building a page all at once, which is inconvenient for later maintenance and adjustment, and the complex data and page adjustments caused by template-based page building and static data configuration based on a single component. For example, based on user behavior data analysis, if a user's personal preference is for the content on floor 3, the recommendation algorithm can directly adjust the sequence number of the existing floor or create a new floor, replace the content on the floor, or adjust the sequence number of the content, thus achieving a personalized effect for each user.

[0043] Example 2 Figure 3This is a block diagram of a system for fast dynamic construction and adjustment of pages based on floor components provided by an embodiment of the present invention. Figure 3 As shown, this embodiment provides a system for fast dynamic construction and adjustment of pages based on floor components, which is used to implement the method for fast dynamic construction and adjustment of pages based on floor components in embodiment 1. The system includes: A configuration acquisition module is used to obtain configuration information of the floor component from the backend, wherein the configuration information includes: a style configuration data list and a corresponding content list, wherein the content list includes at least one content to be displayed; A parameter extraction module is used to traverse the style configuration data list and extract the component type and component parameters of the floor components used to display each content to be displayed; The content loading module is used to match the corresponding floor component from the preset component library based on the component type, and load each content to be displayed into the corresponding floor component to obtain the loaded floor component; The component adding module is used to add the loaded floor component to the preset outer container based on the component parameters to obtain the outer container component; The component rendering module is used to render the outer container component to obtain the display page.

[0044] This embodiment also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for rapid dynamic construction and adjustment of pages based on floor components in the first embodiment is implemented.

[0045] This embodiment also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method for quickly and dynamically constructing and adjusting a page based on floor components in the first embodiment is implemented.

[0046] After the present invention obtains the configuration information of the floor components from the back end, the front end can flexibly select the corresponding floor components according to the configuration information, and generate a display area (i.e., an external container) according to the component parameters. The floor order and display content in the display area can be flexibly controlled, which solves the problems of building the page once as a whole, which is inconvenient to maintain and adjust later, and building the page and configuring static data through templates based on a single component, which makes data and page adjustments complicated.

[0047] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

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

[0049] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A method for fast dynamic construction and adjustment of pages based on floor components, characterized in that: The method comprises: Obtaining backend configuration information for floor components, the configuration information including: a style configuration data list and a corresponding content list, the content list including at least one content to be displayed; Traverse the style configuration data list and extract the component type and component parameters of the floor components used to display the content to be displayed; Based on the component type, the corresponding floor component is matched from the preset component library, and each content to be displayed is loaded into the corresponding floor component to obtain the loaded floor component; Based on the component parameters, add the loaded floor component to the preset outer container to obtain the outer container component; Render the outer container component to get the display page.

2. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 1 is characterized in that: The component types include at least: carousel, 1-to-4, 1-to-3, 1 row N columns and grid, where N is a positive integer.

3. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 1 is characterized in that: The style configuration data list includes at least: floor title configuration, title display configuration, component type configuration, display background configuration, display parameter configuration and display capacity configuration; wherein, the display capacity configuration includes: maximum content quantity and minimum content quantity; the display parameter configuration includes: aspect ratio, column width ratio, vertical spacing and horizontal spacing.

4. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 3 is characterized in that: The content to be displayed is the name and thumbnail of the display object, and the content list also includes: a jump link of the content to be displayed and a corresponding jump type.

5. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 4 is characterized in that: The method further comprises: The backend configures the name and thumbnail of each floor component that needs to be displayed, and creates jump links and corresponding jump types; The backend configures the title and component type of the floor component; Backend configuration of floor components’ aspect ratio, column width ratio, vertical spacing and horizontal spacing; The background color or background image of the back-end configuration floor component; The backend configures the display capacity of the floor component, which is the minimum and maximum amount of content displayed by the floor component.

6. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 5 is characterized in that: The method also includes: generating content of interest to the user based on an intelligent recommendation algorithm, creating a new floor component based on the content of interest to the user, adding the new floor component to the outer container component, and replacing the existing floor component in the outer container component.

7. The method for fast dynamic construction and adjustment of pages based on floor components according to claim 1 is characterized in that: The method further includes: extending or deleting the component type.

8. A system for fast dynamic construction and adjustment of pages based on floor components, used to implement the method for fast dynamic construction and adjustment of pages based on floor components according to any one of claims 1 to 7, characterized in that: The system comprises: A configuration acquisition module is used to obtain configuration information of the floor component from the backend, wherein the configuration information includes: a style configuration data list and a corresponding content list, wherein the content list includes at least one content to be displayed; A parameter extraction module is used to traverse the style configuration data list and extract the component type and component parameters of the floor components used to display each content to be displayed; The content loading module is used to match the corresponding floor component from the preset component library based on the component type, and load each content to be displayed into the corresponding floor component to obtain the loaded floor component; The component adding module is used to add the loaded floor component to the preset outer container based on the component parameters to obtain the outer container component; The component rendering module is used to render the outer container component to obtain the display page.

Images