SSM整合篇】八. SSM权限管理系统+权限认证 第四章 菜单展示与添加

其他 2020-01-25 17:00:02 阅读次数: 0

SSM权限管理系统+权限认证 第三章 增删改操作

SSM权限管理系统+权限认证 第四章

1. 展示所有菜单

  1. 数据库（补全数据库）
    DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `menu_name` varchar(30) DEFAULT NULL,
  `menu_desc` varchar(30) DEFAULT NULL,
  `menu_type` int(2) DEFAULT NULL,
  `menu_url` varchar(30) DEFAULT NULL,
  `menu_parent_id` int(10) DEFAULT NULL,
  `menu_code` varchar(30) DEFAULT NULL,
  `create_user` int(10) DEFAULT NULL,
  `update_user` int(10) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;


INSERT INTO `menu` VALUES ('1', '菜单管理', '菜单管理是最高的目录，是用来管理所有菜单的', '1', null, '0', null, '1', '1', '2020-01-13 20:27:40', '2020-01-13 20:27:40');
INSERT INTO `menu` VALUES ('2', '数据管理', '菜单管理是最高的目录，是用来管理所有菜单的', '1', null, '1', null, '1', '1', '2020-01-13 20:28:38', '2020-01-13 20:28:38');
INSERT INTO `menu` VALUES ('3', 'admin', '1212', '1', 'asd', '2', '1212', null, null, null, null);


DROP TABLE IF EXISTS `role`;
CREATE TABLE `role` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `role_name` varchar(30) DEFAULT NULL,
  `role_desc` varchar(100) DEFAULT NULL,
  `create_user` int(11) DEFAULT NULL,
  `update_user` int(11) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


DROP TABLE IF EXISTS `role_menu`;
CREATE TABLE `role_menu` (
  `id` int(10) NOT NULL,
  `rid` int(10) DEFAULT NULL,
  `mid` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `FK_Reference_3` (`rid`),
  KEY `FK_Reference_4` (`mid`),
  CONSTRAINT `FK_Reference_3` FOREIGN KEY (`rid`) REFERENCES `role` (`id`),
  CONSTRAINT `FK_Reference_4` FOREIGN KEY (`mid`) REFERENCES `menu` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;



DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) DEFAULT NULL,
  `password` varchar(30) DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  `sex` int(2) DEFAULT NULL,
  `email` varchar(30) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8;



