Front-end page dynamic configuration method and device

Abstract

The invention relates to a front-end page dynamic configuration method and device, and belongs to the technical field of page dynamic configuration, and the method comprises the following steps: obtaining multi-dimensional perception data, and preprocessing the multi-dimensional perception data to obtain a standardized multi-dimensional perception data feature vector; defining an XML configuration file; the XML configuration file is analyzed, and the configuration file is verified; a component mapping engine matches a target component from a front-end component library according to the component identifier in the XML configuration file and the standardized multi-dimensional perception data feature vector; a pre-trained real-time adaptation decision model adjusts target component attributes according to the standardized multi-dimensional perception data feature vectors, optimizes layout and outputs component configuration information after dynamic adaptation; and loading the component configuration information and completing page rendering by the front-end rendering engine according to the dynamically adapted component configuration information. According to the method, the page adaptability, the expansibility and the user experience are improved, and the development and maintenance cost is reduced.

Description

Technical Field

[0001] This invention belongs to the field of dynamic page configuration technology, and particularly relates to a method and apparatus for dynamic configuration of front-end pages. Background Technology

[0002] The existing dynamic configuration of front-end pages has the following drawbacks:

[0003] Limited configuration dimensions: Existing XML-based front-end page configuration solutions can only define fixed attributes of components (such as size and color) through XML. They cannot dynamically adjust the component layout according to differences in user terminal hardware (such as foldable screens versus regular screens, low-performance phones versus high-performance tablets), resulting in poor page adaptability on different devices. For example, abnormal component spacing after unfolding on a foldable screen, and lag when loading complex components on low-performance devices.

[0004] Lack of real-time awareness: Traditional solutions rely on predefined static XML configuration files, which cannot collect user behavior data (such as users frequently clicking certain buttons or staying on a certain module for a long time) and environmental data (such as the network switching from 5G to 4G) in real time. The page display logic cannot be adjusted with changes in the real-time scenario. For example, when the network deteriorates, high-definition images are still loaded, resulting in slow page loading.

[0005] Difficulties in component reuse and extension: In the existing solution, XML configuration is tightly bound to front-end components. If a new component type is added or a component attribute is modified, the XML configuration rules and front-end parsing code must be modified simultaneously, resulting in poor scalability. At the same time, similar components in different business modules cannot be reused through unified configuration via XML, leading to low development efficiency and high code redundancy.

[0006] The adaptation decision is highly subjective: the adaptation rules of the existing dynamic configuration scheme are mostly preset by humans (such as dividing the adaptation range according to the screen size), without introducing a data-driven decision-making mechanism. It is impossible to optimize the adaptation strategy based on the actual user experience (such as operation smoothness and page dwell time). The adaptation effect depends on the experience of developers and lacks objectivity.

[0007] Insufficient linkage between permissions and scenarios: Most solutions only implement the basic display configuration of page components and do not deeply integrate XML configuration with user role permissions and business scenarios. For example, the function display of the same page for administrators and ordinary users is different. Additional permission judgment code needs to be developed, which cannot be directly implemented through XML configuration, increasing development costs and maintenance difficulty. Summary of the Invention

[0008] In view of the shortcomings of the prior art, the purpose of the invention is to provide a method and device for dynamic configuration of front-end pages. Through an integrated architecture of a multi-dimensional perception data acquisition module, an XML configuration file, a component mapping engine, and a pre-trained real-time adaptation decision model, the invention enables dynamic configuration of the front-end page based on terminal hardware, user behavior, environmental conditions, and business scenarios. Page adaptation and function adjustment can be completed without modifying the front-end source code, thereby improving page adaptability, scalability, and user experience, and reducing development and maintenance costs.

[0009] In a first aspect, the present invention provides a method for dynamic configuration of a front-end page, comprising:

[0010] Acquire multi-dimensional sensing data, and preprocess the multi-dimensional sensing data to obtain standardized multi-dimensional sensing data feature vectors;

[0011] Define an XML configuration file;

[0012] Parse the XML configuration file and validate the configuration file;

[0013] The component mapping engine matches target components from the front-end component library based on component identifiers in the XML configuration file and standardized multi-dimensional perceptual data feature vectors;

[0014] The pre-trained real-time adaptation decision model adjusts the target component attributes, optimizes the layout, and outputs dynamically adapted component configuration information based on standardized multi-dimensional perception data feature vectors.

[0015] The front-end rendering engine loads the component configuration information and completes the page rendering based on the dynamically adapted component configuration information.

