A page visualization dynamic component configuration method and system

Abstract

The application discloses a page visual dynamic component configuration method and system, comprising: constructing a basic component, a business component and a page component in advance; splitting the basic component, the business component and the page component to obtain corresponding component structures, and generating corresponding JSON data; dragging the corresponding components to an interface editing area according to the JSON data, and completing corresponding configuration according to related events, methods and attribute requirements defined in a business logic reference component development document; and starting related debugging work on the components completing the component configuration process. One-key publishing is realized, auditing time is saved, operation efficiency is improved, code componentization is realized, styles can be configured, data can be dynamically bound, functions can be extended at any time, the efficiency of R&D personnel is improved, and the content style and interactive mode of a self-configured page are supported.

Description

Technical Field

[0001] This invention relates to the field of computer web front-end technology, and in particular to a method and system for configuring dynamic visual components on a page. Background Technology

[0002] With the continuous development of computer technology, people conduct network operations through terminals. To achieve better operational results, operators often make frequent and large-scale modifications and adjustments to page styles and business implementation methods. However, mini-programs are built within certain application frameworks and are subject to review and supervision by the application platform. Furthermore, applications on platforms such as Android and iOS, if they add new business functions, often need to be submitted for review and approval by the corresponding application platform. Therefore, a lengthy review process is required before launch, leading to low operational efficiency. Additionally, when developers modify page styles and business implementation methods, they need to redesign code and styles, which is time-consuming and labor-intensive. Summary of the Invention

[0003] This invention aims to at least partially solve one of the technical problems in the aforementioned technologies. Therefore, the first objective of this invention is to propose a method for configuring visual dynamic components on a page, enabling one-click publishing, saving review time, improving operational efficiency, while simultaneously achieving code componentization, configurable styles, dynamically bound data, and readily expandable functionality, thereby improving the efficiency of developers and supporting independent configuration of page content styles and interaction methods.

[0004] The second objective of this invention is to propose a page-visual dynamic component configuration system.

[0005] To achieve the above objectives, a first aspect of the present invention provides a method for configuring dynamic visual components on a page, comprising:

[0006] Pre-build basic components, business components, and page components;

[0007] The basic components, business components, and page components are broken down to obtain the corresponding composition structure, and the corresponding JSON data is generated.

[0008] Drag and drop the corresponding component to the interface editing area based on the JSON data, and complete the corresponding configuration according to the relevant events, methods and property requirements defined in the component development documentation in accordance with the business logic.

[0009] For components that have completed the component configuration process, begin the relevant debugging work.

[0010] According to some embodiments of the present invention, the pre-built basic components, business components, and page components include:

[0011] Obtain page element data and generate basic components based on the page element data;

[0012] Acquire business marketing data, and generate business components based on the business marketing data;

[0013] Obtain page space data and generate page components based on the page space data.

[0014] According to some embodiments of the present invention, the basic components include at least one of images, text, charts, buttons, lines, and time; the business components include marketing components; and the page components include general pages and scheduled pages.

[0015] According to some embodiments of the present invention, JSON data is parsed through a front-end page and rendering components.

[0016] According to some embodiments of the present invention, the composition structure includes the configuration of the backend interface and the business implementation end.

[0017] According to some embodiments of the present invention, the corresponding configuration includes configuring the resources of the backend interface according to the type of the backend interface.

[0018] According to some embodiments of the present invention, after dragging and dropping the corresponding component to the interface editing area based on JSON data, the method further includes:

[0019] Get the component type dragged to the interface editing area, and query the preset component type-sequence table according to the component type to determine the first sequence label, the second sequence label and the third sequence label;

[0020] Generate the first pagination for the component corresponding to the first sequence tag; generate the second pagination for the component corresponding to the second sequence tag; generate the third pagination for the component corresponding to the third sequence tag;

[0021] When the first page is displayed in the interface editing area, the first feature information of the second page is obtained and the first mirror image is generated. The second feature information of the third page is obtained and the second mirror image is generated. The first mirror image and the second mirror image are then displayed on the first page.