INSERT INTO `user` VALUES ('1', 'admin', 'admin', '22', '0', '[email protected]', '2020-01-11');
INSERT INTO `user` VALUES ('2', 'admin', 'admin', '22', '1', '[email protected]', '2020-01-12');
INSERT INTO `user` VALUES ('5', 'test_3', 'test_3', '3', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('6', 'test_4', 'test_4', '4', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('7', 'test_5', 'test_5', '5', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('8', 'test_6', 'test_6', '6', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('9', 'test_7', 'test_7', '7', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('10', 'test_8', 'test_8', '8', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('11', 'test_9', 'test_9', '9', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('12', 'test_10', 'test_10', '10', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('13', 'test_11', 'test_11', '11', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('14', 'test_12', 'test_12', '12', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('15', 'test_13', 'test_13', '13', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('16', 'test_14', 'test_14', '14', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('17', 'test_15', 'test_15', '15', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('18', 'test_16', 'test_16', '16', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('19', 'test_17', 'test_17', '17', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('20', 'test_18', 'test_18', '18', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('21', 'test_19', 'test_19', '19', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('22', 'test_20', 'test_20', '20', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('23', 'admin', '123456', '18', '1', '[email protected]', '2020-01-10');
INSERT INTO `user` VALUES ('24', 'admin', '123456', '18', '1', '[email protected]', '2020-01-10');
INSERT INTO `user` VALUES ('26', 'test_1', 'test_1', '1', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('27', 'test_2', 'test_2', '2', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('28', 'test_3', 'test_3', '3', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('29', 'test_4', 'test_4', '4', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('30', 'test_5', 'test_5', '5', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('31', 'test_6', 'test_6', '6', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('32', 'test_7', 'test_7', '7', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('33', 'test_8', 'test_8', '8', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('34', 'test_9', 'test_9', '9', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('35', 'test_10', 'test_10', '10', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('36', 'test_11', 'test_11', '11', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('37', 'test_12', 'test_12', '12', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('38', 'test_13', 'test_13', '13', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('39', 'test_14', 'test_14', '14', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('40', 'test_15', 'test_15', '15', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('41', 'test_16', 'test_16', '16', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('42', 'test_17', 'test_17', '17', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('43', 'test_18', 'test_18', '18', '0', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('44', 'test_19', 'test_19', '19', '1', '[email protected]', '2020-01-13');
INSERT INTO `user` VALUES ('45', 'test_20', 'test_20', '20', '0', '[email protected]', '2020-01-13');


DROP TABLE IF EXISTS `user_role`;
CREATE TABLE `user_role` (
  `id` int(10) NOT NULL,
  `uiid` int(10) DEFAULT NULL,
  `rid` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `FK_Reference_1` (`uiid`),
  KEY `FK_Reference_2` (`rid`),
  CONSTRAINT `FK_Reference_1` FOREIGN KEY (`uiid`) REFERENCES `user` (`id`),
  CONSTRAINT `FK_Reference_2` FOREIGN KEY (`rid`) REFERENCES `role` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  2. 实体类
    package com.wpj.bean;

import com.baomidou.mybatisplus.annotations.*;
import com.baomidou.mybatisplus.enums.*;
import lombok.*;

import java.util.*;

/**
 * ClassName: Menu
 * Description:
 *      使用lombok生成无参，全参，getter，setter，toString方法
 *      使用MyBatis注解实体对应表
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:39
 * @since JDK 1.8
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("menu")
public class Menu {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private String menuName; // menu_name
    private String menuDesc;
    private Integer menuType;
    private String menuUrl;
    private Integer menuParentId;
    private String menuCode;
    private Integer createUser;
    private Integer updateUser;
    private Date createTime;
    private Date updateTime;
    @TableField(exist = false)
    private Integer isParent;
}
  3. service及其impl
    package com.wpj.service;

import com.wpj.baseservice.*;
import com.wpj.bean.*;

/**
 * ClassName: IMenuService
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:08
 * @since JDK 1.8
 */
public interface IMenuService extends IBaseService<Menu> {

}

    package com.wpj.service.impl;

import com.baomidou.mybatisplus.mapper.*;
import com.wpj.baseservice.impl.*;
import com.wpj.bean.*;
import com.wpj.mapper.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;

/**
 * ClassName: MenuServiceImpl
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:09
 * @since JDK 1.8
 */
@Service
public class MenuServiceImpl extends BaseServiceImpl<Menu> implements IMenuService {
    @Autowired
    private IMenuMapper iMenuMapper;

    protected BaseMapper<Menu> getBaseMapper() {
        return iMenuMapper;
    }
}
  4. mapper
    package com.wpj.mapper;

import com.baomidou.mybatisplus.mapper.*;
import com.wpj.bean.*;

/**
 * ClassName: IMenuMapper
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:10
 * @since JDK 1.8
 */
public interface IMenuMapper extends BaseMapper<Menu>{

}
  5. test
    @Autowired
private IMenuService iMenuService;
@Test
public void addMenu(){
	Menu menu = new Menu();
	menu.setMenuName("菜单管理");
	menu.setMenuType(1); // 1 目录 2 菜单 3 按钮
	menu.setCreateTime(new Date());
	menu.setUpdateTime(new Date());
	menu.setCreateUser(UserUtils.getLoginUser().getId());
	menu.setUpdateUser(UserUtils.getLoginUser().getId());
	menu.setMenuCode(null); // 权限码是权限的唯一标识，目录没有
	menu.setMenuUrl(null); // 目录也没有url
	menu.setMenuParentId(0);
	menu.setMenuDesc("菜单管理是最高的目录，是用来管理所有菜单的");
	
	int result = iMenuService.add(menu);
	System.out.println("result: " + (result == 1));
}
  6. 模拟登陆账号
    package com.wpj.utils;

import com.wpj.bean.*;

/**
* ClassName: UserUtils
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\13 0013 20:16
* @since JDK 1.8
*/
public class UserUtils {
   /**
    * 获取当前登录用户
    * @return
    */
   public static User getLoginUser(){
       User user = new User();
       user.setUsername("admin");
       user.setPassword("admin");
       user.setId(1);
       return user;
   }
}
  7. controller
    package com.wpj.web.controller;

import com.baomidou.mybatisplus.plugins.*;
import com.wpj.bean.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;
import org.springframework.ui.*;
import org.springframework.web.bind.annotation.*;

/**
 * ClassName: MenuController
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:29
 * @since JDK 1.8
 */
@Controller
@RequestMapping("/menu")
public class MenuController {
    @Autowired
    private IMenuService iMenuService;

    @RequestMapping("/getMenuPage")
    public String getMenuPage(Page<Menu> page, ModelMap map) {
        iMenuService.getPage(page);
        map.put("page", page);
        map.put("url", "menu/getMenuPage");
        return "menu/menuList";
    }
}
  8. 修改index.html
    <ul>
	....
	<li>
		<a _href="menu/getMenuPage" href="javascript:void(0)">菜单管理</a>
	</li>
</ul>
  9. 创建menuList.html，在application/menu
    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<base th:href="${#request.getContextPath()+'/'}">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="/favicon.ico" >
<LINK rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>管理员列表</title>

</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">

	<div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l">
					<a href="javascript:;" id="batchDelBut" class="btn btn-danger radius">
						<i class="Hui-iconfont">&#xe6e2;</i> 批量删除
					</a>

					<a href="javascript:void(0);" onclick="admin_add('添加用户','menu/toAddMenu','800','500')" class="btn btn-primary radius">
							<i class="Hui-iconfont">&#xe600;</i> 添加管理员
					</a>

				</span>
	</div>

	<table class="table table-border table-bordered table-bg">
		<thead>
			<tr>
				<th scope="col" colspan="9">员工列表</th>
			</tr>
			<tr class="text-c">
				<th width="25"><input type="checkbox" name="" value=""></th>
				<th width="40">ID</th>
				<th width="150">菜单名称</th>
				<th width="90">菜单类型</th>
				<th width="150">菜单权限码</th>
				<th width="150">菜单的url</th>
				<th width="130">菜单描述</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" th:each="menu:${page.records}">
				<td><input type="checkbox" th:value="${menu.id}" name=""></td>
				<td th:text="${menu.id}"/>
				<td th:text="${menu.menuName}"/>
				<td th:switch="${menu.menuType}">
					<span th:case="1">目录</span>
					<span th:case="2">菜单</span>
					<span th:case="3">按钮</span>
				</td>
				<td th:text="${menu.menuCode == null?'无':menu.menuCode}"/>
				<td th:text="${menu.menuUrl  == null?'无':menu.menuUrl}"/>
				<td th:text="${menu.menuDesc}"/>
				<td class="td-manage">

					<a title="编辑" href="javascript:;"  th:onclick="|admin_edit('用户编辑','user/getUserById/${menu.id}','1','800','500')|" class="ml-5" style="text-decoration:none">
						<i class="Hui-iconfont">&#xe6df;</i>
					</a>

					<a title="删除" href="javascript:;" onclick="admin_del(this,'1')" class="ml-5" style="text-decoration:none">
						<i class="Hui-iconfont">&#xe6e2;</i>
					</a>
				</td>
			</tr>
		</tbody>
	</table>
	<div th:include="common/page::pageDivShow"></div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script> 
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/form_utils.js"></script>
<script type="text/javascript">
	$(function(){
	})
</script>
<script type="text/javascript">
/*
	参数解释：
	title	标题
	url		请求的url
	id		需要操作的数据id
	w		弹出层宽度（缺省调默认值）
	h		弹出层高度（缺省调默认值）
*/
/*管理员-增加*/
function admin_add(title,url,w,h){
	layer_show(title,url,w,h);
}
/*管理员-删除*/
function admin_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		//此处请求后台程序，下方是成功后的前台处理……
		
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
/*管理员-编辑*/
function admin_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*管理员-停用*/
function admin_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		//此处请求后台程序，下方是成功后的前台处理……
		
		$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
		$(obj).remove();
		layer.msg('已停用!',{icon: 5,time:1000});
	});
}

/*管理员-启用*/
function admin_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		//此处请求后台程序，下方是成功后的前台处理……
		
		
		$(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已启用!', {icon: 6,time:1000});
	});
}
</script>
</body>
</html>
  10. 访问
    在这里插入图片描述

2. 添加菜单页面

  1. spring-mvc 配置
    <mvc:view-controller path="user/toAddMenu" view-name="menu/addMenu"/>
  2. 创建addMenu.html
    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<base th:href="${#request.getContextPath()+'/'}">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>添加管理员</title>
</head>
<body>
<div class="pd-20">
	<form action="abc" method="post" class="form form-horizontal" id="form-menu-add">
		<div class="row cl">
			<label class="form-label col-3"><span class="c-red">*</span>菜单名称：</label>
			<div class="formControls col-5">
				<input type="text" class="input-text" value="admin" placeholder="" id="username" name="menuName"  errormsg="用户名只能为2~16位" datatype="*2-16" nullmsg="用户名不能为空">
			</div>
			<div class="col-4"> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-3"><span class="c-red">*</span>菜单类型：</label>
			<div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="menuType" datatype="*"  size="1">
					<option value="1">目录</option>
					<option value="2">菜单</option>
					<option value="3">按钮</option>
				</select>
				</span> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-3">权限码：</label>
			<div class="formControls col-5">
				<input type="text" class="input-text" placeholder="" id="age" name="menuCode"  nullmsg="年龄不能为空">
			</div>
			<div class="col-4"> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-3">父目录：</label>
			<div class="formControls col-5">
				<input type="hidden" id="menuParentId" name="menuParentId">
				<input type="text" class="input-text" placeholder="" id="menuParentName" name="menuParentName" nullmsg="年龄不能为空">
				<input class="btn btn-primary radius" onclick="selectParentMenu('菜单','application/menu/selectParentMenu.html',300,400)" type="button" value="&nbsp;&nbsp;选择&nbsp;&nbsp;">
			</div>
			<div class="col-4"> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-3">权限url：</label>
			<div class="formControls col-5">
				<input type="text" class="input-text"  placeholder="" id="age" name="menuUrl"  nullmsg="年龄不能为空">
			</div>
			<div class="col-4"> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-3">权限描述：</label>
			<div class="formControls col-5">
				<textarea name="menuDesc" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			</div>
			<div class="col-4"> </div>
		</div>




		<div class="row cl">
			<div class="col-9 col-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>

<!-- 表单校验-->
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<!-- 时间插件-->
<script type="text/javascript" src="/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/form_utils.js"></script>
<script type="text/javascript" src="js/jquerysession.js"></script>
<script type="text/javascript" src="js/menuZtree.js"></script>

<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-menu-add").Validform({
		tiptype:2,
		callback:function(form){ // 表单校验通过后调用这个函数
//			debugger
			submitForm("menu/addMenu","form-menu-add")

			// 如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单
			return false;
		}
	});
});
</script>
</body>
</html>
    1. controller
    @RequestMapping(value = "/getMenuListByParentId")
@ResponseBody
public List<Map<String,Object>> getMenuListByParentId(Integer id) {

    // 第一次进来pid是空值
    if (id == null) {
        id = 0; // 默认查询根节点
    }

    // 1.根据父id查询所有的子节点
    List<Menu> menuList = iMenuService.getMenuListByParentId(id);

    // 2.创建一个集合
    List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();

    for (Menu menu : menuList) {

        // 3.把对象中的数据放到Map中
        Map<String, Object> map = new HashMap<String,Object>();
        map.put("id", menu.getId());
        map.put("name", menu.getMenuName());
        map.put("pid", menu.getMenuParentId());
        map.put("isParent",menu.getIsParent()==null?false:true);

        // 4.把Map放到集合中保存起来
        list.add(map);
    }

    return list;
}
    1. service及其impl
    package com.wpj.service;

import com.wpj.baseservice.*;
import com.wpj.bean.*;

import java.util.*;

/**
 * ClassName: IMenuService
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:08
 * @since JDK 1.8
 */
public interface IMenuService extends IBaseService<Menu> {

    List<Menu> getMenuListByParentId(Integer id);
}

    package com.wpj.service.impl;

import com.baomidou.mybatisplus.mapper.*;
import com.wpj.baseservice.impl.*;
import com.wpj.bean.*;
import com.wpj.mapper.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;

import java.util.*;

/**
 * ClassName: MenuServiceImpl
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:09
 * @since JDK 1.8
 */
@Service
public class MenuServiceImpl extends BaseServiceImpl<Menu> implements IMenuService {

    @Autowired
    private IMenuMapper iMenuMapper;

    protected BaseMapper<Menu> getBaseMapper() {
        return iMenuMapper;
    }

    public List<Menu> getMenuListByParentId(Integer id) {
        return iMenuMapper.getMenuListByParentId(id);
    }
}
  3. mapper
    package com.wpj.mapper;

import com.baomidou.mybatisplus.mapper.*;
import com.wpj.bean.*;

import java.util.*;

/**
 * ClassName: IMenuMapper
 * Description:
 *
 * @author JieKaMi
 * @version 1.0
 * @date: 2020\1\13 0013 20:10
 * @since JDK 1.8
 */
public interface IMenuMapper extends BaseMapper<Menu>{

    List<Menu> getMenuListByParentId(Integer id);
}
  4. mapper对应mapper映射文件
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.wpj.mapper.IMenuMapper">

    <resultMap id="menuResultMap" type="menu">
        <id column="id" property="id"/>
        <result column="menu_name" property="menuName"/>
        <result column="menu_parent_id" property="menuParentId"/>
        <result column="isParent" property="isParent"/>
    </resultMap>

    <select id="getMenuListByParentId" resultMap="menuResultMap">
            SELECT
                m1.*,
                m2.id as isParent
            FROM
                menu m1
            LEFT JOIN menu m2 ON (m1.id = m2.menu_parent_id)
            WHERE
                m1.menu_parent_id = #{id}
            group by m1.id;
    </select>
</mapper>
  5. spring-mybatis放开
    <!-- 3.3 Mapepr文件的路径 -->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
  6. 创建selectParentMenu.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/" th:href="${#request.getContextPath()+'/'}">
    <!--<link rel="stylesheet" href="lib/zTree/v3/css/demo.css" type="text/css">-->
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="js/jquerysession.js"></script>
    <SCRIPT LANGUAGE="JavaScript">

        // 树对象
        var zTreeObj;


        // zTree 的参数配置
        var setting = {
            async: { // 异步的一些参数
                enable: true, // 用简单的JSON格式
                url: "menu/getMenuListByParentId", // 异步请求的地址
                autoParam: ["id"] // 请求地址时传递的参数
            },
            callback: { // 回调函数的参数
                onClick: zTreeOnClick // 点击事件
            }
        };
        // 设置静态的数据
        var zNodes = null;

        // 页面加载的时候调用
        $(document).ready(function(){

            // 初始化树插件
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        function zTreeOnClick(event, treeId, treeNode) {
           $("#selectNodeName").val(treeNode.name);
           $("#selectNodeId").val(treeNode.id);
        };

        function closeSelectNodel(){

            // 1.获取用户选择的父菜单
            var mname = $("#selectNodeName").val();
            var mid = $("#selectNodeId").val();

            // 2.保存到session中
            $.session.set('selectParentMenuName',mname);
            $.session.set('selectParentMenuId',mid);

            // 3.关闭选择父菜单的页面
            var index = parent.layer.getFrameIndex(window.name); // 获取框的索引
            parent.layer.close(index); // 关闭框
        }
    </SCRIPT>
</head>
<body>
<!-- 显示树-->
<div>
    <input type="text" id="selectNodeName" readonly="readonly"><button onclick="closeSelectNodel()">确定</button>
    <input type="hidden" id="selectNodeId">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
  1. 导入2个js文件
    menuZtree.js和网上下载的jquerysession.js
    function selectParentMenu(title,url,w,h){
    if (title == null || title == '') {
        title=false;
    };
    if (url == null || url == '') {
        url="404.html";
    };
    if (w == null || w == '') {
        w=800;
    };
    if (h == null || h == '') {
        h=($(window).height() - 50);
    };
    layer.open({
        type: 2, // 框的类型
        area: [w+'px', h +'px'], // 跨度和高度
        fix: false, //不固定
        maxmin: true, // 最大最小化
        shade:0.4,
        title: title,
        content: url,
        end:function(){ // 添加用户的关闭后调用
            $("#menuParentId").val($.session.get('selectParentMenuId'));
            $("#menuParentName").val($.session.get('selectParentMenuName'));
        }
    });
}

    (function($){$.session={_id:null,_cookieCache:undefined,_init:function(){if(!window.name){window.name=Math.random();}this._id=window.name;this._initCache();var matches=(new RegExp(this._generatePrefix()+"=([^;]+);")).exec(document.cookie);if(matches&&document.location.protocol!==matches[1]){this._clearSession();for(var key in this._cookieCache){try{window.sessionStorage.setItem(key,this._cookieCache[key]);}catch(e){};}}document.cookie=this._generatePrefix()+"="+document.location.protocol+';path=/;expires='+(new Date((new Date).getTime()+120000)).toUTCString();},_generatePrefix:function(){return'__session:'+this._id+':';},_initCache:function(){var cookies=document.cookie.split(';');this._cookieCache={};for(var i in cookies){var kv=cookies[i].split('=');if((new RegExp(this._generatePrefix()+'.+')).test(kv[0])&&kv[1]){this._cookieCache[kv[0].split(':',3)[2]]=kv[1];}}},_setFallback:function(key,value,onceOnly){var cookie=this._generatePrefix()+key+"="+value+"; path=/";if(onceOnly){cookie+="; expires="+(new Date(Date.now()+120000)).toUTCString();}document.cookie=cookie;this._cookieCache[key]=value;return this;},_getFallback:function(key){if(!this._cookieCache){this._initCache();}return this._cookieCache[key];},_clearFallback:function(){for(var i in this._cookieCache){document.cookie=this._generatePrefix()+i+'=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';}this._cookieCache={};},_deleteFallback:function(key){document.cookie=this._generatePrefix()+key+'=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';delete this._cookieCache[key];},get:function(key){return window.sessionStorage.getItem(key)||this._getFallback(key);},set:function(key,value,onceOnly){try{window.sessionStorage.setItem(key,value);}catch(e){}this._setFallback(key,value,onceOnly||false);return this;},'delete':function(key){return this.remove(key);},remove:function(key){try{window.sessionStorage.removeItem(key);}catch(e){};this._deleteFallback(key);return this;},_clearSession:function(){try{window.sessionStorage.clear();}catch(e){for(var i in window.sessionStorage){window.sessionStorage.removeItem(i);}}},clear:function(){this._clearSession();this._clearFallback();return this;}};$.session._init();})(jQuery);

    1. 结果
      在这里插入图片描述

    2. controlle写addMenu

    @RequestMapping(value = "/addMenu")
@ResponseBody
public ResultEntity addMenu(Menu menu){
    int result = iMenuService.add(menu);

    if (result > 0) {
        return ResultEntity.success();
    } else {
        return ResultEntity.fial();
    }
}
    1. 菜单展示与添加完成。。。。
      在这里插入图片描述
杰KaMi
发布了42 篇原创文章 · 获赞 8 · 访问量 2411
私信 关注

猜你喜欢

转载自blog.csdn.net/TheNew_One/article/details/103963546
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022