Page management method and management device, electronic device, and storage medium

By acquiring and embedding page management style parameters into the initial style sheet and generating a target style sheet, the problem of weak page management capabilities of third-party components is solved, unified management and personalized customization are achieved, and the collaborative efficiency between developers and designers is improved.

CN115586939BActive Publication Date: 2025-09-16INDUSTRIAL AND COMMERCIAL BANK OF CHINA
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202211202750.8
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-09-29
Publication Date
2025-09-16
Estimated Expiration
2042-09-29

AI Technical Summary

Technical Problem

In the existing technology, the page management of third-party components has problems such as inconsistent standards, low fault tolerance, repeated counterattacks leading to serious resource consumption, weak customization requirements, weak UI component management capabilities, and lack of a unified entry, resulting in low efficiency in collaboration between user experience designers and developers.

Method used

By obtaining page management style parameters, including page identifier, component style identifier and style parameters, and embedding them into the initial style sheet based on preset matching rules, a target style sheet is generated, and the initial style sheet is replaced to achieve unified management and personalized customization of third-party components.

Benefits of technology

It achieves unified management of third-party components, improves the collaboration efficiency between developers and user experience designers, enhances the timeliness of communication, and provides personalized customization and extensibility interfaces based on compliance with design specifications.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115586939B_ABST
    Figure CN115586939B_ABST
Patent Text Reader

Abstract

The present invention discloses a page management method and management device, electronic device, and storage medium, which relate to the field of financial technology, wherein the method comprises: obtaining page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier, and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs; based on preset matching rules, the page management style parameters are embedded into an initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of a third-party component library; the target style sheet is used to replace the initial style sheet to update the target page style in the product interface. The present invention solves the technical problems in the related art of weak page management capabilities and inconsistent specifications after the introduction of third-party components.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of financial technology or other related technical fields, and specifically, to a page management method and management device, electronic equipment, and storage medium. Background Art

[0002] With the upgrading of various terminal devices, various third-party components have emerged to meet user needs and improve user experience, such as element-ui (a third-party component for Ele.me) and ant-ui (a third-party component for Ant). Third-party components have promoted the rapid development of UI (user interface), but at the same time, some problems have arisen in component page management.

[0003] In the relevant technology, there are certain omissions in the page management of third-party components: first, the page specifications are not unified, which greatly increases the workload of developers to a certain extent, and the fault tolerance rate is low, and repeated counterattacks lead to serious resource consumption; second, the customization demand capability is weak. Applications in different business scenarios may require personalized customization of third-party components for different demand themes, and the internal style sheets of third-party components are complex. There is a risk of UI pollution when customizing and modifying them; third, the management capability of UI components is weak, there is a lack of a unified entry, and the global unified orchestration and management of third-party components is poor in timeliness with UED (user experience design), and real-time effect synchronization cannot be achieved.

[0004] To address the above-mentioned problems, no effective solutions have been proposed so far. Summary of the Invention

[0005] The embodiments of the present invention provide a page management method and management device, electronic device, and storage medium to at least solve the technical problems in related technologies of weak page management capabilities and inconsistent specifications after introducing third-party components.

[0006] According to one aspect of an embodiment of the present invention, a page management method is provided, including: obtaining page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine a target page style to be updated, and the page identifier is used to determine a product interface to which the target page style belongs; based on preset matching rules, embedding the page management style parameters into an initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling a style sheet of a third-party component library; and replacing the initial style sheet with the target style sheet to update the target page style in the product interface.

[0007] Optionally, the step of obtaining page management style parameters includes: receiving a user experience design style sent by a client terminal; determining style parameters of at least one of the following types of styles based on the user experience design style: a first type, a page global style, wherein the page global style is obtained through a global unified interface configuration; a second type, a page interaction component style, wherein the page interaction component style refers to a style obtained by compiling the interaction component in the third-party component library through a local style interface while satisfying the page global style; a third type, a page customization component style, wherein the page customization component style is obtained through a pre-configured independent style library; and determining the page management style parameters based on the style parameters of at least one type of style.

[0008] Optionally, the local style interface includes at least one of the following: a drop-down box interface, a breadcrumb interface, and a navigation bar interface.

[0009] Optionally, the weight parameter corresponding to the third category of styles is greater than the weight parameter corresponding to the second category of styles, and the weight parameter corresponding to the second category of styles is greater than the weight parameter corresponding to the first category of styles.

