尚硅谷java项目＜云尚办公系统＞超详细(四)用户管理&菜单管理

一、用户管理

1、用户管理CRUD(service-oa模块)

1.1、Mapper

package com.atguigu.auth.mapper;
/**
 * 

 * 用户表 Mapper 接口
 * 
 *
 * @author atguigu
 * @since 2023-02-02
 */
import com.atguigu.model.system.SysUser;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface SysUserMapper extends BaseMapper {

}

1.2、service接口

SysUserService接口

package com.atguigu.system.service;


import com.atguigu.model.system.SysUser;
import com.atguigu.vo.system.SysUserQueryVo;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;

public interface SysUserService extends IService {

}

1.3、service接口实现

SysUserServiceImpl实现

package com.atguigu.system.service.impl;

import com.atguigu.model.system.SysUser;
import com.atguigu.system.mapper.SysUserMapper;
import com.atguigu.system.service.SysUserService;
import com.atguigu.vo.system.SysUserQueryVo;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class SysUserServiceImpl extends ServiceImpl implements SysUserService {

}

1.4、controller

package com.atguigu.auth.controller;

import com.atguigu.auth.service.SysUserService;
import com.atguigu.common.result.Result;
import com.atguigu.model.system.SysUser;
import com.atguigu.vo.system.SysUserQueryVo;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/admin/system/sysUser")
public class SysUserController {

    @Autowired
    private SysUserService service;

    //用户条件分页查询
    @ApiOperation("用户条件分页查询")
    @GetMapping("{page}/{limit}")
    public Result index(@PathVariable Long page,
                        @PathVariable Long limit,
                        SysUserQueryVo sysUserQueryVo) {
        //创建page对象
        Page pageParam = new Page<>(page,limit);

        //封装条件，判断条件值不为空
        LambdaQueryWrapper wrapper = new LambdaQueryWrapper<>();
        //获取条件值
        String username = sysUserQueryVo.getKeyword();
        String createTimeBegin = sysUserQueryVo.getCreateTimeBegin();
        String createTimeEnd = sysUserQueryVo.getCreateTimeEnd();
        //判断条件值不为空
        //like 模糊查询
        if(!StringUtils.isEmpty(username)) {
            wrapper.like(SysUser::getUsername,username);
        }
        //ge 大于等于
        if(!StringUtils.isEmpty(createTimeBegin)) {
            wrapper.ge(SysUser::getCreateTime,createTimeBegin);
        }
        //le 小于等于
        if(!StringUtils.isEmpty(createTimeEnd)) {
            wrapper.le(SysUser::getCreateTime,createTimeEnd);
        }

        //调用mp的方法实现条件分页查询
        IPage pageModel = service.page(pageParam, wrapper);
        return Result.ok(pageModel);
    }

    @ApiOperation(value = "获取用户")
    @GetMapping("get/{id}")
    public Result get(@PathVariable Long id) {
        SysUser user = service.getById(id);
        return Result.ok(user);
    }

    @ApiOperation(value = "保存用户")
    @PostMapping("save")
    public Result save(@RequestBody SysUser user) {
        service.save(user);
        return Result.ok();
    }

    @ApiOperation(value = "更新用户")
    @PutMapping("update")
    public Result updateById(@RequestBody SysUser user) {
        service.updateById(user);
        return Result.ok();
    }

    @ApiOperation(value = "删除用户")
    @DeleteMapping("remove/{id}")
    public Result remove(@PathVariable Long id) {
        service.removeById(id);
        return Result.ok();
    }
}

1.5knife4j测试

http://localhost:8800/doc.html

2.用户管理前端实现

2.1、添加路由

修改 src/router/index.js 文件

{
  path: '/system',
  component: Layout,
  meta: {
    title: '系统管理',
    icon: 'el-icon-s-tools'
  },
  alwaysShow: true,
  children: [
    {
      name: 'sysUser',
      path: 'sysUser',
      component: () => import('@/views/system/sysUser/list'),
      meta: {
        title: '用户管理',
        icon: 'el-icon-s-custom'
      },
    },
    {
      path: 'sysRole',
      component: () => import('@/views/system/sysRole/list'),
      meta: {
        title: '角色管理',
        icon: 'el-icon-s-help'
      },
    }
  ]
},

