Front-end page integration method and device, computing equipment, computer program product and storage medium
By identifying and encapsulating the front-end page framework of heterogeneous applications, using sandbox isolation and dual queue control, the automatic adaptation of front-end page components is achieved, the conflict problems in heterogeneous application integration is solved, and the integration efficiency and stability is improved.
Patent Information
- Application Number
- CN202410199293.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-02-22
- Publication Date
- 2025-08-22
AI Technical Summary
During the front-end page integration process, the integration work is difficult due to inconsistent frameworks of heterogeneous applications, and conflicts need to be eliminated manually, resulting in inefficient integration.
The frame of the first front-end page is identified through the interceptor, encapsulated according to the type and version of the framework, create a sandbox isolation target component, use a dual queue to control component mounting, and integrate with hook functions to achieve automatic adaptation of components.
It resolves framework conflicts and style conflicts between front-end pages, improves integration efficiency, reduces manual intervention, and enhances component reusability and integration stability.
Smart Images
Figure CN120523461A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of computer front-end technology, and in particular to a method, apparatus, computing device, computer program product, and storage medium for front-end page integration. Background Art
[0002] With the rapid development of internet technology and the continuous iteration of system architectures, business systems are becoming increasingly complex. Faced with large and complex systems, front-end technology adopts the concept of micro-architecture, which aggregates multiple independent web applications and provides a common access interface. The goal is to split and decouple these large applications, allowing each part to be maintained and deployed independently, improving efficiency. A micro-front-end application appears to the user as a complete application, but from a technical perspective, it is composed of a combination of independent applications.
[0003] Based on the concept of micro-frontends, during the process of system application splitting and integration, there may be situations where existing applications need to be integrated into the original system, but the applications are heterogeneous. Therefore, during the integration process, the inconsistent system frameworks of each application make the integration work very difficult.
[0004] In related technologies, seamless integration of heterogeneous applications cannot be achieved, and developers are required to manually eliminate conflicts and integrate heterogeneous applications, which requires a lot of time and effort, resulting in low efficiency in system application integration. Summary of the Invention
[0005] The embodiments of the present application provide a method, apparatus, computing device, computer program product and storage medium for front-end page integration, which can solve the problem of frame conflict between front-end pages and page integration processes and improve the efficiency of front-end page integration.
[0006] In a first aspect, a front-end page integration method is provided. The method includes: if a target component is introduced into a first front-end page, intercepting access requests to the target component; the first front-end page is a front-end page generated by a first front-end framework; and the target component is a component in a front-end page generated by a second front-end framework. Determining the first front-end framework corresponding to the first front-end page; encapsulating the target component according to encapsulation information corresponding to the first front-end framework; integrating the encapsulated target component into the first front-end page; and enabling access and invocation of the encapsulated target component.
[0007] It is understandable that, in order to allow the first front-end page to reuse the target component under the second front-end page, the encapsulation information can be determined based on the first front-end architecture. The target component is encapsulated according to the encapsulation information, and the encapsulated target component supports access and call by the first front-end page, thereby realizing the reuse of the target component by the front-end page, avoiding the need for repeated development of components or pages with the same functions, and improving the integration efficiency of the front-end page.
[0008] In a possible implementation, encapsulating the target component according to the encapsulation information corresponding to the first front-end framework includes determining the encapsulation information corresponding to the target component according to the type and version of the first front-end framework, and encapsulating the target component according to the encapsulation information.
[0009] It is understandable that due to the different types and versions of front-end frameworks, the conditions required for integrating components into the front-end page will be different. Therefore, according to the type and version of the first front-end framework, the packaging information corresponding to the target component is determined, and the target component is packaged according to the packaging information. This can ensure that the front-end page under the first front-end framework can successfully integrate the target component without the need for relevant technical personnel to manually eliminate conflicts and differences between the pages, which can improve the integration efficiency of the front-end page.
[0010] In a possible implementation, the method also includes: when the first front-end framework is Angular, if the version of the first front-end framework is less than or equal to the first version, determining that the encapsulation information corresponding to the target component is to add shadowdom; encapsulating the target component by adding shadow dom; if the version of the first front-end framework is greater than the first version, determining that the encapsulation information corresponding to the target component is to add a dom identifier; encapsulating the target component by adding the dom identifier.
[0011] It is understandable that for different first front-end frameworks, different types of encapsulation of the target component are required during integration so that the first front-end framework can reuse the target component. After the target component is encapsulated, the first front-end framework can directly call the target component to avoid style conflicts with the target component.
[0012] In a possible implementation, the method also includes: when the first front-end framework is Vue, if the version information of the first front-end framework is less than or equal to the second version, determining that the encapsulation information corresponding to the target component is to add a data set dataset; encapsulating the target component by adding the data set dataset; if the version information of the first front-end framework is greater than the second version, or when the first front-end framework is React, determining that the encapsulation information corresponding to the target component is to create a CSS Moudle; encapsulating the target component by creating a CSS Moudle.
[0013] It is understandable that, according to the type and version information of the first front-end framework, using different encapsulation methods to encapsulate the target component can improve the accuracy of the target component encapsulation. After the target component is encapsulated, the first front-end framework can directly call the target component, avoiding the failure of the first front-end framework to call due to incorrect encapsulation of the target component.
[0014] In a possible implementation, intercepting the access request to the target component includes: creating a sandbox in an outer layer of the target component to intercept the access request to the target component.
[0015] It is understandable that since the frameworks used by the first front-end framework and the target component may be different, if the first front-end page can directly access the target component, style conflicts or variable conflicts will occur due to the different frameworks, causing the first front-end framework to not operate normally. Therefore, by creating a sandbox outside the target component, the target component can be run in an isolated environment, preventing the target component from being accessed and the first front-end page from being contaminated by the target component.
[0016] In a possible implementation, before determining the adaptation information corresponding to the first front-end framework, the method further includes creating an interceptor and determining the first front-end framework through the interceptor.
[0017] It is understandable that by creating an interceptor outside the sandbox of the target component, the access request information sent by the first front-end page that needs to access the sandbox can be intercepted. The first front-end page is identified by the interceptor, thereby determining the framework information used by the first front-end framework.
[0018] In a possible implementation, determining the first front-end framework through the interceptor includes obtaining identification information of the first front-end page through the interceptor and determining the first front-end framework according to the identification information of the first front-end page.
[0019] It can be understood that the identification information of the first front-end page can be obtained through the interceptor. Since there is a one-to-one correspondence between the identification information of the first front-end page and the first front-end frame, the first front-end frame can be determined based on the identification information of the first front-end page, which can improve the accuracy of identifying the first front-end frame and thereby improve the efficiency of front-end page integration.
[0020] In one possible implementation, the encapsulated target component is integrated into the first front-end page; the encapsulated target component supports access calls, including: loading the encapsulated target component through a dual queue; and mounting the loaded encapsulated target component to the first front-end page.
[0021] It is understood that after the target component is encapsulated according to the type and version of the first front-end framework, it can support access calls and can be mounted to the first front-end page through a dual queue. The dual queue can be synchronous or asynchronous, which can ensure stability during the process of mounting the target component to the first front-end page, avoid abnormal operation of the first front-end page, and thus improve the efficiency of front-end page integration.
[0022] In one possible implementation, the method further includes: updating the state of the encapsulated target component according to the state of the encapsulated target component being mounted on the first front-end page, and if the state of the encapsulated target component being mounted on the first front-end page is successful, uninstalling the encapsulated target component.
[0023] It is understandable that in the process of mounting the encapsulated target component to the first front-end page, the status of the target component can be updated. By uninstalling the successfully mounted target component, the operating space can be saved and the efficiency of the front-end page integration can be further improved.
[0024] In a possible implementation, the method further includes: mounting the encapsulated target component to the first front-end page through a hook function.
[0025] It is understandable that the encapsulated target component can be mounted to the first front-end page through the hook function, which can provide preset or customized access logic and improve the flexibility of the front-end page integration method.
[0026] In the second aspect, an integrated device for a front-end page is provided. An embodiment of the present application can divide the integrated device for the front-end page into functional modules according to the method provided in the first aspect above. For example, each functional module can be divided corresponding to each function, or two or more functions can be inherited in one processing module. Exemplarily, an embodiment of the present application can divide the integrated device for the front-end page into a processing module, an encapsulation module, and an integration module according to the function. The description of the possible technical solutions and beneficial effects executed by each of the functional modules divided above can refer to the technical solutions provided by the first aspect above or its corresponding possible implementation method, and will not be repeated here.
[0027] In a third aspect, an embodiment of the present application provides a computing device, comprising a processor and a memory for storing processor-executable instructions; the processor is configured to execute instructions so that the computing device performs the above-mentioned method of integrating the front-end page.
[0028] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which at least one computer program is stored. The computer program is loaded and executed by a processor to implement the fault detection method as described above.
[0029] In a fifth aspect, embodiments of the present application provide a computer program product or computer program, comprising computer instructions stored in a computer-readable storage medium. A processor of a computing node reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computing node to perform the front-end page integration method provided in various optional implementations of the above aspects.
[0030] For the specific description of the second to fifth aspects and their various implementations in the embodiments of the present application, reference can be made to the detailed description in the first aspect and its various implementations; and for the beneficial effects of the second to fifth aspects and their various implementations, reference can be made to the analysis of the beneficial effects in the various implementations of the first aspect, which will not be repeated here.
[0031] These and other aspects of the embodiments of the present application will be more clearly understood in the following description. BRIEF DESCRIPTION OF THE DRAWINGS
[0032] Figure 1 This is a schematic diagram of a front-end page integration scenario provided by an embodiment of the present application;
[0033] Figure 2 This is a schematic diagram of a development and operation platform provided by an embodiment of the present application;
[0034] Figure 3 This is a flow chart of a method for front-end page integration provided by an embodiment of the present application;
[0035] Figure 4 is based on Figure 3 The embodiment shown provides a first front-end page frame identification logic schematic diagram;
[0036] Figure 5 is based on Figure 3 The embodiment shown provides a logic diagram of a target component integration process;
[0037] Figure 6 This is a schematic diagram of a natural language to page conversion system provided by an embodiment of the present application;
[0038] Figure 7 This is a logical flow diagram of converting a natural language into a parsing command provided by an embodiment of the present application;
[0039] Figure 8 This is a schematic diagram of the structure of a front-end page integration device provided in an embodiment of the present application;
[0040] Figure 9 This is a hardware schematic diagram of a computing device provided in an embodiment of the present application;
[0041] Figure 10 This is a schematic diagram of a computing device cluster provided by an embodiment of the present application;
[0042] Figure 11 This is a schematic diagram of a computing device cluster connection provided in an embodiment of the present application. DETAILED DESCRIPTION
[0043] The terms "first", "second", "third" and "fourth" in the specification and claims of this application and the above-mentioned drawings are used to distinguish different objects rather than to limit a specific order.
[0044] In the embodiments of this application, words such as "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be interpreted as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.
[0045] First, the application scenarios of the embodiments of the present application are exemplarily introduced.
[0046] In front-end page development, the system application to be developed is usually split into multiple parts, and the development work of multiple parts is assigned to different developers; or, there are scenarios where other heterogeneous applications need to be directly reused or integrated. Because the technology stacks between system applications may be completely inconsistent, or there are JavaScript conflicts between front-end pages and style conflicts embedded in JavaScript packages, such as the existence of classes or variables with the same name, technical personnel need to manually eliminate conflicts between applications, resulting in low efficiency in heterogeneous application integration.
[0047] Figure 1 This is a schematic diagram of a front-end page integration scenario provided by an embodiment of the present application. Figure 1 As shown, the front-end page integration scenario includes a first front-end page 01 and a second front-end page 02 .
[0048] The first front-end page 01 includes components 1, 2, 3, 4, common components, node portals, and common resources. The second front-end page 02 includes components A, B, node portals, and common resources. The technical framework used by the first front-end page 01 is the first front-end framework, and the technical framework used by the second front-end page 02 is the second front-end framework.
[0049] Common resources are used to provide the same resources required by Component 1, Component 2, Component 3, and Component 4. This allows all components to access the same resources and avoids resource redundancy. Common components are commonly used in the system. The node entry point can be the first function called. Because code calls in the system are implemented based on function calls, and each function calls other functions, the first function called can be the node entry point.
[0050] In some development or maintenance scenarios, if the first front-end page 01 needs to use the function of component A, you can directly use component A in the second front-end page 02 without having to redevelop the front-end code corresponding to the function of component A in the first front-end page 01.
[0051] However, when the first front-end page 01 reuses component A in the second front-end page 02, since the front-end framework used by component A is different from the first front-end framework or there is a style conflict between component A and the first front-end page, relevant technicians are required to manually eliminate the frame conflict or style conflict between component A and the first front-end page, resulting in low efficiency of integrating component A into the first front-end page.
[0052] In view of this, an embodiment of the present application provides a method for front-end page integration, which can be applied to a computing device. If a target component is introduced in a first front-end page, the computing device can intercept the first page's access request to the target component. The first front-end page is a front-end page generated by a first front-end framework; the target component is a component generated by a second front-end framework. The computing device can encapsulate the target component according to the encapsulation information corresponding to the first front-end framework. The encapsulated target component is integrated with the first front-end page. The encapsulated target component supports being accessed and called by the first front-end page. Therefore, the computing device can determine the first front-end framework corresponding to the first front-end framework, and encapsulate the target component according to the first front-end framework. The encapsulated target component can support being accessed and called by the first front-end page, which can solve the problem of conflicts between front-end pages and the inability to reuse, thereby improving the efficiency of front-end page integration.
[0053] Next, the system architecture of the embodiment of the present application is exemplarily introduced.
[0054] The embodiments of the present application can be applied to a development and operation platform that supports development and operation front-end pages. The development and operation platform can be a Devops (development operations) platform, which can run on a computing device.
[0055] Among them, front-end page developers and operation and maintenance technicians can use this platform to jointly develop and maintain front-end pages, making the process of building, testing, and publishing front-end pages faster, more frequent, and more reliable.
[0056] The Devops platform carries subsystems such as demand management, business pipeline, continuous integration (CI), continuous delivery (CD), code management, and performance dashboards, and is connected and integrated with other external systems, such as operation and maintenance systems and operational systems. The current interactive mode of the Devops platform is mainly based on function navigation, which is used to guide relevant technical personnel to participate in and monitor the entire process of development and operation and maintenance. Therefore, the method provided in the embodiment of the present application can be applied to the Devops platform as a subsystem, and multiple pages or components can be reused in an adaptive manner to improve the efficiency of front-end page integration.
[0057] For example, Figure 2 This is a schematic diagram of a development and operation platform provided by an embodiment of the present application. Figure 2 As shown, the development and operation platform includes a front-end page integration system 210. The development and operation platform can run on a computing device 200, which can be a standard general-purpose server, a cloud server, or a virtual machine.
[0058] In one possible implementation, the development and operations platform can also include a code management system and a results display system. The code management system is used to store and manage the code for the front-end pages and target components, facilitating adjustments or use by relevant technical personnel. The results display system is used to display the results of the front-end page integration, facilitating adjustments by relevant technical personnel and further improving the efficiency of the front-end page integration.
[0059] The front-end page integration system 210 may include a first front-end page 01 and a target component 220. The technical framework adopted by the first front-end page 01 is the first front-end framework.
[0060] If the first front-end page 01 needs to use the function corresponding to the target component 220, the front-end page integration system 210 can obtain the target component 220 and intercept the target component 220's access request to the first front-end page 01. The front-end page integration system 210 can also determine the first front-end framework used by the first front-end page 01 and determine the packaging method based on the first front-end framework; the front-end page integration system 210 encapsulates the target component 220 according to the packaging method, and at this time, the target component 220 supports being accessed and called by the first front-end page; the integration of the first front-end page with the target component 220 is completed, and the first front-end page has the function corresponding to the target component 220.
[0061] In other words, the front-end page integration system 210 can intercept and identify the target component 220 through the interceptor, so that the target component 220 can automatically adapt to the first front-end page, allowing the first front-end page to reuse the functions of the target component 220. This not only saves the cost of redeveloping the functions corresponding to the target component in the first front-end page and improves the utilization rate of the target component, but also improves the efficiency of front-end page integration and enriches the functions of the DevOps platform.
[0062] It should be noted that the system architecture and application scenarios described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Ordinary technicians in this field can know that with the evolution of the system architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.
[0063] For ease of understanding, the following is an exemplary introduction to the front-end page integration method provided by this application in conjunction with the accompanying drawings. The front-end page integration method is applicable to Figure 2 The DevOps platform shown.
[0064] Figure 3 A schematic flow chart of a front-end page integration method provided in an embodiment of the present application is shown. The front-end page integration method can be applied to a computing device and includes the following steps:
[0065] S101, the computing device may intercept a first front-end page's access request to a target component.
[0066] When the first front-end page wants to introduce a foreign component, in order to ensure the environmental security and stable operation of the first front-end page, it is necessary to first block the first front-end page's access request to the foreign component.
[0067] In other words, ensure that the external component runs separately in a closed and isolated state to avoid affecting the operation of the first front-end page and polluting the first front-end page.
[0068] In a possible implementation, an interceptor is created in the outer layer of the target component, and the interceptor is used to intercept the access request of the first front-end page to the target component.
[0069] For example, the computing device may create an interceptor by using javascript.
[0070] JavaScript is a high-level programming language. In JavaScript, an interceptor is equivalent to an interception mechanism executed before a function call, which can be used to verify the framework type of the first front-end page accessing the target component.
[0071] S102: The computing device may determine a first front-end frame corresponding to the first front-end page.
[0072] The first front-end framework is a page generated using the first front-end framework. For example, the first front-end page can be a page generated using the Angular, Vue, or React framework.
[0073] In a possible implementation, the first front-end frame corresponding to the first front-end page is determined through an interceptor.
[0074] For example, the computing device may obtain identification information of the first front-end page through an interceptor and determine the first front-end framework based on the identification information. The identification information may be identity information of different front-end frameworks, indicating the front-end frameworks used by different front-end pages, and there is a one-to-one correspondence between the identification information of the first front-end page and the first front-end framework.
[0075] For example, the computing device obtains identification information of the first front-end page as a through the interceptor, and can determine that the first front-end framework corresponding to the first front-end page is angular based on the corresponding information between the identification information and the framework.
[0076] In a possible implementation, a specific flag in the first front-end frame is obtained through an interceptor to determine the first front-end frame corresponding to the first front-end page.
[0077] The specific flag can be a definition method or grammatical rule that is unique to each front-end framework. Therefore, the specific flag can be regarded as the identity information of different types of front-end frameworks.
[0078] Exemplarily, different front-end frameworks may have specific flags of the front-end frameworks. The first front-end framework corresponding to the first front-end page is determined according to the specific flag in the first front-end framework.
[0079] For example, in the framework Angular, there is a specific identifier A1; in the framework Vue, there is a specific identifier A2; and in the framework React, there is a specific identifier A3. If the interceptor obtains the first front-end page containing the specific identifier A1, it can be determined that the first front-end framework corresponding to the first front-end page is Angular.
[0080] In a possible implementation manner, a development technician may manually determine the first front-end frame corresponding to the first front-end page.
[0081] For example, when the computing device intercepts the first front-end page's access request to the target component through an interceptor, the technician who developed the first front-end page can manually upload the first front-end framework corresponding to the first front-end page to further determine the first front-end framework corresponding to the first front-end page.
[0082] Since, by identifying the frame of the first front-end page, the first front-end frame corresponding to the first front-end page can be determined, the target component can be integrated more accurately so that the target component can be adapted to the first front-end page.
[0083] For example, Figure 4 This is a first front-end page frame identification logic diagram involved in the embodiment of this application. Figure 4 As shown, when the first front-end page introduces the target component, the computing device can create an interceptor in the outer layer of the target component (S201). When the interceptor intercepts the first front-end page's access request to the target component, the computing device can obtain the identification information of the first front-end page through the interceptor (S202). Based on the identification information, the computing device can determine the first front-end framework corresponding to the first front-end page (S203). For example, the first front-end framework can be Angular, Vue, or React. After determining the first front-end framework, the process continues (S204).
[0084] S103: The computing device encapsulates the target component according to the encapsulation method corresponding to the first front-end framework.
[0085] Since there is a storage framework conflict or style conflict between the target component and the first front-end page, the target component needs to be encapsulated so that the encapsulated target component can be accessed and called by the first front-end page.
[0086] Storage framework conflicts can occur when different storage frameworks are used within the same application or system. A storage framework is a software architecture used to manage data, providing data storage and access interfaces. Style conflicts occur when multiple style rules are applied to the same element within the same application or system, resulting in inconsistent styles and conflicts.
[0087] In one possible implementation, the packaging method of the target component is determined according to the type and version of the first front-end framework.
[0088] The packaging method is used to indicate that the target component can be packaged according to the method included in the packaging method.
[0089] For example, if the type and version of the first front-end framework corresponding to the first front-end page are different, different packaging information is also used when packaging the target component.
[0090] In one possible implementation, when the first front-end framework is Angular, if the version of the first front-end framework is less than or equal to the first version, the encapsulation information of the target component can be determined to be adding a shadow DOM. According to the encapsulation information, the target component is encapsulated by adding a shadow DOM.
[0091] Among them, shadow dom can provide encapsulation for components in the system, and keep it isolated from the dom of the component's original document. It does not exist on the main dom tree. The components encapsulated by shadow dom are independent. External configuration will not affect the internal of the component, and internal configuration will not affect the external.
[0092] For example, when the first front-end framework is Angular, if the version of the first front-end framework is less than or equal to the first version, the target component can be encapsulated by adding shadow DOM and the target component can be style-isolated to completely isolate the target component.
[0093] For example, if the primary front-end architecture is shadowJs and the AngularJS version is less than or equal to 1.0.0, encapsulating the target component with a shadow DOM can generate a shadow DOM through the web interface server. This encapsulation allows the target component to have a shadow DOM tree, which prevents arbitrary access to the target component, ensuring that the target component's internal and external components are not contaminated. This achieves style isolation. The target component can be added to the generated shadow DOM using the appendChild method.
[0094] In one possible implementation, when the first front-end framework is Angular, if the version of the first front-end framework is greater than the first version, the encapsulation information of the target component may be determined to be adding a DOM identifier. According to the encapsulation method, the target component is encapsulated by adding the DOM identifier.
[0095] DOM stands for Document Object Model, an interface for manipulating HTML documents. It translates the code in a document into an object model. DOM defines standard methods for accessing and manipulating documents within a component, and presents the document as a tree structure with elements, attributes, and text.
[0096] For example, when the first front-end framework is Angular, if the version of the first front-end framework is greater than the first version, the target component can be encapsulated by adding a DOM tag.
[0097] For example, when the first front-end architecture is angular>1.0.0, adding a dom identifier encapsulation to the target component can convert the target component into a dom node for style isolation, thereby embedding the dom node of the target component into the dom node under the first front-end framework.
[0098] In one possible implementation, when the first front-end framework is Vue, if the version of the first front-end framework is less than or equal to the second version, the target component may be packaged in a manner that adds a dataset. The target component is packaged by adding the dataset according to the packaging manner.
[0099] The dataset is a DOM custom attribute data-set, which can encapsulate the target component into an independent space.
[0100] For example, when the first front-end framework is Vue, if the version of the first front-end framework is less than or equal to the second version, the target component can be encapsulated by customizing the data-set through DOM and adding the data set data-set, so that the target component has a unique identifier, thereby creating an independent space for the target component.
[0101] For example, when the first front-end framework is vue<=3.0.0, add the dataset dataset to the target component to encapsulate it and isolate the target component.
[0102] In one possible implementation, if the version of the first front-end framework is greater than the second version, or if the first front-end framework is React, it can be determined that the encapsulation information of the target component is to create a CSS Module. The target component is encapsulated by creating a CSS Module based on the encapsulation information.
[0103] CSS Moudle is a process in the build step that can change the scope of class names or selectors. In other words, it can generate unique selectors to achieve the effect of scope isolation.
[0104] For example, if the version of the first front-end framework is greater than the second version, or if the first front-end framework is react, the target group can be encapsulated by creating a CSS Moudle, the target component can be isolated from the first front-end page, and an independent style space can be created for the target component.
[0105] For example, when the first front-end framework is vue>3.0.0 or the first front-end framework is react, the computing device can create a CSS Moudle for the target component to achieve the effect of isolating the target component and create an independent style space for the target component.
[0106] In a possible implementation, the version of the first front-end framework is determined by an interceptor, and the packaging method of the target component is determined.
[0107] Exemplarily, the interceptor may obtain identification information of the first front-end page and determine the version of the first front-end framework based on the identification information, wherein the identification information includes the version of the first front-end framework. Based on the version of the first front-end framework, the packaging method of the target component is determined.
[0108] From this, it can be seen that by determining the type and version of the first front-end framework corresponding to the first front-end page, the target component is encapsulated so that the target component supports being accessed and called by the first front-end page. Further, the target component can be encapsulated through the correspondence between the encapsulation method and the type and version of the first front-end framework, so that the target component can automatically adapt to the first front-end page, resolve the frame conflicts and style conflicts between the front-end pages, and improve the integration efficiency of the front-end pages.
[0109] S104: The computing device integrates the packaged target component into the first front-end page.
[0110] The encapsulated target component supports being accessed and called by the first front-end page. The first front-end page can use the functions of the target component.
[0111] In one possible implementation method, when the loaded encapsulated target component is integrated into the first front-end page through dual queue control, the encapsulated target component can be mounted to the first front-end page to complete the integration of the encapsulated target component and the first front-end page.
[0112] Exemplarily, the encapsulated target component is mounted on the first front-end page, and the integration of the encapsulated target component is completed through the control of the asynchronous queue and the synchronous queue.
[0113] for example, Figure 5 This is a target component integration process logic diagram provided by an embodiment of the present application, such as Figure 5As shown, the loaded encapsulated target component can be placed in an execution queue for executing the loaded encapsulated target component (S301), and the loaded encapsulated target component is mounted to the first front-end page (S305). If there is an encapsulated component that fails to load or has problems at this time, it can be placed in an asynchronous queue. After adjustment or modification by the technician, the loading of the encapsulated target component can continue to be controlled by the asynchronous queue (S302). The encapsulated target component that can be loaded successfully or does not need to be adjusted or modified during the loading process is placed in a synchronous queue, and the loading of the encapsulated target component is controlled by the synchronous queue (S303). In the process of controlling the loading of the encapsulated target component by the synchronous queue, the status of the encapsulated target component is monitored (S306), and the status of the encapsulated target component is updated after the encapsulated target component completes loading (S304). If the status of the encapsulated target component is monitored and it is found that the encapsulated target component has been mounted, the integrated encapsulated target component is uninstalled (S307).
[0114] From this, we can see that mounting the encapsulated target component to the first front-end page through asynchronous and synchronous queue control can not only solve the target component mounting in complex scenarios and complete the entire integration event cycle, but also improve the stability of the process of integrating the encapsulated target component into the first front-end page.
[0115] In a possible implementation, the encapsulated target component is mounted on the first front-end page, and the integration of the encapsulated target component is achieved through a hook function.
[0116] Exemplarily, the hook function is triggered during the process of mounting the encapsulated target component to the first front-end page, during the process of updating the status of the encapsulated target component, and during the process of uninstalling the integrated encapsulated target component.
[0117] That is to say, in the process of mounting the encapsulated target component to the first front-end page, hook functions are supported, which can provide technicians with preset interfaces and custom interfaces, making the encapsulated target component more flexible when mounted to the first front-end page, thereby improving the efficiency of front-end page integration.
[0118] Based on the above front-end page integration method, natural language conversion to pages can be achieved. Natural language commands can be triggered on the DevOps platform and mapped to pages, enabling end-to-end page interaction and simplifying page access in heterogeneous systems.
[0119] In one possible implementation, a language model (bidirectional encoder representation from transformer, BERT) is used to recognize and parse natural language, so that a computing device can obtain a parsed command and, based on the parsed command, obtain a target page. The parsed command can be mapped to the page.
[0120] The language model BERT achieves its understanding and expression of natural language through two stages: pre-training and fine-tuning. That is, after training on a large amount of text data, the BERT model can generate a vector for natural language words or Chinese characters, giving natural language a certain level of semantic representation.
[0121] For example, Figure 6 This is a schematic diagram of a natural language to page conversion system provided by an embodiment of the present application. Figure 6 As shown, the natural language to page conversion system includes a natural language input module 501, a question-answering engine 502, a page library 503 and a basic database 504.
[0122] Among them, the natural language input module 501 is used to receive natural language commands. The question and answer engine 502 is used to convert natural language into parsed commands, so that the natural language to page system can obtain the target page according to the parsed command. The page library 503 is used to store pages that have been integrated into the system and provide target pages. For example, it can include demand pages, operation and maintenance pages, pipeline pages, management pages, and knowledge pages. The basic database 504 can include artificial intelligence models and databases for artificial intelligence models to support the question and answer engine 502.
[0123] In one possible implementation, the natural language to page system also includes question and answer routing, which can display natural language question and answer results in different ways to users.
[0124] For example, in the process of converting natural language into parsing commands, work items can be created based on question and answer terms without being restricted to the question and answer domain.
[0125] Figure 7 A logical flow diagram of converting a natural language into a parsing command provided by an embodiment of the present application is shown. Figure 7 As shown, a natural language entry is obtained (S401), parts of speech are extracted from the natural language entry (S402), keyword matching is performed based on the parts of speech extraction (S403), and the keywords and parts of speech are analyzed using the BERT model to determine the parsing command (S404). Based on the parsing command, the target page is determined.
[0126] As can be seen, by using the BERT model to extract and parse natural language, obtain parsed commands, and then determine the target page based on the subsequent commands, natural language to page conversion can be achieved. This can simplify the interface access of heterogeneous systems, enrich the functionality of the DevOps platform, and improve the efficiency of the development workflow.
[0127] In summary, an embodiment of the present application provides a method for front-end page integration, which can be applied to computing devices. If the first front-end page introduces a target component, the first front-end page's access request to the target component is intercepted by an interceptor. The first front-end page is identified by the interceptor, and the first front-end frame corresponding to the first front-end page is determined. Among them, the first front-end page is a page generated by the first front-end frame. According to the first front-end frame, the target component is encapsulated so that the encapsulated target component can support access and call by the first front-end frame. The encapsulated target component is integrated into the first front-end page to complete the integration of the target component. It can effectively solve the problems of frame conflicts and style conflicts between front pages and pages. The target component can adapt to the first front-end page without the need for technical personnel to manually eliminate conflicts, thereby improving the efficiency of front-end page integration.
[0128] The above mainly introduces the scheme of the embodiment of the present application from the perspective of the method. It can be understood that, in order to realize the above functions, the front-end page integration device includes at least one of the hardware structure and software modules corresponding to the execution of each function. Those skilled in the art should easily realize that, in combination with the units and algorithm steps of each example described in the embodiments disclosed herein, the embodiments of the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the embodiments of the present application.
[0129] The embodiment of the present application can divide the functional units of the fault detection device according to the above method example. For example, each functional unit can be divided according to each function, or two or more functions can be integrated into one processing unit. The above integrated unit can be implemented in the form of hardware or in the form of software functional units. It should be noted that the division of units in the embodiment of the present application is schematic and is only a logical functional division. In actual implementation, there may be other division methods.
[0130] For example, Figure 8 This is a schematic diagram of the structure of a front-end page integration device provided in an embodiment of the present application. Figure 8As shown, the front-end page integration device can be applied to a computing device, and the front-end page integration device 800 includes:
[0131] Processing module 801 is used to intercept access requests to the target component if the target component is introduced in the first front-end page; the first front-end page is a front-end page generated by the first front-end framework; the target component is a component in the front-end page generated by the second front-end framework; and determine the first front-end framework corresponding to the first front-end page.
[0132] The packaging module 802 is used to package the target component according to the packaging information method corresponding to the first front-end framework.
[0133] The integration module 803 is used to integrate the encapsulated target component into the first front-end page; the encapsulated target component supports being accessed and called.
[0134] In a possible implementation, the processing module 401 is further configured to intercept access requests to the target component by creating a sandbox in an outer layer of the target component.
[0135] In a possible implementation, the processing module 401 is further configured to create an interceptor; and determine the first front-end framework through the interceptor.
[0136] In a possible implementation, the processing module 401 is further configured to obtain identification information of the first front-end page through an interceptor; and determine the first front-end framework according to the identification information of the first front-end page.
[0137] In one possible implementation, the processing module 401 is also used to update the status of the encapsulated target component according to the status of the encapsulated target component being mounted on the first front-end page; if the status of the encapsulated target component being mounted on the first front-end page is successful, the encapsulated target component is uninstalled.
[0138] In a possible implementation, the packaging module 402 is further configured to determine packaging information corresponding to the target component according to the type and version of the first front-end framework; and package the target component according to the packaging information.
[0139] In a possible implementation, the encapsulation module 402 is further configured to, when the first front-end framework is Angular, determine that the encapsulation information corresponding to the target component is to add a shadow DOM if the version of the first front-end framework is less than or equal to the first version;
[0140] The target component is encapsulated by adding a shadow dom; if the version of the first front-end framework is greater than the first version, the encapsulation information corresponding to the target component is determined to be adding a dom identifier; the target component is encapsulated by adding the dom identifier.
[0141] In one possible implementation, the encapsulation module 402 is further used to, when the first front-end framework is Vue, if the version information of the first front-end framework is less than or equal to the second version, determine that the encapsulation information corresponding to the target component is to add the dataset dataset; encapsulate the target component by adding the dataset dataset; if the version information of the first front-end framework is greater than the second version, or when the first front-end framework is React, determine that the encapsulation information corresponding to the target component is to create a CSS Moudle; encapsulate the target component by creating a CSS Moudle.
[0142] In a possible implementation, the integration module 403 is further configured to load the encapsulated target component in a dual-queue manner; and mount the loaded encapsulated target component to the first front-end page.
[0143] In a possible implementation, the integration module 403 is further configured to mount the encapsulated target component to the main first front-end page through a hook function.
[0144] Figure 9 This is a hardware diagram of a computing device provided in an embodiment of the present application. Figure 9 As shown, computing device 200 includes a bus 901, a processor 902, a memory 903, and a communication interface 904. Processor 902, memory 903, and communication interface 904 communicate with each other via bus 901. Computing device 200 can be a server or a terminal device. It should be understood that this application does not limit the number of processors and memories in computing device 200.
[0145] The bus 901 may be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 9 The bus 901 may include a path for transmitting information between various components of the computing device 200 (eg, the processor 902, the memory 903, and the communication interface 904).
[0146] The processor 902 may include any one or more processors such as a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).
[0147] The memory 903 may include a volatile memory, such as a random access memory (RAM). The processor 902 may also include a non-volatile memory, such as a read-only memory (ROM), a flash memory, a hard disk drive (HDD), or a solid state drive (SSD).
[0148] The memory 903 stores executable program code, and the processor 902 executes the executable program code to respectively implement the functions of the processing module, the encapsulation module, and the integration module, thereby implementing the method for front-end page integration. In other words, the memory 903 stores instructions for executing the method for front-end page integration.
[0149] Alternatively, the memory 903 stores executable codes, and the processor 902 executes the executable codes to respectively implement the functions of the aforementioned front-end page integration device, thereby implementing the front-end page integration method. That is, the memory 903 stores instructions for executing the front-end page integration method.
[0150] The communication interface 904 uses a transceiver module such as, but not limited to, a network interface card or a transceiver to implement communication between the computing device 200 and other devices or a communication network.
[0151] As an example, combined with Figure 9 , part or all of the functions of the processing module 801, the packaging module 802 and the integration module 803 of the fault detection device 800 can be Figure 9 The computing device implementation in .
[0152] Embodiments of the present application also provide a computing device cluster. The computing device cluster includes at least one computing device. The computing device can be a server, such as a central server, an edge server, or a local server in a local data center. In some embodiments, the computing device can also be a terminal device such as a desktop computer, a laptop computer, or a smartphone.
[0153] Figure 10 This is a schematic diagram of a computing device cluster provided by an embodiment of the present application. Figure 10 As shown, the computing device cluster includes at least one computing device 200. The memory 903 in one or more computing devices 200 in the computing device cluster may store the same instructions for executing the front-end page integration method.
[0154] In some possible implementations, the memory 903 of one or more computing devices 200 in the computing device cluster may also store partial instructions for executing the method for front-end page integration. In other words, the combination of one or more computing devices 200 can jointly execute the instructions for executing the method for front-end page integration.
[0155] It should be noted that the memory 903 in different computing devices 200 in the computing device cluster can store different instructions, each for executing part of the functions of the front-end page integration device. In other words, the instructions stored in the memory 903 in different computing devices 200 can implement the functions of one or more modules among the processing module, the packaging module, and the integration module.
[0156] In some possible implementations, one or more computing devices in a computing device cluster may be connected via a network, which may be a wide area network or a local area network. Figure 11 A possible implementation is shown. Figure 11 As shown, two computing devices 200A and 200B are connected via a network. Specifically, the connection to the network is achieved through a communication interface in each computing device. In this possible implementation, the memory 903 in computing device 200A stores instructions for executing the functions of the processing module. Simultaneously, the memory 903 in computing device 200B stores instructions for executing the functions of the encapsulation module and the integration module.
[0157] Figure 11 The connection method between the computing device clusters shown can be based on the needs of the front-end page integration method provided in this application (such as storing a large amount of data), so it is considered to encapsulate the functions implemented by the encapsulation module and the integration module and execute them on the computing device 200B.
[0158] It should be understood that Figure 11 The functionality of the computing device 200A shown in FIG. 2 may also be implemented by multiple computing devices 200. Similarly, the functionality of the computing device 200B may also be implemented by multiple computing devices 200.
[0159] The present application embodiment also provides another computing device cluster. The connection relationship between the computing devices in the computing device cluster can be similarly referred to as Figure 10 and Figure 11 The difference is that the memory 903 of one or more computing devices 200 in the computing device cluster may store the same instructions for executing the front-end page integration method.
[0160] In some possible implementations, the memory 903 of one or more computing devices 200 in the computing device cluster may also store partial instructions for executing the method for front-end page integration. In other words, the combination of one or more computing devices 200 can jointly execute the instructions for executing the method for front-end page integration.
[0161] It should be noted that the memory 903 in different computing devices 200 in the computing device cluster can store different instructions for executing part of the functions of the front-end page integration system. In other words, the instructions stored in the memory 903 in different computing devices 200 can implement the functions of the front-end page integration device.
[0162] The present application also provides a computer-readable storage medium, which stores instructions that, when executed on a computer, cause the computer to execute Figure 1-Figure 7 The operations of any corresponding embodiment and its various feasible implementation methods.
[0163] The present application also provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute Figure 1-Figure 7 The operations of any corresponding embodiment and its various feasible implementation methods.
[0164] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.
[0165] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0166] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions, and when the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from one network site, computer, server or data center to another network site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access, or it can be a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape, etc.), an optical medium (e.g., a DVD, etc.), or a semiconductor medium (e.g., a solid-state hard disk), etc.
[0167] In the above embodiments, the description of each embodiment has different emphases. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0168] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.
Claims
1. A method for front-end page integration, characterized in that: include: If the target component is introduced into the first front-end page, intercepting the access request to the target component; The first front-end page is a front-end page generated by a first front-end framework; the target component is a component in a front-end page generated by a second front-end framework; Determining the first front-end framework corresponding to the first front-end page; Encapsulating the target component according to the encapsulation method corresponding to the first front-end framework; Integrating the encapsulated target component into the first front-end page; The encapsulated target component supports being accessed and called.
2. The method according to claim 1, characterized in that The step of encapsulating the target component according to the encapsulation information corresponding to the first front-end framework includes: Determining the packaging information corresponding to the target component according to the type and version of the first front-end framework; The target component is packaged according to the packaging information.
3. The method according to claim 2, characterized in that The method further comprises: In the case where the first front-end framework is Angular, if the version of the first front-end framework is less than or equal to the first version, determining that the encapsulation information corresponding to the target component is to add a shadow dom; Encapsulate the target component by adding shadow dom; If the version of the first front-end framework is greater than the first version, determining that the packaging information corresponding to the target component is to add a dom identifier; The target component is encapsulated by adding a DOM identifier.
4. The method according to claim 2 or 3, characterized in that The method further comprises: In the case where the first front-end framework is Vue, if the version information of the first front-end framework is less than or equal to the second version, determining that the package information corresponding to the target component is adding a dataset dataset; Encapsulate the target component by adding the dataset dataset; If the version information of the first front-end framework is greater than the second version, or in the case where the first front-end framework is React, determining that the encapsulation information corresponding to the target component is to create a CSS Moudle; The target component is encapsulated by creating a CSS Moudle.
5. The method according to claim 1, wherein The intercepting of the access request to the target component includes: By creating a sandbox in the outer layer of the target component, access requests to the target component are intercepted.
6. The method according to any one of claims 1 to 5, characterized in that Before determining the first front-end frame corresponding to the first front-end page, the method further includes: Create interceptor; The first front-end framework is determined through the interceptor.
7. The method according to claim 6, characterized in that Determining the first front-end framework through the interceptor includes: Obtaining identification information of the first front-end page through the interceptor; The first front-end framework is determined according to the identification information of the first front-end page.
8. The method according to claim 1, characterized in that integrating the encapsulated target component into the first front-end page; The encapsulated target component supports being accessed and called, including: Loading the encapsulated target component through a double queue method; The loaded packaged target component is mounted on the first front-end page.
9. The method according to claim 8, characterized in that The method further comprises: Update the state of the encapsulated target component according to the state of the encapsulated target component mounted on the first front-end page; If the state of the encapsulated target component being mounted on the first front-end page is successful, the encapsulated target component is uninstalled.
10. The method according to claim 8 or 9, characterized in that The method further comprises: The encapsulated target component is mounted to the main first front-end page through a hook function.
11. A front-end page integration device, characterized in that: The device comprises: a processing module configured to intercept access requests to a target component if the target component is introduced into a first front-end page; the first front-end page is a front-end page generated by a first front-end framework; the target component is a component in a front-end page generated by a second front-end framework; and determine the first front-end framework corresponding to the first front-end page; A packaging module, configured to package the target component according to a packaging information method corresponding to the first front-end framework; The integration module is used to integrate the encapsulated target component into the first front-end page; the encapsulated target component supports being accessed and called.
12. The device according to claim 11, characterized in that The packaging module is further configured to determine the packaging information corresponding to the target component according to the type and version of the first front-end framework; and to package the target component according to the packaging information.
13. The device according to claim 12, characterized in that The encapsulation module is further configured to, when the first front-end framework is Angular, determine that the encapsulation information corresponding to the target component is to add a shadow dom if the version of the first front-end framework is less than or equal to the first version; Encapsulate the target component by adding shadow dom; If the version of the first front-end framework is greater than the first version, determine that the packaging information corresponding to the target component is to add a DOM identifier; and encapsulate the target component by adding the DOM identifier.
14. The device according to any one of claims 11 to 13, characterized in that The encapsulation module is further configured to, when the first front-end framework is Vue, determine that the encapsulation information corresponding to the target component is an added dataset dataset if the version information of the first front-end framework is less than or equal to the second version; and encapsulate the target component by using the added dataset dataset; If the version information of the first front-end framework is greater than the second version, or when the first front-end framework is react, determine that the encapsulation information corresponding to the target component is to create a CSS Moudle; and encapsulate the target component by creating a CSS Moudle.
15. The device according to claim 11, characterized in that The processing module is further configured to intercept access requests to the target component by creating a sandbox in an outer layer of the target component.
16. The device according to claim 15, characterized in that The processing module is further used to create an interceptor; and determine the first front-end framework through the interceptor.
17. The device according to claim 11, characterized in that The processing module is further configured to obtain identification information of the first front-end page through the interceptor; and determine the first front-end framework according to the identification information of the first front-end page.
18. The device according to claim 11, characterized in that The integration module is further configured to load the encapsulated target component in a dual-queue manner; and mount the loaded encapsulated target component to the first front-end page.
19. The device according to any one of claims 15 to 17, characterized in that: The processing module is also used to update the status of the encapsulated target component according to the status of the encapsulated target component being mounted on the first front-end page; if the status of the encapsulated target component being mounted on the first front-end page is successful, uninstall the encapsulated target component.
20. The device according to claim 11, characterized in that The integration module is further used to mount the encapsulated target component to the main first front-end page through a hook function.
21. A computing device, characterized in that The computing device includes: a processor and a memory for storing instructions executable by the processor; The processor is configured to execute the instructions so that the computing device performs the method for front-end page integration according to any one of claims 1 to 10.
22. A computer program product, characterized in that The computer program product includes instructions, and when the instructions are executed by a computing device, the computing device executes the method for front-end page integration according to any one of claims 1 to 10.
23. A computer-readable storage medium, characterized in that The computer-readable storage medium includes computer program instructions. When the computer program instructions are executed by a computing device, the computing device executes the method for front-end page integration as described in any one of claims 1 to 10.