分配操作菜单

目录

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

概述

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

所以在数据库就要创建:
1.登录人与角色表,
2再给角色表分配操作菜单

登录时查询对应的操作菜单,将数据响应给前端就行

介绍

使用框架 :

前端用Vue-cli脚手架+Element-ui
后端用springboot+mybatis+lamBok
使用

使用工具:

SQLyog,Idea,Hbuider

数据库

1.登录人与角色表

直接记录,操作人id与角色id
分配操作菜单_第1张图片

2.角色表与操作菜单表

存入角色id,与菜单id即可
分配操作菜单_第2张图片

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

操作人表分配操作菜单_第3张图片

角色表
分配操作菜单_第4张图片

菜单表
分配操作菜单_第5张图片

后端

发送菜单视图数据过程 :

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

不知道token是什么的同学可以点击这里

生成token

咱用JWT方式来生成token>>
分配操作菜单_第6张图片>>通过JWT加密规则由admin里的id,account,type来生成token令牌>

响应数据
这里是Controller层

分配操作菜单_第7张图片
前三行代码就是通过token来获取id,type

随后就会通过逻辑处理层,Dao层调用SQL来查询返回对应的菜单列表

Mapper文件

分配操作菜单_第8张图片

前端

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

在加载完Main组件,就向后端发送请求获取到该角色的操作菜单
分配操作菜单_第9张图片

在vue对象定义数组,来接收角色的操作菜单列表
分配操作菜单_第10张图片

在前端将操作菜单循环出来
分配操作菜单_第11张图片

这里的index就是里所绑定的组件路由地址

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

效果展示

admin的操作菜单
分配操作菜单_第12张图片

Jim的操作菜单

分配操作菜单_第13张图片

你可能感兴趣的:(java-ee,后端)