Deployment method and device of front-end page and computer equipment

Abstract

The invention relates to a front-end page deployment method and device and computer equipment, and relates to the technical field of computers.The method comprises the steps that under the condition that it is monitored that a front-end page is opened, the page domain name of the front-end page and the type of a used frame are obtained; acquiring corresponding page customization configuration based on the page domain name; based on the frame type, calling a customization module matched with the frame type in a preset module packet; calling a node hijacking method matched with the frame type, and determining a target node corresponding to the page customization configuration in a corresponding customization module; updating or deleting the corresponding target node based on each piece of customization information in the page customization configuration so as to realize the updating of code information in a customization module corresponding to the deployment of the front-end page; on the basis, the reusability of the pre-installed customized module is not influenced, the change of the existing code is avoided, the reusability of the existing code is improved, the workload of development workers is reduced, and the maintenance difficulty and cost of the code are reduced.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, and computer device for deploying a front-end page. Background Technology

[0002] In the process of software commercialization, different users will raise various demands for software systems. Some have functional expansion needs, some have functional customization needs, but most have customization needs for appearance. With the commercialization of software systems, some channel users customize the appearance of the software system and then resell it to users with specific needs, while some end users adopt appearance customization solutions to balance the sense of security brought by privatization and the stability of updates brought by cloud computing.

[0003] Typical customization of software system appearance generally includes requirements such as domain name customization, system name customization, brand hiding or replacement, and function hiding or customization. Currently, for software system page appearance customization needs, developers implement different customization requirements in different branches of the same code repository, then deploy the corresponding code content of different branches independently on different servers, and finally achieve the display of different customization requirements through independent access. This current development and deployment solution for customized software systems is imperceptible to users, but it involves a very large workload for software system developers and has high system maintenance difficulty and cost. Summary of the Invention

[0004] Therefore, it is necessary to provide a method, apparatus, and computer equipment for deploying front-end pages that can reduce the development and maintenance costs of software systems, in order to address the aforementioned technical problems.

[0005] Firstly, this application provides a method for deploying a front-end page, including:

[0006] If the front-end page is detected to be open, obtain the page domain name and the frame type used by the front-end page;

[0007] Obtain the corresponding page customization configuration based on the page domain name; and call the customized module matching the frame type in the preset module package based on the frame type;

[0008] Invoke the node hijacking method matching the frame type, and determine the target node corresponding to the page customization configuration in the corresponding customization module;

[0009] Based on the customization information in the page customization configuration, the corresponding target node is updated or deleted to update the code information in the customization module corresponding to the deployment of the front-end page.

[0010] In one embodiment, updating or deleting the corresponding target node based on the customization information in the page customization configuration includes:

[0011] If the target node includes the target text from the customized information, the initial text associated with the target text in the customization module is replaced entirely with the target text; and / or,

[0012] If the target node includes the node pointed to by the customized information, the corresponding target node is updated or deleted based on the customized information.

[0013] In one embodiment, it further includes:

[0014] For the deployment project of the aforementioned front-end page, multiple custom modules corresponding to multiple framework types are installed to form the preset module package; and corresponding page customization files are created based on the customization requirements of each of the aforementioned front-end pages; wherein, the page customization files include multiple page customization configurations.

[0015] In one embodiment, after creating the corresponding page customization file based on the customization requirements of each of the front-end pages, the method further includes:

[0016] For each of the aforementioned front-end pages, the page customization configuration and the corresponding customization module in the corresponding page customization file are loaded, and the initialization method of the customization module is called based on the framework type used by each of the aforementioned front-end pages to achieve the initialization of the customization module.

[0017] In one embodiment, the invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including:

[0018] If the framework type is determined to be Vue, the node hijacking method corresponding to the Vue framework is invoked;

[0019] After the custom module corresponding to the Vue framework is compiled, the target node corresponding to each custom information included in the page customization configuration is determined in the custom module based on the node hijacking method called.

[0020] In one embodiment, the invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including:

[0021] If the framework type is determined to be a React framework, the node hijacking method corresponding to the React framework is invoked;

[0022] During the process of updating from the virtual DOM to the real DOM in the custom module corresponding to the React framework, the target node corresponding to each customization information included in the page customization configuration is determined in the custom module based on the node hijacking method called.

[0023] In one embodiment, the invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including:

[0024] If the framework type is determined to be Other, the node hijacking method corresponding to the Other framework is invoked.

[0025] When it is detected that the DOM node in the corresponding front-end page is pending update, the target node corresponding to each customization information included in the page customization configuration is determined in the customization module based on the node hijacking method called.

[0026] The "Other" framework includes framework types other than Vue and React.

[0027] In one embodiment, updating the corresponding target node based on the customized information includes:

[0028] Based on the target text in the customized information, update the initial text associated with the target text in the corresponding target node to the target text; and / or,