[0010] Optionally, based on preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating a target style sheet includes: when the page management style parameters are style parameters of the first category of styles, obtaining the historical cache variables of the browser associated with the product interface; storing the style parameters of the first category of styles in the historical cache variables; matching the initial style sheet with the style parameters of the historical cache variables to obtain a matching result; when the matching result indicates that the style parameters of the historical cache variables are matched, using the style parameters of the historical cache variables to replace the successfully matched page global style parameters in the initial style sheet to generate the target style sheet.

[0011] Optionally, based on preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating a target style sheet also includes: when the page management style parameters are style parameters of the second category of styles, obtaining the page interaction component style associated with the product interface; using a local regular matching file to match the initial style sheet with the page interaction component style associated with the product interface to obtain a matching result; when the matching result indicates that the page interaction component style associated with the product interface is matched, using the style parameters of the page interaction component style associated with the product interface to replace the successfully matched interaction component style parameters in the initial style sheet to generate the target style sheet.

[0012] Optionally, based on preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating a target style sheet also includes: when the page management style parameters are style parameters of the third category of styles, obtaining the page customization component style associated with the product interface; incrementing the style parameters associated with the page customization component style into the initial style sheet to generate the target style sheet.

[0013] According to another aspect of an embodiment of the present invention, a page management device is also provided, including: an acquisition unit for acquiring page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs; a generation unit for embedding the page management style parameters into an initial style sheet based on preset matching rules to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of a third-party component library; an updating unit for replacing the initial style sheet with the target style sheet to update the target page style in the product interface.

[0014] Optionally, the acquisition unit includes: a first receiving module for receiving a user experience design style sent by a client terminal; a first determination unit for determining style parameters of at least one of the following types of styles based on the user experience design style: a first type, a page global style, wherein the page global style is obtained through a global unified interface configuration; a second type, a page interaction component style, wherein the page interaction component style refers to the style obtained by compiling the interaction component in the third-party component library through a local style interface while satisfying the page global style; a third type, a page customization component style, wherein the page customization component style is obtained through a pre-configured independent style library; a second determination module for determining the page management style parameters based on the style parameters of at least one type of style.

[0015] Optionally, the local style interface includes at least one of the following: a drop-down box interface, a breadcrumb interface, and a navigation bar interface.

[0016] Optionally, the weight parameter corresponding to the third category of styles is greater than the weight parameter corresponding to the second category of styles, and the weight parameter corresponding to the second category of styles is greater than the weight parameter corresponding to the first category of styles.

[0017] Optionally, the generation unit includes: a first acquisition module, used to obtain the historical cache variables of the browser associated with the product interface when the page management style parameters are the style parameters of the first category of styles; a first storage module, used to store the style parameters of the first category of styles in the historical cache variables; a first matching module, used to match the initial style sheet with the style parameters of the historical cache variables to obtain a matching result; a first replacement module, used to replace the successfully matched page global style parameters in the initial style sheet with the style parameters of the historical cache variables to generate the target style sheet when the matching result indicates that the style parameters of the historical cache variables are matched.

[0018] Optionally, the generation unit also includes: a second acquisition module, used to obtain the page interaction component style associated with the product interface when the page management style parameters are the style parameters of the second category of style; a second matching module, used to use a local regular matching file to match the initial style sheet with the page interaction component style associated with the product interface to obtain a matching result; a second replacement module, used to use the style parameters of the page interaction component style associated with the product interface to replace the successfully matched interaction component style parameters in the initial style sheet when the matching result indicates that the page interaction component style associated with the product interface is matched, to generate the target style sheet.

[0019] Optionally, the generation unit also includes: a third acquisition module, used to obtain the page customization component style associated with the product interface when the page management style parameters are style parameters of the third category of style; a first generation module, used to increment the style parameters associated with the page customization component style into the initial style sheet to generate the target style sheet.

[0020] According to another aspect of an embodiment of the present invention, a computer-readable storage medium is further provided, the computer-readable storage medium including a stored computer program, wherein when the computer program is running, the device where the computer-readable storage medium is located is controlled to execute any one of the page management methods described above.

[0021] According to another aspect of an embodiment of the present invention, an electronic device is also provided, comprising one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement any one of the page management methods described above.

