SSM整合篇】八. SSM权限管理系统+权限认证第二章页面搭建和分页加载所有User

最新推荐文章于 2022-10-25 21:34:47 发布

杰KaMi

最新推荐文章于 2022-10-25 21:34:47 发布

阅读量690

点赞数 1

分类专栏： SSM框架文章标签： spring mybatis

本文链接：https://blog.csdn.net/TheNew_One/article/details/103950821

版权

SSM框架专栏收录该内容

15 篇文章 7 订阅

订阅专栏

SSM权限管理系统+权限认证第一章项目准备

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

1. 将上一章节尾admin2的目录和index.html放入项目webapp下

引入h-ui.admin

2. 修改index.html

删掉左侧导航栏多的菜单，只留下一个大菜单（咨询管理）和三个小菜单（用户管理，角色管理，权限管理）

<!DOCTYPE HTML>
<html>
<head>
<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="skin/default/skin.css" rel="stylesheet" type="text/css" id="skin" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/style.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>H-ui.admin v2.3</title>
<meta name="keywords" content="H-ui.admin v2.3,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<header class="Hui-header cl"> <a class="Hui-logo l" title="H-ui.admin v2.3" href="/">H-ui.admin</a> <a class="Hui-logo-m l" href="/" title="H-ui.admin">H-ui</a> <span class="Hui-subtitle l">V2.3</span>
	<nav class="mainnav cl" id="Hui-nav">
		<ul>
			<li class="dropDown dropDown_click"><a href="javascript:;" class="dropDown_A"><i class="Hui-iconfont">&#xe600;</i> 新增 <i class="Hui-iconfont">&#xe6d5;</i></a>
				<ul class="dropDown-menu radius box-shadow">
					<li><a href="javascript:;" onclick="article_add('添加资讯','article-add.html')"><i class="Hui-iconfont">&#xe616;</i> 资讯</a></li>
					<li><a href="javascript:;" onclick="picture_add('添加资讯','picture-add.html')"><i class="Hui-iconfont">&#xe613;</i> 图片</a></li>
					<li><a href="javascript:;" onclick="product_add('添加资讯','product-add.html')"><i class="Hui-iconfont">&#xe620;</i> 产品</a></li>
					<li><a href="javascript:;" onclick="member_add('添加用户','member-add.html','','510')"><i class="Hui-iconfont">&#xe60d;</i> 用户</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	<ul class="Hui-userbar">
		<li>超级管理员</li>
		<li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
			<ul class="dropDown-menu radius box-shadow">
				<li><a href="#">个人信息</a></li>
				<li><a href="#">切换账户</a></li>
				<li><a href="#">退出</a></li>
			</ul>
		</li>
		<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
		<li id="Hui-skin" class="dropDown right dropDown_hover"><a href="javascript:;" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
			<ul class="dropDown-menu radius box-shadow">
				<li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
				<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
				<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
				<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
				<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
				<li><a href="javascript:;" data-val="orange" title="绿色">橙色</a></li>
			</ul>
		</li>
	</ul>
	<a aria-hidden="false" class="Hui-nav-toggle" href="#"></a> </header>
<aside class="Hui-aside">
	<input runat="server" id="divScrollValue" type="hidden" value="" />
	<div class="menu_dropdown bk_2">
		<dl id="menu-article">
			<dt><i class="Hui-iconfont">&#xe616;</i> 资讯管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
			<dd>
				<ul>
					<li><a _href="user/getUserPage" href="javascript:void(0)">用户管理</a></li>
					<li><a _href="user/getRolePage" href="javascript:void(0)">角色管理</a></li>
					<li><a _href="user/getPermissionPage" href="javascript:void(0)">权限管理</a></li>
				</ul>
			</dd>
		</dl>
	</div>