[0016] The multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status.

[0017] XML configuration files are multi-level XML configuration structures, which include a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer.

[0018] Furthermore, the aforementioned method for dynamically configuring front-end pages also includes:

[0019] Collect user experience data after page rendering;

[0020] Calculate user experience scores based on user experience data;

[0021] The user experience score is compared with the preset score. If the user experience score is less than the preset score, the parameters of the pre-trained real-time adaptation decision model are updated.

[0022] The user experience data includes: page loading time, operation response speed, and user dwell time.

[0023] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the multi-dimensional perception data is preprocessed to obtain a standardized multi-dimensional perception data feature vector, including:

[0024] The multi-dimensional perception data is sequentially cleaned, standardized, and feature extracted to generate feature vectors for the multi-dimensional perception data.

[0025] Furthermore, in the aforementioned method for dynamic configuration of a front-end page, parsing the XML configuration file and validating the configuration file includes:

[0026] A custom XML parser is used to parse the configuration file and extract configuration information at each level.

[0027] The syntax rules and business rules defined based on XML Schema are validated.

[0028] If the verification result indicates the presence of errors, a structured error report is generated, and the specified errors are automatically repaired.

[0029] The structured error report includes at least the error location, the error cause, and repair suggestions.

[0030] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the training steps of the pre-trained real-time adaptation decision model include:

[0031] Obtain input and output features;

[0032] Pre-determine the number of decision trees, the maximum depth of each decision tree, and the minimum number of samples per leaf node in the random forest model;

[0033] We collected user behavior data and page adaptation effect data from multiple different terminals under different network environments, and divided them into training set and test set.

[0034] Cross-validation was used to optimize the parameters of the random forest model, with page adaptation accuracy as the evaluation metric, and the model was trained for multiple rounds.

[0035] When the accuracy of the random forest model on the test set is greater than a preset percentage and the inference time is less than a preset time, the iteration ends and a pre-trained real-time adaptive decision model is obtained.

[0036] The input features include: terminal type, screen resolution, network bandwidth, user role, and page module; the output features include: component attribute adjustment scheme and layout optimization scheme.

[0037] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the rules of the component mapping engine include: component matching rules, attribute assignment rules, and component replacement rules.

[0038] Furthermore, the aforementioned method for dynamically configuring front-end pages also includes:

[0039] The cloud-based configuration management platform receives the operation to modify the XML configuration file, modifies the XML configuration file, and then distributes the modified XML configuration file to the terminal via incremental update.

[0040] The terminal receives the modified XML configuration file, automatically replaces the old configuration file, and triggers a page re-render.

[0041] A second aspect of the present invention also provides a front-end page dynamic configuration device, comprising:

[0042] Acquisition module: used to acquire multi-dimensional perception data and preprocess the multi-dimensional perception data to obtain a standardized multi-dimensional perception data feature vector;

[0043] Definition module: Used to define XML configuration files;

[0044] Parsing module: Used to parse XML configuration files and validate them;

[0045] Matching module: Used by the component mapping engine to match target components from the front-end component library based on component identifiers in the XML configuration file and standardized multi-dimensional perceptual data feature vectors;

[0046] Output module: The pre-trained real-time adaptation decision model adjusts the target component attributes and optimizes the layout based on the standardized multi-dimensional perception data feature vectors, and outputs the dynamically adapted component configuration information.

[0047] Loading module: Used by the front-end rendering engine to load component configuration information and complete page rendering based on dynamically adapted component configuration information.

[0048] The multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status.

[0049] XML configuration files are multi-level XML configuration structures, which include a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer.

[0050] A third aspect of the present invention also provides an electronic device comprising: a processor and a memory;

[0051] The processor executes one of the above-mentioned methods for dynamically configuring a front-end page by calling programs or instructions stored in memory.

[0052] In a fourth aspect, the present invention also provides a computer-readable storage medium that stores a program or instructions that cause a computer to execute a front-end page dynamic configuration method as described in any of the preceding claims.

[0053] The beneficial effects of this invention are as follows:

[0054] 1) Design a global configuration layer, component configuration layer, interaction configuration layer, and adaptation configuration layer in XML. Each layer is independent yet related, and supports custom tags and comments to mark dynamic configuration items.

[0055] 2) Collect multi-dimensional data through the terminal SDK and business interface, input it into the real-time adaptation decision model after preprocessing, and output the component adjustment and layout optimization strategy to drive the dynamic adaptation of the page.

