java菜单管理模块_后台管理系统-菜单管理模块

1 菜单管理页面设计

1.1 业务设计

菜单管理又称为资源管理，是系统资源对外的表现形式。本模块主要是实现对菜单进行添加、修改、查询、删除等操作。CREATE TABLE `sys_menus` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) DEFAULT NULL COMMENT '资源名称',

`url` varchar(200) DEFAULT NULL COMMENT '资源URL',

`type` int(11) DEFAULT NULL COMMENT '类型 1：菜单 2：按钮',

`sort` int(11) DEFAULT NULL COMMENT '排序',

`note` varchar(100) DEFAULT NULL COMMENT '备注',

`parentId` int(11) DEFAULT NULL COMMENT '父菜单ID，一级菜单为0',

`permission` varchar(500) DEFAULT NULL COMMENT '授权(如：sys:user:create)',

`createdTime` datetime DEFAULT NULL COMMENT '创建时间',

`modifiedTime` datetime DEFAULT NULL COMMENT '修改时间',

`createdUser` varchar(20) DEFAULT NULL COMMENT '创建用户',

`modifiedUser` varchar(20) DEFAULT NULL COMMENT '修改用户',

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='资源管理';

菜单表与角色表是多对多的关系，在表设计时，多对多关系通常由中间表(关系表)进行维护

基于角色菜单表的设计，其角色和菜单对应的关系数据要存储到关系表中，其具体存储形式

菜单与角色的关系表脚本设计如下：CREATE TABLE `sys_role_menus` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`role_id` int(11) DEFAULT NULL COMMENT '角色ID',

`menu_id` int(11) DEFAULT NULL COMMENT 'ID',

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='角色与菜单对应关系';

1.2 原型设计

当在主页左侧菜单栏，点击菜单管理时，在主页内容呈现区，呈现菜单列表页面

当在菜单列表页面点击添加按钮时，异步加载菜单编辑页面，并在列表内容呈现区，呈现菜单编辑页面,如图-4所示。

在菜单编辑页面选择上级菜单时，异步加载菜单信息，并以树结构的形式呈现上级菜单

1.3 API设计

菜单管理业务后台API分层架构及调用关系如图

2 菜单管理页面展示

2.1 首页菜单事件处理

▪ 业务描述与设计实现

首先准备菜单列表页面(/templates/pages/sys/menu_list.html)，然后在starter.html页面中点击菜单管理时异步加载菜单列表页面。

▪ 关键代码设计与实现

找到项目中的starter.html页面，页面加载完成以后，注册菜单管理项的点击事件，当点击菜单管理时，执行事件处理函数。关键代码如下：$(function(){

…

doLoadUI("load-menu-id","menu/menu_list")

})

说明:对于doLoadUI函数,假如在starter.html中已经定义,则无需再次定义.function doLoadUI(id,url){

$("#"+id).click(function(){

$("#mainContentId").load(url);

});

}

其中，load函数为jquery中的ajax异步请求函数。

2.2 菜单列表页面

▪ 业务描述与设计实现

本页面呈现菜单信息时要以树结构形式进行呈现。此树结构会借助jquery中的treeGrid插件进行实现，所以在菜单列表页面需要引入treeGrid相关JS。但是，具体的treeGrid怎么用可自行在网上进行查询(已比较成熟)。

▪ 关键代码设计与实现：

关键JS引入(menu_list.html)，代码如下：

3 菜单管理页面代码实现

3.1 菜单列表数据实现

3.1.1 数据加载时序

页面数据展示

菜单列表页面加载完成，启动菜单数据异步加载操作，本次菜单列表页面要呈现菜单以及上级菜单信息,其数据查询时，数据的封装及传递过程

页面菜单数据删除展示

基于用户在列表页面上选择的的菜单记录ID，执行删除操作，本次删除业务实现中，首先要基于id判断当前菜单是否有子菜单，假如有子菜单则不允许删除，没有则先删除菜单角色关系数据，然后再删除菜单自身信息。

上级菜单页面展示

在菜单编辑页面上，点击上级菜单时，其数据加载时序分析

菜单数据添加实现

用户在菜单编辑页面输入数据，然后异步提交到服务端，其简易数据传递基本架构

用户在菜单添加页面中填写好菜单数据，然后点击保存按钮，将用户填写的数据添加到数据库。

菜单数据更新展示

当点击编辑页面更新按钮时

3.1.2 代码实现

第一步：创建SysMenuDao层接口package com.cy.pj.sys.dao;

import com.cy.pj.common.pojo.Node;

import com.cy.pj.sys.pojo.SysMenu;

import com.cy.pj.sys.pojo.SysUserMenu;

import org.apache.ibatis.annotations.Delete;

import org.apache.ibatis.annotations.Insert;

import org.apache.ibatis.annotations.Mapper;

import org.apache.ibatis.annotations.Select;

import java.util.List;

import java.util.Map;

@Mapper

public interface SysMenuDao {