一、查询所有用户（关联角色）

1）后端

修改javaBean：List<SysRole> roleList // 用户保存用户对应的角色集合

编写Mapper：使用注解的方式查询关联数据

编写Service

编写Controller

1. 修改javaBean：List<SysRole> roleList

  @TableField(exist = false)
  @JsonInclude(JsonInclude.Include.NON_EMPTY)
  private List<SysRole> roleList = new ArrayList<>();

2. 编写Mapper：使用注解的方式查询关联数据

修改UserMapper：查询所有，含角色

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.domain.TbUser;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface TbUserMapper extends BaseMapper<TbUser> {

    @Select("SELECT * FROM tb_user")
    @Results({
            @Result(property = "uid", column = "u_id"),
            @Result(property = "userName", column = "user_name"),
            @Result(property = "password", column = "password"),
            @Result(property = "gender", column = "gender"),
            @Result(property = "image", column = "image"),
            @Result(property = "roleList", many = @Many(select = "com.czxy.classes.mapper.SysRoleMapper.findAllByUid") , column = "u_id")
    })
    public List<TbUser> findAll();
}

修改RoleMapper：查询指定用户的角色。

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.sys.SysRole;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface SysRoleMapper extends BaseMapper<SysRole> {
    /**
     * 查询指定用户的所有角色
     */
    @Select("SELECT r.* FROM sys_role r, sys_user_role ur WHERE r.id = ur.role_id AND ur.user_id = #{uid}")
    public List<SysRole> findAllByUid(@Param("uid") String uid);
}

编写Service接口及实现类

import com.baomidou.mybatisplus.extension.service.IService;
import com.czxy.domain.TbUser;

import java.util.List;


public interface TbUserService extends IService<TbUser> {

    public List<TbUser> findAll();
}

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.domain.TbUser;
import com.czxy.classes.mapper.TbUserMapper;
import com.czxy.classes.service.TbUserService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class TbUserServiceImpl extends ServiceImpl<TbUserMapper, TbUser> implements TbUserService {

    @Override
    public List<TbUser> findAll() {
        return baseMapper.findAll();
    }
}

编写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;

@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>