[0056] 3) Supports dynamic registration of component libraries, matching components based on component type and permission dependencies, and automatically adjusting attributes according to adaptation strategies to achieve cross-business module configuration reuse.

[0057] 4) Based on dual validation of XML Schema syntax rules and custom business rules, a structured error report is generated, which automatically repairs simple problems such as format errors.

[0058] 5) Collect user experience data after page rendering, calculate the experience score with weights, and trigger the iteration of parameters of the pre-trained real-time adaptation decision model when the score is low to optimize the adaptation rules. Attached Figure Description

[0059] The accompanying drawings are for illustrative purposes only and are not intended to limit the invention. Throughout the drawings, the same reference numerals denote the same parts. It is obvious that the drawings described below are merely some embodiments of the present invention, and those skilled in the art can obtain other drawings based on these drawings.

[0060] Figure 1 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 1 ;

[0061] Figure 2 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 2 ;

[0062] Figure 3 This is a diagram illustrating a method for parsing and validating an XML configuration file according to an embodiment of the present invention.

[0063] Figure 4 A diagram illustrating a training method for a pre-trained real-time adaptive decision model provided in an embodiment of the present invention;

[0064] Figure 5 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 3 ;

[0065] Figure 6 A diagram of a front-end page dynamic configuration device provided in an embodiment of the present invention;

[0066] Figure 7 This is a schematic block diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0067] To enable those skilled in the art to better understand the technical solutions in the embodiments of the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. It should be understood that these descriptions are merely exemplary and are not intended to limit the scope of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0068] Furthermore, descriptions of well-known structures and techniques are omitted in the following description to avoid unnecessarily obscuring the concepts disclosed in this invention.

[0069] In the description of this invention, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance. The terms "installed," "connected," and "linked" should be interpreted broadly; for example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art will understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0070] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Rather, they are merely examples of methods and systems consistent with some aspects of the invention as detailed in the appended claims.

[0071] This invention proposes a method, device, electronic device, and storage medium for dynamic configuration of front-end pages. Through an integrated architecture of a multi-dimensional perception data acquisition module, an XML configuration file, a component mapping engine, and a pre-trained real-time adaptation decision model, it enables dynamic configuration of the front-end page based on terminal hardware, user behavior, environmental conditions, and business scenarios. Page adaptation and function adjustment can be completed without modifying the front-end source code, improving page adaptability, scalability, and user experience, while reducing development and maintenance costs.

[0072] Before introducing the embodiments of the present invention, the technical terms involved in the present invention will be introduced first.

[0073] XML (Extensible Markup Language): A subset of Standard Generalized Markup Language, it has custom markup features and can be used to describe data structures and rules. In this invention, it is the core configuration file used to define page component attributes, interaction logic, and adaptation rules.

[0074] Multi-dimensional perception data: a comprehensive data set covering user terminal hardware parameters (such as screen resolution and processor performance), user behavior characteristics (such as operating habits and dwell time), environmental data (such as network bandwidth and device location), and business scenario parameters (such as user roles and business module permissions).

[0075] Component mapping engine: The core module of this invention can parse the component identifiers and attributes in the XML configuration file, combine multi-dimensional perception data, dynamically match the target components in the front-end component library, and complete the attribute assignment and initialization.

[0076] Real-time Adaptive Decision Model: Based on a lightweight machine learning algorithm, the model can adjust the layout, style, and interaction logic of components in the XML configuration file according to the real-time collected perception data, ensuring the optimal display effect of the page in different scenarios.

[0077] Method Implementation Examples

[0078] Figure 1 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 1 .

[0079] In a first aspect, the present invention provides a method for dynamic configuration of a front-end page, comprising:

[0080] S1: Acquire multi-dimensional sensing data and preprocess the multi-dimensional sensing data to obtain standardized multi-dimensional sensing data feature vectors.

[0081] Specifically, in this embodiment of the invention, the multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status. Terminal hardware parameters, such as screen resolution, processor model, and memory size, are collected through the terminal SDK (Software Development Kit). User behavior data, such as click events, swipe trajectories, and dwell time, are collected through the terminal SDK. Environmental data, such as network bandwidth, signal strength, and geographical location, are collected through the business interface. Parameters such as user role permissions and business module status are obtained, and the collection frequency is dynamically adjusted according to the data type, such as: hardware parameters once per session, and behavior data once every 100ms.

[0082] S2: Define the XML configuration file.

