05-CGB-DB-MENU-V1.02

菜单管理设计说明
业务设计说明
菜单管理又称为资源管理，是系统资源对外的表现形式。本模块主要是实现对菜单进行添加、修改、查询、删除等操作。其表设计语句如下：
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=‘资源管理’;
菜单表与角色表是多对多的关系，在表设计时，多对多关系通常由中间表(关系表)进行维护，如图-1所示：

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

菜单与角色的关系表脚本设计如下：

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=‘角色与菜单对应关系’;

原型设计说明
基于用户需求，实现菜单静态页面(html/css/js)，通过静态页面为用户呈现菜单模块的基本需求实现。
当在主页左侧菜单栏，点击菜单管理时，在主页内容呈现区，呈现菜单列表页面，如
图-3所示。

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

图-4
在菜单编辑页面选择上级菜单时，异步加载菜单信息，并以树结构的形式呈现上级菜单，如图-5所示。

说明:假如客户对此原型进行了确认,后续则可以基于此原型进行研发。
API设计说明
菜单管理业务后台API分层架构及调用关系如图-6所示：

说明：分层目的主要将复杂问题简单化，实现各司其职，各尽所能。
菜单管理列表页面呈现
业务时序分析
菜单管理页面的加载过程，其时序分析如图-7所示：

服务端实现
Controller实现
业务描述与设计实现
基于菜单管理的请求业务，在PageController中添加doMenuUI方法，用于返回菜单列表页面。
关键代码设计与实现
第一步：在PageController中定义返回菜单列表的方法。代码如下：

@RequestMapping(“menu/menu_list”)
public String doMenuUI() {
return “sys/menu_list”;
}

第二步：在PageController中基于rest风格的url方式优化返回UI页面的方法。找出共性进行提取，例如：
@RequestMapping("{module}/{moduleUI}")
public String doModuleUI(@PathVariable String moduleUI) {
return “sys/”+moduleUI;
}
客户端实现
首页菜单事件处理
业务描述与设计实现
首先准备菜单列表页面(/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异步请求函数。
菜单列表页面
业务描述与设计实现
本页面呈现菜单信息时要以树结构形式进行呈现。此树结构会借助jquery中的treeGrid插件进行实现，所以在菜单列表页面需要引入treeGrid相关JS。但是，具体的treeGrid怎么用可自行在网上进行查询（已比较成熟）。
关键代码设计与实现：
关键JS引入（menu_list.html），代码如下：

菜单管理列表数据呈现
数据架构分析
菜单列表页面加载完成，启动菜单数据异步加载操作，本次菜单列表页面要呈现菜单以及上级菜单信息,其数据查询时，数据的封装及传递过程，如图-8所示。

图-8
说明：本模块将从数据库查询到的菜单数据封装到map对象，一行记录一个map对象，其中key为表中的字段(列)名，值为字段(列)对应的值。
数据加载过程其时序分析，如图-9所示：

服务端关键业务及代码实现
Dao接口实现
业务描述及设计实现
通过数据层对象，基于业务层参数，查询菜单以及上级菜单信息(要查询上级菜单名)。
关键代码分析及实现
第一步：定义数据层接口对象，通过此对象实现数据库中菜单数据的访问操作。关键代码如下：
@Mapper
public interface SysMenuDao {
}
第二步：在SysMenuDao接口中添加findObjects方法，基于此方法实现菜单数据的查询操作。代码如下：
List<Map<String,Object>> findObjects();

说明：一行记录映射为一个map对象,多行存储到list。
思考：这里为什么使用map存储数据，有什么优势劣势？
Mapper文件实现
业务描述及设计实现
基于Dao接口创建映射文件，在此文件中通过相关元素(例如select)描述要执行的数据操作。
关键代码设计及实现
第一步：在映射文件的设计目录中添加SysMenuMapper.xml映射文件，代码如下：

<?xml version="1.0" encoding="UTF-8"?> 第二步：在映射文件中添加id为findObjects的元素，实现菜单记录查询。我们要查询所有菜单以及菜单对应的上级菜单名称。关键代码如下：

      <!-- 方案1
      select c.*,p.name parentName
      from sys_menus c left join sys_menus p
      on c.parentId=p.id 
      -->
      <!-- 方案2 -->
      select c.*,(
                select p.name 
                from sys_menus p
                where c.parentId=p.id
                ) parentName
      from sys_menus c

说明：自关联查询分析，如图-10所示：

Service接口及实现类
业务描述与设计实现
在菜单查询中，业务层对象主要是借助数据层对象完成菜单数据的查询。后续还可以基于AOP对数据进行缓存，记录访问日志等。
关键代码设计及实现
第一步：定义菜单业务接口及方法，暴露外界对菜单业务数据的访问，其代码参考如下：
package co