[0022] In response to a page configuration request, obtain the page configuration data of the target page and generate a third mirror image to display on the first page.

[0023] According to some embodiments of the present invention, it further includes:

[0024] After completing the relevant debugging work, respond to the page requests sent by the user terminal;

[0025] Organize the page requests and generate a task list;

[0026] Obtain the target page corresponding to the user terminal and the access data of the target page;

[0027] The access data is parsed to obtain parsed fields, and an access model is established based on the parsed fields;

[0028] The task attributes of the page request corresponding to the user terminal are determined based on the access model.

[0029] The priority order is determined based on the task attributes, and the task list is updated to obtain a revised task list.

[0030] Based on a preset number of push intensity levels, the correction task list is allocated to obtain several sub-correction task lists, and the sub-correction task lists are executed according to the corresponding push intensity levels.

[0031] According to some embodiments of the present invention, the parsed fields include dimension fields for analysis, information fields for describing the dimensions, and summary fields for statistical analysis.

[0032] To achieve the above objectives, a second aspect of the present invention provides a page-visual dynamic component configuration system, comprising:

[0033] Builder modules are used to pre-build basic components, business components, and page components;

[0034] The component processing module is used to decompose the basic components, business components and page components to obtain the corresponding composition structure and generate the corresponding JSON data;

[0035] The component configuration module is used to drag and drop the corresponding component into the interface editing area based on JSON data, and complete the corresponding configuration according to the relevant events, methods, and property requirements defined in the component development documentation based on the business logic.

[0036] The component debugging module is used to begin debugging work on components that have completed the component configuration process.

[0037] Other features and advantages of the invention will be set forth in the following description, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the written description and the accompanying drawings.

[0038] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0039] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings:

[0040] Figure 1 This is a flowchart of a method for configuring dynamic page visualization components according to an embodiment of the present invention;

[0041] Figure 2 This is a block diagram of a page visualization dynamic component configuration system according to an embodiment of the present invention;

[0042] Figure 3 This is a comparative schematic diagram of an embodiment of the present invention and the prior art;

[0043] Figure 4 This is a schematic diagram illustrating the architecture of how the configuration pages of various components interact with the management system backend regarding business data, according to an embodiment of the present invention.

[0044] Figure 5 This is a schematic diagram illustrating the effect of a decoration page during component-based deployment according to an embodiment of the present invention. Detailed Implementation

[0045] The preferred embodiments of the present invention will be described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0046] like Figure 1-5 As shown, the first aspect of the present invention proposes a method for configuring dynamic visual components on a page, including steps S1-S4:

[0047] S1. Pre-build basic components, business components, and page components;

[0048] S2. The basic components, business components and page components are broken down to obtain the corresponding composition structure, and the corresponding JSON data is generated;

[0049] S3. Drag and drop the corresponding component to the interface editing area according to the JSON data, and complete the corresponding configuration according to the relevant events, methods and property requirements defined in the component development document according to the business logic.

[0050] S4. For components that have completed the component configuration process, begin the relevant debugging work.

[0051] The working principle of the above technical solution is as follows: Based on the Template component, it is divided into different Header, Left, Menu, Content, and Right sub-components. Each sub-component shares data with its parent component, and the parent component is centrally updated. The Content and Right components are further split according to the actual decoration components. All decoration data will ultimately generate a single JSON dataset. The backend only handles the storage of the JSON data; the actual arraying and parsing of the JSON data is entirely handled by the frontend page and rendering components. Developing new components or modifying component functionality can be done independently by the frontend without the involvement of backend developers. The decoration effect preview area is also component-based, not using an IFRAME framework, allowing for real-time decoration preview. Furthermore, the Menu component allows for drag-and-drop sorting, and some component content can be precisely edited by dragging and dropping elements, greatly reducing the learning curve.