[0022] In the present disclosure, the following steps are adopted: first, the page management style parameters are obtained, wherein the page management style parameters include at least: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs, and then based on the preset matching rules, the page management style parameters are embedded into the initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of the third-party component library, and finally the target style sheet is used to replace the initial style sheet to update the target page style in the product interface. In the present disclosure, based on the page management style parameters and the preset matching rules, the third-party components are uniformly managed, and at the same time, the page style in the product interface is updated in real time, thereby improving the high degree of collaboration between developers and user experience designers, improving the timeliness of communication, and thus solving the technical problems in the related technology of weak page management capabilities and inconsistent specifications after the introduction of third-party components.

[0023] In this disclosure, unified management is implemented for the introduction of third-party components, and the management system is faster, more efficient, and more fault-tolerant. The personalized customization provided by the system allows personalized output based on compliance with design specifications, thereby optimizing the scalability of third-party components.

[0024] In this disclosure, while unifying and standardizing management, an extensible interface is provided for third-party components to achieve personalized customization of user pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0026] Figure 1 is a flow chart of an optional page management method according to an embodiment of the present invention;

[0027] Figure 2 is an optional flow chart for obtaining page management style parameters according to an embodiment of the present invention;

[0028] Figure 3 is an architectural diagram of an optional page management system according to an embodiment of the present invention;

[0029] Figure 4 is a schematic diagram of an optional page management device according to an embodiment of the present invention;

[0030] Figure 5 4 is a hardware structure block diagram of an electronic device (or mobile device) according to a page management method of an embodiment of the present invention. DETAILED DESCRIPTION

[0031] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0032] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0033] It should be noted that the page management method and device in the present disclosure can be used in the field of financial technology. When updating the page style in the product interface, it can also be used in any field other than the field of financial technology. When updating the page style in the product interface, the application field of the page management method and device in the present disclosure is not limited.

[0034] It should be noted that the relevant information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for display and analysis, etc.) involved in this disclosure are all information and data authorized by the user or fully authorized by all parties. For example, an interface is set up between this system and the relevant user or organization. Before obtaining relevant information, it is necessary to send an acquisition request to the aforementioned user or organization through the interface, and obtain the relevant information after receiving the consent information fed back by the aforementioned user or organization.

[0035] The present invention can be applied to various third-party component page design systems / page management devices / apparatuses / products. Based on page management style parameters and preset matching rules, the third-party components can be managed in a unified manner. While unifying and standardizing the management, an extensible interface is provided for the third-party components to achieve personalized customization of user pages. At the same time, various page styles in the product interface are updated in real time, thereby improving the high degree of collaboration between developers and user experience designers and enhancing the timeliness of communication.

[0036] The present invention is described in detail below with reference to various embodiments.

[0037] Example 1

[0038] According to an embodiment of the present invention, a method embodiment of page management is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0039] Figure 1 is a flow chart of an optional page management method according to an embodiment of the present invention, such as Figure 1 As shown, the page management method includes the following steps:

[0040] Step S101: Acquire page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier, and style parameters. The component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs.

[0041] Step S102: embedding the page management style parameters into the initial style sheet based on a preset matching rule to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of the third-party component library;

[0042] Step S103: Using the target style sheet to replace the initial style sheet, and updating the target page style in the product interface.

[0043] Through the above steps, the page management style parameters are obtained, wherein the page management style parameters include at least: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine the target page style to be updated, the page identifier is used to determine the product interface to which the target page style belongs, and based on the preset matching rules, the page management style parameters are embedded into the initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of the third-party component library, and the target style sheet is used to replace the initial style sheet to update the target page style in the product interface. In this embodiment, based on the page management style parameters and the preset matching rules, the third-party components are uniformly managed, and at the same time, the page style in the product interface is updated in real time, thereby improving the high degree of collaboration between developers and user experience designers, and improving the timeliness of communication, thereby solving the technical problems in related technologies of weak page management capabilities and inconsistent specifications after the introduction of third-party components.

[0044] The following describes the above steps in detail.

[0045] Step S101, obtaining page management style parameters, wherein the page management style parameters at least include: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs.

[0046] It should be noted that when designing the UI for a third-party component, a user experience designer typically produces a user research report based on user needs and interests, which is then handed over to an interface designer to design the page style, an interaction designer to design the interactive components, a front-end engineer to build the static page, and a development engineer to build the website. In this embodiment, the terminal or server used by the interface designer is the implementation entity. This terminal is connected to the terminal used by the user experience designer (i.e., providing the UED with page design requirements or page management style adjustment instructions), enabling real-time adjustment of the page style (or style) in the product interface.

