# management-template

**Repository Path**: hlp1847757288/management-template

## Basic Information

- **Project Name**: management-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-30
- **Last Updated**: 2022-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台管理系统模板

> 项目更新时间
> 
> v1.0 == 2022-3-30 ~ 2022-4-2

此后台管理模板是基于vue3开发的，依赖了第三方库element-plus、vue-router。

## 一.添加页面

1. 在@/router文件夹中新建hello.js
2. 在hello.js中编写路由规则

可导出一个数组，这样生成的路由会应用@/views/RouterView.vue组件，导出的数组内容作为该路由的子路由
```js
export default [
	{
		name:'system',
		path:'system',
		component:()=>import('@/views/admin/system.vue'),
		meta:{
			title:'系统信息',
			authentication:(role,route)=>['Admin']
		}
	},{
		name:'user',
		path:'user',
		component:()=>import('@/views/admin/user.vue'),
		meta:{
			title:'用户列表',
			authentication:(role,route)=>['Admin']
		}
	},{
		name:'admin',
		path:'admin',
		component:()=>import('@/views/admin/admin.vue'),
		meta:{
			title:'管理员列表',
			authentication:(role,route)=>['Admin']
		}
	}
]
```

也可以批量导出多个，这样每一个就会是单独的路由

```js
export const StandardStreamContainer={
	name: 'StandardStreamContainerDemo',
	path: '/StandardStreamContainer',
	component: ()=>import('@/views/demo/StandardStreamContainer.vue')
}

export const FixedSizeContainer={
	name: 'ShowTable',
	path: '/ShowTable',
	component: ()=>import('@/views/demo/ShowTable.vue')
}
```
3. @/router/RouterIndex.js是vue-router的生成地方，会读取同级的所有其他js文件，并生成路由

## 二、身份验证

1. 在登录页面@/views/login/AdminLogin.vue中，onLogin方法中进行登录，将登录成功信息保存在vuex的admin模块中。
2. 在@/APP.vue同样完成登录操作
3. 在@/plugin/RouteAuthentication.js中完成权鉴操作，根据vuex中的登录情况，进行允许、拒绝、404的操作
4. 本项目的权鉴流程为：

* 登录成功后，会获取到角色的身份，如Admin、Manager、Guest等
* 在路由配置中，给需要权鉴的路由的meta属性中添加authentication属性，在@/plugin/RouteAuthentication.js中根据authentication进行权鉴判定

5. 如果不想要身份验证模块，只需删除@/plugin/RouteAuthentication.js文件(也可以不删)，然后在@/router/RouterIndex.js中注释掉import @/plugin/RouteAuthentication.js的行和注释掉文件末尾的路由守卫router.beforeEach(Authentication)，然后在@/layout/treeMenu/treeMenu.vue中的计算属性computed中的displayMenu方法里，注释其他代码，直接return this.menu即可

## 三、页面缓存

1. 在路由配置中，路由项的component对应的组件必需与改路由名称相同，否则会造成在tagsView中关闭该页面时，该页面依然被缓存的问题。
2. 项目中有三个地方用到了keep-alive组件，分别是@/App.vue、@/layout/mainLayout.vue、@/views/RouterView.vue。这三点缺一不可，缺少任何一处的keep-alive都会造成页面可能不被缓存的问题。

## 四、页面开发

1. 在@/layout/viewContaniner文件夹中内置了一些布局容器，能实现不同的页面需求
2. 内置的element-plus并非全部导入，可在@/plugin/element-plus.js中按需导入
3. 在@/layout/treeMenu/treeMenu.vue中可设置侧边导航栏，并且会根据身份验证，只显示目前角色有权限进入的导航。
4. @/layout/tagsView/tagsView.vue组件只依赖了el-popover，组件用于管理keep-alive状态，非常实用，且美观，注释清晰，适合开发者借鉴