[0029] Based on the target node attribute in the customized information, update the initial node attribute associated with the target node attribute in the corresponding target node to the target node attribute.

[0030] Secondly, this application also provides a front-end page deployment device, comprising:

[0031] The data acquisition module is used to acquire the page domain name and the frame type used by the front-end page when the front-end page is detected to be open.

[0032] The data retrieval module is used to obtain the corresponding page customization configuration based on the page domain name; and to call the customized module matching the frame type from the preset module package based on the frame type.

[0033] The information determination module is used to call the node hijacking method matching the frame type to determine the target node corresponding to the page customization configuration in the corresponding customization module;

[0034] The data update module is used to update or delete the corresponding target node based on the customized information in the page customization configuration, so as to update the code information in the customization module corresponding to the deployment of the front-end page.

[0035] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of any of the methods described in the first aspect.

[0036] In the front-end page deployment method, apparatus, and computer equipment provided in this application, when the front-end page is detected to be open, the page domain name and the frame type used to build the front-end page are obtained; the corresponding page customization configuration is obtained based on the page domain name; and based on the frame type, a custom module matching the frame type is called in a preset module package; then, a node hijacking method matching the frame type used by the front-end page is called to find the target node corresponding to each customization information in the page customization configuration in the corresponding custom module; finally, based on each customization information in the page customization configuration, the content of the corresponding target node is updated or deleted to update the code information in the custom module corresponding to the deployment of the front-end page. It can be seen that by obtaining the pre-installed custom modules of the page development project based on the page customization configuration corresponding to each page domain name, and confirming and updating the relevant target nodes therein, the reusability of the pre-installed custom modules is not affected, and changes to the existing code are avoided. This is beneficial to improving the reusability of the existing code, and also to reducing the workload of page developers and reducing the maintenance difficulty and cost of related software systems. Attached Figure Description

[0037] To more clearly illustrate the technical solutions in the embodiments of this application or the conventional technology, the drawings used in the description of the embodiments or the conventional technology will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0038] Figure 1 This is a flowchart illustrating the deployment method of the front-end page in one embodiment;

[0039] Figure 2 This is a schematic diagram of the preliminary process of a front-end page deployment method in one embodiment;

[0040] Figure 3 for Figure 2 A schematic diagram of the subsequent process of the preceding process in the illustrated embodiment;

[0041] Figure 4This is a schematic diagram of the structure of a front-end page deployment device in one embodiment;

[0042] Figure 5 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0043] To facilitate understanding of the present invention, a more complete description will be given below with reference to the accompanying drawings. Preferred embodiments of the invention are shown in the drawings. However, the invention can be implemented in many different forms and is not limited to the embodiments described herein. Rather, these embodiments are provided to provide a thorough and complete understanding of the disclosure of the invention.

[0044] In the relevant technical solutions, the development of front-end pages suffers from high workload, high maintenance difficulty, and high operating costs. Specifically, the workload is high because each customized requirement necessitates switching to a new branch and repeating numerous modifications, such as replacing text, images, and code. The maintenance difficulty is high because after regular version iterations, the iterated features still need to be updated to the customized version to ensure consistency across all channels. This requires a significant amount of work when updating to customized requirements, including code merging, adapting new features, packaging and deploying customized versions, and maintenance, leading to increased operating costs. Furthermore, each customized domain requires a separate server, but the access volume of customized versions is not high, resulting in wasted server resources and costs.

[0045] Therefore, it is necessary to provide a front-end page deployment method that can reduce the development and maintenance costs of software systems to address the aforementioned technical problems.

[0046] Specifically, Figure 1 This is a flowchart illustrating a front-end page deployment method in one embodiment. In this embodiment provided in this application, as... Figure 1 As shown, a method for deploying a front-end page is provided. This embodiment illustrates the application of this method to a terminal, where the terminal can be, but is not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, etc. It is understood that this method can also be applied to a server, where the server can be an independent server or a server cluster composed of multiple servers. It can also be applied to a system that includes both a terminal and a server, and is implemented through the interaction between the terminal and the server.

[0047] One alternative embodiment is that this application provides a front-end page deployment method, including steps 101-104, wherein:

[0048] Step 101: If the front-end page is detected to be open, obtain the page domain name and the frame type used by the front-end page;

[0049] Step 102: Obtain the corresponding page customization configuration based on the page domain name; and based on the frame type, call the customized module matching the frame type in the preset module package;

[0050] Step 103: Invoke the node hijacking method matching the frame type, and determine the target node corresponding to the page customization configuration in the corresponding customization module;

[0051] Step 104: Based on the customization information in the page customization configuration, update or delete the corresponding target nodes to update the code information in the corresponding customization module for front-end page deployment.

[0052] Specifically, based on the real-time monitoring of the content displayed on the terminal device, and based on the execution of step 101, when a front-end page is detected to be open, the page domain name of the front-end page is first obtained to confirm the specific entity to which the front-end page belongs, that is, to find out which enterprise or customer the front-end page belongs to; the situation where the front-end page is detected to be open may be, for example, the front-end page is opened by the front-end developer, but this application is not limited to this, and it may also be opened by any user.

[0053] Simultaneously, upon detecting the opening of a front-end page, in addition to obtaining the corresponding page domain name, the frame type used when the front-end page was built, or the frame type to be used when building the front-end page, can also be obtained. This application will explain these two scenarios separately. The first scenario is that the front-end page is already an initial page before being updated with corresponding customization information. The various display information on this initial page can be changed based on different customization needs of different users / subjects to build new front-end pages (target front-end pages) for different customization needs. The second scenario is that the front-end page does not yet have any built content. In this case, the frame type used to build the front-end page can be selected in advance based on the developer's development habits or the user's requirements, and the frame type and page domain name can be matched so that the corresponding frame type to be used can be known based on the page domain name after the front-end page is opened. Therefore, regardless of either of the above two scenarios, the frame type to be used by the front-end page can be obtained based on the page domain name when the front-end page is opened.

[0054] Then, step 102 can be executed to obtain the user / subject corresponding to the obtained front-end page's domain name, and then obtain the corresponding page customization configuration based on the determined user / subject. The page customization configuration includes the user / subject's customization requirements for the front-end page (customization information), which is the customization information of the display effect of the front-end page (target front-end page) that the user ultimately wants to obtain. By obtaining the page customization configuration through this step, it is possible to know which information in the current front-end page can be adjusted based on the customization information compared to the current front-end page. In other words, by obtaining the page customization configuration through this step, it is possible to know what kind of display effect and function of the front-end page should be built. Then, based on the customized construction of the front-end page, the target front-end page desired by the user / subject is obtained to meet the user's customization requirements.

[0055] While obtaining the corresponding page customization configuration based on the page domain, multiple customized modules matching the front-end page construction requirements can be called from the previously created preset module packages corresponding to the determined framework type, based on the obtained front-end page construction framework type. It should be noted that a preset module package may include, for example, multiple customized modules corresponding to only one framework type for front-end page construction, or it may include multiple customized modules corresponding to two or more framework types. By combining the determined multiple customized modules, at least some of the content to be displayed on the front-end page can be written and implemented. For example, a customized module can also be used to write and implement the content to be displayed in a menu bar on the front-end page. This application does not specifically limit the method of combining customized modules. How to combine customized modules can be determined by the front-end developer, or it can be written in advance into the file corresponding to the page customization configuration to achieve automated combination of customized modules, which also helps to improve the development speed of customized front-end pages.

[0056] Because different frame types require different automated methods for finding nodes that need to be modified based on customization information in the corresponding customized modules, step 103 is executed. This involves calling a node hijacking method corresponding to the frame type used in the customized development process of the previously determined front-end page. This node hijacking method then searches for the target nodes associated with each piece of customization information in the page customization configuration within the customized module called in step 102. These target nodes are the code nodes that need to be adjusted and updated based on the customization information in the page customization configuration to meet the user's customization needs for the front-end page. Calling a node hijacking method matching the frame type to find the DOM nodes associated with the page customization configuration in the customized module helps ensure the efficiency and accuracy of target node finding. The DOM, or Document Object Model, is the data representation of objects that constitute the document structure and content on the web (World Wide Web).

[0057] Among them, the node hijacking method based on the matching frame type is equivalent to locating the content that needs to be updated or deleted in the customized module by finding the target node associated with the page customization configuration in the customized module. This allows front-end developers to quickly update the relevant code in the customized module based on the customization information included in the user's page customization configuration, or facilitates automated development tools to quickly update the relevant code in the customized module based on the customization information included in the user's page customization configuration.

[0058] Further, in step 104, after finding the corresponding target node in the customized module, based on the specific content contained in each customized information in the page customization configuration, the corresponding target node in the customized module is updated or deleted accordingly to obtain the updated customized modules. Further, the updated customized modules can be spliced ​​together according to the relevant required splicing method to obtain the relevant code formed by the updated customized modules that can be used to implement the customized front-end page, thereby realizing the update of the code information required for deploying the customized front-end page.

[0059] It should also be noted that step 102 of this application involves calling a custom module that matches the framework type from the preset module package. In other words, the custom module to be used is called. Then, based on steps 103 and 104, some information in the called custom module is updated or deleted. This process does not change the content of the custom module originally included in the preset module package, thus ensuring the reusability of the preset module package.

