设计一个简单的权限管理系统

权限管理系统

权限管理是企业级项目其中的一个模块,用于用户登录验证,权限和角色分配以及增删改查,提升系统的安全性。

基于RBAC权限控制,涉及的对象:

  1. 用户
  2. 角色
  3. 权限

涉及的功能:

  1. 登录
  2. 主页面
  3. 菜单显示,不同的用户展示不同菜单
  4. 用户的增删改查+分页
  5. 用户的角色授权
  6. 角色的增删改查+分页
  7. 角色的权限授权
  8. 权限的增删改查+分页

涉及的技术:

  1. SpringBoot
  2. SpringMVC
  3. MyBatis
  4. SpringSecurity
  5. Thymeleaf
  6. Vue
  7. ElementUI

页面截图:

登录
设计一个简单的权限管理系统_第1张图片

主页面
设计一个简单的权限管理系统_第2张图片

角色管理

设计一个简单的权限管理系统_第3张图片

登录

RESTFul + Vue + Axios + ElementUI

登录页面思路:

  1. 导入相关的js和css
  2. 创建Vue对象,配置el和data…
  3. 使用ElementUI
  4. 使用Axios调用登录接口

分析:

  1. 需要向后台传递什么数据 —> 账号、密码、记住我
  2. 在data中定义相关的数据
  3. 在页面中进行数据绑定 v-model

后台:

​ 如何使SpringSecurity处理登录请求,直接返回数据

​ 将SpringSecurity配置页面跳转的位置改为用流返回数据结果

思考题:

​ 根据用户名查询相关的权限包含下级权限

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Functions {

  private String id;
  private String name;
  private String description;
  private String url;
  private String pid;
  private String icon;
  private long sort;

  //下级权限
  private List subFunctions;
}

主界面

确定需求:实现权限菜单的上下级展示

  1. 修改权限实体类,添加下级权限集合
  2. 在权限DAO中添加按用户名查询权限的方法
  3. 在mapper编写SQL语句(先在NaviCAt中进行试验)
  4. 在IDEA的单元测试中测试DAO
  5. 完成service
  6. 完成controller,整合Swagger测试
  7. 前端编写Vue,定义权限列表数据,查ElementUI文档

角色分页

  1. 定义实体类包装分页数据(数据列表、当前页、总页数、总行数)
  2. 完成查询总行数
  3. 完成分页查询列表
  4. 整合到service
  5. 由controller调用,传入当前页

角色授权

角色的授权

设计一个简单的权限管理系统_第4张图片

功能需求:

  1. 表格的单选效果
  2. 添加对话框,包含树控件
  3. 展示所有的权限
  4. 将选择的角色所拥有的权限勾中
  5. 勾中权限后实现权限的添加
  6. 取消勾中删除角色的权限

单选效果

  1. 添加复选框列

  1. 定义data,当前选择的角色
  2. 在表格的@current-change事件中调用函数
  3. 函数中实现全部取消和选择当前角色

选中角色对应的权限

  1. 查询对应角色所有的权限
  2. 弹出角色授权对话框时,查询角色的权限,实现权限勾中

勾选和取消勾选权限

  1. 完成查询角色权限关系、添加角色权限关系、删除角色权限关系接口
    ange事件中调用函数
  2. 函数中实现全部取消和选择当前角色

选中角色对应的权限

  1. 查询对应角色所有的权限
  2. 弹出角色授权对话框时,查询角色的权限,实现权限勾中

勾选和取消勾选权限

  1. 完成查询角色权限关系、添加角色权限关系、删除角色权限关系接口
  2. 在树节点的勾选和取消勾选事件调用

你可能感兴趣的:(SpringBoot,vue.js,elementui,javascript)