电子商城之菜单模块

     

 京淘

权限管理子系统

菜单模块

 

 

1. 菜单页面呈现 2

1.1. 服务端实现 3

1.1.1. 菜单Controller实现 3

1.2. 客户端实现 3

1.2.1. 定义菜单列表页面 3

1.2.2. 首页页面菜单管理事件处理 4

2. 菜单页面数据呈现 4

2.1. 服务端实现 4

2.1.1. 菜单DAO实现 4

2.1.2. 菜单Mapper实现 5

2.1.3. 菜单Service实现 6

2.1.4. 菜单Controller实现 7

2.2. 客户端实现 7

2.2.1. 菜单列表页面实现 7

3. 菜单数据删除 10

3.1. 服务端实现 10

3.1.1. 菜单DAO实现 10

3.1.2. 菜单Mapper实现 11

3.1.3. 角色菜单DAO实现 12

3.1.4. 角色菜单Mapper实现 12

3.1.5. 菜单Service实现 13

3.1.6. 菜单Controller实现 14

3.2. 客户端实现 15

3.2.1. 列表页面删除按钮事件处理 15

4. 菜单添加页面呈现 16

4.1. 服务端实现 16

4.1.1. 菜单Controller方法定义 16

4.2. 客户端实现 17

4.2.1. 菜单编辑页面定义 17

4.2.2. 菜单列表页面添加按钮事件处理 17

5. 菜单编辑页面上级菜单呈现 18

5.1. 服务端实现 18

5.1.1. 菜单Node值对象 18

5.1.2. 菜单Dao实现 19

5.1.3. 菜单Mapper实现 20

5.1.4. 菜单Service实现 20

5.1.5. 菜单Controller实现 21

5.2. 客户端实现 21

5.2.1. 菜单编辑页面事件处理 21

6. 菜单数据添加操作 23

6.1. 服务端实现 23

6.1.1. 菜单实体对象定义 23

6.1.2. 菜单Dao 实现 24

6.1.3. 菜单Mapper中元素定义 24

6.1.4. 菜单Service中方法定义 25

6.1.5. 菜单Controller中方法定义 26

6.2. 客户端实现 26

6.2.1. 保存按钮事件处理 26

7. 菜单修改页面数据呈现 28

7.1. 服务端实现 28

7.1.1. 菜单Dao实现 28

7.1.2. 菜单Mapper实现 28

7.1.3. 菜单Service中方法定义 29

7.1.4. 菜单Controller中方法定义 29

7.2. 客户端实现 30

7.2.1. 菜单列表页面修改按钮事件处理 30

7.2.2. 菜单编辑页面事件处理 31

8. 菜单数据更新 32

8.1. 服务端实现 32

8.1.1. 菜单Dao 中方法定义 32

8.1.2. 带单Mapper 中元素定义 33

8.1.3. 菜单Service 中元素定义 33

8.1.4. 菜单Controller实现 34

8.2. 客户端实现 35

8.2.1. 编辑页面保存按钮事件处理 35

9. 总结 36

9.1. 重点和难点分析 36

9.2. 常见FAQ 36

 

1. 菜单页面呈现

核心业务

点击系统首页中的菜单管理, 在对应的一个div中

异步加载菜单页面.

1. 1. 服务端实现
      1. 菜单Controller实现

业务描述

1. 定义controller对象处理客户端菜单访问请求
2. 定义相关方法处理列表页面加载需求

 

业务实现(定义一个Controller类)

1. 包名 com.jt.sys.controller
2. 类名 SysMenuController
3. 映射 @RequestMapping("/menu/")
4. 组件 @Controller

 

业务实现(基于Controller类定义页面响应方法)

1. 方法名 listUI
2. 参数列表()
3. 返回值 String
4. 映射 @RequestMapping("listUI")

 

代码实现:

 

@RequestMapping("listUI")

public String listUI(){

return "sys/menu_list";

}

 

 

 

 

1. 1. 客户端实现

 

1. 1. 1. 定义菜单列表页面

在WEB-INF/pages/sys目录下定义menu_list.html页面.

 

1. 1. 1. 首页页面菜单管理事件处理

业务描述

1)在starter.html页面中注册菜单管理的点击事件

2)在starter.html页面中定义事件处理函数,异步加载菜单列表页面

 

代码实现:

 

$(function(){

         loadUI("load-menu-id","menu/listUI.do");

     });

 

     function loadUI(domId,url){

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

      //异步加载url对应的资源,并将资源插入到.container-fluid位置

            $(".container-fluid").load(url,function(){

      $(".container-fluid").removeData();

      });

         });

     }

 

 

1. 菜单页面数据呈现
   1. 服务端实现

核心业务

从数据库查询菜单以及上一级的菜单信息,

并数据信息进行封装(本模块封装到map),传递.

1. 1. 1. 菜单DAO实现

业务描述

1. 定义菜单持久层对象,处理数据访问操作
2. 定义菜单查询方法,查询所有菜单以及上一级菜单信息(只取id,名字)

 

业务实现:(持久层接口定义)

1. 包名: com.jt.sys.dao
2. 类名: SysMenuDao

 

业务实现:(接口方法定义)

1. 方法名 findObjects  (本查询不做分页)
2. 参数列表()
3. 返回值 List<Map<String,Object>> (一行记录对应一个map,多个map放list)

 

代码实现:

 

public interface SysMenuDao {

List<Map<String,Object>> findObjects();

}

 

 

1. 1. 1. 菜单Mapper实现

业务描述

基于SysMenuDao创建SysMenuMapper文件,并在文件中

基于SysMenuDao的查询方法定义SQL映射元素

 

业务实现()

1. 元素名  select
2. 元素id  findObjects
3. 结果类型 resultType=map
4. SQL定义(关联查询本菜单以及上一级菜单相关信息)

 

代码实现:

 

<select id="findObjects"

             resultType="map">

         

          <!-- 方案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

         

     </select>

 

 

1. 1. 1. 菜单Service实现

业务描述

1. 定义菜单业务接口,负责处理菜单模块业务
2. 定义业务方法,访问dao层方法获取菜单信息

业务实现 (菜单接口定义)

1. 包名: com.jt.sys.service
2. 类名: SysMenuService

 

业务实现(菜单业务接口方法定义)

1. 方法名 findObjects
2. 参数列表()
3. 返回值 List<Map<String,Object>>

 

代码实现:

 

 

public interface SysMenuService {

 

 List<Map<String,Object>> findObjects();

}

 

业务实现(菜单业务实现类定义)

1. 包名: com.jt.sys.service.impl
2. 类名:SysMenuServiceImpl

 

代码实现:

 

@Service

public class SysMenuServiceImpl implements SysMenuService {

@Autowired

private SysMenuDao sysMenuDao;

 

@Override

public List<Map<String, Object>> findObjects() {

return sysMenuDao.findObjects();

}

}

 

 

 

 

1. 1. 1. 菜单Controller实现

业务描述

1)基于客户端请求,借助业务层对象访问菜单信息

2)对菜单信息进行封装,并返回.

 

业务实现(SysMenuController中方法定义)

1. 方法名 doFindObjects
2. 参数列表()
3. 返回值 JsonResult
4. 映射@RequestMapping("doFindObjects")

 

代码实现:

 

@Controller

@RequestMapping("/menu/")

public class SysMenuController {

 @Autowired

 private SysMenuService sysMenuService;

@RequestMapping("doFindObjects")

 @ResponseBody

 public JsonResult doFindObjects(){

 return new JsonResult(sysMenuService.findObjects(),"query ok");

 }

}

 

 

 

1. 1. 客户端实现
      1. 菜单列表页面实现

业务描述

1. 数据呈现时使用jquery中的treeGrid插件.
2. 页面加载完成,异步加载数据,以树结构table形式呈现.

 

业务实现

1. 引入treeGrid相关js文件（3个）
2. 定义table中要显示的列以及相关配置信息
3. 定义方法异步加载数据

 

关键代码实现

 

 

定义table中要显示的字段信息(作为表头部分thead中的内容)

说明：列的定义本质上是一个json格式的javascript数组对象

问题：为什么要定义这样的格式呢？(由你使用插件决定)