[0047] In the prior art, after receiving the interface design requirements of a customer (which can refer to a company, individual, or organization), developers (including user experience designers UED and user interface designers UI) design component pages based on customer requirements and historical design habits. This makes it difficult to achieve unified management, and it is difficult for user experience designers and user interface development designers to achieve a high degree of collaboration. In an embodiment of the present invention, unified management of third-party component page designs is achieved by introducing page management style parameters.

[0048] Figure 2 This is an optional flow chart of obtaining page management style parameters according to an embodiment of the present invention. Figure 2 The steps shown in the figure to obtain page management style parameters include:

[0049] Step S201, receiving a user experience design pattern sent by a client terminal;

[0050] It should be noted that before obtaining the page style management parameters, it is necessary to obtain the user experience design style. The user experience design style is the design style to be formed by the UED designer based on the customer's design requirements and preferences after the customer submits the page design requirements and preferences through the specific interface of the customer terminal (including but not limited to: mobile phone, panel, iPad, PC). After obtaining the user experience design style, the component page design is carried out according to the user's requirements.

[0051] Step S202: Based on the user experience design style, style parameters of at least one of the following styles are determined: first, global page styles, where global page styles are obtained through global unified interface configuration; second, interactive component styles, where interactive component styles are obtained by compiling interactive components in a third-party component library through a local style interface while satisfying the global page style; third, customized component styles, where customized component styles are obtained through a pre-configured independent style library;

[0052] Among them, the global unified interface includes but is not limited to: page color interface, page text interface, page sticker interface, the local style interface includes at least one of the following: drop-down box interface, breadcrumb interface, navigation bar interface, and the independent style library is pre-configured according to user needs, which can realize customized design of personalized components of the interface, including but not limited to: special shape windows and personalized dividing lines.

[0053] Step S203: determining page management style parameters based on style parameters of at least one type of style.

[0054] In an embodiment of the present invention, when there is a conflict in page component design styles, the above three types of styles have priorities, and the style type priorities are represented by weight parameters. The weight parameters corresponding to the third type of styles are greater than the weight parameters corresponding to the second type of styles, and the weight parameters corresponding to the second type of styles are greater than the weight parameters corresponding to the first type of styles.

[0055] After obtaining page management style parameters of different categories, they can be compiled / embedded into the compressed style sheet of the third-party component library. The specific implementation step is S102.

[0056] Step S102 : Based on a preset matching rule, the page management style parameters are embedded into the initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of the third-party component library.

[0057] It should be noted that there are many types of compilation components. In the embodiment of the present invention, the sass-loader component (referring to a compression component) is selected to compile the style sheet of the third-party component library to generate a compressed style sheet.

[0058] The following describes the matching and embedding methods in detail, combining different types of page management style parameters.

[0059] In an embodiment of the present invention, step S102 includes: when the page management style parameters are style parameters of the first category of styles, obtaining the historical cache variables of the browser of the associated product interface; storing the style parameters of the first category of styles in the historical cache variables; matching the initial style sheet with the style parameters of the historical cache variables to obtain a matching result; when the matching result indicates that the style parameters of the historical cache variables are matched, using the style parameters of the historical cache variables to replace the successfully matched page global style parameters in the initial style sheet to generate a target style sheet.

[0060] In an embodiment of the present invention, based on preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating a target style sheet also includes: when the page management style parameters are style parameters of the second category of style, obtaining the page interaction component style of the associated product interface; using a local regular matching file to match the initial style sheet with the page interaction component style of the associated product interface to obtain a matching result; when the matching result indicates that the page interaction component style of the associated product interface is matched, using the style parameters of the page interaction component style of the associated product interface to replace the successfully matched interaction component style parameters in the initial style sheet to generate a target style sheet.

[0061] In an embodiment of the present invention, based on preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating a target style sheet also includes: when the page management style parameters are style parameters of the third category style, obtaining the page customization component style of the associated product interface; incrementing the style parameters of the associated page customization component style into the initial style sheet to generate a target style sheet.

[0062] The style parameters of the third category of styles mentioned above, while being managed in a unified and standardized manner, provide an extensible interface for third-party components to achieve personalized customization of user pages.

[0063] Step S103: Using the target style sheet to replace the initial style sheet, and updating the target page style in the product interface.