[0060] In the front-end page deployment method provided in this application, when the front-end page is detected to be open, the page domain name and the frame type used to build the front-end page are obtained; the corresponding page customization configuration is obtained based on the page domain name; and based on the frame type, a custom module matching the frame type is called in a preset module package; then, a node hijacking method matching the frame type used by the front-end page is called to find the target node corresponding to each customization information in the page customization configuration in the corresponding custom module; finally, based on each customization information in the page customization configuration, the content of the corresponding target node is updated or deleted to update the code information in the custom module corresponding to the front-end page deployment. It can be seen that by obtaining the pre-installed custom modules of the page development project based on the page customization configuration corresponding to each page domain name, and confirming and updating the relevant target nodes, the reusability of the pre-installed custom modules is not affected, and changes to the existing code are avoided. This is beneficial to improving the reusability of the existing code, and also helps to reduce the workload of page developers and reduce the maintenance difficulty and cost of related software systems.

[0061] Please continue to refer to Figure 1 In an exemplary embodiment, the updating or deletion of the corresponding target node based on the customization information in the page customization configuration performed in step 104 above can be achieved by performing at least one of steps 141 and 142, wherein:

[0062] Step 141: If the target node includes the target text from the customized information, replace the initial text associated with the target text in the customization module with the target text; and / or,

[0063] If the target node includes a node pointed to by the customized information, step 142 updates or deletes the corresponding target node based on the customized information.

[0064] This application does not specifically limit the types and quantities of customized information included in the page customization configuration, nor does it limit the specific content included in each piece of customized information. For example, if the customized information includes target text associated with the target front-end webpage, such as the webpage name of the target webpage, which is HH website, then the specific content included in the target text is, for example, "replace AA website with HH website", that is, to make the initial text corresponding to the customized module established by the webpage name in the target webpage "AA website". In this case, step 141 can be executed to achieve step 104 above. Specifically, the DOM node that includes "AA website" in the located customized module is taken as the target node, and then the initial text in the target node is replaced so that "AA website" in the target node is updated to "HH website", thus realizing the full text replacement of the webpage name associated with the target front-end webpage in the customized module.

[0065] In addition, if the customized information includes node information pointing to the customized module, then step 104 can be achieved by executing step 142. Specifically, if the located customized module includes the node pointed to by the customized information, it is equivalent to locating the DOM node to be updated. At this time, the information in the target node can be updated or deleted accordingly based on the content included in the customized information.

[0066] Since the application is used to implement the deployment of a front-end page, the number of customized modules required is relatively large. Therefore, when the types of information included in the customized information are diverse, and under the corresponding requirements, the above steps 141 and 142 can be executed simultaneously to improve the efficiency of updating information in the customized modules based on the customized information.

[0067] Please continue to refer to Figure 1 In an exemplary embodiment, the method may also include some steps that can be performed before step 101 above, such as: for the deployment project of the front-end page, installing multiple custom modules corresponding to multiple framework types to form a preset module package; and creating corresponding page customization files based on the customization requirements of each front-end page; wherein the page customization file includes multiple page customization configurations.

[0068] Specifically, a deployment project is created on the terminal to deploy at least one front-end page. Then, to improve deployment efficiency and reduce the workload and difficulty for front-end developers, multiple custom modules corresponding to different framework types required for various front-end page deployments can be pre-installed. This ensures that the pre-built module package includes multiple custom modules corresponding to multiple framework types, with each framework type having multiple custom modules installed. Each custom module, for example, can implement the display content of a sub-display area in the front-end page deployment. Furthermore, based on the customization requirements of each user / subject for each front-end page, corresponding page customization files can be created. For example, one front-end page can correspond to one page customization file, and each page customization file can include multiple page customization configurations, each of which can include multiple customization information proposed by the user.

[0069] By installing pre-defined module packages in the terminal and creating customized page files for each user, preparations are made in advance for the subsequent deployment of front-end pages, thereby improving the deployment efficiency of front-end pages.

[0070] Please continue to refer to Figure 1 In an exemplary embodiment, after creating corresponding page customization files based on the customization requirements of each front-end page in the above steps, the method further includes: for each front-end page, loading the page customization configuration and corresponding customization module in the corresponding page customization file, and calling the initialization method of the customization module based on the framework type used by each front-end page to achieve the initialization of the customization module.

[0071] Specifically, after installing the preset module package in the terminal and creating page customization files corresponding to each user, the initialization method of the relevant customized module can be called at the very beginning of the front-end page development. This enables the relevant customized module to take over the web page and complete the initialization of the customized module loaded by the user, so as to facilitate the execution of subsequent front-end page deployment steps and thus improve the deployment efficiency of the front-end page.

[0072] Please continue to refer to Figure 1In an exemplary embodiment, the call to the node hijacking method matching the framework type executed in step 103, determining the target node corresponding to the page customization configuration in the corresponding customization module, can be specifically achieved by executing steps 131 and 132. Specifically, in step 131, if the framework type is determined to be a Vue framework, the node hijacking method corresponding to the Vue framework is called; that is, if the framework type corresponding to the deployment of the front-end page is determined to be a Vue framework, then the node hijacking method applicable to DOM nodes in the Vue framework is called. Then, in step 132, after the customization module corresponding to the Vue framework has been compiled, based on the called node hijacking method, the target node corresponding to each customization information included in the page customization configuration is determined in the customization module; that is, even if all the customization modules corresponding to the Vue framework have been compiled, based on the called node hijacking method applicable to the Vue framework, the target node corresponding to each customization information is located in the corresponding customization module, so as to achieve the location of each target node in the customization module, thereby facilitating the updating or deletion of the customization information associated with the target node in subsequent steps, which is beneficial to improving the deployment efficiency of the customized front-end page.