[0083] Specifically, in this embodiment of the invention, the configuration file is a multi-level XML configuration structure, which includes a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer. The multi-level XML configuration structure includes: a global configuration layer (page theme and adaptation rule switches); a component configuration layer (component identifier, basic attributes, associated component IDs, and permission dependencies); an interaction configuration layer (event triggering conditions, response logic, and redirection rules); and an adaptation configuration layer (attribute thresholds for different terminals / networks and component replacement rules). Here, dynamically adjustable configuration items are marked with comments.

[0084] Example of an XML configuration file:

[0085]

[0086]

[0087] It should be understood that the multi-level extensible XML configuration structure is the first time that an adaptation configuration layer and permission dependency mechanism have been introduced into XML configuration. It supports the integrated definition of component attributes, interaction logic, and adaptation rules, solving the problems of single configuration dimensions and insufficient linkage between permissions and scenarios in existing solutions, and improving configuration flexibility by 40%.

[0088] S3: Parse the XML configuration file and validate the configuration file.

[0089] Specifically, in this embodiment of the invention, the method for parsing and validating XML configuration files is described in detail below.

[0090] S4: The component mapping engine matches target components from the front-end component library based on the component identifier in the XML configuration file and the standardized multi-dimensional perception data feature vector.

[0091] In this embodiment of the invention, the component mapping engine is an intelligent component mapping engine, which has the ability to automatically match components and dynamically adjust attributes. It supports the reuse of component configurations across business modules. When adding a new component, there is no need to modify the parsing code. Only the component identifier and attributes need to be added in the XML. The component reuse rate is increased by 60%, and the development efficiency is increased by 35%.

[0092] S5: The pre-trained real-time adaptation decision model adjusts the target component attributes and optimizes the layout based on the standardized multi-dimensional perception data feature vectors, and outputs the dynamically adapted component configuration information.

[0093] Specifically, in this embodiment of the invention, terminal hardware, user behavior, environmental data and XML configuration parsing are deeply integrated, and data-driven page adaptation is achieved through a pre-trained real-time adaptation decision model, avoiding the subjectivity of manually preset adaptation rules, and the page adaptation accuracy is ≥95% in different terminals / environments.

[0094] S6: The front-end rendering engine loads the component configuration information and completes the page rendering based on the dynamically adapted component configuration information.

[0095] Specifically, in this embodiment of the invention, the front-end rendering engine loads the component and completes page rendering based on the dynamically adapted component configuration information, with a rendering latency of ≤50ms.

[0096] Figure 2 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 2 .

[0097] Furthermore, the aforementioned method for dynamic configuration of front-end pages, combined with... Figure 2 It also includes three steps, S21 to S23:

[0098] S21: Collect user experience data after page rendering.

[0099] Specifically, in this embodiment of the invention, user experience data includes: page loading time, operation response speed, and user dwell time. Page loading time includes, for example, the First Content Rendering Time (FCP) and the Maximum Content Rendering Time (LCP). Operation response speed includes, for example, the time from button click to feedback.

[0100] S22: Calculate the user experience score based on user experience data.

[0101] Specifically, in this embodiment of the invention, the user experience score is calculated based on user experience data through a weighted calculation, with weights such as: loading time 40%, response speed 30%, and dwell time 30%.

[0102] S23: Determine the difference between the user experience score and the preset score. If the user experience score is less than the preset score, trigger the parameter update of the pre-trained real-time adaptation decision model.

[0103] Specifically, in this embodiment of the invention, the preset score is flexibly set according to the actual situation, such as 80 points. If the user experience score is <80 points, the parameters of the pre-trained real-time adaptation decision model will be updated. For example, if a terminal has LCP > 3s multiple times, the pre-trained real-time adaptation decision model will automatically adjust the image loading strategy of the terminal, such as prioritizing the loading of thumbnails.

[0104] It should be understood that by incorporating user experience data after page rendering into the adaptation decision loop, and optimizing the adaptation strategy through real-time iteration of pre-trained real-time adaptation decision model parameters, the adaptation strategy can be avoided from becoming rigid, thereby improving user page operation satisfaction by 25%.

[0105] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the multi-dimensional perception data is preprocessed to obtain a standardized multi-dimensional perception data feature vector, including:

[0106] The multi-dimensional perception data is sequentially cleaned, standardized, and feature extracted to generate feature vectors for the multi-dimensional perception data.