[0064] It should be noted that after the target style sheet is generated, an encapsulation file is generated, compiled in the browser, and stored in the browser cache, so that the newly generated target style sheet overwrites the original style sheet to achieve dynamic modification of the style.

[0065] Through the above steps, third-party components are managed uniformly based on page management style parameters and preset matching rules. While maintaining standardized management, this also provides extensible interfaces for third-party components, enabling personalized customization of user pages. Furthermore, real-time updates to page styles within the product interface enhance collaboration between developers and user experience designers, improving the timeliness of communication and resolving technical issues related to weak page management capabilities and inconsistent standards after introducing third-party components.

[0066] The present invention is described below in conjunction with another detailed embodiment.

[0067] Figure 3 This is an architectural diagram of an optional page management system according to an embodiment of the present invention. Figure 3 As shown, the page management system includes three main parts: page management subsystem, compilation subsystem and dynamic matching subsystem.

[0068] Among them, the page management subsystem includes: page configuration module, interactive component configuration module, and personalized customization module.

[0069] The page configuration module provides a unified entry for the global page style and a unified interface for the global style (corresponding to the style parameters of the first category of styles mentioned above); the interactive component configuration module configures the interactive components of third-party components and provides a unified style interface for drop-down boxes, breadcrumbs, navigation bars, etc. (corresponding to the style parameters of the second category of styles mentioned above). On the premise of meeting the global style configuration, some specific interactive requirements are configured through the interactive component configuration module; the personalized customization module configures an independent style library, and on the basis of page configuration and interactive component configuration, personalizes some native attributes and styles (corresponding to the style parameters of the third category of styles mentioned above).

[0070] The compilation subsystem loads the initial style sheet from the third-party component into the local project, providing source files for style modification.

[0071] The dynamic matching subsystem dynamically modifies the style sheet generated by the compilation device through a series of rules configured in the background according to the configuration input in the page management subsystem to generate a new style sheet.

[0072] The above page management system completes the design management of component pages through the following steps:

[0073] Step 1: Manage the page configuration module, interactive component configuration module, and personalized customization module

[0074] According to the required UED (User Experience Design) style, the required management style parameters are entered into the page management subsystem, mainly including: global page style (corresponding to the first type of style mentioned above), page interaction component style (corresponding to the second type of style mentioned above, including but not limited to: a certain input box, or specific attribute, defining the style), and page custom component style (corresponding to the third type of style mentioned above). When there is a conflict in page component design styles, the above three types of styles have a priority, and the style type priority is represented by a weight parameter. The weight parameter corresponding to the page custom component style is greater than the weight parameter corresponding to the page interaction component style, and the weight parameter corresponding to the page interaction component style is greater than the weight parameter corresponding to the global page style.

[0075] Step 2: Compress and package the third-party component styles locally to generate and output the initial style sheet;

[0076] In this implementation, the third-party component library style sheet can be compiled by the sass-loader component in the compilation subsystem to generate a compressed style sheet.

[0077] Step 3: Generate a rule file based on the input configuration information;

[0078] Step 4: Dynamically match the rule file to generate the target style sheet;

[0079] The parameters embedded in step 2 are dynamically matched using specific rules in the dynamic matching subsystem. The matching rules are as follows:

[0080] For the global style of the page, obtain the historical cache variable of the browser of the associated product interface; store the style parameters of the first category of styles in the historical cache variable; match the initial style sheet with the style parameters of the historical cache variable to obtain a matching result; when the matching result indicates that the style parameters of the historical cache variable are matched, use the style parameters of the historical cache variable to replace the successfully matched global style parameters of the page in the initial style sheet to generate a target style sheet.

[0081] In this embodiment, the style parameters of the first type of style are used to unify the style / style of the page. The style parameters of the first type of style configured in step one are stored in the historical cache variable in the browser. The cache variable of the browser needs to determine the usage habits of the previous user and follow the user's usage habits.

[0082] After obtaining the generated target style sheet file locally, it matches the parameters in the historical cache variable and performs a global replacement through retrieval.

[0083] For the page interaction component style, obtain the page interaction component style of the associated product interface; use the local regular matching file to match the initial style sheet with the page interaction component style of the associated product interface to obtain a matching result; when the matching result indicates that the page interaction component style of the associated product interface is matched, use the style parameters of the page interaction component style of the associated product interface to replace the successfully matched interaction component style parameters in the initial style sheet to generate the target style sheet.