[0052] The beneficial effects of the above technical solution include: enabling one-click publishing, saving review time, improving operational efficiency, and achieving code componentization, configurable styles, dynamic data binding, and readily expandable functionality, thereby improving the efficiency of R&D personnel and supporting the independent configuration of page content styles and interaction methods. It solves the problem of high barriers to entry for ordinary users who need to learn professional technical knowledge to develop page code. Users do not need extensive development and design knowledge or to write code; they only need their own ideas to design mobile application pages. By building page structures through various basic, marketing, and page components, and setting the text, display, and effect attributes of each component, users can create their own unique page style.

[0053] The configuration process includes several main parts: component list, component order adjustment, layer adjustment, and component attribute configuration. It supports real-time preview and loading of actual data, achieving true WYSIWYG (What You See Is What You Get). Visual and dynamic component configuration for the page is achieved through three parts: basic component configuration, marketing component configuration, and page component configuration.

[0054] According to some embodiments of the present invention, the pre-built basic components, business components, and page components include:

[0055] Obtain page element data and generate basic components based on the page element data;

[0056] Acquire business marketing data, and generate business components based on the business marketing data;

[0057] Obtain page space data and generate page components based on the page space data.

[0058] According to some embodiments of the present invention, the basic components include at least one of images, text, charts, buttons, lines, and time; the business components include marketing components; and the page components include general pages and customized pages. Customized pages are tailored for specific scenarios.

[0059] According to some embodiments of the present invention, JSON data is parsed through a front-end page and rendering components.

[0060] According to some embodiments of the present invention, the composition structure includes the configuration of the backend interface and the business implementation end.

[0061] According to some embodiments of the present invention, the corresponding configuration includes configuring the resources of the backend interface according to the type of the backend interface.

[0062] In one embodiment, commonly used page elements, business marketing data (corresponding functions), and page space are combined and encapsulated into configurable components. A component is obtained, which can be a basic component, a marketing component, or a page component. The basic, marketing, or page components are then broken down to obtain their respective structural components. Each component generates a JSON dataset; the backend only stores the JSON data, while the frontend page and rendering components handle the arraying and parsing of the JSON data. The component is dragged and dropped into the interface editing area, and its configuration is completed by referring to the relevant events, methods, and properties defined in the component development documentation according to the business logic. For components that have completed the configuration process, debugging begins.

[0063] In one embodiment, it further includes:

[0064] When the debugging work is completed, the configuration page is obtained. The configuration page is divided vertically into two equal parts to obtain a first page and a second page. The first page and the second page are the same size.

[0065] Obtain the information of the first element on the first page and the information of the second element on the second page;

[0066] Based on the first element information and the second element information, calculate the difference value between the first page and the second page, and determine whether it is greater than a preset difference value;

[0067] When the difference value is determined to be greater than a preset difference value, an adjustment command is issued.

[0068] Calculate the difference value Z between the first page and the second page, including:

[0069]

[0070] Where ∑X1 represents the summation of all elements in the first page X1, and ∑X2 represents the summation of all elements in the second page X2. 2 To sum the squares of all elements in the first page X1, we need to find ∑X2. 2 To sum the squares of all elements in the second page X2; n1 is the number of elements in the first page X1; n2 is the number of elements in the second page X2.

[0071] The working principle and beneficial effects of the above technical solution are as follows: Upon completion of the debugging process, a configuration page is obtained. This page is then vertically divided into two equal parts, resulting in a first page and a second page, both of the same size. Information about the first element in the first page and the second element in the second page is acquired. Based on this information, the difference between the first and second pages is calculated, and it is determined whether this difference exceeds a preset value. If the difference exceeds the preset value, an adjustment command is issued. This ensures harmony between the first and second pages, avoids excessive differences between them, improves the overall harmony of the configuration page, and guarantees consistency in page style and business logic. Based on the above formula, the difference between the first and second pages is accurately calculated, improving the accuracy of determining the magnitude of the difference compared to the preset value.

