A project referencing method and system

Abstract

The application discloses a project reference method and system, and relates to the technical field of computers.The method comprises the following steps: taking a root component of a target project to be referenced as a root node DOM element, and determining a display position of the target project; embedding the target project in a current project according to the display position; obtaining a storage position of single sign-on information of the current project, and storing the single sign-on information in a local storage; when the target project calls a server-side interface, obtaining the single sign-on information according to the storage position in the local storage, and bringing the single sign-on information into the server-side interface; and the server-side interface performs single sign-on according to the single sign-on information.The scheme adopts an iframe reference mode, embeds the target project into other projects through a Dom element embedding mode, avoids the problem of slow iframe loading, in addition, dynamically loads projects, optimizes the performance of opening other projects for the first time, and solves the problems of display styles and communication between two projects after embedding.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method and system for referencing projects. Background Technology

[0002] Currently, when multiple projects reference the same project, they often use the iframe method for inclusion. However, using iframes can lead to various problems, such as iframe creation being one to two orders of magnitude slower than DOM elements, which can block page loading. Summary of the Invention

[0003] The present invention aims to solve the problem of slow iframe loading. In order to solve the above-mentioned technical problem, the present invention provides a project referencing method and system.

[0004] The first aspect provides a method for referencing projects, including:

[0005] Use the root component of the target project to be referenced as the root node DOM element to determine the display position of the target project;

[0006] Embed the target project in the current project according to the display position;

[0007] Obtain the storage location of the single sign-on information for the current project and store it in local storage;

[0008] When the target project calls the server-side interface, the single sign-on information is obtained according to the storage location in the local storage and brought into the server-side interface;

[0009] The server-side interface performs single sign-on based on the single sign-on information.

[0010] In one possible implementation of the first aspect, before determining the display position of the target project, using the root component of the target project to be referenced as the root node DOM element, the following is also included:

[0011] Dynamically create the script element of the target project;

[0012] Load the js file of the target project.

[0013] In one possible implementation of the first aspect, the root component of the target project to be referenced is used as the root node DOM element, specifically including:

[0014] When the current project referencing the target project has a fixed position for displaying the target project, the ID of the DOM element is passed to the current project, and the target project is embedded into the DOM element according to the ID of the DOM element of the current project;

[0015] When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

[0016] One possible implementation of the first aspect also includes:

[0017] Get the root DOM element of the target project;

[0018] Add attachShadow to the root DOM element to obtain the Shadow element;

[0019] Get the child DOM elements of the root DOM element;

[0020] Add the child DOM element to the Shadow element;

[0021] When the target project is packaged, the style part of the target project is packaged separately to generate the effect.css package;

[0022] Create a link element and set the href of the link element to the effect.css package;

[0023] Set the ref attribute of the link element to stylesheet;

[0024] Add the configured link element to the Shadow element.

[0025] One possible implementation of the first aspect also includes:

[0026] When the target item is closed, the target item is hidden using the CSS display property.

[0027] Secondly, a project referencing system is provided, including:

[0028] The first processing unit is used to determine the display position of the target project by taking the root component of the target project to be referenced as the root node DOM element.

[0029] The referencing unit is used to embed the target project in the current project according to the display position;

[0030] The second processing unit is used to obtain the storage location of the single sign-on information of the current project and store it in the local memory;

[0031] The calling unit is used to retrieve the single sign-on information from the storage location in the local storage and bring it into the server-side interface when the target project calls the server-side interface.

[0032] The login unit is used by the server-side interface to perform single sign-on based on the single sign-on information.

[0033] One possible implementation of the second aspect also includes:

[0034] The loading unit is used to dynamically create script elements of the target project and load the js files of the target project.

[0035] In one possible implementation of the second aspect, the first processing unit is specifically used to pass the ID of a DOM element to the current project when the current project referencing the target project has a fixed position for displaying the target project, and the target project is embedded into the DOM element according to the ID of the DOM element of the current project;

[0036] When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

[0037] One possible implementation of the second aspect also includes:

[0038] The adjustment unit is used to obtain the root DOM element of the target project; add attachShadow to the root DOM element to obtain the Shadow element; obtain the child DOM elements of the root DOM element; add the child DOM elements to the Shadow element; when the target project is packaged, package the style part of the target project separately to generate the effect.css package; create a link element, point the href of the link element to the effect.css package; set the ref attribute of the link element to stylesheet; and add the set link element to the Shadow element.

[0039] One possible implementation of the second aspect also includes:

[0040] A hidden unit, used to hide the target item using the CSS display property when the target item is closed.

[0041] This solution avoids the iframe reference method and embeds the target project into other projects through DOM element embedding, thus avoiding the slow iframe loading problem. In addition, by dynamically loading the project, the performance of opening other projects for the first time is optimized, and problems such as display style and communication between the two projects after embedding are resolved.