[0084] In this embodiment, for the maintenance of global specific component styles / styles, the specific component style that needs to be maintained is selected based on the style parameters of the second category of styles obtained in step one, and the component style sheet is matched through the locally maintained regular file for global replacement.

[0085] For the page customization component style, obtain the page customization component style of the associated product interface; increment the style parameters of the associated page customization component style into the initial style sheet to generate the target style sheet.

[0086] Step 5: The generated new style sheet overwrites the original style sheet.

[0087] Generate an encapsulated file, compile it in the browser, and store it in the browser cache. The generated new style sheet overwrites the original style sheet to achieve dynamic modification of the style.

[0088] The above-mentioned page management system unifies the management of third-party components based on page management style parameters and preset matching rules. While unifying and standardizing management, it provides extensible interfaces for third-party components to achieve personalized customization of user pages. At the same time, it updates the page style in the product interface in real time, improves the high degree of collaboration between developers and user experience designers, and improves the timeliness of communication.

[0089] In this embodiment, the introduced third-party components are managed in a unified manner, and the management system is faster, more efficient, and has a higher fault tolerance. The personalized customization provided by the system allows personalized output on the basis of complying with design specifications, thereby optimizing the scalability of third-party components.

[0090] The present invention is described below in conjunction with another optional embodiment.

[0091] Example 2

[0092] This embodiment provides a page management device, and each implementation unit included in the page management device corresponds to each implementation step in the first embodiment.

[0093] Figure 4 is a schematic diagram of an optional page management device according to an embodiment of the present invention, such as Figure 4As shown, it includes: an acquisition unit 41, a generation unit 42, and an update unit 43, wherein,

[0094] An acquisition unit 41 is configured to acquire page management style parameters, wherein the page management style parameters include at least a page identifier, a component style identifier, and style parameters. The component style identifier is used to determine a target page style to be updated, and the page identifier is used to determine a product interface to which the target page style belongs.

[0095] A generating unit 42 is configured to embed the page management style parameters into an initial style sheet based on a preset matching rule to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling a style sheet of a third-party component library;

[0096] The updating unit 43 is configured to replace the initial style sheet with the target style sheet, and update the target page style in the product interface.

[0097] The above-mentioned page management device obtains page management style parameters through the acquisition unit 41, wherein the page management style parameters include at least: a page identifier, a component style identifier and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs; through the generation unit 42, based on the preset matching rules, the page management style parameters are embedded into the initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of the third-party component library; through the update unit 43, the target style sheet is replaced with the initial style sheet to update the target page style in the product interface. In this embodiment, based on the page management style parameters and the preset matching rules, the third-party components are uniformly managed, and at the same time, the page style in the product interface is updated in real time, thereby improving the high degree of collaboration between developers and user experience designers, improving the timeliness of communication, and thus solving the technical problems in the related technology of weak page management capabilities and inconsistent specifications after the introduction of third-party components.

[0098] Optionally, the acquisition unit 41 includes: a first receiving module, used to receive the user experience design style sent by the client terminal; a first determination unit, used to determine the style parameters of at least one type of style based on the user experience design style: the first type, the page global style, wherein the page global style is obtained through the global unified interface configuration; the second type, the page interaction component style, wherein the page interaction component style refers to the style obtained by compiling the interaction component in the third-party component library through the local style interface while satisfying the page global style; the third type, the page customization component style, wherein the page customization component style is obtained through a pre-configured independent style library; the second determination module, used to determine the page management style parameters based on the style parameters of at least one type of style.

[0099] Optionally, the local style interface includes at least one of the following: a drop-down box interface, a breadcrumb interface, and a navigation bar interface.

[0100] Optionally, the weight parameter corresponding to the third category of styles is greater than the weight parameter corresponding to the second category of styles, and the weight parameter corresponding to the second category of styles is greater than the weight parameter corresponding to the first category of styles.

[0101] Optionally, the generation unit 42 includes: a first acquisition module, used to obtain the historical cache variables of the browser of the associated product interface when the page management style parameters are style parameters of the first category of styles; a first storage module, used to store the style parameters of the first category of styles in the historical cache variables; a first matching module, used to match the initial style sheet with the style parameters of the historical cache variables to obtain a matching result; a first replacement module, used to replace the successfully matched page global style parameters in the initial style sheet with the style parameters of the historical cache variables to generate a target style sheet when the matching result indicates that the style parameters of the historical cache variables are matched.

