经过前面的编写，现在我们已经可以从后台获取一个静态菜单返回给前端了。当然这不科学，我们需要的是一个可编辑的菜单。实现了菜单编辑后，我们需要把所有菜单都实现了。
要实现菜单编辑，并且希望不对SCUI做出太多修改，那就先研究SCUI设计的菜单结构，考虑如何与后端对应。
{
id: "",
parentId: "",
name: "",
path: "",
component: "",
redirect: "",
meta:{
title: "",
icon: "",
active: "",
color: "",
type: "menu"
},
apiList: []
}
实体类设计：
@Data
@TableName(value = "sys_menu",resultMap = "sysMenuMap")
public class SysMenuEntity {
@TableId(type = IdType.AUTO)
private Long id;
private Long parentId;
private String title;
public String getTitle(){
return this.meta.getTitle();
}
private String type;
public String getType(){
return this.meta.getType();
}
private String name;
private String icon;
public String getIcon(){
return this.meta.getIcon();
}
private String path;
private String redirect;
private String active;
private String component;
private String color;
private Boolean hidden;
private Boolean hiddenBreadcrumb;
private Boolean affix;
public Boolean getAffix(){
return this.meta.getAffix();
}
@TableField(exist = false)
private SysMenuMeta meta;
private LocalDateTime createTime;
private Long createBy;
private LocalDateTime updateTime;
private Long updateBy;
}
XML：
<resultMap id="sysMenuMap" type="com.demo.satoken.modules.sys.entity.SysMenuEntity">
<id column="id" property="id"/>
<result column="parent_id" property="parentId"/>
<result column="name" property="name"/>
<result column="path" property="path"/>
<result column="redirect" property="redirect"/>
<result column="active" property="active"/>
<result column="component" property="component"/>
<result column="color" property="color"/>
<result column="hidden" property="hidden"/>
<result column="hidden_breadcrumb" property="hiddenBreadcrumb"/>
<association property="meta" javaType="com.demo.satoken.modules.sys.dto.SysMenuMeta">
<result column="icon" property="icon"/>
<result column="title" property="title"/>
<result column="type" property="type"/>
<result column="affix" property="affix"/>
</association>
</resultMap>
指定resultMap，可以让后台返回满足前端格式的数据。手动实现get函数，是为了让前端传来的数据入库时可以获取正确的值。暂时先这么设计，后续权限完善以后说不定会选择缓存到Redis中，到时候还需要重写。
实现SysMenu的MP实现（mapper、service、serviceImpl），增加、修改菜单接口：
@RestController
@RequestMapping("/system/menu")
public class SysMenuController {
@Autowired
private SysMenuService menuService;
@GetMapping("/my")
public SaResult my(){
Map<String,Object> data = new HashMap<>();
List<String> permissions = new ArrayList<>();
permissions.add("list.add");
permissions.add("list.edit");
permissions.add("list.delete");
permissions.add("user.add");
permissions.add("user.edit");
permissions.add("user.delete");
data.put("permissions",permissions);
// 菜单增删改查功能测试完成前此处应该使用静态数据
List<SysMenuEntity> list = menuService.list();
data.put("menu",list);
return SaResult.data(data);
}
@GetMapping("/list")
public SaResult list(){
List<SysMenuEntity> list = menuService.list();
return SaResult.data(list);
}
@PostMapping("save")
public SaResult save(@RequestBody SysMenuEntity menuEntity){
menuService.save(menuEntity);
return SaResult.data(menuEntity.getId());
}
@PostMapping("update")
public SaResult update(@RequestBody SysMenuEntity menuEntity){
menuService.updateById(menuEntity);
return SaResult.ok();
}
@PostMapping("delete")
public SaResult delete(@RequestBody Long[] ids){
menuService.removeByIds(Arrays.asList(ids));
return SaResult.ok();
}
}
利用测试CRUD功能的空档在菜单中加入几个基础菜单项，最重要的是把《菜单管理》这个菜单添加好
在SCUI中修改、增加相应的接口信息：
myMenus: {
url: `${config.API_URL}/system/menu/my`,
name: "获取我的菜单",
get: async function(){
return await http.get(this.url);
}
},
list: {
url: `${config.API_URL}/system/menu/list`,
name: "获取菜单",
get: async function(){
return await http.get(this.url);
}
},
save: {
url: `${config.API_URL}/system/menu/save`,
name: "保存菜单",
post: async function(params){
return await http.post(this.url,params);
}
},
update: {
url: `${config.API_URL}/system/menu/update`,
name: "修改菜单",
post: async function(params){
return await http.post(this.url,params);
}
},
delete: {
url: `${config.API_URL}/system/menu/delete`,
name: "删除菜单",
post: async function(params){
return await http.post(this.url,params);
}
}
在views/setting/menu的页面中修改相应的接口调用
登录测试：
菜单加载成功
然后使用菜单管理功能写入所有菜单
写入部分菜单
OK，菜单管理搞定。
,