2.2、定义基础api

创建文件 src/api/system/sysUser.js

import request from '@/utils/request'

const api_name = '/admin/system/sysUser'

export default {

  getPageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/${page}/${limit}`,
      method: 'get',
      params: searchObj // url查询字符串或表单键值对
    })
  },
  getById(id) {
    return request({
      url: `${api_name}/get/${id}`,
      method: 'get'
    })
  },

  save(role) {
    return request({
      url: `${api_name}/save`,
      method: 'post',
      data: role
    })
  },

  updateById(role) {
    return request({
      url: `${api_name}/update`,
      method: 'put',
      data: role
    })
  },
  removeById(id) {
    return request({
      url: `${api_name}/remove/${id}`,
      method: 'delete'
    })
  }
}

2.3、实现页面功能

创建src/views/system/sysUser/list.vue

二、给用户分配角色及更改用户状态

1、给用户分配角色

1.1、接口分析

1、进入分配页面：获取已分配角色与全部角色，进行页面展示

2、保存分配角色：删除之前分配的角色和保存现在分配的角色

1.2、controller方法

操作类：SysRoleController 添加以下代码

@ApiOperation(value = "根据用户获取角色数据")
@GetMapping("/toAssign/{userId}")
public Result toAssign(@PathVariable Long userId) {
    Map roleMap = sysRoleService.findRoleByAdminId(userId);
    return Result.ok(roleMap);
}

@ApiOperation(value = "根据用户分配角色")
@PostMapping("/doAssign")
public Result doAssign(@RequestBody AssginRoleVo assginRoleVo) {
    sysRoleService.doAssign(assginRoleVo);
    return Result.ok();
}

1.3、service接口

操作类：SysRoleService

/**
 * 根据用户获取角色数据
 * @param userId
 * @return
 */
Map findRoleByAdminId(Long userId);

/**
 * 分配角色
 * @param assginRoleVo
 */
void doAssign(AssginRoleVo assginRoleVo);

1.4、service接口实现

操作类：SysRoleServiceImpl

@Autowired
private SysUserRoleMapper sysUserRoleMapper;

@Override
public Map findRoleByUserId(Long userId) {
    //查询所有的角色
    List allRolesList = this.list();

    //拥有的角色id
    List existUserRoleList = sysUserRoleMapper.selectList(new LambdaQueryWrapper().eq(SysUserRole::getUserId, userId).select(SysUserRole::getRoleId));
    List existRoleIdList = existUserRoleList.stream().map(c->c.getRoleId()).collect(Collectors.toList());

    //对角色进行分类
    List assginRoleList = new ArrayList<>();
    for (SysRole role : allRolesList) {
        //已分配
        if(existRoleIdList.contains(role.getId())) {
            assginRoleList.add(role);
        }
    }

    Map roleMap = new HashMap<>();
    roleMap.put("assginRoleList", assginRoleList);
    roleMap.put("allRolesList", allRolesList);
    return roleMap;
}

@Transactional
@Override
public void doAssign(AssginRoleVo assginRoleVo) {
    sysUserRoleMapper.delete(new LambdaQueryWrapper().eq(SysUserRole::getUserId, assginRoleVo.getUserId()));

    for(Long roleId : assginRoleVo.getRoleIdList()) {
        if(StringUtils.isEmpty(roleId)) continue;
        SysUserRole userRole = new SysUserRole();
        userRole.setUserId(assginRoleVo.getUserId());
        userRole.setRoleId(roleId);
        sysUserRoleMapper.insert(userRole);
    }
}

1.5、添加SysUserRoleMapper类

package com.atguigu.system.mapper;

import com.atguigu.model.system.SysUserRole;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface SysUserRoleMapper extends BaseMapper {

}

2更改用户状态

2.1、需求分析

用户状态：状态（1：正常 0：停用），当用户状态为正常时，可以访问后台系统，当用户状态停用后，不可以登录后台系统

2.2、controller方法

操作类：SysUserController

@ApiOperation(value = "更新状态")
@GetMapping("updateStatus/{id}/{status}")
public Result updateStatus(@PathVariable Long id, @PathVariable Integer status) {
    sysUserService.updateStatus(id, status);
    return Result.ok();
}

2.3、service接口

操作类：SysUserService 添加以下代码

void updateStatus(Long id, Integer status);

2.4、service接口实现

操作类：SysUserServiceImpl

@Transactional
@Override
public void updateStatus(Long id, Integer status) {
   SysUser sysUser = this.getById(id);
   if(status.intValue() == 1) {
      sysUser.setStatus(status);
   } else {
      sysUser.setStatus(0);
   }
   this.updateById(sysUser);
}

3、前端实现更改用户状态

3.1、添加api

src/api/system/sysUser.js

updateStatus(id, status) {
  return request({
    url: `${api_name}/updateStatus/${id}/${status}`,
    method: 'get'
  })
}

src/api/system/sysRole.js

getRoles(adminId) {
  return request({
    url: `${api_name}/toAssign/${adminId}`,
    method: 'get'
  })
},

assignRoles(assginRoleVo) {
  return request({
    url: `${api_name}/doAssign`,
    method: 'post',
    data: assginRoleVo
  })
}

3.2、修改页面

更改src/views/system/sysUser/list.vue

三、菜单管理

1.菜单管理需求

1.1需求描述

不同角色的用户登录后台管理系统拥有不同的菜单权限与功能权限，我们前端是基于：vue-admin-template这个模块开发的，因此我们菜单表设计也必须基于前端模板进行设计。

前端框架vue-admin-template菜单其实就是我们配置的路由：

{
  path: '/system',
  component: Layout,
  meta: {
    title: '系统管理',
    icon: 'el-icon-s-tools'
  },
  alwaysShow: true,
  children: [
    {
      name: 'sysUser',
      path: 'sysUser',
      component: () => import('@/views/system/sysUser/list'),
      meta: {
        title: '用户管理',
        icon: 'el-icon-s-custom'
      },
    },
    {
      path: 'sysRole',
      component: () => import('@/views/system/sysRole/list'),
      meta: {
        title: '角色管理',
        icon: 'el-icon-s-help'
      },
    },
    {
      name: 'sysMenu',
      path: 'sysMenu',
      component: () => import('@/views/system/sysMenu/list'),
      meta: {
        title: '菜单管理',
        icon: 'el-icon-s-unfold'
      },
    },
    {
      path: 'assignAuth',
      component: () => import('@/views/system/sysRole/assignAuth'),
      meta: {
        activeMenu: '/system/sysRole',
        title: '角色授权'
      },
      hidden: true,
    }
  ]
}

因此，菜单表的设计必须满足路由配置的必要信息

1.2菜单表设计

2.1、表结构

重点字段说明：

type：菜单类型，分为：目录、菜单与按钮

目录：一个分类（可理解为一级菜单）、目录下级节点可以为目录与菜单

菜单：一个具体页面，菜单的下级节点只能是按钮

按钮：页面上的功能

path：对应路由里面的路由地址path

component：对应路由里面的组件component

perms：对应菜单的功能权限标识

icom：对应路由的菜单图标

2.2、页面效果

2、菜单管理CRUD

2.1、Mapper

package com.atguigu.system.mapper;


import com.atguigu.model.system.SysMenu;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
@Mapper
public interface SysMenuMapper extends BaseMapper {

}

2.2、service接口及实现

SysUserService接口

package com.atguigu.system.service;


import com.atguigu.model.system.SysMenu;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

public interface SysMenuService extends IService {

    /**
     * 菜单树形数据
     * @return
     */
    List findNodes();

}

SysUserServiceImpl实现

package com.atguigu.system.service.impl;

import com.atguigu.common.execption.GuiguException;
import com.atguigu.common.result.ResultCodeEnum;
import com.atguigu.model.system.SysMenu;
import com.atguigu.system.helper.MenuHelper;
import com.atguigu.system.mapper.SysMenuMapper;
import com.atguigu.system.service.SysMenuService;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;

import java.io.Serializable;
import java.util.List;

@Service
public class SysMenuServiceImpl extends ServiceImpl implements SysMenuService {

    @Autowired
    private SysMenuMapper sysMenuMapper;

    @Override
    public List findNodes() {
        //全部权限列表
        List sysMenuList = this.list();
        if (CollectionUtils.isEmpty(sysMenuList)) return null;

        //构建树形数据
        List result = MenuHelper.buildTree(sysMenuList);
        return result;
    }

    @Override
    public boolean removeById(Serializable id) {
        int count = this.count(new LambdaQueryWrapper().eq(SysMenu::getParentId, id));
        if (count > 0) {
            throw new GuiguException(201,"菜单不能删除");
        }
        sysMenuMapper.deleteById(id);
        return false;
    }

}

添加帮助类(service-oa模块)

新建：com.atguigu.auth.utils.MenuHelper

package com.atguigu.auth.utils;


import com.atguigu.model.system.SysMenu;

import java.util.ArrayList;
import java.util.List;

/**
 * 

 * 根据菜单数据构建菜单数据
 * 
 *
 */
public class MenuHelper {

    /**
     * 使用递归方法建菜单
     * @param sysMenuList
     * @return
     */
    public static List buildTree(List sysMenuList) {
        List trees = new ArrayList<>();
        for (SysMenu sysMenu : sysMenuList) {
            if (sysMenu.getParentId().longValue() == 0) {
                trees.add(findChildren(sysMenu,sysMenuList));
            }
        }
        return trees;
    }

    /**
     * 递归查找子节点
     * @param treeNodes
     * @return
     */
    public static SysMenu findChildren(SysMenu sysMenu, List treeNodes) {
        sysMenu.setChildren(new ArrayList());

        for (SysMenu it : treeNodes) {
            if(sysMenu.getId().longValue() == it.getParentId().longValue()) {
                if (sysMenu.getChildren() == null) {
                    sysMenu.setChildren(new ArrayList<>());
                }
                sysMenu.getChildren().add(findChildren(it,treeNodes));
            }
        }
        return sysMenu;
    }
}

2.4、SysMenuController层

package com.atguigu.system.controller;

import com.atguigu.common.result.Result;
import com.atguigu.model.system.SysMenu;
import com.atguigu.system.service.SysMenuService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@Api(tags = "菜单管理")
@RestController
@RequestMapping("/admin/system/sysMenu")
public class SysMenuController {

    @Autowired
    private SysMenuService sysMenuService;

    @ApiOperation(value = "获取菜单")
    @GetMapping("findNodes")
    public Result findNodes() {
        List list = sysMenuService.findNodes();
        return Result.ok(list);
    }

    @ApiOperation(value = "新增菜单")
    @PostMapping("save")
    public Result save(@RequestBody SysMenu permission) {
        sysMenuService.save(permission);
        return Result.ok();
    }

    @ApiOperation(value = "修改菜单")
    @PutMapping("update")
    public Result updateById(@RequestBody SysMenu permission) {
        sysMenuService.updateById(permission);
        return Result.ok();
    }

    @ApiOperation(value = "删除菜单")
    @DeleteMapping("remove/{id}")
    public Result remove(@PathVariable Long id) {
        sysMenuService.removeById(id);
        return Result.ok();
    }

}

2.5、knife4j测试

http://localhost:8800/doc.html

3、用户管理前端实现

3.1、添加路由

修改 src/router/index.js 文件

{
  name: 'sysMenu',
  path: 'sysMenu',
  component: () => import('@/views/system/sysMenu/list'),
  meta: {
    title: '菜单管理',
    icon: 'el-icon-s-unfold'
  },
}

3.2、定义基础api

创建文件 src/api/system/sysMenu.js

import request from '@/utils/request'

/*
菜单管理相关的API请求函数
*/
const api_name = '/admin/system/sysMenu'

export default {

  /*
  获取权限(菜单/功能)列表
  */
  findNodes() {
    return request({
      url: `${api_name}/findNodes`,
      method: 'get'
    })
  },

  /*
  删除一个权限项
  */
  removeById(id) {
    return request({
      url: `${api_name}/remove/${id}`,
      method: "delete"
    })
  },

  /*
  保存一个权限项
  */
  save(sysMenu) {
    return request({
      url: `${api_name}/save`,
      method: "post",
      data: sysMenu
    })
  },

  /*
  更新一个权限项
  */
  updateById(sysMenu) {
    return request({
      url: `${api_name}/update`,
      method: "put",
      data: sysMenu
    })
  }
}

3.3、实现页面功能

创建src/views/system/sysMenu/list.vue

四、给角色分配权限

1、给角色分配权限

1.1、接口分析

1、进入分配页面：获取全部菜单及按钮，选中已选复选框，进行页面展示

2、保存分配权限：删除之前分配的权限和保存现在分配的权限

1.2、controller方法

操作类：SysMenuController 添加以下代码

@ApiOperation(value = "根据角色获取菜单")
@GetMapping("toAssign/{roleId}")
public Result toAssign(@PathVariable Long roleId) {
    List list = sysMenuService.findSysMenuByRoleId(roleId);
    return Result.ok(list);
}

@ApiOperation(value = "给角色分配权限")
@PostMapping("/doAssign")
public Result doAssign(@RequestBody AssignMenuVo assignMenuVo) {
    sysMenuService.doAssign(assignMenuVo);
    return Result.ok();
}

1.3、service接口

操作类：SysMenuService

/**
 * 根据角色获取授权权限数据
 * @return
 */
List findSysMenuByRoleId(Long roleId);

/**
 * 保存角色权限
 * @param  assginMenuVo
 */
void doAssign(AssginMenuVo assginMenuVo);

1.4、service接口实现

1、操作类：SysMenuServiceImpl

@Override
public List findSysMenuByRoleId(Long roleId) {
    //全部权限列表
    List allSysMenuList = this.list(new LambdaQueryWrapper().eq(SysMenu::getStatus, 1));

    //根据角色id获取角色权限
    List sysRoleMenuList = sysRoleMenuMapper.selectList(new LambdaQueryWrapper().eq(SysRoleMenu::getRoleId, roleId));
    //转换给角色id与角色权限对应Map对象
    List menuIdList = sysRoleMenuList.stream().map(e -> e.getMenuId()).collect(Collectors.toList());

    allSysMenuList.forEach(permission -> {
        if (menuIdList.contains(permission.getId())) {
            permission.setSelect(true);
        } else {
            permission.setSelect(false);
        }
    });

    List sysMenuList = MenuHelper.buildTree(allSysMenuList);
    return sysMenuList;
}

@Transactional
@Override
public void doAssign(AssginMenuVo assginMenuVo) {
    sysRoleMenuMapper.delete(new LambdaQueryWrapper().eq(SysRoleMenu::getRoleId, assginMenuVo.getRoleId()));

    for (Long menuId : assginMenuVo.getMenuIdList()) {
        if (StringUtils.isEmpty(menuId)) continue;
        SysRoleMenu rolePermission = new SysRoleMenu();
        rolePermission.setRoleId(assginMenuVo.getRoleId());
        rolePermission.setMenuId(menuId);
        sysRoleMenuMapper.insert(rolePermission);
    }
}

1.5、添加SysRoleMenuMapper类

package com.atguigu.system.mapper;

import com.atguigu.model.system.SysRoleMenu;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface SysRoleMenuMapper extends BaseMapper {

}

2、前端实现

2.1、添加路由

修改 src/router/index.js 文件

{
  path: 'assignAuth',
  component: () => import('@/views/system/sysRole/assignAuth'),
  meta: {
    activeMenu: '/system/sysRole',
    title: '角色授权'
  },
  hidden: true,
}

2.2、角色列表添加按钮及方法

showAssignAuth(row) {
  this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
}

2.3、添加api

创建文件 src/api/system/sysMenu.js

/*
查看某个角色的权限列表
*/
toAssign(roleId) {
  return request({
    url: `${api_name}/toAssign/${roleId}`,
    method: 'get'
  })
},

/*
给某个角色授权
*/
doAssign(assginMenuVo) {
  return request({
    url: `${api_name}/doAssign`,
    method: "post",
    data: assginMenuVo
  })
}

2.4、实现页面功能

创建src/views/system/sysMenu/assignAuth.vue