[0102] Optionally, the generation unit 42 also includes: a second acquisition module, which is used to obtain the page interaction component style of the associated product interface when the page management style parameters are style parameters of the second category of style; a second matching module, which is used to use a local regular matching file to match the initial style sheet with the page interaction component style of the associated product interface to obtain a matching result; a second replacement module, which is used to use the style parameters of the page interaction component style of the associated product interface to replace the successfully matched interaction component style parameters in the initial style sheet when the matching result indicates that the page interaction component style of the associated product interface is matched, to generate a target style sheet.

[0103] Optionally, the generation unit 42 also includes: a third acquisition module, used to obtain the page customization component style of the associated product interface when the page management style parameters are style parameters of the third category style; a first generation module, used to increment the style parameters of the associated page customization component style into the initial style sheet to generate a target style sheet.

[0104] The page management device may further include a processor and a memory. The acquisition unit 41, generation unit 42, update unit 43, etc. are all stored in the memory as program units, and the processor executes the program units stored in the memory to implement corresponding functions.

[0105] The aforementioned processor includes a kernel, which retrieves the corresponding program unit from memory. One or more kernels can be configured. By adjusting kernel parameters, the target page style of the product interface can be updated, enabling unified management of third-party components. While providing standardized management, this provides extensible interfaces for third-party components, enabling personalized customization of user pages. Furthermore, the page style of the product interface can be updated in real time, enhancing collaboration between developers and user experience designers and improving the timeliness of communication.

[0106] The above-mentioned memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0107] According to another aspect of an embodiment of the present invention, a computer-readable storage medium is provided, which includes a stored computer program, wherein when the computer program is running, the device where the computer-readable storage medium is located is controlled to execute any one of the above-mentioned page management methods.

[0108] According to another aspect of an embodiment of the present invention, an electronic device is also provided, comprising one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by one or more processors, the one or more processors implement any one of the above-mentioned page management methods.

[0109] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing an initialization program having the following method steps: obtaining page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier, and style parameters, the component style identifier is used to determine the target page style to be updated, and the page identifier is used to determine the product interface to which the target page style belongs; based on preset matching rules, embedding the page management style parameters into an initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling the style sheet of a third-party component library; using the target style sheet to replace the initial style sheet, and updating the target page style in the product interface.

[0110] Figure 5 FIG. 1 is a hardware structure diagram of an electronic device (or mobile device) according to a page management method of an embodiment of the present invention. Figure 5As shown, the electronic device may include one or more (illustrated as 502a, 502b, ..., 502n in the figure) processors 502 (the processor 502 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 504 for storing data. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, a keyboard, a power supply and / or a camera. It will be understood by those skilled in the art that Figure 5 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 5 More or fewer components than shown, or with Figure 5 Different configurations shown.

[0111] The serial numbers of the above embodiments of the present invention are for description only and do not represent the advantages or disadvantages of the embodiments.

[0112] In the above embodiments of the present invention, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0113] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only exemplary. For example, the division of units can be a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0114] Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple units. Some or all of the units may be selected to achieve the purpose of the present embodiment according to actual needs.

[0115] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0116] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk, etc. Various media that can store program codes.

[0117] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.

Claims