[0072] According to some embodiments of the present invention, after dragging and dropping the corresponding component to the interface editing area based on JSON data, the method further includes:

[0073] Get the component type dragged to the interface editing area, and query the preset component type-sequence table according to the component type to determine the first sequence label, the second sequence label and the third sequence label;

[0074] Generate the first pagination for the component corresponding to the first sequence tag; generate the second pagination for the component corresponding to the second sequence tag; generate the third pagination for the component corresponding to the third sequence tag;

[0075] When the first page is displayed in the interface editing area, the first feature information of the second page is obtained and the first mirror image is generated. The second feature information of the third page is obtained and the second mirror image is generated. The first mirror image and the second mirror image are then displayed on the first page.

[0076] In response to a page configuration request, obtain the page configuration data of the target page and generate a third mirror image to display on the first page.

[0077] The working principle of the above technical solution is as follows: Obtain the component type dragged to the interface editing area; query the preset component type-sequence table according to the component type to determine the first sequence label, second sequence label, and third sequence label; generate the first pagination for the component corresponding to the first sequence label; generate the second pagination for the component corresponding to the second sequence label; generate the third pagination for the component corresponding to the third sequence label; when the first pagination is displayed in the interface editing area, obtain the first feature information of the second pagination and generate a first mirror image; obtain the second feature information of the third pagination and generate a second mirror image; and display the first and second mirror images on the first pagination; in response to a page configuration request, obtain the page configuration data of the target page and generate a third mirror image to display on the first pagination.

[0078] The beneficial effects of the above technical solution are as follows: After dragging and dropping the corresponding component into the interface editing area based on JSON data, the first page is used as the main page. Simultaneously, the first mirror image from the second page, the second mirror image from the third page, and the third mirror image generated based on the page configuration data are displayed on the first page, improving the efficiency of page viewing, editing, and positioning. This also facilitates subsequent configuration, increasing the configuration speed. Furthermore, based on the first, second, and third mirror images on the first page, when the data of the corresponding components on the second and third pages, or the page configuration data, is updated, the updated data is promptly obtained and the mirror images are updated accordingly, ensuring that the mirror images maintain consistency with the information of the corresponding components.

[0079] According to some embodiments of the present invention, it further includes:

[0080] After completing the relevant debugging work, respond to the page requests sent by the user terminal;

[0081] Organize the page requests and generate a task list;

[0082] Obtain the target page corresponding to the user terminal and the access data of the target page;

[0083] The access data is parsed to obtain parsed fields, and an access model is established based on the parsed fields;

[0084] The task attributes of the page request corresponding to the user terminal are determined based on the access model.

[0085] The priority order is determined based on the task attributes, and the task list is updated to obtain a revised task list.

[0086] Based on a preset number of push intensity levels, the correction task list is allocated to obtain several sub-correction task lists, and the sub-correction task lists are executed according to the corresponding push intensity levels.

[0087] According to some embodiments of the present invention, the parsed fields include dimension fields for analysis, information fields for describing the dimensions, and summary fields for statistical analysis.

[0088] The working principle of the above technical solution is as follows: After completing the relevant debugging work, it responds to the page request sent by the received user terminal; it organizes the page request to generate a task list; it obtains the target page corresponding to the user terminal and the access data of the target page; it parses the access data to obtain parsed fields, and establishes an access model based on the parsed fields; it determines the task attributes of the page request corresponding to the user terminal based on the access model; it determines the priority order based on the task attributes and updates the task list to obtain a corrected task list; based on a preset number of push intensity levels, it allocates the corrected task list to obtain several sub-corrected task lists, and executes the sub-corrected task lists according to the corresponding push intensity levels.