</aside>
<div class="dislpayArrow"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<section class="Hui-article-box">
	<div id="Hui-tabNav" class="Hui-tabNav">
		<div class="Hui-tabNav-wp">
			<ul id="min_title_list" class="acrossTab cl">
				<li class="active"><span title="我的桌面" data-href="welcome.html">我的桌面</span><em></em></li>
			</ul>
		</div>
		<div class="Hui-tabNav-more btn-group"><a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d4;</i></a><a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d7;</i></a></div>
	</div>
	<div id="iframe_box" class="Hui-article">
		<div class="show_iframe">
			<div style="display:none" class="loading"></div>
			<iframe scrolling="yes" frameborder="0" src="welcome.html"></iframe>
		</div>
	</div>
</section>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/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">
/*资讯-添加*/
function article_add(title,url){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*图片-添加*/
function picture_add(title,url){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*产品-添加*/
function product_add(title,url){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*用户-添加*/
function member_add(title,url,w,h){
	layer_show(title,url,w,h);
}
</script> 
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?080836300300be57b7f34f4b3e97d911";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s)})();
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F080836300300be57b7f34f4b3e97d911' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

3. 部署访问

在这里插入图片描述

4. 用户管理页面 application/user/userList.html

在application/user/下创建userList.html，将h-ui.admin框架里面的admin-list.html内容复制进去。引入thymeleaf.org和写<base>
在这里插入图片描述

5. controller写一个分页查询方法，返回userList.html的视图路径

其实该方法在之前就已经定义好了，由于分页不是我们自己写的，里面的用于分页的url要我们存进去

@RequestMapping("/getUserPage")
public String getUserPage(Page<User> page, ModelMap map){
    iUserService.getPage(page);
    map.put("page", page);
    map.put("url", "user/getUserPage");	// 用于分页模板提供路径的url
    return "user/userList";
}

6. 修改userList.html里面写死的数据，动态加载数据

<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">生日</th>
				<th width="130">邮箱</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" th:each="user:${page.records}">
				<td><input type="checkbox" value="1" name=""></td>
				<td th:text="${user.id}"/>
				<td th:text="${user.username}"/>
				<td th:text="${user.age}"/>
				<td th:text="${user.sex == 0?'男':'女'}"/>
				<td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}"/>
				<td th:text="${user.email}"/>
				<td class="td-manage"><a style="text-decoration:none" onClick="admin_stop(this,'10001')" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a> <a title="编辑" href="javascript:;" onclick="admin_edit('管理员编辑','admin-add.html','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>

7. 运行（页面查询所有User完成）

在这里插入图片描述

8. 分页（mybatis-plus分页依赖一个插件，在spring-mybatis中已经配置）

先在测试类中添加20条数据

在application/common/下引入一个分页模板 page.html（之前项目写的）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#request.getContextPath()+'/'}">
</head>
<body>
<!-- 初始化分页导航条 -->
<div th:fragment="pageDivShow">
    <!-- 这个div用来显示分页导航条的-->
    <div id="pageDiv"></div>
    <!-- 添加样式和js的文件-->
    <link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all">
    <script src="lib/layer/ui/layui.js"></script>
    <script th:inline="javascript">
        var cout = [[${page.total}]];
        var pageNum = [[${page.current}]];
        var limit = [[${page.size}]];
        var url = [[${url}]];
    </script>
    <script>
        // 初始化分页导航条
        layui.use('laypage', function(){
            // laypage代表的前端分页对象
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pageDiv' // 存放分页导航条的容器id
                ,count: cout // 条数
                ,layout: [ 'prev', 'page', 'next', 'limit','count'] // 局部
                ,limit: limit  // 每页显示的条数
                ,curr:pageNum // 当前页
                ,limits:[5,10,20,30]
                ,jump: function(obj, first){
                    //首次不执行
                    if(!first){
                        //do something
                        // 查询下一页的数据
                        location.href = url+"?current="+obj.curr+"&size="+obj.limit;
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>

在userLIst.html中</table>下包含这个页面

	....
    </tbody>
    </table>
    <div th:include="common/page::pageDivShow"></div>
    ....

运行

杰KaMi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SSM整合篇】八. SSM权限管理系统+权限认证第二章页面搭建和分页加载所有User

SSM权限管理系统+权限认证第一章SSM权限管理系统+权限认证第二章1. 下载h-ui.admin框架
复制链接

扫一扫

专栏目录