Implementation Method, System, Terminal and Storage Medium for Embedding Vue Components

Abstract

An embodiment of the present invention discloses a method, system, terminal, and storage medium for implementing the embedding of Vue components. The method includes: determining the type of Vue component to be embedded; when the Vue component is a project-based component, creating a blank page, adding an instance of the Vue component to the backend resource file directory, and associating the blank page with the Vue component through the address of the directory where the instance is located. The blank page is used to display the instance of the Vue component on the front end. This method enables developers to achieve front-end and back-end separation without substantially modifying the code framework, implement advanced page functions on the page, and make code maintenance easier.

Description

Technical Field

[0001] The present invention relates to the field of computer programming, and in particular, to a method, system, terminal, and storage medium for implementing the embedding of vue components. Background Art

[0002] With the development of Internet technology, higher requirements have been placed on project development. The separation of front-end and back-end development is a major trend, that is, professional developers are responsible for their respective professional fields.

[0003] However, due to the generally long project iteration cycle, many enterprises do not have sufficient time and energy to completely update the project. In the past, most of the code was developed using background templates in combination with JAVASCRIPT. As the project progresses, without the intervention of front-end personnel, the code will become increasingly heavy, which will cause great problems for the subsequent promotion and maintenance of the project. If the front-end directly intervenes without using any excellent frameworks for management, it will also have a certain impact on the control of code quality and the iteration of subsequent projects. Summary of the Invention

[0004] In view of this, the present application provides a method for implementing the embedding of vue components, including:

[0005] Determine the type of vue component to be embedded;

[0006] When the vue component is an engineering component, create a blank page, add an instance of the vue component to the back-end resource file directory, and associate the blank page with the vue component through the address of the directory where the instance is located. The blank page is used to display the instance of the vue component on the front end.

[0007] Further, the associating the blank page with the vue component through the address of the directory where the instance is located includes:

[0008] Add an iframe tag to the blank page, and add a unique first identifier to the iframe tag, and bind the first identifier to the vue component;

[0009] Add an address attribute to the iframe tag to point to the address of the directory where the instance is located, so that the blank page is used to display the instance of the vue component on the front end.

[0010] Further, it further includes:

[0011] When the vue component is a modular component, create a unique second identifier in the front-end page file to be embedded, bind the second identifier to the object of the vue component, and insert the second identifier into the target module in the front-end page file.

[0012] Further, the binding of the second identifier to the object of the vue component includes:

[0013] Bind the unique identifier to the object of the vue component through a scripting language and instantiate the object.

[0014] Further, the instantiation process of the object of the vue component includes:

[0015] Determine the module where the second identifier needs to be inserted, and declare the required variables according to the function of the module;

[0016] Call the corresponding function and execute the related functions of the module according to the variables.

[0017] Further, adding the instance of the vue component to the specified directory includes:

[0018] Add the static resources obtained after compiling the vue component to the static resource directory of the background framework.

[0019] Further, the static resources include pictures, styles, and page files.

[0020] Further, the present application also provides a system for implementing the embedding of a vue component, including: a front-end page and a vue component, and the vue component is embedded in the front-end page by the method for implementing the embedding of a vue component according to any one of the above embodiments.

[0021] Further, the present application also provides a computer terminal, including a processor and a memory, the memory stores a computer program, and the computer program executes the method for implementing the embedding of a vue component according to any one of the above embodiments when running on the processor.

[0022] Further, the present application also provides a readable storage medium, which stores a computer program, and the computer program executes the method for implementing the embedding of a vue component according to any one of the above embodiments when running on a processor.

[0023] The technical solution of this application provides a method for implementing the embedding of vue components. First, determine the type of vue component to be embedded. When the vue component is a project-based component, a blank page is created, the instance of the vue component is added to the backend resource file directory, and the blank page is associated with the vue component through the address of the directory where the instance is located. The blank page is used to display the instance of the vue component on the front end. This technical solution solves the problem of how to make a smooth transition from high backend coupling to complete front-backend separation. It achieves the goal that front-end personnel can quickly and efficiently use the front-end framework for project management. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the technical solutions of the present invention, the accompanying drawings required for the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as limiting the protection scope of the present invention. In each of the drawings, similar components are numbered similarly.

[0025] Figure 1 FIG. 9 shows a first flowchart of the method for implementing the embedding of vue components in an embodiment of the present application;

[0026] Figure 2 FIG. 13 shows a second flowchart of the method for implementing the embedding of vue components in an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0027] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments.

[0028] The components of the embodiments of the present invention described and illustrated herein can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the claimed invention, but merely represents selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of protection of the present invention.

[0029] Hereinafter, the terms "comprising", "having" and their cognates that can be used in various embodiments of the present invention are only intended to indicate specific features, numbers, steps, operations, elements, components or combinations of the foregoing items, and should not be construed as first excluding the existence or addition of one or more other features, numbers, steps, operations, elements, components or combinations of the foregoing items.

[0030] In addition, terms such as "first", "second", "third", etc. are only used for differential description and should not be construed as indicating or implying relative importance.

[0031] Unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the various embodiments of the present invention pertain. The terms (such as those defined in a commonly used dictionary) will be interpreted as having the same meaning as their contextual meaning in the relevant technical field and will not be interpreted as having an idealized meaning or an overly formal meaning unless clearly defined in the various embodiments of the present invention.

[0032] The present invention will be described in detail below in conjunction with specific embodiments.

[0033] Embodiment 1

[0034] Please refer to Figure 1 , this embodiment proposes an implementation method for embedding vue components, which is applied to a large-scale code project integrating the front-end and the back-end. Generally speaking, there are many frameworks in such a project. Some old frameworks are not suitable for some new functions now, and the front-end and the back-end are not separated, making it impossible to use some front-end libraries. The method of this embodiment separates the front-end and the back-end and solves the problems in some frameworks where the back-end is highly coupled to the front-end.

[0035] Step S100, determine the type of vue component to be embedded;

[0036] This embodiment uses vue to embed the above-mentioned old-style code framework to achieve the effect of separating the front-end and the back-end. In actual operation, the embedded components vary according to actual work needs. For example, for a front-end page, it may need to be completely replaced, or only a small module is modified to implement functions that cannot be achieved by the back-end. The corresponding vue components for these two modifications are also different.

[0037] Step S200, when the vue component is a project-style component, create a blank page, add an instance of the vue component to the back-end resource file directory, and associate the blank page with the vue component through the address of the directory where the instance is located. The blank page is used to display the instance of the vue component on the front-end.

[0038] Taking the grails framework as an example in this embodiment, when the vue component to be embedded is a project-style component, it means that an entire front-end page needs to be replaced. Therefore, for this page to be replaced, a blank page list.gsp needs to be created as the carrier of the new page.

[0039] After the vue component to be embedded is completed, use the npm run build command to compile it. After compilation, static resources will be obtained. This static resource is an instance of the vues component, usually located under the dist / folder. This vue component instance includes images, style resources, page elements, etc., such as pages like index.html. Among them, this index.html is the main body that needs to be replaced. These contents need to be stored in the resource folder at the backend of the project file.

[0040] Generally speaking, for this kind of front-end and back-end coupled project, in addition to including front-end pages, there are also corresponding back-end files for these pages. If written in C language, they are some.c files, and if written in C++, they are some.cpp files. At the same time, there are also static resources required by these web pages, usually located in a folder like web-app / .

[0041] After the newly created blank page and the vue component instance are in place, add an iframe tag to the blank page and point the iframe to the location where the vue component instance is stored through the scr attribute. In this embodiment, it is web-app / dist / index.html. In this way, the index.html page will be imported under this iframe tag, and at the same time, a unique first identifier needs to be added to this iframe tag.

[0042] In addition, because a new blank page and a new static resource folder are added to this project, the path of list.gsp needs to be added to the page route, and the path of dist / needs to be added to the back-end route. At the same time, the vue route configuration will obtain the above-mentioned first identifier and configure the back-end route according to this first identifier, so as to complete the replacement of the entire page project.

[0043] After completing the above step S200, if you need to make changes to this new page later, you don't need to modify the back-end code. Only front-end developers need to modify the front-end code to achieve front-end maintenance, realize front-end and back-end separation, and at the same time, some front-end operations that cannot be achieved at the back-end can also be realized.

[0044] Furthermore, as Figure 2 shown, the embodiments of the present application further include the following steps.

[0045] Step S300, when the vue component is a modular component, create a unique second identifier in the front-end page file to be embedded.

[0046] When only a partial replacement and upgrade of the page is required, there is no need to create a new page as in step S200 above. Because of the element binding feature of vue, the replacement of local modules on the page and the addition of functions can be achieved through the binding function.

[0047] Specifically, a unique second identifier needs to be added to this page. This second identifier is used to name the module that needs to be replaced or added. This module can be a label such as div, a, hr, etc. used to frame the structure of the front-end page.

[0048] Step S400: Bind the second identifier to the object of the vue component and insert the second identifier into the target module in the front-end page file.

[0049] For example, to insert an advanced button on a certain page, a pop-up window event will be triggered after clicking the motor button. This button has its own layout, which is framed by the label button. Add a second identifier to this button, and then declare a vue object in this page through javascript and bind this vue object and this second identifier. In this way, only by writing appropriate code in this javascript area to implement the code instance of this button, an advanced button can be inserted on the page, and at the same time, there is no need to find the corresponding background code to modify this page, saving the time required for maintaining the code.

[0050] Specifically, in this step, the implementation of this modular vue component instance can be achieved by calling the parameters and method functions required for the corresponding function. For example, for the button in this embodiment, there is a trigger button after pressing to display a pop-up window. Therefore, the window-related method can be executed through the onclick event. To control the display of the pop-up window, an init function can be declared. This function is bound to the window and is used to change the value of the show attribute. Specifically, when the button is clicked, the onclick event is triggered, and the window.init() function is executed, changing the show in the window attributes that need to pop up to true, and defaulting to false when it is not needed to pop up.

[0051] The embodiment of the present application also provides a system for implementing the embedding of a vue component, including a front-end page and a vue component. The vue component is embedded into the front-end page through the steps of the method for implementing the embedding of the vue component in the above embodiment.

[0052] Furthermore, the present application also provides a computer terminal, including a processor and a memory. The memory stores a computer program. When the computer program runs on the processor, it executes the method for implementing the embedding of the vue component as described in any one of the above embodiments.

[0053] Furthermore, the present application also provides a readable storage medium storing a computer program, which when running on a processor, executes the implementation method of vue component embedding as described in any one of the above embodiments.

[0054] In several embodiments provided by the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely illustrative. For example, the flowcharts and structure diagrams in the accompanying drawings show the possible architectures, functions, and operations of devices, methods, and computer program products according to multiple embodiments of the present invention. In this regard, each block in the flowchart or block diagram may represent a module, a program segment, or a part of code, and the module, program segment, or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in an alternative implementation, the functions marked in the blocks may occur in a different order than marked in the accompanying drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the structure diagram and / or flowchart, as well as the combination of blocks in the structure diagram and / or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0055] In addition, each functional module or unit in various embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0056] If the function is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this 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 for causing a computer device (which may be a smart phone, a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs that can store program codes.

[0057] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of changes or substitutions, which should all be covered within the protection scope of the present invention.

Claims

1. A method for implementing the embedding of Vue components, characterized in that, it includes: Determine the type of Vue component to be embedded; When the Vue component is a project-style component, create a blank page, add an instance of the Vue component to the backend resource file directory, and associate the blank page with the Vue component through the address of the directory where the instance is located. The blank page is used to display the instance of the Vue component on the front end; The association of the blank page with the Vue component through the address of the directory where the instance is located includes: Add an iframe tag to the blank page, and add a unique first identifier to the iframe tag, and bind the first identifier to the Vue component; Add an address attribute to the iframe tag to point to the address of the directory where the instance is located, so that the blank page is used to display the instance of the Vue component on the front end; When the Vue component is a modular component, create a unique second identifier in the front-end page file to be embedded; Bind the second identifier to the object of the Vue component, and insert the second identifier into the target module in the front-end page file; The binding of the second identifier to the object of the Vue component includes: Bind the second identifier to the object of the Vue component through a scripting language; Determine the module where the second identifier needs to be inserted, and declare the required variables according to the function of the module; Call the corresponding function and execute the related functions of the module according to the variables.

2. The method for implementing the embedding of Vue components according to claim 1, characterized in that, The adding of the instance of the Vue component to the specified directory includes: Adding the static resources obtained after compiling the Vue component to the static resource directory of the backend framework.

3. The method for implementing the embedding of Vue components according to claim 2, characterized in that, The static resources include pictures, styles and page files.

4. A system for implementing the embedding of Vue components, characterized in that, it includes: A front-end page and a Vue component, and the Vue component is embedded in the front-end page through the method for implementing the embedding of Vue components according to any one of claims 1 to 3.

5. A computer terminal, characterized in that, it includes a processor and a memory, and the memory stores a computer program, and when the computer program runs on the processor, it executes the method for implementing the embedding of Vue components according to any one of claims 1 to 3.

6. A readable storage medium, characterized in that, it stores a computer program, and when the computer program runs on a processor, it executes the method for implementing the embedding of Vue components according to any one of claims 1 to 3.

Images