锐客网

  1. 首页 > 睿知 > it技术 > >

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

springbootvue.jsjavascriptelementui

权限管理系统 权限管理是企业级项目其中的一个模块，用于用户登录验证，权限和角色分配以及增删改查，提升系统的安全性。
基于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
页面截图：
登录
SpringBoot|设计一个简单的权限管理系统
文章图片

主页面
SpringBoot|设计一个简单的权限管理系统
文章图片

角色管理
SpringBoot|设计一个简单的权限管理系统
文章图片

登录 RESTFul + Vue + Axios + ElementUI
【SpringBoot|设计一个简单的权限管理系统】登录页面思路：
  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调用，传入当前页
角色授权 角色的授权
SpringBoot|设计一个简单的权限管理系统
文章图片

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

  1. 定义data，当前选择的角色
  2. 在表格的@current-change事件中调用函数
  3. 函数中实现全部取消和选择当前角色
选中角色对应的权限
  1. 查询对应角色所有的权限
  2. 弹出角色授权对话框时，查询角色的权限，实现权限勾中
勾选和取消勾选权限
  1. 完成查询角色权限关系、添加角色权限关系、删除角色权限关系接口
    ange事件中调用函数
  2. 函数中实现全部取消和选择当前角色
选中角色对应的权限
  1. 查询对应角色所有的权限
  2. 弹出角色授权对话框时，查询角色的权限，实现权限勾中
勾选和取消勾选权限
  1. 完成查询角色权限关系、添加角色权限关系、删除角色权限关系接口
  2. 在树节点的勾选和取消勾选事件调用

    推荐阅读


    上一篇：前端相关|JS中的类，函数，对象、原型

    下一篇：计算机|【JavaWeb】常见面试题