18版本新增权限菜单管理功能（第三部分）

要实现图标功能&＃xff0c;首先是后端建表

1. 建dict表

DROP TABLE IF EXISTS &＃96;dict&＃96;;
CREATE TABLE &＃96;dict&＃96; (
&＃96;name&＃96; varchar(255) DEFAULT NULL COMMENT &＃39;名称&＃39;,
&＃96;value&＃96; varchar(255) DEFAULT NULL COMMENT &＃39;内容&＃39;,
&＃96;type&＃96; varchar(255) DEFAULT NULL COMMENT &＃39;类型&＃39;
) ENGINE&＃61;InnoDB DEFAULT CHARSET&＃61;utf8;
insert into &＃96;dict&＃96;(&＃96;name&＃96;,&＃96;value&＃96;,&＃96;type&＃96;) values
(&＃39;user&＃39;,&＃39;el-icon-user&＃39;,&＃39;icon&＃39;),
(&＃39;house&＃39;,&＃39;el-icon-house&＃39;,&＃39;icon&＃39;),
(&＃39;menu&＃39;,&＃39;el-icon-menu&＃39;,&＃39;icon&＃39;),
(&＃39;s-custom&＃39;,&＃39;el-icon-s-custom&＃39;,&＃39;icon&＃39;),
(&＃39;s-menu&＃39;,&＃39;el-icon-s-grid&＃39;,&＃39;icon&＃39;),
(&＃39;file&＃39;,&＃39;el-icon-document&＃39;,&＃39;icon&＃39;);


2. Dict实体类

Dict.java

&＃64;Data
&＃64;AllArgsConstructor
&＃64;NoArgsConstructor
&＃64;TableName("dict")
public class Dict {
private String name;
private String value;
private String type;
}


3. DictMapper.java

&＃64;Repository
public interface DictMapper extends BaseMapper<Dict> {
}


4. DictService.java

&＃64;Service
public class DictService extends ServiceImpl<DictMapper, Dict> {
}


5. 图标功能是在菜单管理里面显示&＃xff0c;所以实现功能写在MenuController中

MenuController.java

//查找图标信息
&＃64;GetMapping("/icons")
public Result getIcons(){
QueryWrapper<Dict> queryWrapper &＃61; new QueryWrapper<>();
//查询type为icon的数据
queryWrapper.eq("type", Constants.DICT_TYPE_ICON);
return Result.success(dictService.list(queryWrapper));
}


6. 前端实现菜单管理里编辑&＃xff0c;可以下拉选择图标&＃xff0c;如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJscqE2B-1673355144545)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\46.jpg)]

7. 前端实现角色管理页面&＃xff0c;分配菜单的时候&＃xff0c;同样显示图标出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XbCYwnVm-1673355144546)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\47.jpg)]


{{ data.name }}



8. 完整代码

Menu.vue

Role.vue





2、实现菜单管理和角色管理关系

实现&＃xff1a;角色管理中&＃xff0c;分配菜单后&＃xff0c;会出现一个role_id对应一个或者多个menu_id &＃xff0c;两者id之间的关系可以储存到数据库中&＃xff0c;然后下次点开该角色的分配菜单时默认回显出来

1. 建表Role_Menu表

USE &＃96;management&＃96;;
/*Table structure for table &＃96;role_menu&＃96; */
DROP TABLE IF EXISTS &＃96;role_menu&＃96;;
CREATE TABLE &＃96;role_menu&＃96; (
&＃96;role_id&＃96; int(11) NOT NULL COMMENT &＃39;角色id&＃39;,
&＃96;menu_id&＃96; int(11) NOT NULL COMMENT &＃39;菜单id&＃39;,
PRIMARY KEY (&＃96;role_id&＃96;,&＃96;menu_id&＃96;)
) ENGINE&＃61;InnoDB DEFAULT CHARSET&＃61;utf8 COMMENT&＃61;&＃39;角色菜单关系表&＃39;;