1. A page management method, characterized in that: include: Obtaining page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier, and style parameters, the component style identifier is used to determine a target page style to be updated, and the page identifier is used to determine a product interface to which the target page style belongs; The step of obtaining page management style parameters includes: receiving a user experience design style sent by a client terminal; determining, based on the user experience design style, style parameters of at least one of the following types of styles: a first type, a page global style, wherein the page global style is obtained through a global unified interface configuration; a second type, a page interaction component style, wherein the page interaction component style refers to a style obtained by compiling an interaction component in a third-party component library through a local style interface while satisfying the page global style; a third type, a page customization component style, wherein the page customization component style is obtained through a pre-configured independent style library; and determining the page management style parameters based on the style parameters of the at least one type of style. Based on a preset matching rule, the page management style parameters are embedded into an initial style sheet to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling a style sheet of a third-party component library; Based on the preset matching rules, the page management style parameters are embedded into the initial style sheet, and the step of generating the target style sheet includes: when the page management style parameters are the style parameters of the first category of styles, obtaining the historical cache variables of the browser associated with the product interface; storing the style parameters of the first category of styles into the historical cache variables; matching the style parameters of the initial style sheet with the style parameters of the historical cache variables to obtain a matching result; when the matching result indicates that the style parameters of the historical cache variables are matched, replacing the page global style parameters that have been successfully matched in the initial style sheet with the style parameters of the historical cache variables to generate the target style sheet; when the page management style parameters are the style parameters of the second category of styles In the case of style parameters, the page interaction component style associated with the product interface is obtained; the local regular matching file is used to match the initial style sheet with the page interaction component style associated with the product interface to obtain a matching result; in the case where the matching result indicates that the page interaction component style associated with the product interface is matched, the style parameters of the page interaction component style associated with the product interface are used to replace the successfully matched interaction component style parameters in the initial style sheet to generate the target style sheet; in the case where the page management style parameters are style parameters of the third category style, the page customization component style associated with the product interface is obtained; the style parameters associated with the page customization component style are incremented into the initial style sheet to generate the target style sheet; The target style sheet is used to replace the initial style sheet, and the target page style in the product interface is updated.

2. The method according to claim 1, characterized in that The local style interface includes at least one of the following: a drop-down box interface, a breadcrumb interface, and a navigation bar interface.

3. The method according to claim 1, characterized in that The weight parameter corresponding to the third category of styles is greater than the weight parameter corresponding to the second category of styles, and the weight parameter corresponding to the second category of styles is greater than the weight parameter corresponding to the first category of styles.

4. A page management device, characterized in that: include: an acquiring unit, configured to acquire page management style parameters, wherein the page management style parameters include at least: a page identifier, a component style identifier, and style parameters, the component style identifier being used to determine a target page style to be updated, and the page identifier being used to determine a product interface to which the target page style belongs; The acquisition unit includes: a first receiving module, which is used to receive the user experience design style sent by the client terminal; a first determining unit, which is used to determine the style parameters of at least one type of style based on the user experience design style: the first type, the page global style, wherein the page global style is obtained through the global unified interface configuration; the second type, the page interaction component style, wherein the page interaction component style refers to the style obtained by compiling the interaction component in the third-party component library through the local style interface under the condition of satisfying the page global style; the third type, the page customization component style, wherein the page customization component style is obtained through a pre-configured independent style library; the second determining module is used to determine the page management style parameters based on the style parameters of the at least one type of style; a generating unit, configured to embed the page management style parameters into an initial style sheet based on a preset matching rule to generate a target style sheet, wherein the initial style sheet is obtained by compressing and compiling a style sheet of a third-party component library; The generation unit includes: a first acquisition module for acquiring a history cache variable of the browser associated with the product interface when the page management style parameter is a style parameter of the first category; a first storage module for storing the style parameter of the first category of style in the history cache variable; a first matching module for matching the style parameters of the initial style sheet with the style parameters of the history cache variable to obtain a matching result; a first replacement module for replacing the page global style parameters that have successfully matched in the initial style sheet with the style parameters of the history cache variable to generate the target style sheet when the matching result indicates that the style parameters of the history cache variable are matched; a second acquisition module for acquiring a history cache variable associated with the product interface when the page management style parameter is a style parameter of the second category of style. a page interaction component style of the product interface; a second matching module, configured to match the initial style sheet with the page interaction component style associated with the product interface using a local regular matching file to obtain a matching result; a second replacement module, configured to replace the successfully matched interaction component style parameters in the initial style sheet with the style parameters of the page interaction component style associated with the product interface, to generate the target style sheet, when the matching result indicates that the page interaction component style associated with the product interface is matched; a third acquisition module, configured to acquire the page customization component style associated with the product interface, when the page management style parameters are the style parameters of the third category of styles; a first generation module, configured to increment the style parameters associated with the page customization component style into the initial style sheet, to generate the target style sheet; An updating unit is configured to replace the initial style sheet with the target style sheet, and update the target page style in the product interface.

5. A computer-readable storage medium, characterized in that The computer-readable storage medium includes a stored computer program, wherein when the computer program is executed, the device where the computer-readable storage medium is located is controlled to execute the page management method according to any one of claims 1 to 3.

6. An electronic device, characterized in that: It includes one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the page management method described in any one of claims 1 to 3.

Citation Information

Patent Citations

  • Theme switching method, system and device and computer readable storage medium

    CN111625335A