[0042] The advantages of additional aspects of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0043] Figure 1 This is a flowchart illustrating an embodiment of the method referenced in this invention. Detailed Implementation

[0044] The principles and features of the present invention are described below with reference to the accompanying drawings. The embodiments described are only for explaining the present invention and are not intended to limit the scope of the present invention.

[0045] like Figure 1 The diagram shown illustrates a flowchart of an embodiment of the method for referencing this invention. The method includes:

[0046] S1, use the root component of the target project to be referenced as the root node DOM element to determine the display position of the target project;

[0047] It should be understood that the target project can be a Vue project, and the root component can be used directly as the root node DOM element.

[0048] The DOM is a tree-based API document. The target project can pre-prepare DOM elements with a root node and provide a global method. The current project calls the target project's method and tells the target project where to load it.

[0049] S2, embed the target project in the current project according to the display position;

[0050] S3, retrieve the storage location of the single sign-on information for the current project and store it in local storage;

[0051] It should be noted that this solution can be applied to situations where multiple projects introduce the same project. For different projects, even different product lines of the same company, the login will use the company's single sign-on.

[0052] For example, local storage can be localStorage, which is a local storage API added in HTML5. localStorage can be manipulated using JavaScript.

[0053] S4, When the target project calls the server-side interface, the single sign-on information is obtained from the storage location in the local storage and brought into the server-side interface;

[0054] Specifically, when the current project calls the target project, it can send the storage location of the single sign-on information to the target project. After the target project obtains the storage location of the single sign-on information of the current project, it can store it in localStorage.

[0055] When the target project calls the server-side interface, it can retrieve the single sign-on information based on the storage location of the single sign-on information in localStorage, and pass it to the interface. The server-side interface can then perform single sign-on based on the login information and obtain the user's corresponding resources.

[0056] S5, the server-side interface performs single sign-on based on single sign-on information.

[0057] It should be noted that "project" can refer to pages, resources, plugins, etc.

[0058] This embodiment abandons the iframe reference method and embeds the target project into other projects through DOM element embedding, avoiding the problem of slow iframe loading. In addition, by dynamically loading the project, the performance of opening other projects for the first time is optimized, and problems such as display style and communication between the two projects after embedding are solved.

[0059] Optionally, in some possible implementations, before determining the display position of the target project, the root component of the target project to be referenced is taken as the root node DOM element, and the following steps are also included:

[0060] Dynamically create script elements for the target project;

[0061] Load the target project's JS file.

[0062] It should be noted that a .js file refers to a text document containing JavaScript code with the ".js" extension. By dynamically including it in the target project, the loading performance of the current project can be guaranteed.

[0063] Optionally, in some possible implementations, the root component of the target project to be referenced is used as the root node DOM element, specifically including:

[0064] When the current project that references the target project has a fixed position for displaying the target project, the ID of the DOM element is passed to the current project, and the target project is embedded into the DOM element according to the ID of the DOM element in the current project;

[0065] When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

[0066] Optionally, in some possible implementations, it also includes:

[0067] Get the root DOM element of the target project;

[0068] Add attachShadow to the root DOM element to get the Shadow element;

[0069] Get the child DOM elements of the root DOM element (rootDOM);

[0070] Add the child DOM element to the Shadow element; this involves moving the DOM element.

[0071] When the target project is packaged, the style part of the target project is packaged separately to generate the effect.css package;

[0072] Create a link element and set the href of the link element to the effect.css package;

[0073] Set the ref attribute of the link element to stylesheet;

[0074] Add the configured link element to the Shadow element.

[0075] It should be understood that it is necessary to ensure that the child DOM elements of the root DOM are unique.

[0076] It should be noted that after embedding the target project into the current project, the style of the current project will affect the target project. Therefore, this problem can be handled according to the principle of attachShadow. The method in this implementation can solve the problem of mutual influence between CSS styles.

[0077] Optionally, in some possible implementations, it also includes:

[0078] When the target item is closed, use the CSS display property to hide the target item.

[0079] Alternatively, for interactions between the target project and the current project, you can use a custom event called `new Event`, which is more convenient than `PostMessage`.

[0080] The present invention also provides a project citation system, comprising:

[0081] The first processing unit is used to determine the display position of the target project by taking the root component of the target project to be referenced as the root node DOM element.

[0082] Reference units are used to embed target items in the current project based on their display location;

[0083] The second processing unit is used to obtain the storage location of the single sign-on information of the current project and store it in the local memory;

[0084] The calling unit is used to retrieve single sign-on information from the local storage location and bring it into the server interface when the target project calls the server interface.

[0085] The login unit is used by the server-side interface to perform single sign-on based on single sign-on information.

[0086] This embodiment abandons the iframe reference method and embeds the target project into other projects through DOM element embedding, avoiding the problem of slow iframe loading. In addition, by dynamically loading the project, the performance of opening other projects for the first time is optimized, and problems such as display style and communication between the two projects after embedding are solved.