• 注意&＃xff0c;roleId和menuId都应该设置为主键

2. 实体类RoleMenu.java

&＃64;Data
&＃64;TableName("role_menu")
public class RoleMenu {
private Integer roleId;
private Integer menuId;
}


和之前一样&＃xff0c;把RoleMenuMapper和RoleMenuService建好&＃xff0c;这里就省略

3. 实现功能&＃xff1a;不需要新建一个controller&＃xff0c;因为这也算是role中的功能。

RoleController.java

//绑定角色和菜单的关系。一个角色id可以对应多个菜单id&＃xff08;一个角色可以有权限管理多个菜单&＃xff09;
//参数&＃xff1a; roleId &＃xff0c;menuIds
&＃64;PostMapping("/roleMenu/{roleId}")
public Result roleMenu(&＃64;PathVariable Integer roleId, &＃64;RequestBody List<Integer> menuIds){
//复杂的sql操作&＃xff0c;需要去service层写业务
roleService.setRoleMenu(roleId,menuIds);
return Result.success();
}
//从数据库中根据roleId查询出与这个角色关联的menuId
&＃64;GetMapping("/roleMenu/{roleId}")
public Result getRoleMenu(&＃64;PathVariable Integer roleId){
return Result.success(roleService.getRoleMenu(roleId));
}


4. 在service层中实现业务

RoleService.java

&＃64;Service
public class RoleService extends ServiceImpl<RoleMapper, Role> {
&＃64;Autowired
private RoleMenuService roleMenuService;
&＃64;Autowired
private RoleMenuMapper roleMenuMapper;
//加上事务注解&＃xff0c;两个操作同时成功才行
&＃64;Transactional
public void setRoleMenu(Integer roleId, List<Integer> menuIds) {
QueryWrapper<RoleMenu> queryWrapper &＃61; new QueryWrapper<>();
//先删除当前角色id所有的绑定关系
queryWrapper.eq("role_id",roleId);
roleMenuService.remove(queryWrapper);
//再把前端传过来的菜单id数组绑定到当前这个角色id上去
for (Integer menuId:menuIds){
RoleMenu roleMenu &＃61; new RoleMenu();
roleMenu.setRoleId(roleId);
roleMenu.setMenuId(menuId);
roleMenuService.save(roleMenu);
}
}
//查询
public List<Integer> getRoleMenu(Integer roleId) {
return roleMenuMapper.selectByRoleId(roleId);
}
}


5. RoleMenuMapper.java

&＃64;Repository
public interface RoleMenuMapper extends BaseMapper<RoleMenu> {
&＃64;Select("select menu_id from role_menu where role_id &＃61; #{roleId}")
List<Integer> selectByRoleId(&＃64;Param("roleId") Integer roleId);
}


6. 在前端中实现

• 将前端勾选后的数据传给后端存入数据库

saveRoleMenu(){
this.request.post("/role/roleMenu/" &＃43; this.roleId,this.$refs.tree.getCheckedKeys()).then(res &＃61;> {
if(res.code &＃61;&＃61;&＃61; &＃39;200&＃39;) {
this.$message.success("绑定成功")
this.menuDialogVisable &＃61; false
}else{
this.$message.error(res.msg)
}
})
},


• 请求后端查询出存储的关系然后回显到前端&＃xff08;就是在再一次打开该角色的分配菜单时&＃xff0c;要默认显示出之前已经勾选的&＃xff09;

this.request.get("/role/roleMenu/" &＃43; roleId).then(res &＃61;> {
this.checks &＃61; res.data
})


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXBNwzKL-1673355144547)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\48.jpg)]

这次改动的前端代码就是Role.vue和Menu.vue两个页面&＃xff0c;完整代码在前面已经给出了&＃xff01;

通过实现&＃xff0c;完成这两个功能&＃xff0c;就成功了&＃xff01;