[0073] One exemplary implementation involves using Vue's global mixin method to inject the Updated lifecycle hook into the component, thus intercepting global nodes. Updated is a hook in the Vue component lifecycle that is invoked after the component's DOM is updated; specifically, when the component's reactive data changes, causing a DOM update, the Updated hook is invoked immediately after the DOM update is complete.

[0074] The lifecycle of a Vue component can be divided into four phases: Creation phase: Initializing the component instance, including setting data listeners, computed properties, and methods. Mounting phase: Compiling the component template into a virtual DOM and mounting it onto the actual DOM. Update phase: Re-rendering the virtual DOM and updating the actual DOM when the component's reactive data changes; this phase includes the Updated hook. Destruction phase: Destroying the component instance and cleaning up all listeners and child instances.

[0075] Regarding the node hijacking method corresponding to the Vue framework, it should be added that the principle is to use the plugin capability provided by Vue to rewrite the method of creating the real DOM from the virtual DOM. An exemplary implementation includes: writing a Vue plugin A; rewriting the c method of the Vue object in plugin A; in the c method, detecting whether the virtual DOM node hits the target node. If it does, adjusting the virtual DOM and reassigning the adjusted virtual DOM node to the original Vue object c method.

[0076] Among them, Vue is a framework for building user interfaces; in addition, React can also be used to build user interfaces; of course, frameworks that can be used to build user interfaces are not limited to these two. This application refers to frameworks other than Vue and React that can be used to build user interfaces as "Other frameworks".

[0077] Please continue to refer to Figure 1 In an exemplary embodiment, for the node hijacking method that is matched to the frame type and executed in step 103, the target node corresponding to the page customization configuration is determined in the corresponding customization module, which can be specifically achieved by executing steps 133 and 134. Specifically, in step 133, if the framework type associated with the deployment instruction is determined to be the React framework, the node hijacking method corresponding to the React framework is called. That is, if the framework type corresponding to the deployment of the front-end page is determined to be the React framework, the node hijacking method applicable to DOM nodes in the React framework is called. Then, in step 134, during the process of the customized module corresponding to the React framework updating from the virtual DOM to the real DOM, the target nodes corresponding to each customized information included in the page customization configuration are determined in the customized module based on the called node hijacking method. In other words, in the customized module used to implement the customized deployment of the current front-end page, during the process of updating from the virtual DOM to the real DOM, the target nodes corresponding to each customized information are located in the corresponding customized module based on the called node hijacking method applicable to the React framework. This allows for the location of each target node in the customized module, which facilitates the updating or deletion of customized information associated with the target node in subsequent steps, thereby improving the deployment efficiency of the customized front-end page.

[0078] One exemplary embodiment is to use the Proxy method (proxy pattern) to hijack the operation between React updating from the virtual DOM to the real DOM, which can be achieved by hijacking the React.createElement method (a method of hijacking nodes).

[0079] Regarding the node hijacking method in the React framework, it's worth noting that the principle is to use a proxy mode to proxy the React virtual DOM creation process. Specifically, this includes: using a JS Proxy object to proxy the React.createElement method; analyzing the virtual DOM node to be created in the proxy callback to check if the target node is matched, and if so, making the corresponding modifications; and then re-calling React.createElement in the proxy callback to execute the normal DOM creation process.

[0080] Please continue to refer to Figure 1 In an exemplary embodiment, for the node hijacking method matching the frame type executed in step 103, the target node corresponding to the page customization configuration is determined in the corresponding customization module. This can be specifically achieved by executing steps 135 and 136. Specifically, in step 135, if it is determined that the frame type associated with the deployment instruction is another frame, the node hijacking method corresponding to the other frame is called; that is, if it is determined that the frame type corresponding to the deployment of the front-end page is another frame other than Vue and React, the node hijacking method applicable to the DOM nodes in the other frame is called. Then, in step 136, if it is detected that the DOM nodes in the corresponding front-end page are waiting to be updated, the target node corresponding to each customization information included in the page customization configuration is determined in the customization module based on the called node hijacking method. This achieves the positioning of each target node in the customization module, thereby facilitating the updating or deletion of the customization information associated with the target node in subsequent steps, which helps to improve the deployment efficiency of the customized front-end page.

[0081] Among them, "Other frameworks" includes framework types other than Vue and React frameworks, but "Other frameworks" does not refer to a specific type of framework.

