CN111966337A - Vue-based front-end multi-project display method, system, equipment and storage medium - Google Patents
Vue-based front-end multi-project display method, system, equipment and storage medium Download PDFInfo
- Publication number
- CN111966337A CN111966337A CN202010741234.7A CN202010741234A CN111966337A CN 111966337 A CN111966337 A CN 111966337A CN 202010741234 A CN202010741234 A CN 202010741234A CN 111966337 A CN111966337 A CN 111966337A
- Authority
- CN
- China
- Prior art keywords
- project
- subsystem
- global
- vue
- end multi
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000009877 rendering Methods 0.000 claims abstract description 12
- 238000004590 computer program Methods 0.000 claims description 10
- 230000006870 function Effects 0.000 claims description 10
- 230000001965 increasing effect Effects 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000035515 penetration Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/4401—Bootstrapping
- G06F9/4411—Configuring for operating with peripheral devices; Loading of device drivers
- G06F9/4413—Plug-and-play [PnP]
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Computing Systems (AREA)
- Human Computer Interaction (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The invention discloses a front-end multi-project display method, a front-end multi-project display system, front-end multi-project display equipment and a storage medium based on Vue. The method comprises the following steps: creating a project list configuration file under the main project, wherein the list configuration file comprises the identification and the link address of the subsystem project; the global registration center reads the item list configuration file information, calls a subsystem item registration method of the global routing, registers each subsystem item to the global registration center, and stores the data information of the subsystem item; the display base obtains the data information of the subsystem project through the global registration center, calls the rendering function of the subsystem project and renders and displays the corresponding data information of the subsystem project. The system comprises a project configuration module, a global registration module and a project display module. The invention realizes the integrated management and allocation of the subsystem project display, and enhances the easy expansibility and maintainability of the project.
Description
Technical Field
The invention relates to the field of front-end design, in particular to a front-end multi-project display method, a front-end multi-project display system, front-end multi-project display equipment and a front-end multi-project display storage medium based on Vue.
Background
In the market today, Vue framework for building progressive JavaScript framework for user interface has become one of the mainstream frameworks in the front end. With the business penetration of more and more companies, the size and complexity of products or projects are continuously increasing. To accommodate the overall business requirements, it is often necessary to implement multiple Vue projects and to divide the different modules under each project according to the specific business. While multiple projects may require maintenance updates by multiple different teams. These projects may all have personalized business designs, and how to keep projects maintained by multiple different teams reasonably together becomes a major problem that we have to face.
The prior art shows different items through iframe tags. The iframe tag is a tag of a native jump page. The label allows different system pages to be nested together in a link mode, and content which is not required to be displayed in the nested system pages is filtered out, so that unified display of a plurality of systems is achieved. Although this solution fulfills the business requirements, it brings with it a huge challenge for subsequent development and maintenance work. For example: the method comprises the steps of loading a page cache problem, controlling the authority of other system pages, judging whether a system corresponding to a nested page supports a mode of directly jumping to a specific page, debugging difficulty of a nested page container and a content style and the like. Both of these problems can complicate and confuse the system by using iframe tag nesting. With the increasing complexity and confusion of systems, the maintainability and scalability of the systems are getting worse and worse, to the extent that eventually the entire system reaches a level where it is difficult to maintain or even reconfigure.
Disclosure of Invention
In order to solve the technical problems, the invention provides a front-end multi-project display method, a front-end multi-project display system, front-end multi-project display equipment and a front-end multi-project display storage medium based on Vue, so that integrated management and deployment of subsystem project display are realized, and easy expansibility and maintainability of projects are enhanced.
In order to achieve the purpose, the invention adopts the following technical scheme:
a front-end multi-project display method based on Vue comprises the following steps:
creating a project list configuration file under the main project, wherein the list configuration file comprises the identification and the link address of the subsystem project;
the global registration center reads the item list configuration file information, calls a subsystem item registration method of the global routing, registers each subsystem item to the global registration center, and stores the data information of the subsystem item;
the display base obtains the data information of the subsystem project through the global registration center, calls the rendering function of the subsystem project and renders and displays the corresponding data information of the subsystem project.
Further, the display base obtains data information of a subsystem project of the global registry through a global object, and the global object mounts the global registry.
Further, the global object comprises a browser-owned window object, a prototype chain of Vue, or Vuex state management.
Further, the display base creates view subfolders according to requirements, wherein the view subfolders comprise one or more of a menu display area folder, a user information area folder, an enterprise logo area folder and a login area folder.
Further, when data information of a certain subsystem project is no longer needed, the global registry logs out the subsystem project.
The invention also provides a front-end multi-project display system based on Vue, which comprises:
the project configuration module is used for creating a project list configuration file under the main project, and the list configuration file comprises the identification and the link address of the subsystem project;
the global registration module is used for calling a subsystem project registration method of the global routing according to the project list configuration file information, and registering and storing the data information of the subsystem project;
and the project display module is used for acquiring the data information of the subsystem project through the global registration module, calling a rendering function of the subsystem project and rendering and displaying the corresponding subsystem project data information.
Further, the global registration module is also used for logging out the subsystem item which is no longer needed.
The invention also provides Vue-based front-end multi-project display equipment, which comprises:
a memory for storing a computer program;
a processor for implementing the steps of the Vue-based front-end multi-project presentation method when the computer program is executed.
The present invention also proposes a storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the Vue-based front-end multi-project presentation method as described above.
The invention has the beneficial effects that:
the invention provides a front-end multi-project display method, a system, equipment and a storage medium based on Vue, a global registration center is constructed to carry out unified storage, registration, calling and logout management, a project display base is used for carrying out unified allocation and display on each subsystem project to provide service page content, and the project display base plays its own roles and is self-integrated and easy to maintain, and display logic does not need to be independently compiled for unified display of each project, thereby enhancing the flexibility of the project. Meanwhile, because each project is completely independent, the functions of the whole project can be easily added and deleted according to specific service requirements, and the easy expansibility of the project is greatly enhanced. By means of unified registration, projects are easier to manage, and maintenance and secondary development cost increased by unified display of multiple projects in the later period is reduced. All the items are integrated, and the effect of plug and play is really realized.
Drawings
FIG. 1 is a flow chart of a front-end multi-project demonstration method based on Vue according to an embodiment of the present invention;
FIG. 2 is a structural diagram of a front-end multi-project presentation system based on Vue according to an embodiment of the present invention;
FIG. 3 is a functional architecture diagram of a front-end multi-project presentation system based on Vue according to an embodiment of the present invention.
Detailed Description
In order to clearly explain the technical features of the present invention, the following detailed description of the present invention is provided with reference to the accompanying drawings. The following disclosure provides many different embodiments, or examples, for implementing different features of the invention. To simplify the disclosure of the present invention, the components and arrangements of specific examples are described below. Furthermore, the present invention may repeat reference numerals and/or letters in the various examples. This repetition is for the purpose of simplicity and clarity and does not in itself dictate a relationship between the various embodiments and/or configurations discussed. It should be noted that the components illustrated in the figures are not necessarily drawn to scale. Descriptions of well-known components and processing techniques and procedures are omitted so as to not unnecessarily limit the invention.
As shown in fig. 1, the embodiment of the present invention discloses a front-end multi-project display method based on Vue, which includes:
creating a project list configuration file under the main project, wherein the list configuration file comprises the identification and the link address of the subsystem project;
the global registration center reads the item list configuration file information, calls a subsystem item registration method of the global routing, registers each subsystem item to the global registration center, and stores the data information of the subsystem item;
the display base obtains the data information of the subsystem project through the global registration center, calls the rendering function of the subsystem project and renders and displays the corresponding data information of the subsystem project.
Specifically, the project list configuration file is created under a master project static resource folder, and the global registry and presentation base are created in a master project code file. The js logic file for global registration is stored under the global registration center folder, the content of the js logic file mainly stores subsystem project information, and the functions of registration, calling and logout of the subsystem projects are provided, so that the storage, registration, calling and logout of the subsystem project information are facilitated. All the subsystem projects must be registered and unregistered through a global registration center, so that the unified management of the subsystem project information is realized. In the registration process of the global registry, main information data of each subsystem project is requested through information in a project list configuration file created and maintained under a static resource folder, and data information of each subsystem project is completely registered and stored in the global registry by calling a written unified registration method in a global route. When the data information is used, the related subsystem project data information is called through the global registration center, and when the subsystem project data information is not needed any more, the subsystem project is logged out through the global registration center.
In order to facilitate the presentation base to call and acquire the subsystem project data, the global registry may be mounted under a global object, and the presentation base acquires the data information of the subsystem project of the global registry through the global object, wherein the global object includes but is not limited to a window object of a browser itself, a prototype chain of Vue, or Vuex state management. When the information data of each subsystem project is needed, the mounted global registry can be obtained through the global object, and the information data of each registered subsystem project is obtained according to the global registry.
The display base is created as a view folder under the main item, and different view subfolders can be created according to requirements, for example: a menu presentation area, a user information area, an enterprise logo area, a login area, and the like. All of the files in these folders are a view file ending in. Vue for encoding the presentation style of the unified presentation platform, which serves as an empty presentation container for invoking the presentation of the various subsystem project pages. The data of each display area is acquired through the global registry, and the global object can further process the data to form a data format required by the display area.
As shown in fig. 2, the embodiment of the present invention further discloses a front-end multi-project exhibition system based on Vue, which includes:
the project configuration module is used for creating a project list configuration file under the main project, and the list configuration file comprises the identification and the link address of the subsystem project;
the global registration module is used for calling a subsystem project registration method of the global routing according to the project list configuration file information, and registering and storing the data information of the subsystem project;
and the project display module is used for acquiring the data information of the subsystem project through the global registration module, calling a rendering function of the subsystem project and rendering and displaying the corresponding subsystem project data information.
The global registration module is also used for logging out the subsystem item which is no longer needed.
As shown in fig. 3, when accessing the unified presentation item of the presentation base, the user renders the corresponding page into the presentation container of the presentation area that has been prepared in advance by calling the rendering function under each subsystem item. Specifically, the rendering function is registered in a global registry. When the menu area in the base is displayed, the corresponding subsystem project information data can be found through the global registry according to the clicked menu data.
The embodiment of the invention also discloses front-end multi-project display equipment based on Vue, which comprises:
a memory for storing a computer program;
a processor for implementing the steps of the Vue-based front-end multi-project presentation method when the computer program is executed.
The embodiment of the invention also discloses a storage medium, wherein a computer program is stored on the storage medium, and when being executed by a processor, the computer program realizes the steps of the Vue-based front-end multi-project display method.
Although the embodiments of the present invention have been described with reference to the accompanying drawings, the scope of the present invention is not limited thereto. Various modifications and alterations will occur to those skilled in the art based on the foregoing description. And are neither required nor exhaustive of all embodiments. On the basis of the technical scheme of the invention, various modifications or changes which can be made by a person skilled in the art without creative efforts are still within the protection scope of the invention.
Claims (9)
1. A front-end multi-project display method based on Vue is characterized by comprising the following steps:
creating a project list configuration file under the main project, wherein the list configuration file comprises the identification and the link address of the subsystem project;
the global registration center reads the item list configuration file information, calls a subsystem item registration method of the global routing, registers each subsystem item to the global registration center, and stores the data information of the subsystem item;
the display base obtains the data information of the subsystem project through the global registration center, calls the rendering function of the subsystem project and renders and displays the corresponding data information of the subsystem project.
2. The Vue-based front-end multi-project exposure method according to claim 1, wherein the exposure base obtains data information of subsystem projects of a global registry through a global object, and the global object downloads the global registry.
3. The Vue-based front-end multi-project presentation method according to claim 2, wherein the global object comprises a browser-owned window object, a prototype chain of Vue, or Vuex state management.
4. The Vue-based front-end multi-project presentation method according to claim 1, wherein the presentation base creates view subfolders on demand, the view subfolders including one or more of a menu presentation area folder, a user information area folder, an enterprise logo area folder, and a login area folder.
5. The Vue-based front-end multi-project exposure method of claim 1, wherein when data information of a subsystem project is no longer needed, the global registry unregisters the subsystem project.
6. A front-end multi-project presentation system based on Vue, comprising:
the project configuration module is used for creating a project list configuration file under the main project, and the list configuration file comprises the identification and the link address of the subsystem project;
the global registration module is used for calling a subsystem project registration method of the global routing according to the project list configuration file information, and registering and storing the data information of the subsystem project;
and the project display module is used for acquiring the data information of the subsystem project through the global registration module, calling a rendering function of the subsystem project and rendering and displaying the corresponding subsystem project data information.
7. The Vue-based front-end multi-project presentation system according to claim 6, wherein the global registration module is further configured to unregister subsystem projects that are no longer needed.
8. An Vue-based front-end multi-project display device, comprising:
a memory for storing a computer program;
a processor for implementing the steps of the Vue-based front-end multi-project presentation method of any one of claims 1-5 when executing the computer program.
9. A storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the Vue-based front-end multi-project exhibition method according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010741234.7A CN111966337B (en) | 2020-07-28 | 2020-07-28 | Front-end multi-project display method, system, equipment and storage medium based on Vue |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010741234.7A CN111966337B (en) | 2020-07-28 | 2020-07-28 | Front-end multi-project display method, system, equipment and storage medium based on Vue |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111966337A true CN111966337A (en) | 2020-11-20 |
| CN111966337B CN111966337B (en) | 2022-12-27 |
Family
ID=73364107
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010741234.7A Active CN111966337B (en) | 2020-07-28 | 2020-07-28 | Front-end multi-project display method, system, equipment and storage medium based on Vue |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111966337B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115878923A (en) * | 2023-01-30 | 2023-03-31 | 北京微吼时代科技有限公司 | Method and system for constructing reusable interaction framework of arrangement and configuration |
| CN116304433A (en) * | 2023-03-20 | 2023-06-23 | 浪潮智慧科技有限公司 | Advanced route caching method, device and medium based on Vue component |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120054774A1 (en) * | 2010-08-26 | 2012-03-01 | Verizon Patent And Licensing, Inc. | Universal Registration in Broker-Based Messaging Systems and Methods |
| CN110531983A (en) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | A kind of on-demand packaging method of front end page based on entry building |
| CN111443921A (en) * | 2020-03-27 | 2020-07-24 | 中国平安财产保险股份有限公司 | Method, system and computer equipment for subpackage deployment of web front-end projects |
-
2020
- 2020-07-28 CN CN202010741234.7A patent/CN111966337B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120054774A1 (en) * | 2010-08-26 | 2012-03-01 | Verizon Patent And Licensing, Inc. | Universal Registration in Broker-Based Messaging Systems and Methods |
| CN110531983A (en) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | A kind of on-demand packaging method of front end page based on entry building |
| CN111443921A (en) * | 2020-03-27 | 2020-07-24 | 中国平安财产保险股份有限公司 | Method, system and computer equipment for subpackage deployment of web front-end projects |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115878923A (en) * | 2023-01-30 | 2023-03-31 | 北京微吼时代科技有限公司 | Method and system for constructing reusable interaction framework of arrangement and configuration |
| CN116304433A (en) * | 2023-03-20 | 2023-06-23 | 浪潮智慧科技有限公司 | Advanced route caching method, device and medium based on Vue component |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111966337B (en) | 2022-12-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| US10740114B2 (en) | Component invoking method and apparatus, and component data processing method and apparatus | |
| CN106936871B (en) | Method and device for displaying data on interface | |
| Wargo | PhoneGap essentials: Building cross-platform mobile apps | |
| US11687324B2 (en) | Property management method and property management system and machine using the same | |
| US10880227B2 (en) | Apparatus, hybrid apparatus, and method for network resource access | |
| CN111008019B (en) | Web running method, device, equipment and medium of small program | |
| CN110908712A (en) | Data processing method and equipment for cross-platform mobile terminal | |
| CN104520816B (en) | For adjusting method, equipment and storage media across expanding communication | |
| CN109032722A (en) | Method, device, equipment and medium for updating display effect of UI component | |
| CN111966337B (en) | Front-end multi-project display method, system, equipment and storage medium based on Vue | |
| CN101154157A (en) | System and method for providing globalization function to application of JavaScript | |
| CN112114784A (en) | Single-Spa-based front-end micro-service system | |
| US20090222504A1 (en) | Distributed cross-application server deployment | |
| CN111381920B (en) | Display method and device of pop-up window assembly and electronic terminal | |
| CN105743955A (en) | Method for JavaScript object expansion | |
| CN113805973A (en) | Application program control method and device and application program development method and device | |
| WO2015179509A1 (en) | High-performance computing framework for cloud computing environments | |
| CN109460227A (en) | A kind of development approach of Website front-end, device, equipment and medium | |
| CN113986258A (en) | Service publishing method, device, equipment and storage medium | |
| CN105574114A (en) | On-line plotting method based on telecom resource management standard control library | |
| CN109522507B (en) | Method for uniformly managing webpage components | |
| CN109240660B (en) | Access method of advertisement data, storage medium, electronic device and system | |
| CN112597408B (en) | System fusion method, device, equipment and storage medium | |
| Fain et al. | Enterprise web development: Building HTML5 applications: from desktop to mobile |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |