《尚品甄选》:权限管理之角色管理(debug一遍)

本文详细介绍了后台管理系统中的权限管理,包括角色定义、表结构设计(如用户、角色、菜单表之间的关系)、角色查询(模糊搜索与分页)、角色添加、修改和删除操作,以及SQL语句示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


在这里插入图片描述

一、权限管理介绍

在后台管理系统中,权限管理是指为了保证系统操作的安全性和可控性,对用户的操作权限进行限制和管理。简单的来说就是某一个用户可以使用我们系统的哪些功能。比如:管理员可以使用后台管理系统中的所有功能,普通业务人员只能使用系统中的一部分的功能。因此,权限管理是后台管理系统中的一个重要功能模块。

二、表结构的设计

一般来说,权限管理包括以下几个方面:

  • 用户管理:通过对用户进行账号、密码、角色等信息的管理。

  • 角色管理:将多个用户分组,并根据所属角色的权限区分用户的访问权限。

  • 菜单管理:对系统的菜单进行管理,根据用户或角色的权限动态生成可访问的菜单列表。

  • 日志管理:记录系统的操作日志,方便用户或管理员查看系统运行情况,以及对不当操作进行追踪和处理。


为了方便理解,权限管理所涉及到数据库表以及其对应关系可以简单如下表示:

用户lucy担任的角色是总经理,其权限是可以操作所有菜单;用户mary担任的角色是销售人员,其权限仅仅是操作商品管理。
在这里插入图片描述

一个用户可以担任多个角色,反之亦然,因此用户表与角色表是多对多的关系;一个角色操作多个菜单,一个菜单可以被多个角色操作,因此角色表与菜单表也是多对多的关系。为了建立用户表与角色表的联系,需要建立角色用户关系表,用来存储uid与roleid;同样,也需要建立角色菜单关系表,通过roleid与mid来建立角色表与菜单表的联系

在这里插入图片描述
此次来完成管理角色功能模块,因此来看看角色表具体是如何设计的:

CREATE TABLE `sys_role` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '角色id',
  `role_name` varchar(20) NOT NULL DEFAULT '' COMMENT '角色名称',
  `role_code` varchar(20) DEFAULT NULL COMMENT '角色编码',
  `description` varchar(255) DEFAULT NULL COMMENT '描述',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `is_deleted` tinyint NOT NULL DEFAULT '0' COMMENT '删除标记(0:可用 1:不可用)',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=utf8mb3 COMMENT='角色'

三、查询角色

需求说明:
1、如果在搜索表单中输入角色名称,此时就需要按照角色名称进行模糊查询
2、搜索的时候需要进行分页搜索

我们来debug走一遍流程:输入"人员"进行模糊搜索

在这里插入图片描述
点击搜索,首先来到controller层,可以看到,该层接收到前端传来的参数。默认当前页是第一页,每页大小为3。