[0082] One exemplary implementation uses JavaScript's MutationObserver to monitor changes to page DOM nodes. When a node is created, modified, or deleted, a replacement action is performed. MutationObserver is a powerful API (Application Programming Interface) provided by JavaScript for asynchronously monitoring changes to the DOM tree and performing corresponding operations when changes occur. JavaScript is a scripting programming language.

[0083] Specifically, the above implementation can be performed as follows: The creation of the actual DOM of the web page is monitored using a MutationObserver (JavaScript); the node attributes and names of the actual DOM are parsed in the MutationObserver's monitoring callback to determine whether they are related to or match the target node; the DOM manipulation methods are re-invoked in the callback to add, delete, or modify the DOM; to address performance issues, the DOM node analysis method executed in the MutationObserver's monitoring callback adopts a debouncing execution method; it can be selected to execute only once every 50ms.

[0084] Please continue to refer to Figure 1In an exemplary embodiment, for the content executed in step 104, in addition to the full-text replacement operation of the "target text" in the customization module in step 141 and the update or deletion of the target node pointed to by the customization information in step 142, for the content of "updating the corresponding target node based on the customization information", it is also possible to select at least one of the following steps 143 and 144 to implement it, wherein: Step 143, based on the target text in the customization information, update the initial text associated with the target text in the corresponding target node to the target text; the determined target text here will only be updated for the corresponding target node to improve the accuracy of the content update of each target node and avoid incorrect updates; Step 144, based on the target node attributes in the customization information, update the initial node attributes associated with the target node attributes in the corresponding target node to the target node attributes; that is, it provides a way to update the node attributes of the target node to meet the deployment of the target front-end page associated with the diverse customization information proposed by the user.

[0085] Another alternative embodiment is a method for deploying a front-end page, which may specifically include... Figure 2 Steps S1-S5 in the flowchart shown, and Figure 3 Steps 1-8 in the flowchart shown; where Figure 2 The execution flow shown is as follows: Step S1, the web application project installs the unified UI (User Interface) customization module package / sdk (preset module package); Step S2, a customization configuration file (page customization file) is created according to the customization version; Step S3, the customization configuration (page customization configuration) is loaded; Step S4, the unified UI customization module / sdk is loaded; Step S5, the unified customization module / sdk initialization method is called according to the web architecture information. Here, sdk is an abbreviation for Software Development Kit.

[0086] To improve code maintainability, the front-end page deployment method and appearance customization functionality provided in this application will not intrude on existing code. Therefore, web application projects only need to import the unified customization module / sdk to achieve customization capabilities. The unified customization module / sdk needs to read the web application's custom configuration to support future expansion for more customization needs. The web application needs to comply with the unified customization module's requirements and call its initialization method at system startup to enable the unified customization module to take over the web page.

[0087] Execute after initializing the unified customization module Figure 3The steps 1-8 shown are as follows: Step 1, obtain the currently accessed domain name (page domain name); Step 2, obtain the customized configuration required for the customized version corresponding to the domain name, such as copywriting customization, resource customization, and function customization; Step 3, execute different replacement strategies based on different methods of the SDK called by the application; then, select one of steps 4-6 to execute based on the framework type used to deploy the front-end page. Specifically, in the case of a Vue framework web application, Step 4 is executed, using Vue's global mixin method to inject the Updated lifecycle into the component, completing the hijacking operation of the global node; in the case of a React framework web application, Step 5 is executed, using... The Proxy approach (proxy pattern) intercepts React's operations between the virtual DOM and the real DOM. This can be achieved by intercepting the `React.createElement` method (a method of intercepting nodes). In other web applications, step 6 involves using JavaScript's `MutationObserver` to monitor changes to the page's DOM nodes. When a node is created, modified, or deleted, a replacement action is performed. Step 7 involves replacing the text in the custom configuration if the DOM node contains such text. Step 8 involves replacing the node content, deleting the node, and changing its attributes if the DOM node belongs to the target node specified in the custom configuration.

[0088] The customized configurations passed to the unified customization module by the web application are differentiated based on the domain name; each domain has its own configuration requirements. Therefore, the unified customization module needs to obtain the current web site domain name during initialization to determine which configuration to use. To improve the project's engineering and maintainability, web application systems now use different enterprise-level frameworks, commonly React and Vue, both of which are based on the concept of a virtual DOM. Because implementing customization capabilities requires replacing target information in the original real DOM or code, to improve performance, these two frameworks can handle the process from the virtual DOM to the real DOM, completing the replacement of the target element before the real DOM is displayed.

[0089] Three specific implementation methods are provided, one of which is that the original content is " PP is a very good company The corresponding customization requirement is "change all PP text to MM text", based on the result obtained after executing this method. MM is a very good company Secondly, the original content was " <div class="header”> I am a head The corresponding customized requirement is "hide the header module," and the original content is deleted after executing this method. Thirdly, the original content is... The corresponding customization requirement is "replace the product logo with b.logo", based on the result obtained after executing this method. ".