[0087] Optionally, in some possible implementations, it also includes:

[0088] The loading unit is used to dynamically create script elements for the target project and load the target project's JS files.

[0089] Optionally, in some possible implementations, the first processing unit is specifically used to pass the ID of the DOM element to the current project when the current project that references the target project has a fixed position for displaying the target project, and the target project is embedded into the DOM element according to the ID of the DOM element of the current project;

[0090] When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

[0091] Optionally, in some possible implementations, it also includes:

[0092] The adjustment unit is used to obtain the root DOM element of the target project; add attachShadow to the root DOM element to obtain the Shadow element; obtain the child DOM elements of the root DOM element; add the child DOM elements to the Shadow element; when the target project is bundled, bundle the style part of the target project separately to generate the effect.css package; create a link element and point the href of the link element to the effect.css package; set the ref attribute of the link element to stylesheet; add the configured link element to the Shadow element.

[0093] Optionally, in some possible implementations, it also includes:

[0094] The hidden unit is used to hide the target item using the CSS display property when the target item is closed.

[0095] It should be understood that the above implementation methods are product implementation methods corresponding to the prior method implementation methods. For a description of the product implementation methods, please refer to the description of the prior method implementation methods, which will not be repeated here.

[0096] It should be understood that, without departing from the concept of the present invention, those skilled in the art can combine the above embodiments in any way, and all such combinations are within the protection scope of the present invention.

[0097] Readers should understand that in the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Furthermore, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0098] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the method embodiments described above are merely illustrative. For instance, the division of steps is only a logical functional division, and there may be other division methods in actual implementation. For example, multiple steps may be combined or integrated into another step, or some features may be ignored or not executed.

[0099] If the above methods are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

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

Claims

1. A project referencing method, characterized by, include: Use the root component of the target project to be referenced as the root node DOM element to determine the display position of the target project; Embed the target project in the current project according to the display position; Obtain the storage location of the single sign-on information for the current project and store it in local storage; When the target project calls the server-side interface, the single sign-on information is obtained according to the storage location in the local storage and brought into the server-side interface; The server-side interface performs single sign-on based on the single sign-on information; Also includes: Get the root DOM element of the target project; Add attachShadow to the root DOM element to obtain the Shadow element; Get the child DOM elements of the root DOM element; Add the child DOM element to the Shadow element; When the target project is packaged, the style part of the target project is packaged separately to generate the effect.css package; Create a link element and set the href of the link element to the effect.css package; Set the ref attribute of the link element to stylesheet; Add the configured link element to the Shadow element.

2. The item reference method of claim 1, wherein, Before determining the display position of the target project by using its root component as the root DOM element, the process also includes: Dynamically create the script element of the target project; Load the js file of the target project.

3. The item reference method of claim 1, wherein, The root component of the target project to be referenced is taken as the root node DOM element, specifically including: When the current project referencing the target project has a fixed position for displaying the target project, the ID of the DOM element is passed to the current project, and the target project is embedded into the DOM element according to the ID of the DOM element of the current project; When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

4. The item reference method of claim 1, wherein, Also includes: When the target item is closed, the target item is hidden using the CSS display property.

5. A project referencing system characterized by, include: The first processing unit is used to determine the display position of the target project by taking the root component of the target project to be referenced as the root node DOM element. The referencing unit is used to embed the target project in the current project according to the display position; The second processing unit is used to obtain the storage location of the single sign-on information of the current project and store it in the local memory; The calling unit is used to retrieve the single sign-on information from the storage location in the local storage and bring it into the server-side interface when the target project calls the server-side interface. A login unit is used for the server-side interface to perform single sign-on based on the single sign-on information; Also includes: The adjustment unit is used to obtain the root DOM element of the target project; add attachShadow to the root DOM element to obtain the Shadow element; obtain the child DOM elements of the root DOM element; add the child DOM elements to the Shadow element; when the target project is packaged, package the style part of the target project separately to generate the effect.css package; create a link element, point the href of the link element to the effect.css package; set the ref attribute of the link element to stylesheet; and add the set link element to the Shadow element.

6. The item reference system of claim 5, wherein, Also includes: The loading unit is used to dynamically create script elements of the target project and load the js files of the target project.

7. The item reference system of claim 5, wherein, The first processing unit is specifically used to pass the ID of the DOM element to the current project when the current project referencing the target project has a fixed position for displaying the target project, and the target project is embedded into the DOM element according to the ID of the DOM element of the current project; When the target item has a fixed position, the target item embeds its own DOM element into the body object, and controls the position of the DOM element in the current item according to the fixed positioning method.

8. The item reference system of claim 5, wherein, Also includes: A hidden unit, used to hide the target item using the CSS display property when the target item is closed.

Images