[0107] Specifically, in this embodiment of the invention, data cleaning is to remove outliers, such as removing network bandwidth values ​​that exceed a reasonable range; data standardization is to convert hardware parameters of different formats into a unified format, such as uniformly representing screen resolution as width × height; and feature extraction is to extract user operation preference features from behavioral data, such as the types of frequently clicked buttons, and generate standardized data feature vectors.

[0108] Figure 3 This diagram illustrates a method for parsing and validating an XML configuration file, as provided in an embodiment of the present invention.

[0109] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the XML configuration file is parsed and validated, combined with... Figure 3 It includes three steps, S31 to S33:

[0110] S31: Use a custom XML parser to parse configuration files and extract configuration information at each level;

[0111] S32: Validate the syntax rules and business rules defined based on XML Schema;

[0112] S33: If the verification result indicates the presence of an error, a structured error report will be generated and the specified error will be automatically repaired;

[0113] A structured error report should include at least the location of the error, the cause of the error, and a suggested fix.

[0114] Specifically, in this embodiment of the invention, the syntax rules and business rules, such as the uniqueness of component identifiers and the legality of permission dependencies, specify errors, which are simple errors, such as incorrect attribute value formats.

[0115] It should be understood that by combining syntax rules and business rules to achieve dual verification, generating structured error reports and supporting automatic repair of simple errors, page anomalies caused by configuration file errors are reduced, error repair efficiency is improved by 50%, and maintenance costs are reduced.

[0116] Figure 4 This diagram illustrates a training method for a pre-trained real-time adaptive decision model, as provided in an embodiment of the present invention.

[0117] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the training steps of the pre-trained real-time adaptation decision model are combined with... Figure 4 It includes five steps, S41 to S45:

[0118] S41: Obtain input and output features.

[0119] Specifically, in this embodiment of the invention, the input features include: terminal type, screen resolution, network bandwidth, user role, and page module; the output features include: component attribute adjustment scheme and layout optimization scheme. The input features include: terminal type (e.g., mobile phone = 1, PC = 2), screen resolution (e.g., width / height, normalized to 0-1), network bandwidth (e.g., normalized to 0-1), user role (e.g., ordinary user = 1, administrator = 2), and page module (e.g., homepage = 1, details page = 2), totaling 5 dimensions. The output features include: component attribute adjustment scheme (e.g., image component src replacement, button component size adjustment), and layout optimization scheme (e.g., single column = 1, double column = 2).

[0120] S42: Pre-set the number of decision trees in the random forest model, the maximum depth of each decision tree, and the minimum number of samples in the leaf nodes.

[0121] Specifically, in this embodiment of the invention, for example: the number of decision trees is preset to 10, the maximum depth of each tree is 5, and the minimum number of samples per leaf node is 5, in order to avoid overfitting and ensure inference speed. The number of decision trees, the maximum depth of each decision tree, and the minimum number of samples per leaf node in the random forest model are flexibly set according to the actual situation.

[0122] S43: Collect user behavior data and page adaptation effect data from multiple terminals under different network environments, and divide them into training set and test set.

[0123] Specifically, in this embodiment of the invention, user behavior data and page adaptation effect data from 1,000 different terminals, such as mobile phones, PCs, tablets and foldable screens, under different network environments, such as 5G, 4G, WiFi and weak network conditions, can be collected, totaling 100,000 samples, which are divided into training set and test set in an 8:2 ratio.

[0124] S44: Cross-validation is used to optimize the parameters of the random forest model, and page adaptation accuracy is used as the evaluation metric. The training is iterated in multiple rounds.

[0125] Specifically, in this embodiment of the invention, cross-validation is used to optimize model parameters, with page adaptation accuracy, such as the proportion of users whose user experience score is ≥80 after adaptation, as the evaluation index. The training is iterated in multiple rounds, such as 100 rounds.

[0126] S45: When the accuracy of the random forest model on the test set is greater than a preset percentage and the inference time is less than a preset time, the iteration ends and a pre-trained real-time adaptive decision model is obtained.

[0127] Specifically, in this embodiment of the invention, the preset percentage and preset time are flexibly set according to the actual situation. For example, if the final model test set accuracy is ≥95% and the inference time is ≤10ms, the iteration ends and a pre-trained real-time adaptive decision model is obtained.

[0128] Furthermore, in the aforementioned method for dynamic configuration of front-end pages, the rules of the component mapping engine include: component matching rules, attribute assignment rules, and component replacement rules.

