编写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）前置功能：查询所有的角色-后端
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删除关联信息
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：先删除后，后添加
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
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>