var columns = [

{

field : 'selectItem',

radio : true

},

{

title : '菜单ID',

field : 'id',

visible : false,

align : 'center',

valign : 'middle',

width : '80px'

},

{

title : '菜单名称',

field : 'name',

align : 'center',

valign : 'middle',

sortable : true,

width : '130px'

},

{

title : '上级菜单',

field : 'parentName',

align : 'center',

valign : 'middle',

sortable : true,

width : '130px'

},

{

title : '类型',

field : 'type',

align : 'center',

valign : 'middle',

sortable : true,

width : '70px',

formatter : function(item, index) {

if (item.type == 1) {

return '<span class="label label-success">菜单</span>';

}

if (item.type == 2) {

return '<span class="label label-warning">按钮</span>';

}

}

},

{

title : '排序号',

field : 'sort',

align : 'center',

valign : 'middle',

sortable : true,

width : '70px'

},

{

title : '菜单URL',

field : 'url',

align : 'center',

valign : 'middle',

sortable : true,

width : '160px'

},

{

title : '授权标识',

field : 'permission',

align : 'center',

valign : 'middle',

sortable : true

} ];

 

 

$(document).ready(function(){

doGetObjects();

}

 

 

function doGetObjects(){

//构建table对象

var table=new TreeTable(

 "menuTable", //tableId

 "menu/doFindObjects.do", //url

columns);//columns

    //设置从哪一列展开内容(默认是第一列)

table.setExpandColumn(2);//可以不写

//初始化table对象(底层发ajax异步请求访问服务端)

table.init();

}

 

 

1. 菜单数据删除

核心业务

1. 查询此菜单有没有对应的子菜单,有则不允许删除
2. 删除菜单(市场有两种业务)

1. 有角色菜单关系数据,则不允许删除
2. 有角色菜单关系数据,将关系数据一起删除.(本次策略)
   1. 服务端实现
      1. 菜单DAO实现

业务实现:

1. 基于菜单id查询是否有子菜单
2. 根据菜单id删除菜单元素.

 

业务实现(定义基于id查询是否有子菜单的方法)

1. 方法名 getChildCount
2. 参数列表 (Integer id)
3. 返回值 int

 

 

业务实现(定义根据id删除菜单的方法)

1. 方法名 deleteObject
2. 参数列表 (Integer id)
3. 返回值 int

 

代码实现

 

 /**

  * 根据菜单id统计子菜单的个数

  * @param id

  * @return

  */

 int getChildCount(Integer id);

 /**

  * 根据id 删除菜单

  * @param id

  * @return

  */

 int deleteObject(Integer id);

 

 

1. 1. 1. 菜单Mapper实现

业务描述

基于SysMenuDao中方法定义映射元素.

 

元素定义(根据id统计子菜单)

1. 元素名 select
2. 元素id getChildCount
3. 参数类型 int
4. 结果类型 int
5. SQL定义 (select count(*) from sys_menus where parentId=#{id})

 

元素定义(根据id删除菜单)

1. 元素名 delete
2. 元素id deleteObject
3. 参数类型 int
4. SQL定义 (delete from sys_menus where id=#{id})

 

代码实现

 

根据id统计子菜单

  <select id="getChildCount"

             parameterType="int"

             resultType="int">

          select count(*)

          from sys_menus

          where parentId=#{id}        

     </select>

 

根据id删除菜单

     <delete id="deleteObject"

             parameterType="int">

          delete from sys_menus

          where id=#{id}

     </delete>

 

 

 

1. 1. 1. 角色菜单DAO实现

业务描述

根据菜单id删除角色菜单关系数据.

 

业务实现(接口定义)

1. 包名 com.jt.sys.dao
2. 类名SysRoleMenuDao

 

业务实现(接口方法定义)

1. 方法名 deleteObjectsByMenuId
2. 参数列表(Integer menuId)
3. 返回值 int

 

代码实现

 

public interface SysRoleMenuDao {

 int deleteObjectsByMenuId(Integer menuId);

}

 

 

1. 1. 1. 角色菜单Mapper实现

业务描述

 

基于角色菜单DAO定义基于菜单id删除关系数据的元素

 

业务实现(创建SysRoleMenuMapper文件,并定义删除元素)

1. 元素名 delete
2. 元素id deleteObjectsByMenuId
3. 参数类型 int
4. sql定义 (delete from sys_role_menus where menu_id=#{menuId})

 

业务实现

 

<mapper namespace="com.jt.sys.dao.SysRoleMenuDao">

    <delete id="deleteObjectsByMenuId">

    

       delete from sys_role_menus

       where menu_id=#{menuId}

       

    </delete>

</mapper>

 

1. 1. 1. 菜单Service实现

业务描述

1. 接收控制数据(id),并对数据进行合法验证
2. 基于id查询菜单子元素,并进行判定
3. 删除菜单元素
4. 删除角色菜单关系数据.
5. 返回结果.

 

业务实现(在SysMenuService及实现类中定义方法)

1. 方法名 deleteObject
2. 参数列表 (Integer id)
3. 返回值 int

 

代码实现

 

接口及方法定义

 

public interface SysMenuService {

 int deleteObject(Integer id);

}

 

实现类中方法实现

 

@Service

public class SysMenuServiceImpl implements SysMenuService {

@Autowired

private SysMenuDao sysMenuDao;

 

@Autowired

private SysRoleMenuDao sysRoleMenuDao;

@Override

public int deleteObject(Integer id) {

//1.验证数据的合法性

if(id==null||id<=0)

throw new ServiceException("请先选择");

//2.基于id进行子元素查询

int count=sysMenuDao.getChildCount(id);

if(count>0)

throw new ServiceException("请先删除子菜单");

//3.删除菜单元素

int rows=sysMenuDao.deleteObject(id);

if(rows==0)

throw new ServiceException("此菜单可能已经不存在");

//4.删除角色,菜单关系数据

sysRoleMenuDao.deleteObjectsByMenuId(id);

//5.返回结果

return rows;

}

}

 

 

1. 1. 1. 菜单Controller实现

业务描述

1. 获取客户端请求数据(菜单id)
2. 调用业务层方法删除数据
3. 封装并返回结果

 

业务实现(在SysMenuController中定义相关方法)

1. 方法名 doDeleteObject
2. 参数列表 Integer id
3. 返回值 JsonResult
4. 映射 @RequestMapping("doDeleteObject")

 

代码实现

 

 

@Controller

@RequestMapping("/menu/")

public class SysMenuController {

 

 @Autowired

 private SysMenuService sysMenuService;

 @RequestMapping("doDeleteObject")

 @ResponseBody

 public JsonResult doDeleteObject(Integer id){

 sysMenuService.deleteObject(id);

 return new JsonResult("delete OK");

 }

 

   ......

 

}

 

1. 1. 客户端实现
      1. 列表页面删除按钮事件处理

业务描述

点击删除按钮时向服务端提交异步请求,删除用户选中的菜单记录.

 

业务实现:

1. 删除按钮事件注册
2. 删除按钮事件处理函数定义.

 

代码实现:

 

$(document).ready(function(){

  ....

$(".input-group-btn")

    .on("click",'.btn-delete',doDeleteObject)

});

 

执行删除操作

function doDeleteObject(){

//1.获取选中的记录id

var id=getCheckedId();

if(!id){

  alert("请先选择");

  return;

}

//2.异步提交请求删除数据

var url="menu/doDeleteObject.do";

var params={"id":id};

$.post(url,params,function(result){

if(result.state==1){

alert(result.message);

doGetObjects();

}else{

alert(result.message);

}

});

}

 

获取选中记录的id值

 

function getCheckedId(){

//1.获取选中的记录

var selections=$("#menuTable")

//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数

//getSelections为扩展函数内部要调用的一个方法

.bootstrapTreeTable("getSelections");

//2.对记录进行判定

if(selections.length==1)

return selections[0].id;

}

 

 

 

1. 菜单添加页面呈现
   1. 服务端实现
      1. 菜单Controller方法定义

业务描述

基于客户端的添加请求返回一个响应页面

 

业务实现(在SysMenuController中添加相关方法)

1. 方法名 editUI
2. 参数列表 ()
3. 返回值 String
4. 映射 @RequestMapping("editUI")

 

代码实现:

 

 @RequestMapping("editUI")

 public String editUI(){

 return "sys/menu_edit";

 }

 

 

 

1. 1. 客户端实现
      1. 菜单编辑页面定义

在WEB-INF/pages/sys目录中添加menu_edit.html.

 

说明:已有就不用添加了.

 

1. 1. 1. 菜单列表页面添加按钮事件处理

业务描述

点击添加按钮异步访问服务器,加载对应菜单编辑页面.

业务实现

1. 事件注册
2. 事件处理函数定义

 

代码实现

 

事件注册

$(document).ready(function(){

  ...

$(".input-group-btn")

    .on("click",".btn-add",doLoadEditUI);

});

 

加载页面

function doLoadEditUI(){

var title;

if($(this).hasClass("btn-add")){

title="添加菜单"

}

var url="menu/editUI.do";

$(".container-fluid").load(url,function(){

$(".box-title").html(title);

})

}

 

 

1. 菜单编辑页面上级菜单呈现

核心业务

1. 点击编辑页面的上级菜单时向服务端发起异步请求
2. 服务端基于请求获取菜单节点数据
3. 客户端通过服务端返回数据异步刷新页面.

 

1. 1. 服务端实现
      1. 菜单Node值对象

业务描述

定义一个Node对象,借助此对象封装从数据库查询到的数据

业务实现 (类的定义)

1. 包名 com.jt.common.vo
2. 类名 Node
3. 接口 实现序列化接口并添加版本id
4. 字段 (Integer id,String name,Integer parentId) 提供set/get方法

 

代码实现:

 

public class Node implements Serializable{

private static final long serialVersionUID = -6577397050669133046L;

 

private Integer id;

private String name;

private Integer parentId;

 

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Integer getParentId() {

return parentId;

}

public void setParentId(Integer parentId) {

this.parentId = parentId;

}

@Override

public String toString() {

return "Node [id=" + id + ", name=" + name + ", parentId=" + parentId + "]";

}

 

}

 

 

1. 1. 1. 菜单Dao实现

业务描述

基于请求获取数据库对应的菜单表中的所有菜单信息(id,name,parentId)

业务实现(SysMenuDao中方法定义)

1. 方法名 findZtreeMenuNodes
2. 参数列表()
3. 返回值 List<Node>

 

代码实现:

 

List<Node> findZtreeMenuNodes();

 

1. 1. 1. 菜单Mapper实现

业务描述

基于SysMenuDao中方法定义菜单节点查询元素.

 

业务实现(SysMenuMapper中元素定义)

1. 元素名 select
2. 元素id findZtreeMenuNodes
3. 结果类型 com.jt.common.vo.Node
4. SQL 定义 (select id,name,parentId from sys_menus)

 

代码实现:

 

    <select id="findZtreeMenuNodes"

            resultType="node">

        select id,name,parentId

        from sys_menus        

    </select>

 

1. 1. 1. 菜单Service实现

业务描述

基于客户端请求,借助dao对象,访问菜单节点信息,并返回.

业务实现(SysMenuService接口及实现类中方法定义)

1. 方法名 findZtreeMenuNodes
2. 参数列表()
3. 返回值 List<Node>

 

代码实现.

 

@Override

public List<Node> findZtreeMenuNodes() {

return sysMenuDao.findZtreeMenuNodes();

}

 

1. 1. 1. 菜单Controller实现

业务描述

基于客户端请求,访问业务层对象方法,获取菜单节点对象,并封装返回.

 

业务实现(SysMenuController中方法定义)

1. 方法名 doFindZtreeMenuNodes
2. 参数列表()
3. 返回值 JsonResult
4. 映射 @RequestMapping("doFindZtreeMenuNodes");

 

代码实现:

 

 @RequestMapping("doFindZtreeMenuNodes")

 @ResponseBody

 public JsonResult doFindZtreeMenuNodes(){

 return new JsonResult(

 sysMenuService.findZtreeMenuNodes());

 }

 

 

1. 1. 客户端实现

 

1. 1. 1. 菜单编辑页面事件处理

业务描述

点击上级菜单时,异步加载菜单节点信息,并进行数据呈现.

 

业务实现

1. 点击事件注册
2. 事件处理函数定义

 

代码实现:

 

 

var zTree;

  //初始化zTree时会用到

  var setting = {

   data : {

   simpleData : {

   enable : true,

   idKey : "id",  //节点数据中保存唯一标识的属性名称

   pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称

   rootPId : null  //根节点id

   }

   }

  }

  

页面加载完成,异步加载数据,事件注册

  $(document).ready(function(){

  $(".form-horizontal")

  .on("click",".load-sys-menu",doLoadZtreeNodes)

      $("#menuLayer")

      .on("click",".btn-confirm",doSetSelectNode)

      .on("click",".btn-cancel",doHideTree)

  

  });

  

设置选中的节点对象

function doSetSelectNode(){

  //1.获取选中的节点对象

  var nodes=zTree.getSelectedNodes();

  if(nodes.length==0){

       doHideTree();

       return;

}

  var node=nodes[0];

  console.log(node);

  //2.将对象中内容,填充到表单

  $(".form-horizontal").data("parentId",node.id);

  $("#parentId").val(node.name);

  //3.隐藏树对象

  doHideTree();

  }

 

点击树div的确定和取消按钮时隐藏树对象

  function doHideTree(){

 $("#menuLayer").css("display","none");

  }

 

加载树节点信息,并初始化树结构  

 

  function doLoadZtreeNodes(){

  //显示div

  $("#menuLayer").css("display","block");

  var url="menu/doFindZtreeMenuNodes.do";

  //异步加载数据,并初始化数据

  $.getJSON(url,function(result){

  if(result.state==1){

  //使用init函数需要先引入ztree对应的js文件

  zTree=$.fn.zTree.init(

  $("#menuTree"),

  setting,

  result.data);

  }else{

  alert(result.message);

  }

  })

  }

 

 

 

 

 

 

1. 菜单数据添加操作
   1. 服务端实现

核心业务描述

点击页面保存按钮时，获取菜单表单数据，异步提交到服务器端。

 

1. 1. 1. 菜单实体对象定义

业务描述

创建实体类封装客户端请求中的的菜单数据

类的定义

1. 包名:com.jt.sys.entity
2. 类名:SysMenu

类中属性及方法定义

1. 实现序列化接口并添加序列化版本id
2. 属性与表(sys_menus)中字段有对应关系
3. 提供set/get方法，无参数构造方法，重写toString方法

 

public class SysMenu extends BaseEntity implements Serializable{

private static final long serialVersionUID = -5259265803332215029L;

private Integer id;

private String name;

private String url;

private Integer type;

private Integer sort;

private String note;

private Integer parentId;

private String permission;

}

 

1. 1. 1. 菜单Dao 实现

业务描述

在SysMenuDao中添加插入数据的方法，用于将菜单信息写入到数据库

方法定义

1. 方法名 insertObject
2. 返回值 int
3. 参数列表 (SysMenu entity)

 

方法定义

 

int insertObject(SysMenu entity);

 

 

 

1. 1. 1. 菜单Mapper中元素定义

基于SysMenuDao中方法，在SysMenuMapper中定义insert元素

 

元素定义

1. 元素名 insert
2. 元素id insertObject
3. 参数类型 com.jt.sys.entity.SysMenu
4. Sql 定义 insert into …

 

代码实现

 

  <insert id="insertObject"

            parameterType="sysMenu">

          insert into sys_menus

          (name,url,type,sort,note,parentId,permission,

createdTime,modifiedTime,createdUser,modifiedUser)

          values

          (#{name},#{url},#{type},#{sort},#{note},#{parentId},#{permission},

now(),now(),#{createdUser},#{modifiedUser})

  </insert>

 

 

1. 1. 1. 菜单Service中方法定义

业务描述

1. 获取页面中数据，并对数据进行合法验证
2. 将数据写入到数据库
3. 判定结果，并返回

 

方法定义（在SysMenuService接口及实现类添加相关方法）

1. 方法名saveObject
2. 返回值int
3. 参数列表 （SysMenu entity）

 

代码实现

 

 

@Override

public int saveObject(SysMenu entity) {

//1.合法验证

if(entity==null)

throw new ServiceException("保存对象不能为空");

if(StringUtils.isEmpty(entity.getName()))

throw new ServiceException("菜单名不能为空");

int rows;

//2.保存数据

try{

rows=sysMenuDao.insertObject(entity);

}catch(Exception e){

e.printStackTrace();

throw new ServiceException("保存失败");

}

//3.返回数据

return rows;

}

 

 

 

 

1. 1. 1. 菜单Controller中方法定义

业务描述

1. 获取客户端请求数据
2. 调用业务层方法将数据写入数据库
3. 封装结果并返回

 

方法定义（在SysMenuController中添加相关方法）

1. 方法名 doSaveObject
2. 返回值 JsonResult
3. 参数列表(SysMenu entity)
4. url 映射(doSaveObject)

 

代码实现

 

@RequestMapping("doSaveObject")

@ResponseBody

public JsonResult doSaveObject(SysMenu entity){

sysMenuService.saveObject(entity);

return new JsonResult("save ok");

}

 

 

 

1. 1. 客户端实现

 

1. 1. 1.  保存按钮事件处理

业务描述

1. 编辑页面save按钮事件注册及事件处理函数定义
2. 编辑页面Cancel按钮事件注册及事件处理函数定义

 

业务实现

1. 按钮点击事件注册
2. 事件处理函数定义

 

代码实现

 

Cancel 按钮事件处理函数定义

  function doCancel(){

  $(".container-fluid").load("menu/listUI.do",function(){

  $(".container-fluid").removeData();

  $(".form-horizontal").removeData();

  })

  }

 

Save按钮事件处理函数定义

  function doSaveOrUpdate(){

  //1.获取表单数据

  var params=getEditFormData();

  //2.定义url

  var url="menu/doSaveObject.do";

  //3.异步提交数据

  $.post(url,params,function(result){

  if(result.state==1){

  alert(result.message);

  doCancel();

  }else{

  alert(result.message);

  }

  });

  }

 

获取表单数据

function getEditFormData(){

  var params={

    type:$("form input[name='typeId']:checked").val(),

name:$("#nameId").val(),

url:$("#urlId").val(),

sort:$("#sortId").val(),

permission:$("#permissionId").val(),

parentId:$(".form-horizontal").data("parentId")

  }

  return params;

  }

 

 

1. 菜单修改页面数据呈现
   1. 服务端实现
      1. 菜单Dao实现

业务描述

基于用户请求，从数据库中基于id查询菜单信息

业务实习(SysMenuDao接口中定义方法)

1. 方法名 findObjectById
2. 参数列表(Integer id)
3. 返回值 Map<String,Object>

 

代码实现

 

Map<String,Object> findObjectById(

Integer id);

 

1. 1. 1. 菜单Mapper实现

业务描述

基于dao接口中方法，在SysMenuMapper.xml文件中定义映射元素。

元素定义

1. 元素名 select
2. 元素id findObjectById
3. 参数列表(Integer id)
4. 返回值Map<String,Object>

 

代码实现

 

    <select id="findObjectById"

            resultType="map">

        select c.*,p.name parentName

        from sys_menus c left join sys_menus p

        on c.parentId=p.id

        where c.id=#{id}

    </select>

 

1. 1. 1. 菜单Service中方法定义

业务描述

1. 获取控制层请求id
2. 基于id访问数据库
3. 将数据封装到map并发挥

 

业务实现（SysMenuService以及实现类中定义相关方法）

1. 方法名 findObjectById
2. 参数列表
3. 方法返回值为 map

 

代码实现(实现类中重写接口方法，添加业务即可)

 

@Override

public Map<String, Object> findObjectById(

Integer id) {

if(id==null||id<=0)

throw new ServiceException("数据不合法,id="+id);

Map<String,Object> map=sysMenuDao.findObjectById(id);

if(map==null||map.size()==0)

throw new ServiceException("此记录已经不存在");

return map;

}

 

1. 1. 1. 菜单Controller中方法定义

业务描述

1. 接收请求数据id(菜单id)
2. 添加根据Id查询菜单信息的方法

方法定义

1. 返回值 JsonResult
2. 方法名 doFindObjectById
3. 参数列表 （Integer id）
4. url 映射 doFindObjectById

 

代码实现

 

@RequestMapping("doFindObjectById")

@ResponseBody

public JsonResult doFindObjectById(Integer id){

Map<String,Object> map=

sysMenuService.findObjectById(id);

return new JsonResult(map,”query ok”);

}

 

 

1. 1. 客户端实现

 

1. 1. 1. 菜单列表页面修改按钮事件处理

业务描述

点击列表页面修改按钮时加载编辑页面

 

业务实现

1. 事件注册
2. 事件处理(绑定id，设置标题，异步加载页面)

 

代码实现：

 

1. 页面加载方法定义

 

function doLoadEditUI(){

    var flag=true;

var title;

if($(this).hasClass("btn-add")){

title="添加菜单"

} else {

        title="修改菜单";

        var checkedId=getCheckedId();

        if(!checkedId){

          alert("请先选择");

          return;

}

        $.ajax({

url:"menu/doFindObjectById.do",

data:{"id":id},

dataType:"json",

async:false,

success:function(result){

  if(result.state==1){

   $(".container-fluid").data("data",result.data);

  }else{

   alert(result.message);

   flag=false;

  }

}

});

if(!flag)return false;

var url="menu/editUI.do";

$(".container-fluid").load(url,function(){

$(".box-title").html(title);

})

}

 

 

 

1. 1. 1. 菜单编辑页面事件处理

页面描述

页面加载完成，从div中获取绑定的对象，通过对象数据初始化页面表单

方法定义

1. doInitEditForm(data); 通过查找获取的数据初始化表单

 

代码实现：

 

页面加载完成时获取绑定的数据

 

$(function(){

      …

  //假如是修改

  var data=$(".container-fluid").data("data");

  if(data)doInitFormData(data);

  });

 

编辑页面加载完成执行此方法

 

function doInitFormData(data){

/*   $("input[type='radio']").each(function(){

  if($(this).val()==data.type){

  $(this).prop("checked",true);

  }

  }) */

  

  $(".typeRadio input[value='"+data.type+"']").prop("checked",true);

  $("#nameId").val(data.name);

  $("#sortId").val(data.sort);

  $("#urlId").val(data.url);

  $("#permissionId").val(data.permission);

  $("#parentId").val(data.parentName);

  $(".form-horizontal")

  .data("parentId",data.parentId);

  }

 

 

1. 菜单数据更新
   1. 服务端实现
      1. 菜单Dao 中方法定义

业务描述

在SysMenuDao中添加修改菜单方法，用于实现数据库中菜单信息的修改

方法定义

1. 方法名 updateObject
2. 返回值 int
3. 参数列表 (SysMenu entity)

 

代码实现

 

int updateObject(SysMenu entity);

 

 

1. 1. 1. 带单Mapper 中元素定义

业务描述

SysMenuMapper中添加修改菜单数据的元素

元素定义

1. 元素名 update
2. 元素id updateObject
3. 参数 com.jt.sys.entity.SysMenu
4. Sql 定义 update sys_menus set  where ….

 

代码实现：

 

<update id="updateObject"

            parameterType="sysMenu">

         update sys_menus

         set

           name=#{name},

           type=#{type},

           sort=#{sort},

           url=#{url},

           parentId=#{parentId},

           permission=#{permission},

           modifiedUser=#{modifiedUser},

           modifiedTime=now()

        where id=#{id}

    </update>

 

1. 1. 1. 菜单Service 中元素定义

业务描述

1. 获取控制层数据，对数据进行合法性验证
2. 通过持久层对象将数据更新到数据库 
3. 验证并返回结果

 

方法定义

1. 方法名 updateObject
2. 返回值 int
3. 参数列表(SysMenu entity)

 

代码实现

@Override

public int updateObject(SysMenu entity) {

//1.合法验证

if(entity==null)

throw new ServiceException("保存对象不能为空");

if(StringUtils.isEmpty(entity.getName()))

throw new ServiceException("菜单名不能为空");

int rows;

//2.更新数据

try{

rows=sysMenuDao.updateObject(entity);

}catch(Exception e){

e.printStackTrace();

throw new ServiceException("更新失败");

}

//3.返回数据

return rows;

}

 

1. 1. 1. 菜单Controller实现

业务描述（SysMenuController）

1. 接收客户端数据
2. 将数据通过业务层对象进行更新操作
3. 封装结果并返回

 

方法定义

1. 方法名 doUpdateObject
2. 参数列表 SysMenu entity
3. 返回值 JsonResult
4. url 映射 doUpdateObject

 

@RequestMapping("doUpdateObject")

@ResponseBody

public JsonResult doUpdateObject(SysMenu entity){

    sysMenuService.updateObject(entity);

    return new JsonResult();

}

 

 

 

1. 1. 客户端实现
      1. 编辑页面保存按钮事件处理

业务描述

1. 保存按钮事件注册
2. 事件处理函数定义(与添加方法共用一个函数)

 

代码实现：

function doSaveOrUpdate(){

  //1.获取表单数据

  var params=getEditFormData();

  //2.定义url

  var insertUrl="menu/doSaveObject.do";

  var updateUrl="menu/doUpdateObject.do";

  var id=$(".container-fluid").data("id");

  var url=id?updateUrl:insertUrl;

  if(id)params.id=id;

  //3.异步提交数据

  $.post(url,params,function(result){

  if(result.state==1){

  alert(result.message);

  doCancel();

  }else{

  alert(result.message);

  }

  });

  }

  function getEditFormData(){

  var params={

    type:$("form input[name='typeId']:checked").val(),

name:$("#nameId").val(),

url:$("#urlId").val(),

sort:$("#sortId").val(),

permission:$("#permissionId").val(),

parentId:$(".form-horizontal").data("parentId")

  }

  return params;

  }

  

 

 

1. 总结
   1. 重点和难点分析

 

1. 1. 常见FAQ