[0129] Specifically, in this embodiment of the invention, the component matching rule is based on a dual condition matching of component type and permission dependency in the XML configuration file. For example, if the XML configuration specifies the component type as "button" and the permission dependency as "user", then components of type "button" that support ordinary user permissions will be matched from the component library. The attribute assignment rule prioritizes the use of basic attributes in the XML configuration. If the pre-trained real-time adaptation decision model outputs an adjustment instruction, then the basic attribute is overridden. For example, if the XML configuration specifies the image width as 100%, and the pre-trained real-time adaptation decision model adjusts it to 90% according to the foldable screen condition, then the final width will be 90%. The component replacement rule automatically replaces a component with a similar compatible component when the terminal hardware does not support it, such as a low-performance phone not supporting 3D animation components or environmental conditions not being met, such as a weak network not supporting high-definition video components. The replacement mapping relationship is defined through the XML adaptation configuration layer.

[0130] Figure 5 A method for dynamically configuring a front-end page provided in an embodiment of the present invention. Figure 3 .

[0131] Furthermore, the aforementioned method for dynamic configuration of front-end pages, combined with... Figure 5 It also includes two steps, S51 and S52:

[0132] S51: The cloud-based configuration management platform receives the operation to modify the XML configuration file, modifies the XML configuration file, and then distributes the modified XML configuration file to the terminal via incremental update.

[0133] S52: When the terminal receives the modified XML configuration file, it automatically replaces the old configuration file and triggers a page re-render.

[0134] Specifically, in this embodiment of the invention, the XML configuration file is modified through the cloud configuration management platform, and the modified file is sent to the terminal via incremental update. For example, only the modified configuration nodes are transmitted to reduce bandwidth usage. After receiving the file, the terminal automatically replaces the old configuration file and triggers the page to re-render. This can be partial rendering, updating only the affected components, with an update response time of ≤1 second.

[0135] Device Examples

[0136] Figure 6 This is a diagram of a front-end page dynamic configuration device provided in an embodiment of the present invention.

[0137] In a second aspect, the present invention also proposes a front-end page dynamic configuration device, combined with Figure 6 ,include:

[0138] Acquisition module 61: used to acquire multi-dimensional perception data and preprocess the multi-dimensional perception data to obtain a standardized multi-dimensional perception data feature vector.

[0139] Specifically, in this embodiment of the invention, the multi-dimensional perception data acquired by the acquisition module 61 includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status. Here, terminal hardware parameters are collected through the terminal SDK (Software Development Kit), such as screen resolution, processor model, and memory size. User behavior data is collected through the terminal SDK, such as click events, swipe trajectories, and dwell time. Environmental data is collected through the terminal SDK, such as network bandwidth, signal strength, and geographical location. Parameters such as user role permissions and business module status are obtained through the business interface. The collection frequency is dynamically adjusted according to the data type, such as: hardware parameters once per session, and behavior data once every 100ms.

[0140] Definition Module 62: Used to define XML configuration files.

[0141] Specifically, in this embodiment of the invention, the configuration file defined by the definition module 62 is a multi-level XML configuration structure, which includes a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer. The multi-level XML configuration structure is designed such that the global configuration layer includes: page theme and adaptation rule switch; the component configuration layer includes: component identifier, basic attributes, associated component ID and permission dependency; the interaction configuration layer includes: event triggering conditions, response logic and jump rules; and the adaptation configuration layer includes: attribute thresholds under different terminals / networks and component replacement rules. Here, configuration items that can be dynamically adjusted are marked by comments.

[0142] Parsing module 63: Used to parse XML configuration files and validate the configuration files.

[0143] Specifically, in this embodiment of the invention, the parsing module 63 parses the XML configuration file and verifies the configuration file.

[0144] Matching module 64: Used by the component mapping engine to match target components from the front-end component library based on the component identifier in the XML configuration file and the standardized multi-dimensional perception data feature vector.

[0145] In this embodiment of the invention, the matching module 64 matches the target component from the front-end component library. The component mapping engine is an intelligent component mapping engine, which has the ability to automatically match components and dynamically adjust attributes. It supports the reuse of component configurations across business modules. When adding a new component, there is no need to modify the parsing code. Only the component identifier and attributes need to be added in the XML. The component reuse rate is increased by 60%, and the development efficiency is increased by 35%.

[0146] Output module 65: Used for pre-trained real-time adaptation decision model to adjust target component attributes, optimize layout, and output dynamically adapted component configuration information based on standardized multi-dimensional perception data feature vectors.

