尚好房 02_用户角色管理
尚好房：用户角色管理
一、功能介绍
1、角色管理
2、用户管理
二、后台前端框架
1、后台框架选择
后台前端框架模板：Hplus
下载地址：https://gitee.com/hplus_admin/hplus
资料文件中已下载，可以直接使用
2、模板页面
1、主页
2、表单
3、表格
说明：我们需要的后台模板基本都包含
3、集成框架
3.1、添加框架静态资源
-
在web-admin模块webapps下新建static文件夹，用于存放静态资源文件
-
复制Hplus静态资源到static文件夹
- 项目中静态资源如图
3.2、添加框架主页面
-
在templates目录新建frame文件夹，用于存放框架相关页面
-
在frame文件夹中创建
index.htmlDOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="renderer" content="webkit"/> <title>尚好房平台管理系统title> <meta name="keywords" content="尚好房平台管理系统,后台HTML,响应式后台"/> <meta name="description" content="尚好房平台管理系统,后台HTML,响应式后台"/> <link rel="shortcut icon" th:href="@{/static/favicon.ico}"/> <link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet"/> <link th:href="@{/static/css/font-awesome.min.css(v=4.4.0)}" rel="stylesheet"/> <link th:href="@{/static/css/animate.css}" rel="stylesheet"/> <link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet"/> <link th:href="@{/static/css/jquery.contextMenu.min.css}" rel="stylesheet"/> head> <body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden;"> <div id="wrapper"> <nav class="navbar-default navbar-static-side" role="navigation"> <div class="nav-close"><i class="fa fa-times-circle">i>div> <div class="sidebar-collapse"> <ul class="nav" id="side-menu"> <li class="nav-header"> <div class="dropdown profile-element"> <span><img alt="image" class="img-circle" th:src="@{/static/img/profile_small.jpg}"/>span> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <span class="clear"> <span class="block m-t-xs"><strong class="font-bold">Beaut-zihanstrong>span> <span class="text-muted text-xs block">超级管理员<b class="caret">b>span> span> a> <ul class="dropdown-menu animated fadeInRight m-t-xs"> <li><a class="J_menuItem" href="javascript:">修改头像a>li> <li><a class="J_menuItem" href="javascript:">个人资料a>li> <li><a class="J_menuItem" href="javascript:">联系我们a>li> <li><a class="J_menuItem" href="javascript:">信箱a>li> <li class="divider">li> <li><a href="/logout">安全退出a>li> ul> div> <div class="logo-element">H+div> li> <li> <a href="#"> <i class="fa fa-home">i> <span class="nav-label">主页span> <span class="fa arrow">span> a> <ul class="nav nav-second-level"> <li> <a class="J_menuItem" href="index_v1.html" data-index="0">主页示例一a> li> <li> <a class="J_menuItem" href="index_v2.html">主页示例二a> li> <li> <a class="J_menuItem" href="index_v3.html">主页示例三a> li> <li> <a class="J_menuItem" href="index_v4.html">主页示例四a> li> <li> <a href="index_v5.html" target="_blank">主页示例五a> li> ul> li> ul> div> nav> <div id="page-wrapper" class="gray-bg dashbard-1"> <div class="row border-bottom"> <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;"> <div class="navbar-header"> <a class="navbar-minimalize minimalize-styl-2 btn btn-primary" href="#"><i class="fa fa-bars">i> a> <form role="search" class="navbar-form-custom" method="post" action="search_results.html"> <div class="form-group"> <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search"/> div> form> div> nav> div> <div class="row content-tabs"> <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward">i>button> <nav class="page-tabs J_menuTabs"> <div class="page-tabs-content"> <a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页a> div> nav> <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward">i>button> <div class="btn-group roll-nav roll-right"> <button class="dropdown" data-toggle="dropdown">页签操作<span class="caret">span>button> <ul role="menu" class="dropdown-menu dropdown-menu-right"> <li class="tabCloseCurrent"><a>关闭当前a>li> <li class="J_tabCloseOther"><a>关闭其他a>li> <li class="J_tabCloseAll"><a>全部关闭a>li> ul> div> <a href="#" class="roll-nav roll-right tabReload"><i class="fa fa-refresh">i> 刷新a> div> <div class="row J_mainContent" id="content-main"> <iframe class="J_iframe" name="iframe0" width="100%" height="100%" th:src="@{/main}" frameborder="0" data-id="index_v1.html" seamless>iframe> div> <div class="footer"> <div class="pull-right">© 2014-2015 <a href="http://www.zi-han.net/" target="_blank">zihan's bloga> div> div> div> div> <script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script> <script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script> <script th:src="@{/static/js/plugins/metisMenu/jquery.metisMenu.js}">script> <script th:src="@{/static/js/plugins/slimscroll/jquery.slimscroll.min.js}">script> <script th:src="@{/static/js/plugins/contextMenu/jquery.contextMenu.min.js}">script> <script th:src="@{/static/js/plugins/layer/layer.min.js}">script> <script th:src="@{/static/js/hplus.js(v=4.1.0)}">script> <script type="text/javascript" th:src="@{/static/js/contabs.js}">script> body> html> -
在frame文件夹中创建
main.html页面DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="renderer" content="webkit" /> head> <body style="position: relative;"> <div style="text-align:center;margin-top: 100px;font-size: 20px;"> <strong>欢迎登录尚好房平台管理系统strong> div> body> html>
3.3、view-controller访问页面
<mvc:view-controller path="/" view-name="frame/index"/>
<mvc:view-controller path="/main" view-name="frame/main"/>
3.4、查看效果
启动项目，访问：http://localhost:8000/
框架集成成功
三、角色管理模块
1、角色列表功能
该功能后端三层结构代码在昨天已经写好了
1.1 功能效果
1.2 前端页面
- 修改
role/index.html页面，实现数据显示
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script>
<script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script>
<script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}">script>
<script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}">script>
<script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}">script>
head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号th>
<th>角色名称th>
<th>角色编码th>
<th>描述th>
<th>创建时间th>
tr>
thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${list}">
<td class="text-center" th:text="${it.count}">11td>
<td th:text="${item.roleName}">22td>
<td th:text="${item.roleCode}">33td>
<td th:text="${item.description}">33td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td>
tr>
tbody>
table>
div>
div>
div>
div>
div>
body>
html>
-
修改
frame/index.html，实现在框架右侧显示角色列表页面<li> <a class="J_menuItem" th:href="@{/role}" data-index="0">角色管理a> li>
2、弹出层技术
2.1、弹出层介绍
添加、修改、删除功能我们要使用弹出层的方式进行处理
弹出层框架: layer
layer参考文档：http://www.uimaker.com/layui/doc/modules/layer.html
hplus-master已经引入了layer框架，路径static/js/plugins/layer,可以直接使用
2.2、弹出层封装
我们把可能使用到的弹出层方法都封装一下，方便后续使用
在static/js目录新建文件：myLayer.js(无需自己编写)
var opt = {
alert : function(msg){
layer.alert(msg);
},
load : function () {
layer.load(1, {
shade: [0.5,'#fff'] //0.1透明度的白色背景
});
},
confirm : function(url, msg) {
var msg = msg ? msg : "确定该操作吗？";
layer.confirm(msg,function(index){
opt.load();
window.location = url;
});
},
dialog : function(message, messageType) {
if(message != '' && message != null) {
if(messageType == '1') {
layer.msg(message, {icon: 1});
} else {
layer.alert(message, {icon: 2});
}
}
},
openWin : function(url,title, width,height) {
var title = title ? title : false;
layer.open({
type: 2,
title: title,
zIndex:10000,
anim: -1,
maxmin: true,
aini:2,
shadeClose: false, //点击遮罩关闭层
area: [width+"px", height+"px"],
content: url
});
},
closeWin : function(refresh,call) {
var index = parent.layer.getFrameIndex(window.name);
if(refresh) {
parent.location.reload();
}
if(call) {
parent.init();
}
parent.layer.close(index); //执行关闭
}
}
2.3、测试弹出层代码
在角色列表页面role/index.html测试弹出层
-
引入弹出层js
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script> <script th:src="@{/static/js/myLayer.js}">script> -
添加测试代码
DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Titletitle> <link rel="shortcut icon" th:href="@{/static/favicon.ico}"> <link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet"> <link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet"> <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet"> <link th:href="@{/static/css/animate.css}" rel="stylesheet"> <link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet"> <script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script> <script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script> <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}">script> <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}">script> <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}">script> <script th:src="@{/static/js/plugins/layer/layer.min.js}">script> <script th:src="@{/static/js/myLayer.js}">script> head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div> <button type="button" class="btn btn-sm btn-primary alert">alertbutton> <button type="button" class="btn btn-sm btn-primary load">loadbutton> <button type="button" class="btn btn-sm btn-primary confirm">confirmbutton> <button type="button" class="btn btn-sm btn-primary dialog">dialogbutton> <button type="button" class="btn btn-sm btn-primary openWin">openWinbutton> div> <table class="table table-striped table-bordered table-hover dataTables-example"> <thead> <tr> <th>序号th> <th>角色名称th> <th>角色编码th> <th>描述th> <th>创建时间th> tr> thead> <tbody> <tr class="gradeX" th:each="item,it : ${list}"> <td class="text-center" th:text="${it.count}">11td> <td th:text="${item.roleName}">22td> <td th:text="${item.roleCode}">33td> <td th:text="${item.description}">33td> <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td> tr> tbody> table> div> div> div> div> div> <script th:inline="javascript"> $(function(){ $(".alert").on("click",function () { opt.alert("测试alert") }); $(".load").on("click",function () { opt.load(); }); $(".confirm").on("click",function(){ opt.confirm("","删除操作需要确认"); }); $(".dialog").on("click",function () { opt.dialog("测试提示框",1); }); $(".openWin").on("click",function () { opt.openWin("/role","测试打开弹出窗口",580,430); }); }); script> body> html>
3、添加角色功能
3.1 打开添加角色页面
3.1.1 创建添加角色页面
在templates/role文件夹中创建create.html页面
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新增title>
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script>
<script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>
head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/role/save}" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">角色名称：label>
<div class="col-sm-10">
<input type="text" name="roleName" id="roleName" value="" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">角色编码：label>
<div class="col-sm-10">
<input type="text" name="roleCode" id="roleCode" value="" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：label>
<div class="col-sm-10">
<textarea name="description" id="description" class="form-control" style="width:100%;height: 50px;" >textarea>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定button>
<button class="btn btn-white" type="button" value="取消">取消button>div>
div>
form>
div>
div>
div>
body>
html>
3.1.2 后端访问新增角色页面
修改spring-mvc.xml
<mvc:view-controller path="/role/create" view-name="role/create"/>
3.1.3 角色管理页面
在role/index.html页面创建新增按钮，点击新增按钮打开role/create.html页面
<button type="button" class="create btn btn-sm btn-primary">新增button>
<script>
$(function(){
//给新增按钮绑定点击事件
<!--点击事件-->
$('.create').click(function(){
//打开小窗口显示create.html页面
opt.openWin("/role/create","新增",630,430)
});
});
script>
3.1.4 效果
3.2 保存角色信息
3.2.1 持久层
3.2.1.1 RoleMapper接口
在com.atguigu.mapper包
void insert(Role role);
3.2.1.2 RoleMapper.xml映射配置文件
在resources/mappers目录
<insert id="insert" useGeneratedKeys="true" keyProperty="id">
insert into acl_role (
id ,
role_name ,
role_code ,
description
) values (
#{id} ,
#{roleName} ,
#{roleCode} ,
#{description}
)
insert>
3.2.2 业务层
3.2.2.1 RoleService接口
在com.atguigu.service包
void insert(Role role);
3.2.2.2 RoleServiceImpl实现类
在com.atguigu.service.impl包
@Override
public void insert(Role role) {
roleMapper.insertRole(role);
}
3.2.3 表现层
private static final String LIST_ACTION = "redirect:/role";
@PostMapping("/save")
public String save(Role role){
roleService.insertRole(role);
return LIST_ACTION;
}
3.2.4 效果
说明：保存新增重定向到了列表页面，这样不友好
改进：保存新增返回保存成功提示页，用户点击确定按钮之后再关闭弹出层然后刷新列表页面（父页面）
3.3 优化添加成功后用户体验
3.3.1 新建操作成功提示页面
在templates目录下创建common目录，在common目录下创建successPage.html页面
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>成功提示页title>
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script>
<script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>
head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div class="form-group">
<div class="col-sm-10" th:text="${messagePage}">操作成功div>
div>
<div class="hr-line-dashed">div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" type="button" onclick="opt.closeWin(true);">确定button>
div>
div>
div>
div>
div>
body>
html>
3.3.2 修改表现层代码
private final static String PAGE_SUCCESS = "common/successPage";
@PostMapping("/save")
public String save(Role role, Model model) {
roleService.insert(role);
model.addAttribute("messagePage","新增角色成功");
return PAGE_SUCCESS;
}
3.3.3 效果
点击确定按钮，关闭弹窗，刷新列表页面
4.1 查询要修改的角色信息
4.1.1 持久层
4.1.1.1 RoleMapper接口
Role getById(Long id);
4.1.1.2 RoleMapper.xml映射配置文件
<select id="getById" resultType="Role">
<include refid="columns" />
from acl_role
where
id = #{id}
select>
4.1.2 业务层
4.1.2.1 RoleService接口
Role getById(Long id);
4.1.2.2 RoleServiceImpl实现类
@Override
public Role getById(Long id) {
return roleMapper.getById(id);
}
4.1.3 表现层
private final static String PAGE_EDIT = "role/edit";
@GetMapping("/edit/{id}")
public String edit(Model model,@PathVariable Long id) {
Role role = roleService.getById(id);
model.addAttribute("role",role);
return PAGE_EDIT;
}
4.1.4 前端页面
- 在
templates/role目录中创建edit.html页面，显示要修改的角色信息
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>修改title>
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script>
<script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>
head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/role/update}" method="post" class="form-horizontal" >
<input type="hidden" name="id" th:value="${role.id}">
<div class="form-group">
<label class="col-sm-2 control-label">角色：label>
<div class="col-sm-10">
<input type="text" name="roleName" id="roleName" th:value="${role.roleName}" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">角色编码：label>
<div class="col-sm-10">
<input type="text" name="roleCode" id="roleCode" th:value="${role.roleCode}" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：label>
<div class="col-sm-10">
<textarea name="description" id="description" class="form-control" style="width:100%;height: 50px;" th:text="${role.description}" >textarea>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消button>div>
div>
form>
div>
div>
div>
body>
html>
-
在角色管理页面
templates/role/index.html页面，每一条角色信息后添加修改DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Titletitle> <link rel="shortcut icon" th:href="@{/static/favicon.ico}"> <link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet"> <link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet"> <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet"> <link th:href="@{/static/css/animate.css}" rel="stylesheet"> <link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet"> <script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script> <script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script> <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}">script> <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}">script> <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}">script> <script th:src="@{/static/js/plugins/layer/layer.min.js}">script> <script th:src="@{/static/js/myLayer.js}">script> head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div> <button type="button" class="create btn btn-sm btn-primary">新增button> div> <table class="table table-striped table-bordered table-hover dataTables-example"> <thead> <tr> <th>序号th> <th>角色名称th> <th>角色编码th> <th>描述th> <th>创建时间th> <th>操作th> tr> thead> <tbody> <tr class="gradeX" th:each="item,it : ${list}"> <td class="text-center" th:text="${it.count}">11td> <td th:text="${item.roleName}">22td> <td th:text="${item.roleCode}">33td> <td th:text="${item.description}">33td> <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td> <td class="text-center"> <a class="edit" th:attr="data-id=${item.id}" >修改a> td> tr> tbody> table> div> div> div> div> div> <script> $(function(){ //给新增按钮绑定点击事件 <!--点击事件--> $('.create').click(function(){ //打开小窗口显示create.html页面 opt.openWin("/role/create","新增",630,430) }); }); script> body> html> -
给
修改绑定点击事件$(".edit").on("click",function () { //获取要修改的角色id var id = $(this).attr("data-id"); opt.openWin("/role/edit/"+id,"修改",580,430); });
4、修改角色功能
4.1 查询要修改的角色信息
4.1.1 持久层
4.1.1.1 RoleMapper接口
Role getById(Long id);
4.1.1.2 RoleMapper.xml映射配置文件
<select id="getById" resultType="Role">
<include refid="columns" />
from acl_role
where
id = #{id}
select>
4.1.2 业务层
4.1.2.1 RoleService接口
Role getById(Long id);
4.1.2.2 RoleServiceImpl实现类
@Override
public Role getById(Long id) {
return roleMapper.getById(id);
}
4.1.3 表现层
private final static String PAGE_EDIT = "role/edit";
@GetMapping("/edit/{id}")
public String edit(Model model,@PathVariable Long id) {
Role role = roleService.getById(id);
model.addAttribute("role",role);
return PAGE_EDIT;
}
4.1.4 前端页面
-
在
templates/role目录中创建edit.html页面,用于显示要修改的角色信息DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>修改title> <link rel="shortcut icon" th:href="@{/static/favicon.ico}"> <link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet"> <link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet"> <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet"> <link th:href="@{/static/css/animate.css}" rel="stylesheet"> <link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet"> <script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script> <script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script> <script th:src="@{/static/js/plugins/layer/layer.min.js}">script> <script th:src="@{/static/js/myLayer.js}">script> head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="ibox float-e-margins"> <div class="ibox-content" style="width: 98%;"> <form id="ec" th:action="@{/role/update}" method="post" class="form-horizontal" > <input type="hidden" name="id" th:value="${role.id}"> <div class="form-group"> <label class="col-sm-2 control-label">角色：label> <div class="col-sm-10"> <input type="text" name="roleName" id="roleName" th:value="${role.roleName}" class="form-control"/> div> div> <div class="hr-line-dashed">div> <div class="form-group"> <label class="col-sm-2 control-label">角色编码：label> <div class="col-sm-10"> <input type="text" name="roleCode" id="roleCode" th:value="${role.roleCode}" class="form-control"/> div> div> <div class="hr-line-dashed">div> <div class="form-group"> <label class="col-sm-2 control-label">描述：label> <div class="col-sm-10"> <textarea name="description" id="description" class="form-control" style="width:100%;height: 50px;" th:text="${role.description}" >textarea> div> div> <div class="hr-line-dashed">div> <div class="form-group posf"> <div class="col-sm-4 col-sm-offset-2 text-right"> <button class="btn btn-primary" type="submit">确定button> <button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消button>div> div> div> form> div> div> div> body> html> -
在
templates/role/index.html添加修改<td class="text-center"> <a class="edit" th:attr="data-id=${item.id}">修改a> td> -
给
修改添加点击事件$(".edit").on("click",function () { //获取要修改的角色id var id = $(this).attr("data-id"); opt.openWin("/role/edit/"+id,"修改",580,430); });
4.1.5 效果
4.2 修改角色信息
4.2.1 持久层
4.2.1.1 RoleMapper接口
void update(Role role);
4.2.1.2 RoleMapper.xml映射配置文件
<update id="update" >
update acl_role set
<if test="roleName != null and roleName != ''">
role_name = #{roleName} ,
if>
<if test="roleCode != null and roleCode != ''">
role_code = #{roleCode} ,
if>
<if test="description != null and description != ''">
description = #{description} ,
if>
update_time = now()
where
id = #{id}
update>
4.2.2 业务层
4.2.2.1 RoleService接口
void update(Role role);
4.2.2.2 RoleServiceImpl实现类
@Override
public void update(Role role) {
roleMapper.update(role);
}
4.2.3 表现层
@PostMapping(value="/update")
public String update(Role role,Model model) {
roleService.update(role);
model.addAttribute("messagePage","更新角色成功");
return PAGE_SUCCESS;
}
4.2.4 效果
###5、删除角色功能
5.1 持久层
5.1.1 RoleMapper接口
void delete(Long id);
5.1.2 RoleMapper.xml映射配置文件
逻辑删除
<update id="delete">
update acl_role set
update_time = now() ,
is_deleted = 1
where
id = #{id}
update>
5.2 业务层
5.2.1 RoleService接口
void delete(Long id);
5.2.2 RoleServiceImpl实现类
@Override
public void delete(Long id) {
roleMapper.delete(id);
}
5.3 表现层
private final static String LIST_ACTION = "redirect:/role";
@GetMapping("/delete/{id}")
public String delete(@PathVariable Long id) {
roleService.delete(id);
return LIST_ACTION;
}
5.4 前端页面
-
在
templates/role/index.html页面的每一条角色信息后添加删除<a class="delete" th:attr="data-id=${item.id}">删除</a> -
删除绑定点击事件$(".delete").on("click",function () { //获取要删除的角色id var id = $(this).attr("data-id"); //弹出确认框 opt.confirm("/role/delete/"+id) });
6、分页功能
6.1 持久层
6.1.1 RoleMapper接口
根据条件进行分页查询，filters中存放查询条件
Page<Role> findPage(Map<String, Object> filters);
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jT0zuaJ-1661869096605)(images/02/img_017.png)]](http://img.e-com-net.com/image/info8/ca899eebbe4f4ace9bda4d4a8361b15f.jpg)
6.1.2 RoleMapper.xml映射配置文件
<sql id="findPageWhere">
<where>
<if test="roleName != null and roleName != ''">
role_name like concat('%',#{roleName},'%')
if>
and is_deleted = 0
where>
sql>
<select id="findPage" resultType="Role">
<include refid="columns" />
from acl_role
<include refid="findPageWhere"/>
order by id desc
select>
6.2 业务层
6.2.1 RoleService接口
PageInfo<Role> findPage(Map<String, Object> filters);
6.2.2 RoleServiceImpl实现类
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public PageInfo<T> findPage(Map<String, Object> filters) {
//将pageSize和pageNum强转成int类型
int pageNum = CastUtil.castInt(filters.get("pageNum"),1);
int pageSize = CastUtil.castInt(filters.get("pageSize"),10);
PageHelper.startPage(pageNum,pageSize);
//调用持久层的方法查询数据集
//封装返回结果
return new PageInfo<>(roleMapper.findPage(filters),10);
}
6.3 表现层
修改替换之前的列表显示方法index()，改成分页显示
@RequestMapping
public String index(@RequestParam Map filters, Model model){
if(!filters.containsKey("pageNum")) {
filters.put("pageNum", 1);
}
if(!filters.containsKey("pageSize")) {
filters.put("pageSize", 10);
}
PageInfo<Role> pageInfo = roleService.findPage(filters);
model.addAttribute("page", pageInfo);
model.addAttribute("filters", filters);
return PAGE_INDEX;
}
6.4 前端页面
6.4.1 搜索按钮
<button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索button>
6.4.2 表单id和action
<form id="ec" th:action="@{/role}" method="post">
6.4.3 分页数据显示
6.4.3.1 显示当前页的角色列表
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号th>
<th>角色名称th>
<th>角色编码th>
<th>描述th>
<th>创建时间th>
<th>操作 th>
tr>
thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${page.list}">
<td class="text-center" th:text="${it.count}">11td>
<td th:text="${item.roleName}">22td>
<td th:text="${item.roleCode}">33td>
<td th:text="${item.description}">33td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改a>
<a class="delete" th:attr="data-id=${item.id}">删除a>
td>
tr>
tbody>
table>
6.4.3.2 显示页码信息
放在当前页面的角色列表信息下面
<div class="row">
<input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
<input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
当前第<span th:text="${page.pageNum }">span>页/共<span th:text="${page.pages }">span>页 共<span
id="pageTotal" th:text="${page.total }">span>条记录
div>
div>
<div class="col-sm-6">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">第一页a>li>
<li class="paginate_button previous" th:if="${page.isFirstPage}"><a href="javascript:">第一页a>li>
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页a>
li>
<li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
href="javascript:">上一页a>li>
<li th:each="i : ${page.navigatepageNums}"
th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
<a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
th:text="${i}">span>a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页a>
li>
<li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页a>
li>
<li class="paginate_button next" th:if="${page.isLastPage}"><a href="javascript:">尾页a>li>
ul>
div>
div>
div>
6.5 role/index.html完整代码
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>列表title>
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css?v=4.1.0}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js?v=2.1.4}">script>
<script th:src="@{/static/js/bootstrap.min.js?v=3.3.7}">script>
<script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}">script>
<script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}">script>
<script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}">script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>
head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table form-table margin-bottom10">
<tr>
<td>
<input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
td>
tr>
table>
<div>
<button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索button>
<button type="button" class="btn btn-sm btn-primary create">新增button>
<button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新button>
div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号th>
<th>角色名称th>
<th>角色编码th>
<th>描述th>
<th>创建时间th>
<th>操作 th>
tr>
thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${page.list}">
<td class="text-center" th:text="${it.count}">11td>
<td th:text="${item.roleName}">22td>
<td th:text="${item.roleCode}">33td>
<td th:text="${item.description}">33td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改a>
<a class="delete" th:attr="data-id=${item.id}">删除a>
td>
tr>
tbody>
table>
<div class="row">
<input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
<input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
当前第<span th:text="${page.pageNum }">span>页/共<span th:text="${page.pages }">span>页 共<span
id="pageTotal" th:text="${page.total }">span>条记录
div>
div>
<div class="col-sm-6">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">第一页a>li>
<li class="paginate_button previous" th:if="${page.isFirstPage}"><a href="javascript:">第一页a>li>
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页a>
li>
<li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
href="javascript:">上一页a>li>
<li th:each="i : ${page.navigatepageNums}"
th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
<a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
th:text="${i}">span>a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页a>
li>
<li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页a>
li>
<li class="paginate_button next" th:if="${page.isLastPage}"><a href="javascript:">尾页a>li>
ul>
div>
div>
div>
div>
div>
div>
div>
div>
form>
<script th:inline="javascript">
$(function(){
$(".create").on("click",function () {
opt.openWin("/role/create","新增",580,430);
});
$(".edit").on("click",function () {
var id = $(this).attr("data-id");
opt.openWin('/role/edit/' + id,'修改',580,430);
});
$(".delete").on("click",function(){
var id = $(this).attr("data-id");
opt.confirm('/role/delete/'+id);
});
});
script>
body>
html>
四、代码封装
前面我做了角色管理，其实就是一个基本的针对单表的增删改查，后续可能还有很多针对单表的增删改查都和角色模块差不多，因此我们把上面的增删改查做一个全面的封装，方便后续复用。
服务器端：
dao层、service层与controller层对应的增删改查我可以提取封装为base类，后续直接继承，方便后续复用
前端：
页面头部css与js、分页等可以提取出来，页面包含进去即可
下面我们提取代码做封装
1、持久层封装
1.1 封装BaseMapper
放在common-util项目的com.atguigu.base包
public interface BaseMapper<T> {
/**
* 保存一个实体
*
* @param t
*/
void insert(T t);
/**
* 批量添加
* @param list
*/
void insertBatch(List<T> list);
/**
* 删除
*
* @param id 标识ID 可以是自增长ID，也可以是唯一标识。
*/
void delete(Long id);
/**
* 更新一个实体
*
* @param t
*/
void update(T t);
/**
* 通过一个标识ID 获取一个唯一实体
*
* @param id 标识ID 可以是自增长ID，也可以是唯一标识。
* @return
*/
T getById(Long id);
/**
* 分页查询
* @param filters
* @return
*/
Page<T> findPage(Map<String, Object> filters);
}
1.2 修改RoleMapper接口
注意findAll()方法别删了，以后有用
public interface RoleMapper extends BaseMapper<Role> {
List<Role> findAll();
}
2、业务层封装
2.1 封装BaseService
在common-util项目的com.atguigu.base包
public interface BaseService<T> {
void insert(T t);
void delete(Long id);
void update(T t);
T getById(Long id);
PageInfo<T> findPage(Map<String, Object> filters);
}
2.2 修改RoleService接口
package com.atguigu.service;
import com.atguigu.base.BaseService;
import com.atguigu.entity.Role;
import java.util.List;
public interface RoleService extends BaseService<Role> {
List<Role> findAll();
}
2.3 封装BaseServiceImpl类
在common-util项目的com.atguigu.base包
public abstract class BaseServiceImpl<T> {
/**
* 获取mapper对象
* @return
*/
protected abstract BaseMapper<T> getEntityMapper();
public void insert(T t) {
getEntityMapper().insert(t);
}
public void delete(Long id) {
getEntityMapper().delete(id);
}
public void update(T t) {
getEntityMapper().update(t);
}
@Transactional(propagation = Propagation.SUPPORTS)
public T getById(Long id) {
return getEntityMapper().getById(id);
}
@Transactional(propagation = Propagation.SUPPORTS)
public PageInfo<T> findPage(Map<String, Object> filters) {
//当前页数
int pageNum = CastUtil.castInt(filters.get("pageNum"), 1);
//每页显示的记录条数
int pageSize = CastUtil.castInt(filters.get("pageSize"), 10);
PageHelper.startPage(pageNum, pageSize);
return new PageInfo<T>(getEntityMapper().findPage(filters), 10);
}
}
2.4 修改RoleServiceImpl实现类
package com.atguigu.service.impl;
import com.atguigu.base.BaseDao;
import com.atguigu.base.BaseServiceImpl;
import com.atguigu.dao.RoleMapper;
import com.atguigu.entity.Role;
import com.atguigu.service.RoleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
@Transactional(propagation = Propagation.REQUIRED)
public class RoleServiceImpl extends BaseServiceImpl<Role> implements RoleService {
@Autowired
private RoleMapper roleMapper;
@Override
protected BaseMapper<Role> getEntityMapper() {
return roleMapper;
}
public List<Role> findAll() {
return roleMapper.findAll();
}
}
3、表现层封装
3.1 封装BaseController
在common-util项目的com.atguigu.base包
public class BaseController {
private final static String PAGE_SUCCESS = "common/successPage";
public String successPage(Model model, String successMessage){
model.addAttribute("messagePage",successMessage);
return PAGE_SUCCESS;
}
}
3.2 修改RoleController
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.fastjson.JSON;
import com.atguigu.base.BaseController;
import com.atguigu.entity.Role;
import com.atguigu.service.PermissionService;
import com.atguigu.service.RoleService;
import com.github.pagehelper.PageInfo;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/role")
public class RoleController extends BaseController {
@Autowired
private RoleService roleService;
private final static String LIST_ACTION = "redirect:/role";
private final static String PAGE_INDEX = "role/index";
private final static String PAGE_EDIT = "role/edit";
@RequestMapping
public String index(@RequestParam Map filters, Model model){
if(!filters.containsKey("pageNum")) {
filters.put("pageNum", 1);
}
if(!filters.containsKey("pageSize")) {
filters.put("pageSize", 10);
}
PageInfo<Role> pageInfo = roleService.findPage(filters);
model.addAttribute("page", pageInfo);
model.addAttribute("filters", filters);
return PAGE_INDEX;
}
@PostMapping("/save")
public String save(Role role, Model model){
roleService.insert(role);
return successPage(model,"添加角色成功");
}
@GetMapping("/edit/{id}")
public String edit(ModelMap model,@PathVariable Long id) {
Role role = roleService.getById(id);
model.addAttribute("role",role);
return PAGE_EDIT;
}
@PostMapping("/update")
public String update(Role role,Model model){
roleService.update(role);
return successPage(model,"更新角色成功");
}
@GetMapping("/delete/{id}")
public String deleteRoleById(@PathVariable("id") Long id){
roleService.delete(id);
return LIST_ACTION;
}
}
4、前端代码封装
4.1 提取页面头部信息
4.1.1 封装头部css与js引用
在templates/common下新建:head.html
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
head>
<body>
<div th:fragment="head">
<title>权限管理系统title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<meta name="renderer" content="webkit"/>
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" th:href="@{favicon.ico}" />
<link rel="shortcut icon" th:href="@{/static/favicon.ico}">
<link th:href="@{/static/css/bootstrap.min.css(v=3.3.7)}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
<link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
<link th:href="@{/static/css/animate.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
<script th:src="@{/static/js/jquery.min.js(v=2.1.4)}">script>
<script th:src="@{/static/js/bootstrap.min.js(v=3.3.7)}">script>
<script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}">script>
<script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}">script>
<script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}">script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>
<script th:src="@{/static/js/plugins/validate/jquery.validate.min.js}" type="text/javascript" >script>
<script th:src="@{/static/js/plugins/validate/messages_zh.min.js}" type="text/javascript" >script>
<script th:src="@{/static/js/plugins/layer/laydate/laydate.js}">script>
div>
body>
html>
4.1.2 修改role目录中的页面
包含进index.html、create.html、edit.html
<head th:include="common/head :: head">head>
4.2 提取分页页码信息
4.2.1 封装页码信息显示代码
在common下新建：pagination.html
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Titletitle>
head>
<body>
<div class="row" th:fragment="pagination">
<input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
<input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
当前第<span th:text="${page.pageNum }">span>页/共<span th:text="${page.pages }">span>页 共<span
id="pageTotal" th:text="${page.total }">span>条记录
div>
div>
<div class="col-sm-6">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">第一页a>li>
<li class="paginate_button previous" th:if="${page.isFirstPage}"><a href="javascript:">第一页a>li>
<li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页a>
li>
<li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
href="javascript:">上一页a>li>
<li th:each="i : ${page.navigatepageNums}"
th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
<a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
th:text="${i}">span>a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页a>
li>
<li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页a>
li>
<li class="paginate_button next" th:if="${!page.isLastPage}"><a
th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页a>
li>
<li class="paginate_button next" th:if="${page.isLastPage}"><a href="javascript:">尾页a>li>
ul>
div>
div>
div>
body>
html>
4.2.2 修改角色分页显示页面
删除原来的页码显示代码，引入pagination.html代替
<div class="row" th:include="common/pagination :: pagination">div>
4.2.3 完整的role/index.html代码
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head">head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table form-table margin-bottom10">
<tr>
<td>
<input type="text" name="roleName"
th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''"
placeholder="角色名称" class="input-sm form-control"/>
td>
tr>
table>
<div>
<button type="button" class="btn btn-sm btn-primary"
onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">
搜索
button>
<button type="button" class="btn btn-sm btn-primary create">新增button>
<button type="button" id="loading-example-btn"
onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新
button>
div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号th>
<th>角色名称th>
<th>角色编码th>
<th>描述th>
<th>创建时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${page.list}">
<td class="text-center" th:text="${it.count}">11td>
<td th:text="${item.roleName}">22td>
<td th:text="${item.roleCode}">33td>
<td th:text="${item.description}">33td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">33td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改a>
<a class="delete" th:attr="data-id=${item.id}">删除a>
td>
tr>
tbody>
table>
<div class="row" th:include="common/pagination :: pagination">div>
div>
div>
div>
div>
div>
form>
<script th:inline="javascript">
$(function () {
$(".create").on("click", function () {
opt.openWin("/role/create", "新增", 580, 430);
});
$(".edit").on("click", function () {
var id = $(this).attr("data-id");
opt.openWin('/role/edit/' + id, '修改', 580, 430);
});
$(".delete").on("click", function () {
var id = $(this).attr("data-id");
opt.confirm('/role/delete/' + id);
});
});
script>
body>
html>
五、用户管理模块
1、分页显示用户功能
1.1 持久层
1.1.1 AdminMapper接口
public interface AdminMapper extends BaseMapper<Admin> {
}
1.1.2 AdminMapper.xml映射配置文件
<sql id="columns">
select id,username,password,name,phone,head_url,description,create_time,update_time,is_deleted
sql>
<sql id="findPageWhere">
<where>
<if test="username != null and username != ''">
username like concat('%',#{username},'%')
if>
<if test="name != null and name != ''">
and name like concat('%',#{name},'%')
if>
<if test="phone != null and phone != ''">
and phone like concat(#{phone},'%')
if>
<if test="createTimeBegin != null and createTimeBegin != ''">
and create_time >= #{createTimeBegin}
if>
<if test="createTimeEnd != null and createTimeEnd != ''">
and create_time <= #{createTimeEnd}
if>
and is_deleted=0
where>
sql>
<select id="findPage" resultType="Admin">
<include refid="columns">include>
from acl_admin
<include refid="findPageWhere">include>
order by id desc
select>
1.2 业务层
1.2.1 AdminService接口
public interface AdminService extends BaseService<Admin> {
}
1.2.2 AdminServiceImpl实现类
@Service(interfaceClass = AdminService.class)
@Transactional(propagation = Propagation.REQUIRED)
public class AdminServiceImpl extends BaseServiceImpl<Admin> implements AdminService {
@Autowired
private AdminMapper adminMapper;
@Override
protected BaseMapper<Admin> getEntityMapper() {
return adminMapper;
}
}
1.3 表现层
@Controller
@RequestMapping("/admin")
public class AdminController extends BaseController {
@Autowired
private AdminService adminService;
private final static String PAGE_INDEX = "admin/index";
@RequestMapping
public String index(@RequestParam Map<String,Object> filters, Model model){
PageInfo<Admin> pageInfo = adminService.findPage(filters);
model.addAttribute("page",pageInfo);
model.addAttribute("filters",filters);
return PAGE_INDEX;
}
}
1.4 前端页面
在templates/frame/index.html页面中修改
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" th:href="@{/role}" data-index="0">角色管理a>
li>
<li>
<a class="J_menuItem" th:href="@{/admin}">用户管理a>
li>
<li>
<a class="J_menuItem" href="index_v3.html">主页示例三a>
li>
<li>
<a class="J_menuItem" href="index_v4.html">主页示例四a>
li>
<li>
<a href="index_v5.html" target="_blank">主页示例五a>
li>
ul>
在templates/admin创建index.html页面
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head">head>
<body class="gray-bg">
<form id="ec" th:action="@{/admin}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table form-table margin-bottom10">
<tr>
<td>
<input type="text" name="username" th:value="${#maps.containsKey(filters, 'username')} ? ${filters.username} : ''" placeholder="用户名" class="input-sm form-control"/>
td>
<td>
<input type="text" name="name" th:value="${#maps.containsKey(filters, 'name')} ? ${filters.name} : ''" placeholder="用户姓名" class="input-sm form-control"/>
td>
<td>
<input type="text" name="phone" th:value="${#maps.containsKey(filters, 'phone')} ? ${filters.phone} : ''" placeholder="手机号码" class="input-sm form-control"/>
td>
tr>
<tr>
<td>
<input type="text" name="createTimeBegin" th:value="${#maps.containsKey(filters, 'createTimeBegin')} ? ${filters.createTimeBegin} : ''" placeholder="开始日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
td>
<td>
<input type="text" name="createTimeEnd" th:value="${#maps.containsKey(filters, 'createTimeEnd')} ? ${filters.createTimeEnd} : ''" placeholder="截止日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
td>
<td>
td>
tr>
table>
<div>
<button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索button>
<button type="button" class="btn btn-sm btn-primary create"> 新增button>
<button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新button>
div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号th>
<th>头像th>
<th>用户姓名th>
<th>用户账号th>
<th>手机号th>
<th>创建时间th>
<th>操作 th>
tr>
thead>
<tbody>
<tr class="gradeX" th:each="item,it: ${page.list}">
<td class="text-center" th:text="${it.count}">11td>
<td>
<img th:src="${item.headUrl}" style="width: 60px; height: 60px;">
td>
<td th:text="${item.name}">22td>
<td th:text="${item.username}">33td>
<td th:text="${item.phone}">22td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改a>
<a class="delete" th:attr="data-id=${item.id}">删除a>
td>
tr>
tbody>
table>
<div class="row" th:include="common/pagination :: pagination">div>
div>
div>
div>
div>
div>
form>
body>
html>
2、新增用户功能
2.1 打开添加用户页面
2.1.1 新建添加用户页面
在templates/admin目录下新建create.html
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head">head>
<script type="text/javascript">
$(function(){
$('#ec').validate({
rules:{
name:"required",
username:{
rangelength:[3,15]
},
phone:{
required:true,
rangelength:[11,11]
},
password:{
required:true,
rangelength:[6,15]
},
confirmPassword:{
equalTo:"#password"
}
},
messages:{
name:"真实姓名必须输入",
username:{
rangelength:"用户账号3到15位"
},
phone:{
required: "手机号码必须输入",
rangelength:"手机号码格式不正确"
},
password:{
required: "密码必须输入",
rangelength:"密码6到15位"
},
confirmPassword:{
equalTo:"密码与确认密码不一致"
}
},
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", true).text("正在提交...");
form.submit();
}
});
});
script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/admin/save}" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">真实姓名：label>
<div class="col-sm-10">
<input type="text" name="name" id="name" class="form-control" />
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">用户账号：label>
<div class="col-sm-10">
<input type="text" name="username" id="username" class="form-control"/>
<label for="username" class="error" id="usernameLabel">label>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">手机号码：label>
<div class="col-sm-10">
<input type="text" name="phone" id="phone" maxlength="11" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">密码：label>
<div class="col-sm-10">
<input type="password" name="password" id="password" maxlength="15" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">确认密码：label>
<div class="col-sm-10">
<input type="password" name="confirmPassword" id="confirmPassword" maxlength="15" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消button>
div>
div>
form>
div>
div>
div>
body>
html>
2.1.2 后端访问新增用户页面
在resources/spring/spring.xml文件中添加
<mvc:view-controller path="/admin/create" view-name="admin/create"/>
2.1.3 用户管理页面
在templates/admin/index.html中给新增按钮绑定点击事件
<script th:inline="javascript">
$(function(){
$(".create").on("click",function () {
opt.openWin('/admin/create','新增',630,430)
});
});
script>
2.2 保存用户信息
2.2.1 AdminMapper.xml映射配置文件
<insert id="insert">
insert into acl_admin(username,password,name,phone)
values(#{username},#{password},#{name},#{phone})
insert>
2.2.2 表现层
@PostMapping("/save")
public String save(Admin admin, Model model){
adminService.insert(admin);
return successPage(model,"新增用户成功");
}
3、修改用户功能
3.1 查询要修改的用户信息
3.1.1 AdminMapper.xml映射配置文件
<select id="getById" resultType="admin">
<include refid="columns">include>
from acl_admin
where id = #{id}
select>
3.1.2 表现层
private final static String PAGE_EDIT = "admin/edit";
@GetMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id,Model model){
Admin admin = adminService.getById(id);
model.addAttribute("admin",admin);
return PAGE_EDIT;
}
3.1.3 前端页面
3.1.3.1 编辑用户页面
在templates/admin目录中创建edit.html
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head">head>
<script type="text/javascript">
$(function(){
$('#ec').validate({
rules:{
name:"required",
phone:{
required:true,
rangelength:[11,11]
}
},
messages:{
name:"真实姓名必须输入",
phone:{
required: "手机号码必须输入",
rangelength:"手机号码格式不正确"
}
},
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", true).text("正在提交...");
form.submit();
}
});
});
script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/admin/update}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${admin.id}">
<div class="form-group">
<label class="col-sm-2 control-label">真实姓名：label>
<div class="col-sm-10">
<input type="text" name="name" id="name" th:value="${admin.name}" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group">
<label class="col-sm-2 control-label">手机号码：label>
<div class="col-sm-10">
<input type="text" name="phone" id="phone" th:value="${admin.phone }" maxlength="11" class="form-control"/>
div>
div>
<div class="hr-line-dashed">div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消button>
div>
div>
form>
div>
div>
div>
body>
html>
3.1.3.2 用户管理页面
在templates/admin/index.html页面给修改按钮绑定点击事件
$(".edit").on("click",function () {
var id = $(this).attr("data-id");
opt.openWin('/admin/edit/' + id,'修改',580,430);
});
3.2 修改用户信息
3.2.1 AdminMapper.xml映射配置文件
<update id="update">
update acl_admin
<set>
<if test="username != null and username != ''">
usename = #{username},
if>
<if test="password != null and password != ''">
password = #{password},
if>
<if test="name != null and name != ''">
name = #{name},
if>
<if test="phone != null and phone != ''">
phone = #{phone},
if>
<if test="headUrl != null and headUrl != ''">
head_url = #{headUrl},
if>
<if test="description != null and description != ''">
description = #{description},
if>
update_time = now()
set>
where id = #{id}
update>
3.2.2 表现层
@PostMapping("/update")
public String update(Admin admin,Model model){
adminService.update(admin);
return successPage(model,"编辑用户成功");
}
4、删除用户功能
4.1 AdminMapper.xml映射配置文件
<update id="delete">
update acl_admin set is_deleted = 1
where id = #{id}
update>
4.2 表现层
private final static String LIST_ACTION = "redirect:/admin";
@GetMapping("/delete/{id}")
public String delete(@PathVariable("id") Long id){
adminService.delete(id);
return LIST_ACTION;
}
4.3 前端页面
修改templates/admin/index.html页面给删除按钮绑定点击事件
$(".delete").on("click",function(){
var id = $(this).attr("data-id");
opt.confirm('/admin/delete/'+id);
});