在这里插入图片描述
进入到service层,通过模糊查询,我们可以看到查询到了3条数据,保存在List列表中。
在这里插入图片描述
返回的pageInfo是分页插件自带的,包含很多信息。
在这里插入图片描述
最后来看看SQL是如何编写的:

    <!--    List<SysRole> findByPage(SysRoleDto sysRoleDto);-->
    <select id="findByPage" resultType="com.atguigu.spzx.model.entity.system.SysRole">
        select * from sys_role
        <where>
            <if test="roleName != null and roleName != ''">
                and role_name like concat('%',#{roleName},'%')
            </if>
            and is_deleted = 0
        </where>
        order by id desc
    </select>

四、添加角色

需求说明:
当用户点击添加按钮的时候,弹出对话框,在该对话框中需要展示添加角色表单。当用户在该表单中点击提交按钮的时候那么此时就需要将表单进行提交,在后端需要提交过来的表单数据保存到数据库中即可。页面效果如下所示:
在这里插入图片描述
让我们来debug一遍:

首先来到controller层,用实体类来封装前端发送来的数据。
在这里插入图片描述

service层也很简单,就是调用mapper层接口,把用户数据插入数据库。
在这里插入图片描述
SQL也很简单,让我们来看看:

    @Insert("insert into sys_role(role_name,role_code,description) values (#{roleName},#{roleCode},#{description})")
    void save(SysRole sysRole);

五、修改角色

需求说明:
当用户点击修改按钮的时候,弹出对话框,在该对话框中需要将当前行所对应的角色数据在该表单页面进行展示。当用户在该表单中点击提交按钮的时候那么此时就需要将表单进行提交,在后端需要提交过来的表单数据修改数据库中的即可。页面效果如下所示:
在这里插入图片描述

让我们来debug一遍:跟之前一样,也是先来到controller层,用实体类接收修改后的数据
在这里插入图片描述
service层继续调用mapper接口,实现修改功能
在这里插入图片描述

让我们看看修改的SQL语句是如何编写的:

<!--    void update(SysRole sysRole);-->
    <update id="update">
        update sys_role set
        <if test="roleName != null and roleName != ''">
            role_name = #{roleName},
        </if>
        <if test="roleCode != null and roleCode != ''">
            role_code = #{roleCode},
        </if>
        <if test="description != null and description != ''">
            description = #{description},
        </if>
        update_time = now()
        where
        id = #{id}
    </update>

六、删除角色

需求说明:
当点击删除按钮的时候此时需要弹出一个提示框,询问是否需要删除数据?如果用户点击是,那么此时向后端发送请求传递id参数,后端接收id参数进行逻辑删除。页面效果如下所示:
在这里插入图片描述
话不多说,继续debug一遍:controller层首先获取到要删除角色的id值

在这里插入图片描述

接着service层获取id值,调用mapper接口,实现逻辑删除,事实上就是执行更新语句。
在这里插入图片描述
SQL语句编写如下:

    <!--    void delete(Long roleId);-->
    <update id="delete">
        update sys_role set
        update_time = now(),
        is_deleted = 1
        where
        id = #{roleId}
    </update>
### 尚硅谷尚品甄选前端实现与学习资源 #### 一、项目概述 尚硅谷尚品甄选是一个综合性的电商类项目,其前端部分主要基于Vue框架构建。该项目旨在帮助开发者掌握前后端分离开发模式下的实际应用技能[^1]。 #### 二、技术栈分析 尚品甄选项目的前端采用了现代Web开发的技术栈,主要包括以下几个方面: - **Vue.js**: Vue作为核心框架负责页面渲染和状态管理。 - **Vuex**: 对于复杂的数据流场景,使用Vuex来集中管理和共享全局状态[^3]。 - **Axios**: 负责处理HTTP请求,用于从前端向后端发送数据并接收响应[^2]。 - **Element UI / Ant Design Vue**: 提供丰富的UI组件库支持快速搭建界面布局。 #### 三、常见问题及其解决方案 针对验证码图片无法显示的问题,在`api/login.js`以及`utils/request.js`中调整基础路径设置可以有效解决问题。具体操作为修正baseUrl定义位置避免重复拼接造成URL异常情况发生。 ```javascript // utils/request.js 修改示例 import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 动态读取环境变量中的API地址 timeout: 5000, }); export default service; ``` #### 四、推荐的学习资源 对于希望深入理解尚品甄选项目或者提升自己在类似电商平台上的实战能力的同学来说,可以从以下几处着手获取资料: 1. 官方文档:熟悉Vue官方指南以及其他依赖工具如Vuex、Router等的基础教程; 2. 黑马程序员相关课程:提供完整的Java SE基础知识到高级企业级架构设计思路讲解; 3. 社区讨论与案例分享:参与GitHub开源社区寻找同类项目源码研究他人优秀实践方法; #### 五、总结建议 初学者应先打好HTML/CSS/JavaScript三大基石后再逐步接触MVVM思想进而过渡至更复杂的单页应用程序(SPA)制作流程当中去。随着经验积累适时引入状态管理模式优化大型系统的可维护性和扩展性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是一棵卷心菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值