AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【学生管理系统】权限管理之用户管理（二）

2023-02-10 64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【学生管理系统】权限管理之用户管理

编写Controller


package com.czxy.classes.controller;
​
import com.czxy.classes.config.JwtProperties;
import com.czxy.classes.utils.JwtUtils;
import com.czxy.domain.TbUser;
import com.czxy.classes.service.TbUserService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
​
import javax.annotation.Resource;
import java.util.List;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/user")
public class TbUserController {
    @Resource
    private TbUserService tbUserService;
​
    @GetMapping
    public BaseResult findAll() {
        List<TbUser> list = tbUserService.findAll();
        return BaseResult.ok("查询成功", list);
    }
​
​
}
​

2）前端

<template>
  <div>
    <!-- 列表start -->
    <el-table
      :data="userList"
      stripe
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="uid"
        label="用户ID"
        fixed
        width="80">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="80">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? '男': '女'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="image"
        label="头像"
        width="80">
        <template slot-scope="scope">
          <el-avatar size="20" :src="scope.row.image"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        width="300">
        <template slot-scope="scope">
          <el-tag v-for="(role,index) in scope.row.roleList" :key="index" closable>{{role.roleName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作" 
        fixed="right">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表end -->
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    async findAllUser() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/user')
      // 处理
      if(baseResult.code == 20000) {
        this.userList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
  },
  mounted() {
    // 查询所有的用户
    this.findAllUser()
  },
}
</script>
​
<style>
​
</style>

6.2.2 核心1：给用户授予角色

1）分析

  • 前置功能：查询所有的角色
  • 核心：给用户授予角色
  • 完成修改的部分功能，将用户选择的角色更新到数据库（先删除、后添加）
  • 后端：用户角色直接操作，给一个用户，添加一组角色
  • 前端：弹出框，直接使用table中的数据填充前端额下拉列表

2）前置功能：查询所有的角色-后端


a79f2ec8abbc4b0fa070985241d12e58.png

package com.czxy.classes.controller;
​
import com.czxy.classes.service.SysRoleService;
import com.czxy.sys.SysRole;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
import javax.annotation.Resource;
import java.util.List;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/role")
public class SysRoleController {
    @Resource
    private SysRoleService sysRoleService;
​
    @GetMapping
    public BaseResult findAll() {
        List<SysRole> list = sysRoleService.list();
        return BaseResult.ok("查询成功", list);
    }
​
​
}

3）核心：给用户授予角色-后端

用户角色直接操作，给一个用户，添加一组角色

编写mapper：通过uid删除关联信息

编写service：先删除后，后添加

编写controller

编写mapper：通过uid删除关联信息


eb61fd6211f647c2b26d61c301834d41.png

package com.czxy.classes.mapper;
​
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.sys.SysRole;
import com.czxy.sys.SysUserRole;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Mapper
public interface SysUserRoleMapper extends BaseMapper<SysUserRole> {
    @Delete("DELETE FROM sys_user_role WHERE user_id = #{uid}")
    int deleteByUid(@Param("uid") String uid);
}
​

编写service：先删除后，后添加

db9f60d11e7f42e18323f03c145ede82.png

package com.czxy.classes.service;
​
import com.baomidou.mybatisplus.extension.service.IService;
import com.czxy.domain.TbUser;
import com.czxy.sys.SysUserRole;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Service
@Transactional
public interface SysUserRoleService extends IService<SysUserRole> {
    /**
     * 给指定用户收取角色
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @return
     */
    void addRoleWithUser(TbUser tbUser);
}
​

package com.czxy.classes.service.impl;
​
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.classes.mapper.SysUserRoleMapper;
import com.czxy.classes.service.SysUserRoleService;
import com.czxy.domain.TbUser;
import com.czxy.sys.SysUserRole;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Service
@Transactional
public class SysUserRoleServiceImpl extends ServiceImpl<SysUserRoleMapper, SysUserRole> implements SysUserRoleService {
​
    @Override
    public void addRoleWithUser(TbUser tbUser) {
​
        //1 删除
        baseMapper.deleteByUid(tbUser.getUid());
​
        //2 添加
        for (Integer roleId : tbUser.getRoleIds()) {
            SysUserRole sysUserRole = new SysUserRole(tbUser.getUid(), roleId);
            baseMapper.insert(sysUserRole);
        }
    }
}
​

编写controller

33d13b3170574bd3b149b5ff60877a04.png

package com.czxy.classes.controller;
​
import com.czxy.classes.service.SysUserRoleService;
import com.czxy.domain.TbUser;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
import javax.annotation.Resource;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/userRole")
public class SysUserRoleController {
    @Resource
    private SysUserRoleService sysUserRoleService;
​
    @PostMapping("/addRoleWithUser")
    public BaseResult addRoleWithUser(@RequestBody TbUser tbUser) {
        // 给用户添加角色
        sysUserRoleService.addRoleWithUser(tbUser);
        return BaseResult.ok("授权成功");
    }
​
​
}

4）前置功能：查询所有的角色-后端

5）核心：给用户授予角色-前端


<template>
  <div>
    <!-- 列表start -->
    <el-table
      :data="userList"
      stripe
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="uid"
        label="用户ID"
        fixed
        width="80">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="80">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? '男': '女'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="image"
        label="头像"
        width="80">
        <template slot-scope="scope">
          <el-avatar :size="20" :src="scope.row.image"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        width="300">
        <template slot-scope="scope">
          <el-tag v-for="(role,index) in scope.row.roleList" :key="index" closable>{{role.roleName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作" 
        fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="openRoleDialog(scope.row)">授权</el-button>
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表end -->
​
    <!-- 弹出框 start -->
    <el-dialog title="授权" :visible.sync="dialogRoleVisible">
      <el-form :model="user" label-width="80px">
        <el-form-item label="角色列表">
          <el-select v-model="user.roleIds" multiple placeholder="请选择角色">
            <el-option v-for="(role,index) in roleList" :key="index" :label="role.roleName" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      {{user}}
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoleWithUser">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出框 end -->
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      userList: [],
      dialogRoleVisible: false,
      user: {},
      roleList: []
    }
  },
  methods: {
    async findAllUser() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/user')
      // 处理
      if(baseResult.code == 20000) {
        this.userList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllRole() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/role')
      // 处理
      if(baseResult.code == 20000) {
        this.roleList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    openRoleDialog(user) {
      // 查询所有角色
      this.findAllRole()
      // 填充表单
      this.user.uid = user.uid
      // 处理数据:从role对象过滤出role.id
      // this.user.roleIds = user.roleList.map(role => role.id)   //只能回显，不能操作
      this.$set(this.user, 'roleIds', user.roleList.map(role => role.id))
      // 打开弹出框
      this.dialogRoleVisible = true
    },
    async addRoleWithUser() {
      // ajax
      let { data: baseResult } = await this.$axios.post('/user-service/userRole/addRoleWithUser', this.user)
      // 处理
      if(baseResult.code == 20000) {
        // 成功
        this.$message.success(baseResult.message)
        // 刷新页面
        this.findAllUser()
        // 关闭弹出框
        this.dialogRoleVisible = false
      } else {
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询所有的用户
    this.findAllUser()
  },
}
</script>
​
<style>
​
</style>
文章标签：
前端开发
数据安全/隐私保护
数据库
陶然同学
目录
相关文章
_殊途
|
5月前
学生管理系统-登录操作设计
学生管理系统-登录操作设计
_殊途
40 1
大道不孤，众行致远
|
6月前
平台组成-用户管理
用户管理是整个平台共享的模块，包括用户的开通、属性修改、角色管理、授权管理等功能。
大道不孤，众行致远
50 0
逻辑峰
|
关系型数据库 MySQL 数据库
mysql数据库用户管理和权限控制
mysql数据库用户管理和权限控制
逻辑峰
90 0
陶然同学
|
数据库 数据安全/隐私保护
【学生管理系统】权限管理之用户管理（一）
【学生管理系统】权限管理之用户管理
陶然同学
155 0
【学生管理系统】权限管理之用户管理（一）
陶然同学
|
前端开发 NoSQL 中间件
【学生管理系统】权限管理
【学生管理系统】权限管理
陶然同学
146 0
【学生管理系统】权限管理
陶然同学
|
缓存 前端开发 数据安全/隐私保护
【学生管理系统】权限管理之角色管理
【学生管理系统】权限管理之角色管理
陶然同学
126 0
【学生管理系统】权限管理之角色管理
阿里云社区
|
测试技术 数据库 数据安全/隐私保护
权限管理-功能测试 | 学习笔记
快速学习 权限管理-功能测试
阿里云社区
171 0
权限管理-功能测试 | 学习笔记
云内容小助手
|
Shell Linux 数据安全/隐私保护
用户管理命令 | 学习笔记（二）
快速学习用户管理命令。
云内容小助手
125 0
云内容小助手
|
Linux 数据安全/隐私保护 开发者
用户管理命令 | 学习笔记（一）
快速学习用户管理命令。
云内容小助手
97 0
喵叔哟
|
SQL 存储 关系型数据库
十七、用户管理
十七、用户管理
喵叔哟
150 0
十七、用户管理