Method for developing web management platform architecture based on vueJS
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.