[0090] This requires the web application to explicitly call the corresponding web application architecture methods to perform page listening.

[0091] Step 4 above describes how Vue applications can hijack global DOM nodes through global injection lifecycle methods; step 5 involves using `React.createElement` to hijack React node creation; and step 6 describes how conventional web applications can only listen to changes in the global DOM using JavaScript's `MutationObserver` method, which occurs before the DOM is ready to be displayed on the page. Steps 4 and 5 offer advantages such as better page rendering and help avoid page lag issues. Steps 7 and 8 involve obtaining the target node and using DOM methods to replace, add, or delete node content.

[0092] Furthermore, using the front-end page deployment method provided in this application, the codebase already implements shared branch code. Therefore, only one service is needed during service deployment to enable access to multiple customized versions. This allows different domains to access the same web application service, achieving cost reduction and efficiency improvement. The front-end page deployment method provided in this application improves project maintainability. During continuous iteration, there is no need to worry about customized branches, nor does it intrude on the original code, ensuring functional synchronization between the customized system and the original system, and reducing the workload and burden on developers. It also helps reduce service operating costs, as the original multi-service deployment is reduced to deploying only one service, reducing the cost of unnecessary services.

[0093] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0094] Based on the same inventive concept, this application also provides a front-end page deployment apparatus for implementing the aforementioned front-end page deployment method. The solution provided by this apparatus is similar to the implementation described in the above method; therefore, the specific limitations in the embodiments of one or more front-end page deployment apparatuses provided below can be found in the limitations of the front-end page deployment method described above, and will not be repeated here.

[0095] Please refer to Figure 4 In one exemplary embodiment, the front-end page deployment device 300 provided in this application includes a data acquisition module 81, a data retrieval module 82, an information determination module 83, and a data update module 84, wherein:

[0096] The data acquisition module 81 is used to obtain the page domain name and the frame type used by the front-end page when the front-end page is detected to be open.

[0097] Data retrieval module 82 is used to obtain the corresponding page customization configuration based on the page domain name; and to call the customized module matching the frame type from the preset module package based on the frame type.

[0098] Information determination module 83 is used to call the node hijacking method that matches the frame type and determine the target node corresponding to the page customization configuration in the corresponding customization module;

[0099] The data update module 84 is used to update or delete the corresponding target nodes based on the customized information in the page customization configuration, so as to realize the update of the code information in the customized module corresponding to the deployment of the front-end page.

[0100] In an exemplary embodiment, the data update module 84 is used to update or delete the corresponding target node based on each customization information in the page customization configuration, including: when the target node includes the target text in the customization information, replacing the initial text associated with the target text in the customization module with the target text; and / or, when the target node includes the node pointed to by the customization information, updating or deleting the corresponding target node based on the customization information.

[0101] In an exemplary embodiment, the front-end page deployment device 300 further includes a project creation module, which is used to install multiple customized modules corresponding to multiple framework types for the deployment project of the front-end page to form a preset module package; and to create corresponding page customization files based on the customization requirements of each front-end page; wherein the page customization files include multiple page customization configurations.

[0102] In an exemplary embodiment, after the project creation module creates corresponding page customization files based on the customization requirements of each front-end page, it further includes: for each front-end page, loading the page customization configuration and the corresponding customization module in the corresponding page customization file, and calling the initialization method of the customization module based on the framework type used by each front-end page to achieve the initialization of the customization module.

[0103] In an exemplary embodiment, the information determination module 83 is used to call a node hijacking method matching the framework type to determine the target node corresponding to the page customization configuration in the corresponding customization module, including: if the framework type is determined to be Vue framework, calling the node hijacking method corresponding to Vue framework; after the customization module corresponding to Vue framework is compiled, determining the target node corresponding to each customization information included in the page customization configuration in the customization module based on the called node hijacking method.

[0104] In an exemplary embodiment, the information determination module 83 is used to call a node hijacking method matching the frame type to determine the target node corresponding to the page customization configuration in the corresponding customization module, including: when it is determined that the frame type associated with the deployment instruction is the React framework, calling the node hijacking method corresponding to the React framework; during the process of the customization module corresponding to the React framework updating from the virtual DOM to the real DOM, determining the target node corresponding to each customization information included in the page customization configuration in the customization module based on the called node hijacking method.

[0105] In an exemplary embodiment, the information determination module 83 is used to call a node hijacking method matching the framework type to determine the target node corresponding to the page customization configuration in the corresponding customization module, including: when it is determined that the framework type associated with the deployment instruction is another framework, calling the node hijacking method corresponding to the other framework; when it is detected that the DOM node in the corresponding front-end page is pending update, determining the target node corresponding to each customization information included in the page customization configuration in the customization module based on the called node hijacking method; wherein, other frameworks include framework types other than Vue framework and React framework.

[0106] In an exemplary embodiment, the data update module 84 is used to update the corresponding target node based on customized information, including: updating the initial text associated with the target text in the corresponding target node to the target text based on the target text in the customized information; and / or, updating the initial node attribute associated with the target node attribute in the corresponding target node to the target node attribute based on the target node attribute in the customized information.

[0107] The modules in the aforementioned front-end page deployment device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0108] Figure 5This is an internal structure diagram of a computer device in one embodiment. In an exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown below. Figure 5 As shown, the computer device includes a processor, memory, input / output interfaces, a communication interface, a display unit, and an input device. The processor, memory, and input / output interfaces are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interfaces. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interfaces are used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a front-end page deployment method. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0109] Those skilled in the art will understand that Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0110] Based on the same inventive concept, this application also provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it implements the aforementioned front-end page deployment method. The front-end page deployment method is any of the front-end page deployment methods mentioned in the embodiments of this application. For related embodiments, please refer to the above.

[0111] Based on the same inventive concept, this application also provides a computer program product, including a computer program that, when executed by a processor, implements the aforementioned front-end page deployment method. The front-end page deployment method is any of the front-end page deployment methods mentioned in the embodiments of this application, and related embodiments can be found above.

[0112] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0113] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0114] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0115] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A method for deploying a front-end page, characterized in that, include: If the front-end page is detected to be open, obtain the page domain name and the frame type used by the front-end page; Obtain the corresponding page customization configuration based on the page domain name; and call the customized module matching the frame type in the preset module package based on the frame type; Invoke the node hijacking method matching the frame type, and determine the target node corresponding to the page customization configuration in the corresponding customization module; Based on the customization information in the page customization configuration, the corresponding target node is updated or deleted to update the code information in the customization module corresponding to the deployment of the front-end page.

2. The method according to claim 1, characterized in that, The step of updating or deleting the corresponding target node based on the customization information in the page customization configuration includes: If the target node includes the target text from the customized information, the initial text associated with the target text in the customization module is replaced entirely with the target text; and / or, If the target node includes the node pointed to by the customized information, the corresponding target node is updated or deleted based on the customized information.

3. The method according to claim 1, characterized in that, Also includes: For the deployment project of the aforementioned front-end page, install multiple custom modules corresponding to multiple framework types to form the preset module package; Based on the customization requirements of each front-end page, a corresponding page customization file is created; wherein, the page customization file includes multiple page customization configurations.

4. The method according to claim 3, characterized in that, After creating the corresponding page customization files based on the customization requirements of each of the aforementioned front-end pages, the method further includes: For each of the aforementioned front-end pages, the page customization configuration and the corresponding customization module in the corresponding page customization file are loaded, and the initialization method of the customization module is called based on the framework type used by each of the aforementioned front-end pages to achieve the initialization of the customization module.

5. The method according to claim 1, characterized in that, The invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including: If the framework type is determined to be Vue, the node hijacking method corresponding to the Vue framework is invoked; After the custom module corresponding to the Vue framework is compiled, the target node corresponding to each custom information included in the page customization configuration is determined in the custom module based on the node hijacking method called.

6. The method according to claim 1, characterized in that, The invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including: If the framework type is determined to be a React framework, the node hijacking method corresponding to the React framework is invoked; During the process of updating from the virtual DOM to the real DOM in the custom module corresponding to the React framework, the target node corresponding to each customization information included in the page customization configuration is determined in the custom module based on the node hijacking method called.

7. The method according to claim 1, characterized in that, The invocation of the node hijacking method matching the frame type, in the corresponding customization module, determines the target node corresponding to the page customization configuration, including: If the framework type is determined to be Other, the node hijacking method corresponding to the Other framework is invoked. When it is detected that the DOM node in the corresponding front-end page is pending update, the target node corresponding to each customization information included in the page customization configuration is determined in the customization module based on the node hijacking method called. The "Other" framework includes framework types other than Vue and React.

8. The method according to claim 1, characterized in that, The updating of the target node based on the customized information includes: Based on the target text in the customized information, update the initial text associated with the target text in the corresponding target node to the target text; and / or, Based on the target node attribute in the customized information, update the initial node attribute associated with the target node attribute in the corresponding target node to the target node attribute.

9. A front-end page deployment device, characterized in that, include: The data acquisition module is used to acquire the page domain name and the frame type used by the front-end page when the front-end page is detected to be open. The data retrieval module is used to obtain the corresponding page customization configuration based on the page domain name; and to call the customized module matching the frame type from the preset module package based on the frame type. The information determination module is used to call the node hijacking method matching the frame type to determine the target node corresponding to the page customization configuration in the corresponding customization module; The data update module is used to update or delete the corresponding target node based on the customized information in the page customization configuration, so as to update the code information in the customization module corresponding to the deployment of the front-end page.

10. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 8.

Images