CN111240644B - Method for developing web management platform architecture based on vueJS - Google Patents
Method for developing web management platform architecture based on vueJS Download PDFInfo
- Publication number
- CN111240644B CN111240644B CN201911410546.3A CN201911410546A CN111240644B CN 111240644 B CN111240644 B CN 111240644B CN 201911410546 A CN201911410546 A CN 201911410546A CN 111240644 B CN111240644 B CN 111240644B
- Authority
- CN
- China
- Prior art keywords
- menu
- route
- url
- vuejs
- level
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 12
- 230000002457 bidirectional effect Effects 0.000 claims abstract description 6
- 230000004913 activation Effects 0.000 claims description 3
- 238000009877 rendering Methods 0.000 abstract 1
- 235000012813 breadcrumbs Nutrition 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004806 packaging method and process Methods 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/20—Software design
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for developing a web management platform architecture based on vueJS, which comprises the steps of rendering a multi-level menu through a recursion component, and realizing bidirectional binding through correspondence of url and menu item name values; and rapidly building a web management platform architecture based on vuejs by configuring routes according to an agreed mode. Through the mode, the invention can reduce the complexity of developing the back-end management system and keep certain flexibility.
Description
Technical Field
The invention relates to the field of front-end development of background management platforms, in particular to a method for developing a web management platform architecture based on vueJS.
Background
In the traditional front-end development of a background management platform, routing and menu data are generally maintained separately, and the corresponding relation between the routing and the menu needs to be processed. When a multi-level menu exists, the front end often needs to perform a lot of complex data structure conversion in order to process the corresponding relation between the route and the multi-level menu and the state of the menu, so that the logic is not clear enough and is not easy to maintain. Background management systems are generally used for internal personnel, and page layout generally does not have excessive customization requirements, so that the possibility of an abstract general layout framework is provided.
In the current development mode of the back-end management system, it is common that a route and a menu are separately set, one part of data is routed, one part of data is menu, and then the route and the menu are associated through processing.
Yet another way is to implement the association of routes and menus by configuration through highly encapsulated components. The components usually expose api related to menu configuration and routing, define configuration parameters in advance, and build a front-end framework of the back-end management system which is ready to use and is ready to open according to configuration documents.
The solution of separate management of the route and the menu often requires complex processing of data to associate the route and the menu. The functions of state management, etc. require additional processing, resulting in unclear logical structure. When the functions of multi-level menus, authority management, breadcrumb navigation and the like need to be expanded subsequently, various processing logics need to be added, and a plurality of codes need to be modified frequently.
In another scheme, although the most functions can be realized in a routing configuration mode more conveniently, certain flexibility is lost due to high encapsulation, and when a certain function is urgently needed, a corresponding api can be added only by a person who develops a component.
Disclosure of Invention
The invention mainly solves the technical problem of providing a method for developing a web management platform architecture based on vueJS, which can reduce the complexity of developing a rear-end management system and keep certain flexibility; the menu components are packaged, the corresponding relation between the route and the menu data is bound, and the use of partial parameters is appointed. But the whole packaging is not carried out, and flexible modification can be carried out if personalized requirements exist.
In order to solve the technical problems, the invention adopts a technical scheme that: the method for developing the web management platform architecture based on vueJS comprises the following steps:
firstly, appointing a url format, dividing the url format into a route corresponding to a menu and a service route, and separating the menu route by distinguishing the route by a special character;
secondly, the format of the appointed routing data is a multilayer nested structure, the path and name attribute values are the same, the route to be skipped from the menu is spliced through the paths of each layer to generate a final url, and the name is the only key of the menu item;
thirdly, the routing data of the first layer corresponds to a first-level menu, and then a recursive component renders the multi-level menu; clicking the root level menu to jump to a corresponding route, and recursively matching the activation state of the menu according to the character string path separated from the url and the name of the menu to realize bidirectional binding of the route and the menu;
fourth, because the routing table uses sub-routes, when there are multiple levels of menus, the file structure also needs to be created in a nested manner as the routing table, and each level of directory needs to have a common component to mount the sub-components.
The invention has the beneficial effects that: the invention has high development efficiency, the template is downloaded and modified according to the written route configuration, and the background management front-end framework of the multilevel menu can be rapidly operated to rapidly develop the service; the invention can be flexibly configured, because only the menu and the route are bound and high encapsulation is not carried out, and the function can be added or modified according to the requirement.
Drawings
FIG. 1 is a flow chart of a preferred embodiment of the method for developing a web management platform architecture based on vueJS.
Detailed Description
The following detailed description of the preferred embodiments of the present invention, taken in conjunction with the accompanying drawings, will make the advantages and features of the invention easier to understand by those skilled in the art, and thus will clearly and clearly define the scope of the invention.
Referring to fig. 1, an embodiment of the present invention includes:
a method for developing a web management platform architecture based on vueJS is characterized in that a multi-level menu is rendered through a recursion component, and bidirectional binding is realized through correspondence of url and menu item name values; a web management platform architecture is rapidly built based on vuejs by configuring routes according to a convention mode; the method specifically comprises the following steps:
firstly, a url format is agreed, the url format is divided into a route corresponding to a menu and a service route, and the route and the service route are distinguished through a special character, so that the menu route is conveniently separated;
secondly, the format of the appointed routing data is a multilayer nested structure, the path and name attribute values are the same, the route to be skipped from the menu is spliced through the paths of each layer to generate a final url, and the name is the only key of the menu item;
thirdly, the routing data of the first layer corresponds to a first-level menu, and then a recursive component renders the multi-level menu. Clicking the root level menu can jump to a corresponding route, and the activation state of the menu can be recursively matched according to the character string path separated from the url and the name of the menu, so that the bidirectional binding of the route and the menu is realized;
fourth, because the routing table uses sub-routes, when there are multiple levels of menus, the file structure also needs to be created in a nested manner as the routing table, and each level of directory needs to have a common component to mount the sub-components.
The invention is suitable for the management platform items with fixed layout of multi-level menus, such as the layout of a left menu bar and a right content area. The invention realizes the menu structure of any progression through the recursion component; by convention correspondence of url and menu key, bidirectional binding of url and menu items is realized. The multi-level menu does not need to be rendered through complicated processing or the active state of the current menu is lost by refreshing the page. The multi-layer nested routing data structure corresponds to a multi-level menu, and the functions of breadcrumb navigation, authority management and the like can be more conveniently expanded. After the framework is built, the development of the service can be rapidly realized only by maintaining the routing table data according to the format and creating the corresponding vue page component.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes performed by the present specification and drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (1)
1. A method for developing a web management platform architecture based on vueJS is characterized by comprising the following steps:
firstly, appointing a url format, dividing the url format into a route corresponding to a menu and a service route, and separating the menu route by distinguishing the route by a preset character region;
secondly, the format of the appointed routing data is a multilayer nested structure, the path and name attribute values are the same, the route to be skipped from the menu is spliced through the paths of each layer to generate a final url, and the name is the only key of the menu item;
thirdly, the routing data of the first layer corresponds to a first-level menu, and then a recursive component renders the multi-level menu; clicking a root level menu to jump to a corresponding route, and recursively matching the activation state of the menu according to a character string path separated from url and the name of the menu to realize bidirectional binding of the route and the menu;
fourth, because the routing table uses sub-routes, when there are multiple levels of menus, the file structure also needs to be created in a nested manner as the routing table, and each level of directory needs to have a common component to mount the sub-components.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911410546.3A CN111240644B (en) | 2019-12-31 | 2019-12-31 | Method for developing web management platform architecture based on vueJS |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911410546.3A CN111240644B (en) | 2019-12-31 | 2019-12-31 | Method for developing web management platform architecture based on vueJS |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111240644A CN111240644A (en) | 2020-06-05 |
| CN111240644B true CN111240644B (en) | 2022-08-09 |
Family
ID=70879617
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911410546.3A Active CN111240644B (en) | 2019-12-31 | 2019-12-31 | Method for developing web management platform architecture based on vueJS |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111240644B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112732230A (en) * | 2020-12-31 | 2021-04-30 | 广东广宇科技发展有限公司 | Page generation method and system based on bidirectional navigation component, storage medium and computer equipment |
| CN113254100B (en) * | 2021-05-25 | 2023-08-01 | 四川虹魔方网络科技有限公司 | Method for realizing dynamic loading of multistage route based on Vue |
| CN116304433A (en) * | 2023-03-20 | 2023-06-23 | 浪潮智慧科技有限公司 | Advanced route caching method, device and medium based on Vue component |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107193569A (en) * | 2017-05-31 | 2017-09-22 | 福建三元达科技有限公司 | The multilevel menu management system and management method of embedded system |
| CN109445767A (en) * | 2018-11-13 | 2019-03-08 | 上海宝尊电子商务有限公司 | A kind of novel response type navigation design implementation method applied to multiple terminals |
-
2019
- 2019-12-31 CN CN201911410546.3A patent/CN111240644B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107193569A (en) * | 2017-05-31 | 2017-09-22 | 福建三元达科技有限公司 | The multilevel menu management system and management method of embedded system |
| CN109445767A (en) * | 2018-11-13 | 2019-03-08 | 上海宝尊电子商务有限公司 | A kind of novel response type navigation design implementation method applied to multiple terminals |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111240644A (en) | 2020-06-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111240644B (en) | Method for developing web management platform architecture based on vueJS | |
| TWI671681B (en) | Tag-based program development method, page request response method and device thereof | |
| CN108279932B (en) | Method and device for dynamically configuring user interface of mobile terminal | |
| US20070157082A1 (en) | Web portal layout manager system and method | |
| CN110399119A (en) | A kind of modularization construction method, device, electronic equipment and storage medium | |
| CN107562777B (en) | Data processing method and apparatus thereof | |
| CN103761079B (en) | Method and device for automatically graying page | |
| US20180189033A1 (en) | Graphical software meta-development tool | |
| CN113254100B (en) | Method for realizing dynamic loading of multistage route based on Vue | |
| CN104793933B (en) | A kind of terminal data shows method and system | |
| CN115480753A (en) | Application integration system and corresponding computer device and storage medium | |
| US20120310962A1 (en) | Automated business process modeling | |
| CN106527873A (en) | xml-based man-machine interactive interface customization method | |
| CN107957893A (en) | A kind of software flow and function dynamic realizing method | |
| CN109509467A (en) | Code generating method and device | |
| CN112486378B (en) | Graph generation method, device, terminal and storage medium | |
| KR101743868B1 (en) | Method and system for image processing | |
| CN104408120B (en) | The processing method and processing device of source code | |
| CN112346811A (en) | Rendering method and device | |
| CN103810312B (en) | Method and device for the computer-aided design of man-machine interface animated graphics element | |
| WO2005038647A1 (en) | User interface software design system | |
| CN113779311A (en) | Data processing method, device and storage medium | |
| JP2002508866A (en) | Control method of data processing device | |
| JP4708685B2 (en) | CLI command input method / program / program recording medium / device, data recording medium | |
| EP3881178B1 (en) | Method for the expandable generation of content |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220627 Address after: 215000 building 3, Fumin phase III plant, No. 818, Songjia Road, Guoxiang street, Wuzhong Economic Development Zone, Suzhou City, Jiangsu Province Applicant after: INSPUR FINANCIAL INFORMATION TECHNOLOGY Co.,Ltd. Applicant after: Jinan Langchao Jindi Information Technology Co.,Ltd. Address before: 215100 818 Wusong Road, Wusong River Industrial Park, Wuzhong development area, Suzhou, Jiangsu Applicant before: INSPUR FINANCIAL INFORMATION TECHNOLOGY Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |