分配操作菜单

╰半夏微凉° 2023-10-13 15:00 4阅读 0赞

#### 目录 ####

*  概述
 *  介绍
 *  数据库
 *  后端
 *  前端
 *  效果展示

## 概述 ##

> 在写后台管理系统时, 我们可以根据不同的登录人,给予不同的功能菜单  
> *如 :给楼栋管理员登录时分配(楼栋管理,宿舍管理)*

> **所以在数据库就要创建:  
> 1.登录人与角色表,  
> 2再给角色表分配操作菜单**  
> 登录时查询对应的操作菜单,将数据响应给前端就行

## 介绍 ##

> 使用框架 :
> 
> > 前端用Vue-cli脚手架+Element-ui  
> > 后端用springboot+mybatis+lamBok  
> > 使用
> 
> 使用工具:
> 
> > SQLyog,Idea,Hbuider

## 数据库 ##

1.登录人与角色表

> 直接记录,操作人id与角色id  
> ![在这里插入图片描述][0255c1e6a4b348eca53fc4549b2a1cf5.png]

2.角色表与操作菜单表

> 存入角色id,与菜单id即可  
> ![在这里插入图片描述][e21ecaf19a014fb0be886f1c48c2ac57.png]

3.操作人表, 角色表,以及菜单表

> 操作人表![在这里插入图片描述][4f9aab390d994dd896005eb98187d399.png]

> 角色表  
> ![在这里插入图片描述][ed4c3d7ba21d49e9ad5fffeaa1b7da8a.png]

> 菜单表  
> ![在这里插入图片描述][cf2269b3f1314ed296e5545f1bd0526a.png]

## 后端 ##

发送菜单视图数据**过程** :

> 1.我们将在后端由登录人信息来生成token, 顺便传给前端  
> 2.前端每次发送请求携带token发给后端,来验证token是否相同,确保高安全性,  
> 3.同时前端可以**将操作人的id与type放进token里,在后端用的时候从中解析出来即可**  
> 4.后端再**根据token里的id,type来查询菜单视图**,返回给前端

**不知道token是什么的同学可以[点击这里][Link 1]**

> **生成token**
> 
> > 咱用JWT方式来生成token>>  
> > ![在这里插入图片描述][c269ad284f384948bc431ac8baae52c6.png]>>通过JWT加密规则由admin里的id,account,type来生成token令牌>

> **响应数据**  
> 这里是Controller层
> 
> > ![在这里插入图片描述][c1e87b08a88d421c835cfbf02653692d.png]  
> > 前三行代码就是通过token来获取id,type
> > 
> > > 随后就会通过逻辑处理层,Dao层调用SQL来查询返回对应的菜单列表

> **Mapper文件**
> 
> > ![在这里插入图片描述][a0a4d6f5a6554f468f639fb00937a5d0.png]

## 前端 ##

**`在这之前,操作菜单是固定,现在要动态循环出操作菜单`**

> 在加载完Main组件,就向后端发送请求**获取到该角色的操作菜单**  
> ![在这里插入图片描述][8adc0ad721cb413daefa187726b5ca95.png]

> 在vue对象定义数组,来**接收角色的操作菜单列表**  
> ![在这里插入图片描述][2ba030176ff2441dbfb0a3e5e7f45d93.png]

> 在前端将操作菜单循环出来  
> ![在这里插入图片描述][45da9abad9be4cb7a4c0fc530bccd70f.png]
> 
> > 这里的`index`就是`<el-menu-item>`里所绑定的**组件路由地址**

前端我们可以用请求拦截器, 在发送前,可以将部分数据放到请求头里面

## 效果展示 ##

admin的操作菜单  
![在这里插入图片描述][e0cf422039d24d7ea9c9259ba55f7d2c.png]

Jim的操作菜单

![在这里插入图片描述][1dfc2e877c2b4bc0a73be478398328b9.png]

[0255c1e6a4b348eca53fc4549b2a1cf5.png]: https://img-blog.csdnimg.cn/0255c1e6a4b348eca53fc4549b2a1cf5.png
[e21ecaf19a014fb0be886f1c48c2ac57.png]: https://img-blog.csdnimg.cn/e21ecaf19a014fb0be886f1c48c2ac57.png
[4f9aab390d994dd896005eb98187d399.png]: https://img-blog.csdnimg.cn/4f9aab390d994dd896005eb98187d399.png
[ed4c3d7ba21d49e9ad5fffeaa1b7da8a.png]: https://img-blog.csdnimg.cn/ed4c3d7ba21d49e9ad5fffeaa1b7da8a.png
[cf2269b3f1314ed296e5545f1bd0526a.png]: https://img-blog.csdnimg.cn/cf2269b3f1314ed296e5545f1bd0526a.png
[Link 1]: http://t.csdn.cn/calat
[c269ad284f384948bc431ac8baae52c6.png]: https://img-blog.csdnimg.cn/c269ad284f384948bc431ac8baae52c6.png
[c1e87b08a88d421c835cfbf02653692d.png]: https://img-blog.csdnimg.cn/c1e87b08a88d421c835cfbf02653692d.png
[a0a4d6f5a6554f468f639fb00937a5d0.png]: https://img-blog.csdnimg.cn/a0a4d6f5a6554f468f639fb00937a5d0.png
[8adc0ad721cb413daefa187726b5ca95.png]: https://img-blog.csdnimg.cn/8adc0ad721cb413daefa187726b5ca95.png
[2ba030176ff2441dbfb0a3e5e7f45d93.png]: https://img-blog.csdnimg.cn/2ba030176ff2441dbfb0a3e5e7f45d93.png
[45da9abad9be4cb7a4c0fc530bccd70f.png]: https://img-blog.csdnimg.cn/45da9abad9be4cb7a4c0fc530bccd70f.png
[e0cf422039d24d7ea9c9259ba55f7d2c.png]: https://img-blog.csdnimg.cn/e0cf422039d24d7ea9c9259ba55f7d2c.png
[1dfc2e877c2b4bc0a73be478398328b9.png]: https://img-blog.csdnimg.cn/1dfc2e877c2b4bc0a73be478398328b9.png