Data component sinking method and device under page assembly
By establishing a data component library and configuring the association between UI components and data components in the page layout, the problem of increased server-side development costs due to data component maintenance is solved, enabling rapid iteration and unified management, and supporting rapid response to different user needs.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- SHANGHAI SHUHE INFORMATION TECH CO LTD
- Filing Date
- 2023-03-28
- Publication Date
- 2026-07-07
AI Technical Summary
In current internet businesses, the way data components are maintained increases the development cost of the server and makes it difficult to achieve rapid iteration and unified management.
Establish a data component library to store data components, and configure the association between UI components and data components in the page layout. Support grayscale management and data acquisition at different granularities to achieve the sinking and unified management of data components.
It enables rapid iteration and unified management of data components, reduces server-side development costs, supports rapid response to different user needs, and achieves a personalized display effect.
Smart Images

Figure CN116361590B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer technology, and in particular to a method and apparatus for the drop-down of data components in page layout. Background Technology
[0002] In today's internet business, the digital age is developing rapidly, and the presentation of services varies greatly among different users. Most businesses not only require a "personalized experience" for each user but also demand the fastest possible iteration of different pages. A page can be broken down into different parts, which we call UI components. Apart from some components without special meaning, such as dividers, each component is supported by different data; we call these data components.
[0003] With the increasing prevalence of microservice systems, current data component maintenance methods have increased server-side development costs. No effective solution has yet been proposed to address these issues. Summary of the Invention
[0004] Therefore, it is necessary to provide a method and device for data component sinking in page assembly to address the above-mentioned technical problems. This method enables data component sinking without relying on specific business systems and allows for unified management.
[0005] According to a first aspect of the present invention, a method for data component sinking in page assembly is provided, comprising:
[0006] Steps to establish a data component library: Establish a data component library to store data components;
[0007] The page assembly steps include: laying out the page, configuring the UI components on the page, and associating the UI components with the corresponding data components;
[0008] The data acquisition steps are as follows: obtain the page layout, and obtain the corresponding data based on the data components associated with the UI components on the page;
[0009] The page generation process involves generating a display page based on the page layout, with data in the page including the corresponding data obtained from the data components.
[0010] In some embodiments, during the data acquisition step, the data component acquires the corresponding data in a manner that includes acquiring data through at least one of business configuration, API configuration, and policy configuration.
[0011] In some embodiments, during the data acquisition step, the data component acquires the corresponding data in a way that supports grayscale management, by configuring different granularities of grayscale for different data components to acquire data.
[0012] In some embodiments, data components in the data component library are classified into different modules according to the different business to which the data components belong, and the different modules are packaged into corresponding software packages for reference.
[0013] In some embodiments, a UI component is associated with multiple data components. The data components have business attributes and scenarios, and the corresponding business attributes are set according to different scenarios.
[0014] In some embodiments, a UI component is associated with a corresponding data component, including defining a method for the data component and adding a corresponding annotation to the method. The annotation defines two attributes: the UI component name and the data component name. The relationship mapping between the UI component and the data component is retrieved by reading the annotation.
[0015] According to a second aspect of the present invention, a data component sinking device under page mounting is provided, comprising:
[0016] The data component library creation module is used to create a data component library to store data components;
[0017] The page assembly module is used for page layout, configuration of UI components in the page, and association of UI components with corresponding data components;
[0018] The data acquisition module is used to obtain the page layout and retrieve the corresponding data based on the data components associated with the UI components on the page.
[0019] The page generation module is used to generate a display page based on the page layout. The data in the page includes the corresponding data obtained from the data component.
[0020] According to a third aspect of the present invention, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that the processor executes the computer program to implement the steps of any of the methods described above.
[0021] According to a fourth aspect of the present invention, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of the methods of any of the above embodiments.
[0022] By implementing the above-described solution of the present invention, the following beneficial effects can be obtained:
[0023] 1. Establish a data component library to store data components. This library is a separate project, and components are referenced through its code. Decentralizing data components facilitates rapid business iteration without altering the underlying data. This saves on server-side development costs, while also enabling unified management, providing a clear overview of all components and allowing for quick selection of relevant content.
[0024] 2. Data can be acquired according to different scenarios and in a gray-scale manner, supporting different changes in data requirements, helping enterprises iterate their business, and quickly generating different display pages based on different users, achieving "personalized experience for each user". Attached Figure Description
[0025] Figure 1 This is a flowchart of some embodiments of the data component sinking method under page assembly of the present invention;
[0026] Figure 2 These are schematic diagrams of data component models according to some embodiments of the present invention;
[0027] Figure 3 This is a flowchart of some other embodiments of the data component sinking method under page assembly of the present invention;
[0028] Figure 4 These are schematic diagrams illustrating the structure of some embodiments of the data component sinking device under the page assembly of the present invention;
[0029] Figure 5 This is an internal structural diagram of a computer device used to implement some embodiments of the present invention. Detailed Implementation
[0030] Embodiments of the invention will now be described more fully with reference to the accompanying drawings, in which embodiments of the invention are illustrated. However, the invention may be practiced in many different forms, and should not be construed as limited to the embodiments set forth herein.
[0031] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit this disclosure. As used herein, the singular forms “a” and “this” are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that, when used herein, the term “comprising” specifies the presence of the stated features, integrals, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or groups thereof.
[0032] Unless otherwise defined, the terms used herein (including technical and scientific terms) shall have the same meaning as commonly understood by one of ordinary skill in the art to which this disclosure pertains. Terms used herein shall be interpreted as having the same meaning as they have in the context of this specification and in the relevant field, and shall not be interpreted in an idealized or overly formal sense, unless specifically defined herein.
[0033] Before describing the specific details of this application, the meanings of the terms used in this application will be briefly explained.
[0034] UI components and data components: A page can be broken down into different parts, called UI components. Aside from some components without special meaning, such as separators, each component is supported by different data, which is obtained through data components.
[0035] Routing: Routing refers to the network-wide process of determining the end-to-end path for packets as they travel from source to destination. In the networking field, different routing strategies determine different end-to-end paths. This design concept can also be applied to the credit field, referring to a set of decisions, with the core being the process of different end-to-end customer fund allocation strategies.
[0036] Figure 1 The flowcharts illustrate some embodiments of the data component sinking method under page assembly of the present invention.
[0037] like Figure 1 As shown, the method includes:
[0038] Step S102: Establish a data component library to store data components.
[0039] Page assembly step S104: Perform page layout, configure UI components in the page, and associate UI components with corresponding data components;
[0040] In data acquisition step S106, the page layout is obtained, and the corresponding data is obtained based on the data components associated with the UI components in the page.
[0041] Page generation step S108: Generate a display page based on the page layout. The data in the page includes the corresponding data obtained from the data component.
[0042] In some embodiments, the data component library establishment step S102 includes: adding a new data component library specifically for storing data component-related services. This data component library establishes different modules based on the respective business. For example, there are modules for borrowing, repayment, application, and a general module, where the general module stores some common components. For the UI component selection box, the data selection box corresponds to a loan routing selection (borrower, amount, term, etc.) in the borrowing business. Different modules can be packaged into corresponding software packages for reference.
[0043] In some embodiments, the page assembly step S104 associates the UI component with the corresponding data component, including: defining the data component and associating it with the corresponding UI component. For the UI component's selection box, it is defined as UI_COMMON_SELECT. The data selection box will be used for different business aspects such as gender, education level, occupation, and income. For each data component, a method is defined, and each method is annotated with the corresponding annotation Component. This annotation defines two attributes: a UI component name (type) and a data component name (dataType).
[0044] For example: the income data component is defined as @Component(type="UI_COMMON_SELECT", dataType="BIZ_COMMON_SELECT_INCOME"); the education component is defined as @Component(type="UI_COMMON_SELECT", dataType="BIZ_COMMON_SELECT_EDUCATION"); each annotation is read when the service starts and the corresponding mapping is retrieved.
[0045] Figure 2 A schematic diagram of a data component model according to some embodiments of the present invention is shown. For example... Figure 2 As shown: For UI component A, our corresponding data components may be biz_A1 (e.g., education level), biz_A2, and biz_A3; and the same data component biz_A1 may have business attributes, such as three business attributes: A11 (e.g., income), A12, and A13; at the same time, a data component may have three scenarios, such as three scenarios: scene1 (e.g., application page), scene2, and scene3, and the corresponding values are set according to different scenarios.
[0046] In some embodiments, the data component acquires the corresponding data in data acquisition step S106 in the following ways:
[0047] Business configuration: In the implementation method of each data component, if business data configuration is required to obtain data, the configuration is specified in the code and the configuration content is read. Later, product personnel can modify the corresponding data in the operation interface.
[0048] API configuration: In the implementation method of each data component, if it is necessary to rely on third-party systems to obtain data, the corresponding service interface is called in the code to obtain the data, and finally assembled and processed.
[0049] Strategy Configuration: In the implementation method of each data component, if strategy configuration is required to obtain data, the strategy is called and the content returned by the strategy is read. Later, product personnel can add, delete or modify the corresponding data in the strategy operation interface.
[0050] All three scenarios above include grayscale management, allowing you to configure different granularities of grayscale as needed, and finally aggregate the corresponding data (different grayscale settings are available for different users).
[0051] According to the present invention, in a microservice-based system, the application business system can reference the application module and general module content in the data component library to support the corresponding business. If a component is updated, the corresponding data component needs to be created in the data component library, and then other business systems will generally update the corresponding JAR package to achieve decoupling of the corresponding business.
[0052] Figure 3 Flowcharts of some other embodiments of the data component sinking method under page assembly of the present invention are shown.
[0053] like Figure 3 As shown: First, the layout is obtained based on the user's click action in the app; then, the page flow is obtained, based on the user's request parameters to obtain an executable page flow (e.g., the first time to page A, then to page B); next, the page is obtained, since the previous node selected a page flow, the current page to be presented to the user is obtained by executing that page flow (e.g., the first time entering the flow is page A); then, the page layout is obtained, the page layout of the page to be presented to the user is obtained, and data is obtained by parsing data components through business configuration, strategy configuration, interface acquisition, etc.; finally, the obtained data is used to complete the construction of the customer layout and present the page to the user.
[0054] Figure 4 The diagram shows structural schematics of some embodiments of the data component sinking device under page assembly of the present invention.
[0055] like Figure 4 As shown, the data component sinking device under the page assembly in the embodiment includes:
[0056] The data component library creation module 100 is used to create a data component library to store data components.
[0057] Page assembly module 200 is used for page layout, configuration of UI components in the page, and association of UI components with corresponding data components;
[0058] The data acquisition module 300 is used to acquire the page layout and obtain the corresponding data based on the data components associated with the UI components in the page;
[0059] The page generation module 400 is used to generate a display page based on the page layout. The data in the page includes the corresponding data obtained from the data component.
[0060] In some embodiments, the data acquisition module acquires the corresponding data by means of at least one of business configuration, API configuration, and policy configuration.
[0061] In some embodiments, the data acquisition module supports grayscale management in the way the data components acquire the corresponding data, by configuring different granularities of grayscale to acquire data for different data components.
[0062] In some embodiments, data components in the data component library are classified into different modules according to the different business to which the data components belong, and the different modules are packaged into corresponding software packages for reference.
[0063] In some embodiments, the UI component is associated with multiple data components, and the data components have business attributes and scenarios, with corresponding business attributes set according to different scenarios.
[0064] In some embodiments, the UI component is associated with a corresponding data component, including defining a method for the data component and adding a corresponding annotation to the method. The annotation defines two attributes: the UI component name and the data component name. The relationship mapping between the UI component and the data component is retrieved by reading the annotation.
[0065] For specific limitations regarding the data component sinking device under page assembly, please refer to the limitations of the data component sinking method under page assembly described above, which will not be repeated here. Each module in the aforementioned data component sinking device under page assembly can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.
[0066] The present invention also provides a computer device, which may be a terminal, and its internal structure diagram may be as follows: Figure 5As shown. The computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface is used to communicate with external terminals via a network connection. When the computer program is executed by the processor, it implements the aforementioned method for data component sinking under page mounting. The display screen can be a liquid crystal display (LCD) or an electronic ink display. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse. Those skilled in the art will understand that… Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present invention and does not constitute a limitation on the computer device to which the present invention is applied. A specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.
[0067] The present invention also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the above-described method for data component sinking under page assembly.
[0068] Those skilled in the art will understand that implementing all or part of the processes in the above method embodiments can be accomplished by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided by this invention can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), memory bus (RAMbus), direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
[0069] The embodiments of the present invention have now been described in detail. To avoid obscuring the concept of the invention, some details known in the art have not been described. Those skilled in the art will fully understand how to implement the technical solutions disclosed herein based on the above description.
[0070] While specific embodiments of the present invention have been described in detail by way of examples, those skilled in the art should understand that the above examples are for illustrative purposes only and are not intended to limit the scope of the invention. Those skilled in the art should understand that modifications can be made to the above embodiments or equivalent substitutions can be made to some technical features without departing from the scope and spirit of the invention. The scope of the invention is defined by the appended claims.
Claims
1. A method for data component drop-down in page layout, characterized in that, Includes the following steps: Steps to establish a data component library: Establish a data component library to store data components; The page assembly steps include: laying out the page, configuring the UI components on the page, and associating the UI components with the corresponding data components; The data acquisition steps are as follows: obtain the page layout, and obtain the corresponding data based on the data components associated with the UI components on the page; The page generation process involves generating a display page based on the page layout, with data in the page including the corresponding data obtained from the data components. In the data acquisition step, the data component acquires the corresponding data in a way that supports grayscale management, by configuring different granularities of grayscale for different data components to acquire data; The UI component is associated with multiple data components, and the data components have business attributes and scenarios. The corresponding business attributes are set according to different scenarios. The step of associating UI components with corresponding data components includes: defining a method for each data component, adding a corresponding annotation to each method, and defining two attributes for each annotation: UI component name and data component name; and retrieving the relationship mapping between UI components and data components by reading the annotation. If a data component is updated, the corresponding data component needs to be created in the data component library, and then other business systems can update the corresponding JAR package to achieve decoupling of the corresponding business.
2. The data component sinking method according to claim 1, characterized in that, In the data acquisition step, the data component acquires the corresponding data in at least one of the following ways: through business configuration, API configuration, and strategy configuration.
3. The data component sinking method according to claim 1, characterized in that, The data components in the data component library are classified into different modules according to the different business to which the data components belong, and the different modules are packaged into corresponding software packages for reference.
4. A data component sinking device under page assembly, characterized in that, include: The data component library creation module is used to create a data component library to store data components; The page assembly module is used for page layout, configuration of UI components in the page, and association of UI components with corresponding data components; The data acquisition module is used to obtain the page layout and retrieve the corresponding data based on the data components associated with the UI components on the page. The page generation module is used to generate a display page based on the page layout. The data in the page includes the corresponding data obtained from the data component. In the data acquisition module, the data components acquire corresponding data in a way that supports grayscale management, by configuring different granularities of grayscale for different data components to acquire data; The UI component is associated with multiple data components, and the data components have business attributes and scenarios. The corresponding business attributes are set according to different scenarios. The step of associating UI components with corresponding data components includes: defining a method for each data component, adding a corresponding annotation to each method, and defining two attributes for each annotation: UI component name and data component name; and retrieving the relationship mapping between UI components and data components by reading the annotation. If a data component is updated, the corresponding data component needs to be created in the data component library, and then other business systems can update the corresponding JAR package to achieve decoupling of the corresponding business.
5. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 3.
6. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 3.