[0089] The beneficial effects of the above technical solution are as follows: A task list is established; access data of user terminal requests for target pages corresponding to page requests in the task list is acquired and analyzed; an access model is established; and the task attributes of the corresponding page requests are determined. Priority order is determined based on the task attributes, and the task list is updated to obtain a revised task list. Based on a preset number of push intensity levels, the revised task list is allocated to obtain several sub-revision task lists. The sub-revision task lists are executed according to their corresponding push intensity levels. This improves the execution efficiency and effectiveness of the task list, enabling different push intensities to be executed based on sub-revision task lists with different task attributes, thereby improving task execution efficiency, control precision, and user experience.

[0090] In one embodiment, establishing an access model based on parsed fields includes:

[0091] The computational task performed on the summary fields used for statistical analysis before modeling;

[0092] Based on the information fields that describe the dimensions, perform the description task before modeling, generate the description script, and design the target program;

[0093] During modeling, the dimensional fields used for analysis are parsed to obtain the modeling dimensions, and the access model is obtained based on cross-indexing technology.

[0094] The beneficial effects of the above technical solution are: it improves the speed and accuracy of establishing access models, increases the utilization rate of access data, enables comprehensive analysis of access data, and facilitates more accurate control.

[0095] like Figure 2As shown, a second aspect of the present invention provides a page-visual dynamic component configuration system, comprising:

[0096] Builder modules are used to pre-build basic components, business components, and page components;

[0097] The component processing module is used to decompose the basic components, business components and page components to obtain the corresponding composition structure and generate the corresponding JSON data;

[0098] The component configuration module is used to drag and drop the corresponding component into the interface editing area based on JSON data, and complete the corresponding configuration according to the relevant events, methods, and property requirements defined in the component development documentation based on the business logic.

[0099] The component debugging module is used to begin debugging work on components that have completed the component configuration process.

[0100] The working principle of the above technical solution is as follows: Commonly used page elements, business marketing functions, and page space are combined and encapsulated into configurable components. A component is obtained, which can be a basic component, a business component, or a page component. The basic component, business component, or page component is then broken down to obtain the corresponding component's composition structure, which includes the configuration of the backend interface and the business implementation. Each component generates JSON data; the backend only stores the JSON data, while the frontend page and rendering components handle the actual arraying and parsing of the JSON data, thus defining the component. This is used to configure the resources of the interface according to the relevant events, methods, properties, etc., defined in the component development documentation, based on the business logic, thereby configuring the component. The completed component is then published, and related debugging begins, enabling component debugging.

[0101] The beneficial effects of the above technical solution include: enabling one-click publishing, saving review time, improving operational efficiency, and achieving code componentization, configurable styles, dynamic data binding, and readily expandable functionality, thereby improving the efficiency of R&D personnel and supporting the independent configuration of page content styles and interaction methods. It solves the problem of high barriers to entry for ordinary users who need to learn professional technical knowledge to develop page code. Users do not need extensive development and design knowledge or to write code; they only need their own ideas to design mobile application pages. By building page structures through various basic, marketing, and page components, and setting the text, display, and effect attributes of each component, users can create their own unique page style.

[0102] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A method for configuring dynamic visual components on a page, characterized in that, include: Pre-build basic components, business components, and page components; The basic components, business components, and page components are broken down to obtain the corresponding composition structure, and the corresponding JSON data is generated. Drag and drop the corresponding component to the interface editing area based on the JSON data, and complete the corresponding configuration according to the relevant events, methods and property requirements defined in the component development documentation in accordance with the business logic. For components that have completed the component configuration process, begin the relevant debugging work; Also includes: When the debugging work is completed, the configuration page is obtained. The configuration page is divided vertically into two equal parts to obtain a first page and a second page. The first page and the second page are the same size. Obtain the information of the first element on the first page and the information of the second element on the second page; Based on the first element information and the second element information, calculate the difference value between the first page and the second page, and determine whether it is greater than a preset difference value; When the difference value is determined to be greater than a preset difference value, an adjustment command is issued; After dragging and dropping the corresponding component to the interface editing area based on the JSON data, the process also includes: Get the component type dragged to the interface editing area, query the preset component type-sequence table according to the component type, and determine the first sequence label, second sequence label and third sequence label; Generate the first pagination for the component corresponding to the first sequence tag; generate the second pagination for the component corresponding to the second sequence tag; generate the third pagination for the component corresponding to the third sequence tag; When the first page is displayed in the interface editing area, the first feature information of the second page is obtained and the first mirror image is generated. The second feature information of the third page is obtained and the second mirror image is generated. The first mirror image and the second mirror image are then displayed on the first page. In response to a page configuration request, obtain the page configuration data of the target page and generate a third mirror image to display on the first page.