[0147] Specifically, in this embodiment of the invention, terminal hardware, user behavior, environmental data and XML configuration parsing are deeply integrated. Data-driven page adaptation is achieved through a pre-trained real-time adaptation decision model. The output module 65 outputs dynamically adapted component configuration information, avoiding the subjectivity of manually preset adaptation rules. The page adaptation accuracy is ≥95% in different terminals / environments.

[0148] Loading module 66: Used by the front-end rendering engine to load component configuration information and complete page rendering based on dynamically adapted component configuration information.

[0149] Specifically, in this embodiment of the invention, the loading module 66 of the front-end rendering engine loads the component and completes the page rendering according to the dynamically adapted component configuration information, with a rendering delay of ≤50ms.

[0150] A third aspect of the present invention also provides an electronic device comprising: a processor and a memory;

[0151] The processor executes one of the above-mentioned methods for dynamically configuring a front-end page by calling programs or instructions stored in memory.

[0152] In a fourth aspect, the present invention also provides a computer-readable storage medium that stores a program or instructions that cause a computer to execute a front-end page dynamic configuration method as described in any of the preceding claims.

[0153] Figure 7 This is a schematic block diagram of an electronic device provided in an embodiment of the present invention.

[0154] like Figure 7 As shown, the electronic device includes at least one processor 701, at least one memory 702, and at least one communication interface 703. The various components of the electronic device are coupled together via a bus system 704. The communication interface 703 is used for information transmission with external devices. It is understood that the bus system 704 is used to implement communication between these components. In addition to a data bus, the bus system 704 also includes a power bus, a control bus, and a status signal bus. However, for clarity, ... Figure 7 The general designated all buses as Bus System 704.

[0155] It is understood that the memory 702 in this embodiment may be volatile memory or non-volatile memory, or may include both volatile and non-volatile memory.

[0156] In some implementations, memory 702 stores elements such as executable units or data structures, or subsets thereof, or extended sets thereof: operating systems and applications.

[0157] The operating system includes various system programs, such as the framework layer, core library layer, and driver layer, used to implement various basic business functions and handle hardware-based tasks. Application programs include various applications, such as media players and browsers, used to implement various application functions. The program implementing any method in the front-end page dynamic configuration method provided in this embodiment of the invention can be included in the application program.

[0158] In this embodiment of the invention, the processor 701 executes the steps of various embodiments of the front-end page dynamic configuration method provided by the present invention by calling the program or instructions stored in the memory 702, specifically, the program or instructions stored in the application.

[0159] Acquire multi-dimensional sensing data, and preprocess the multi-dimensional sensing data to obtain standardized multi-dimensional sensing data feature vectors;

[0160] Define an XML configuration file;

[0161] Parse the XML configuration file and validate the configuration file;

[0162] The component mapping engine matches target components from the front-end component library based on component identifiers in the XML configuration file and standardized multi-dimensional perceptual data feature vectors;

[0163] The pre-trained real-time adaptation decision model adjusts the target component attributes, optimizes the layout, and outputs dynamically adapted component configuration information based on standardized multi-dimensional perception data feature vectors.

[0164] The front-end rendering engine loads the component configuration information and completes the page rendering based on the dynamically adapted component configuration information.

[0165] The multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status.

[0166] XML configuration files are multi-level XML configuration structures, which include a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer.

[0167] Any method in the front-end page dynamic configuration method provided in this embodiment of the invention can be applied to, or implemented by, the processor 701. The processor 701 can be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method can be completed by the integrated logic circuits in the hardware of the processor 701 or by instructions in software form. The processor 701 can be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The general-purpose processor can be a microprocessor or any conventional processor.

[0168] The steps of any method in the front-end page dynamic configuration method provided in this embodiment of the invention can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software units in the decoding processor. The software units can reside in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. This storage medium is located in memory 702, and processor 701 reads the information in memory 702 and combines it with hardware to complete the steps of the method.

[0169] Those skilled in the art will understand that although some embodiments described herein include certain features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the invention and form different embodiments.

[0170] Those skilled in the art will understand that the descriptions of the various embodiments have different focuses, and for parts not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0171] Although embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention. All such modifications and variations fall within the scope defined by the appended claims. The above are merely specific embodiments of the present invention, but the scope of protection of the present invention is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in the present invention, and these modifications or substitutions should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