2. The method for configuring dynamic visual components on a page as described in claim 1, characterized in that, The pre-built basic components, business components, and page components include: Obtain page element data and generate basic components based on the page element data; Acquire business marketing data, and generate business components based on the business marketing data; Obtain page space data and generate page components based on the page space data.

3. The method for configuring dynamic visual components on a page as described in claim 2, characterized in that, The basic components include at least one of images, text, charts, buttons, lines, and time; the business components include marketing components; and the page components include general pages and scheduled pages.

4. The method for configuring dynamic visual components on a page as described in claim 1, characterized in that, The JSON data is parsed using the front-end page and rendering components.

5. The method for configuring dynamic visual components on a page as described in claim 1, characterized in that, The structure includes the configuration of the backend interface and the business implementation side.

6. The method for configuring dynamic visual components on a page as described in claim 5, characterized in that, The corresponding configuration includes configuring the resources of the backend interface according to the type of the backend interface.

7. The method for configuring dynamic visual components on a page as described in claim 1, characterized in that, Also includes: After completing the relevant debugging work, respond to the page requests sent by the user terminal; Organize the page requests and generate a task list; Obtain the target page corresponding to the user terminal and the access data of the target page; The access data is parsed to obtain parsed fields, and an access model is established based on the parsed fields; The task attributes of the page request corresponding to the user terminal are determined based on the access model. The priority order is determined based on the task attributes, and the task list is updated to obtain a revised task list. Based on a preset number of push intensity levels, the correction task list is allocated to obtain several sub-correction task lists, and the sub-correction task lists are executed according to the corresponding push intensity levels.

8. The method for configuring dynamic visual components on a page as described in claim 7, characterized in that, The parsed fields include dimension fields for analysis, information fields for describing the dimensions, and summary fields for statistical analysis.

9. A page-based visual dynamic component configuration system, characterized in that, include: Builder modules are used to pre-build basic components, business components, and page components; The component processing module is used to decompose the basic components, business components and page components to obtain the corresponding composition structure and generate the corresponding JSON data; The component configuration module is used to drag and drop the corresponding component into the interface editing area based on JSON data, and complete the corresponding configuration according to the relevant events, methods, and property requirements defined in the component development documentation based on the business logic. The component debugging module is used to begin debugging work on components that have completed the component configuration process; Also includes: When the debugging work is completed, the configuration page is obtained. The configuration page is divided vertically into two equal parts to obtain a first page and a second page. The first page and the second page are the same size. Obtain the information of the first element on the first page and the information of the second element on the second page; Based on the first element information and the second element information, calculate the difference value between the first page and the second page, and determine whether it is greater than a preset difference value; When the difference value is determined to be greater than a preset difference value, an adjustment command is issued; After dragging and dropping the corresponding component to the interface editing area based on the JSON data, the process also includes: Get the component type dragged to the interface editing area, query the preset component type-sequence table according to the component type, and determine the first sequence label, second sequence label and third sequence label; Generate the first pagination for the component corresponding to the first sequence tag; generate the second pagination for the component corresponding to the second sequence tag; generate the third pagination for the component corresponding to the third sequence tag; When the first page is displayed in the interface editing area, the first feature information of the second page is obtained and the first mirror image is generated. The second feature information of the third page is obtained and the second mirror image is generated. The first mirror image and the second mirror image are then displayed on the first page. In response to a page configuration request, obtain the page configuration data of the target page and generate a third mirror image to display on the first page.

Images