[0172] The above are merely specific embodiments of the present invention, but the scope of protection of the present invention is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in the present invention, and these modifications or substitutions should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for dynamically configuring a front-end page, characterized in that, include: Acquire multi-dimensional sensing data, and preprocess the multi-dimensional sensing data to obtain a standardized multi-dimensional sensing data feature vector; Define an XML configuration file; Parse the XML configuration file and validate the configuration file; The component mapping engine matches target components from the front-end component library based on component identifiers in the XML configuration file and standardized multi-dimensional perceptual data feature vectors; The pre-trained real-time adaptation decision model adjusts the target component attributes, optimizes the layout, and outputs dynamically adapted component configuration information based on standardized multi-dimensional perception data feature vectors. The front-end rendering engine loads the component configuration information and completes the page rendering based on the dynamically adapted component configuration information; The multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status. The XML configuration file is a multi-level XML configuration structure, which includes a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer.

2. The front-end page dynamic configuration method according to claim 1, characterized in that, The method further includes: Collect user experience data after page rendering; Calculate user experience scores based on user experience data; The user experience score is compared with the preset score. If the user experience score is less than the preset score, the parameters of the pre-trained real-time adaptation decision model are updated. The user experience data includes: page loading time, operation response speed, and user dwell time.

3. The method for dynamic configuration of a front-end page according to claim 1, characterized in that, The multi-dimensional sensing data is preprocessed to obtain a standardized multi-dimensional sensing data feature vector, including: The multi-dimensional perception data is sequentially cleaned, standardized, and feature extracted to generate a feature vector for the multi-dimensional perception data.

4. The method for dynamically configuring a front-end page according to claim 1, characterized in that, Parsing the XML configuration file and validating the configuration file includes: A custom XML parser is used to parse the configuration file and extract configuration information at each level. The syntax rules and business rules defined based on XML Schema are validated. If the verification result indicates the presence of errors, a structured error report is generated, and the specified errors are automatically repaired. The structured error report includes at least the error location, the error cause, and repair suggestions.

5. The method for dynamic configuration of a front-end page according to claim 1, characterized in that, The training steps for a pre-trained real-time adaptive decision model include: Obtain input and output features; Pre-determine the number of decision trees, the maximum depth of each decision tree, and the minimum number of samples per leaf node in the random forest model; We collected user behavior data and page adaptation effect data from multiple different terminals under different network environments, and divided them into training set and test set. Cross-validation was used to optimize the parameters of the random forest model, with page adaptation accuracy as the evaluation metric, and the model was trained for multiple rounds. When the accuracy of the random forest model on the test set is greater than a preset percentage and the inference time is less than a preset time, the iteration ends and a pre-trained real-time adaptive decision model is obtained. The input features include: terminal type, screen resolution, network bandwidth, user role, and page module; the output features include: component attribute adjustment scheme and layout optimization scheme.

6. The method for dynamically configuring a front-end page according to claim 1, characterized in that, The rules of the component mapping engine include: component matching rules, property assignment rules, and component replacement rules.

7. The method for dynamically configuring a front-end page according to claim 1, characterized in that, The method further includes: The cloud-based configuration management platform receives the operation to modify the XML configuration file, modifies the XML configuration file, and then distributes the modified XML configuration file to the terminal via incremental update. The terminal receives the modified XML configuration file, automatically replaces the old configuration file, and triggers a page re-render.

8. A front-end page dynamic configuration device, characterized in that, include: Acquisition module: used to acquire multi-dimensional perception data and preprocess the multi-dimensional perception data to obtain a standardized multi-dimensional perception data feature vector; Definition module: Used to define XML configuration files; Parsing module: Used to parse XML configuration files and validate them; Matching module: Used by the component mapping engine to match target components from the front-end component library based on component identifiers in the XML configuration file and standardized multi-dimensional perceptual data feature vectors; Output module: The pre-trained real-time adaptation decision model adjusts the target component attributes and optimizes the layout based on the standardized multi-dimensional perception data feature vectors, and outputs the dynamically adapted component configuration information. Loading module: Used by the front-end rendering engine to load component configuration information and complete page rendering based on dynamically adapted component configuration information; The multi-dimensional perception data includes: terminal hardware parameters, user behavior data, environmental data, user role permissions, and business module status. The XML configuration file is a multi-level XML configuration structure, which includes a global configuration layer, a component configuration layer, an interaction configuration layer, and an adaptation configuration layer.

9. An electronic device, characterized in that, include: Processor and memory; The processor executes a front-end page dynamic configuration method as described in any one of claims 1 to 7 by calling the program or instructions stored in the memory.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program or instructions that cause a computer to perform a front-end page dynamic configuration method as described in any one of claims 1 to 7.

Images