• 尚好房 02_用户角色管理

    尚好房：用户角色管理

    一、功能介绍

    1、角色管理

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x34dgiGJ-1661869096585)(images/02/img_003.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wkfWdjes-1661869096590)(images/02/img_004.png)]

    2、用户管理

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XxsNLy9Z-1661869096592)(images/02/img_001.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JXTXMs5K-1661869096593)(images/02/img_002.png)]

    二、后台前端框架

    1、后台框架选择

    后台前端框架模板：Hplus

    下载地址：https://gitee.com/hplus_admin/hplus

    资料文件中已下载，可以直接使用

    2、模板页面

    1、主页

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygTGQHpO-1661869096594)(images/02/img_005.png)]

    2、表单

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjbGTopq-1661869096595)(images/02/img_006.png)]

    3、表格

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwH8y1i5-1661869096596)(images/02/img_007.png)]

    说明：我们需要的后台模板基本都包含

    3、集成框架

    3.1、添加框架静态资源

    1. 在web-admin模块webapps下新建static文件夹，用于存放静态资源文件

    2. 复制Hplus静态资源到static文件夹

    1. 项目中静态资源如图

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7dj4nuD-1661869096597)(images/02/img_009.png)]

    3.2、添加框架主页面

    1. 在templates目录新建frame文件夹，用于存放框架相关页面

    2. 在frame文件夹中创建index.html

      DOCTYPE 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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      • 98
      • 99
      • 100
      • 101
      • 102
      • 103
      • 104
      • 105
      • 106
      • 107
      • 108
      • 109
      • 110
      • 111
      • 112
      • 113
      • 114
      • 115
      • 116
      • 117
      • 118
      • 119
      • 120
      • 121
      • 122
      • 123
      • 124
      • 125
      • 126
      • 127
      • 128
      • 129
      • 130
      • 131
      • 132
      • 133
      • 134
      • 135
      • 136
      • 137
      • 138
      • 139
      • 140
      • 141

    3. 在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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
    3.3、view-controller访问页面
    
<mvc:view-controller path="/" view-name="frame/index"/>

<mvc:view-controller path="/main" view-name="frame/main"/>

    • 1
    • 2
    • 3
    • 4
    3.4、查看效果

    启动项目，访问：http://localhost:8000/

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L9G01g2y-1661869096598)(images/02/img_010.png)]

    框架集成成功

    三、角色管理模块

    1、角色列表功能

    该功能后端三层结构代码在昨天已经写好了

    1.1 功能效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E0NDshdl-1661869096599)(images/02/img_011.png)]

    1.2 前端页面
    1. 修改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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    1. 修改frame/index.html，实现在框架右侧显示角色列表页面

      <li>
    <a class="J_menuItem" th:href="@{/role}" data-index="0">角色管理a>
li>

      • 1
      • 2
      • 3

    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); //执行关闭
   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    2.3、测试弹出层代码

    在角色列表页面role/index.html测试弹出层

    1. 引入弹出层js

      
<script th:src="@{/static/js/plugins/layer/layer.min.js}">script>
<script th:src="@{/static/js/myLayer.js}">script>

      • 1
      • 2
      • 3

    2. 添加测试代码

      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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    3.1.2 后端访问新增角色页面

    修改spring-mvc.xml

    
<mvc:view-controller path="/role/create" view-name="role/create"/>

    • 1
    • 2
    3.1.3 角色管理页面

    在role/index.html页面创建新增按钮，点击新增按钮打开role/create.html页面

    
<button type="button" class="create btn btn-sm btn-primary">新增button>

    • 1
    • 2
    <script>
    $(function(){
        //给新增按钮绑定点击事件
        <!--点击事件-->
            $('.create').click(function(){
            //打开小窗口显示create.html页面
            opt.openWin("/role/create","新增",630,430)
        });
    });
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    3.1.4 效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UOEouYm1-1661869096600)(images/02/img_012.png)]

    3.2 保存角色信息
    3.2.1 持久层
    3.2.1.1 RoleMapper接口

    在com.atguigu.mapper包

    void insert(Role role);

    • 1
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    3.2.2 业务层
    3.2.2.1 RoleService接口

    在com.atguigu.service包

    void insert(Role role);

    • 1
    3.2.2.2 RoleServiceImpl实现类

    在com.atguigu.service.impl包

    @Override
public void insert(Role role) {
    roleMapper.insertRole(role);
}

    • 1
    • 2
    • 3
    • 4
    3.2.3 表现层
    private static final String LIST_ACTION = "redirect:/role";
@PostMapping("/save")
public String save(Role role){
    roleService.insertRole(role);
    return LIST_ACTION;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    3.2.4 效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKXaZnkH-1661869096601)(images/02/img_013.png)]

    说明：保存新增重定向到了列表页面，这样不友好

    改进：保存新增返回保存成功提示页，用户点击确定按钮之后再关闭弹出层然后刷新列表页面（父页面）

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    3.3.3 效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qvWyd0hu-1661869096602)(images/02/img_014.png)]

    点击确定按钮，关闭弹窗，刷新列表页面

    4.1 查询要修改的角色信息
    4.1.1 持久层
    4.1.1.1 RoleMapper接口
    Role getById(Long id);

    • 1
    4.1.1.2 RoleMapper.xml映射配置文件
    <select id="getById" resultType="Role">
    <include refid="columns" />
    from acl_role
    where
    id = #{id}
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    4.1.2 业务层
    4.1.2.1 RoleService接口
    Role getById(Long id);

    • 1
    4.1.2.2 RoleServiceImpl实现类
    @Override
public Role getById(Long id) {
    return roleMapper.getById(id);
}

    • 1
    • 2
    • 3
    • 4
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    4.1.4 前端页面
    1. 在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    1. 在角色管理页面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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79

    2. 给修改绑定点击事件

      $(".edit").on("click",function () {
    //获取要修改的角色id
    var id = $(this).attr("data-id");
    opt.openWin("/role/edit/"+id,"修改",580,430);
});

      • 1
      • 2
      • 3
      • 4
      • 5

    4、修改角色功能

    4.1 查询要修改的角色信息
    4.1.1 持久层
    4.1.1.1 RoleMapper接口
    Role getById(Long id);

    • 1
    4.1.1.2 RoleMapper.xml映射配置文件
    <select id="getById" resultType="Role">
    <include refid="columns" />
    from acl_role
    where
    id = #{id}
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    4.1.2 业务层
    4.1.2.1 RoleService接口
    Role getById(Long id);

    • 1
    4.1.2.2 RoleServiceImpl实现类
    @Override
public Role getById(Long id) {
    return roleMapper.getById(id);
}

    • 1
    • 2
    • 3
    • 4
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    4.1.4 前端页面

    1. 在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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64

    2. 在templates/role/index.html添加修改

      <td class="text-center">
    <a class="edit" th:attr="data-id=${item.id}">修改a>
td>

      • 1
      • 2
      • 3

    3. 给修改添加点击事件

      $(".edit").on("click",function () {
    //获取要修改的角色id
    var id = $(this).attr("data-id");
    opt.openWin("/role/edit/"+id,"修改",580,430);
});

      • 1
      • 2
      • 3
      • 4
      • 5
    4.1.5 效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7x2VKDY-1661869096604)(images/02/img_015.png)]

    4.2 修改角色信息
    4.2.1 持久层
    4.2.1.1 RoleMapper接口
    void update(Role role);

    • 1
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    4.2.2 业务层
    4.2.2.1 RoleService接口
    void update(Role role);

    • 1
    4.2.2.2 RoleServiceImpl实现类
    @Override
public void update(Role role) {
    roleMapper.update(role);
}

    • 1
    • 2
    • 3
    • 4
    4.2.3 表现层
    @PostMapping(value="/update")
public String update(Role role,Model model) {
    roleService.update(role);
    model.addAttribute("messagePage","更新角色成功");
    return PAGE_SUCCESS;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    4.2.4 效果

    在这里插入图片描述

    ###5、删除角色功能

    5.1 持久层
    5.1.1 RoleMapper接口
    void delete(Long id);

    • 1
    5.1.2 RoleMapper.xml映射配置文件

    逻辑删除

    <update id="delete">
    update acl_role set
    update_time = now() ,
    is_deleted = 1
    where
    id = #{id}
update>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    5.2 业务层
    5.2.1 RoleService接口
    void delete(Long id);

    • 1
    5.2.2 RoleServiceImpl实现类
    @Override
public void delete(Long id) {
    roleMapper.delete(id);
}

    • 1
    • 2
    • 3
    • 4
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    5.4 前端页面

    1. 在templates/role/index.html页面的每一条角色信息后添加删除

      <a class="delete" th:attr="data-id=${item.id}">删除</a>

      • 1

    2. 删除绑定点击事件

      $(".delete").on("click",function () {
    //获取要删除的角色id
    var id = $(this).attr("data-id");
    //弹出确认框
    opt.confirm("/role/delete/"+id)
});

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    6、分页功能

    6.1 持久层
    6.1.1 RoleMapper接口

    根据条件进行分页查询，filters中存放查询条件

    Page<Role> findPage(Map<String, Object> filters);

    • 1

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jT0zuaJ-1661869096605)(images/02/img_017.png)]

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    6.2 业务层
    6.2.1 RoleService接口
    PageInfo<Role> findPage(Map<String, Object> filters);

    • 1
    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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    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>

    • 1
    • 2
    6.4.2 表单id和action
    
<form id="ec" th:action="@{/role}" method="post">

    • 1
    • 2
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134

    四、代码封装

    前面我做了角色管理，其实就是一个基本的针对单表的增删改查，后续可能还有很多针对单表的增删改查都和角色模块差不多，因此我们把上面的增删改查做一个全面的封装，方便后续复用。

    服务器端：

    ​ 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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    1.2 修改RoleMapper接口

    注意findAll()方法别删了，以后有用

    public interface RoleMapper extends BaseMapper<Role> {
    List<Role> findAll();
}

    • 1
    • 2
    • 3

    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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    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();
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    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);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    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();
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    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;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    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;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    4.1.2 修改role目录中的页面

    包含进index.html、create.html、edit.html

    <head th:include="common/head :: head">head>

    • 1
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    4.2.2 修改角色分页显示页面

    删除原来的页码显示代码，引入pagination.html代替

    <div class="row" th:include="common/pagination :: pagination">div>

    • 1
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79

    五、用户管理模块

    1、分页显示用户功能

    1.1 持久层
    1.1.1 AdminMapper接口
    public interface AdminMapper extends BaseMapper<Admin> {
}

    • 1
    • 2
    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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    1.2 业务层
    1.2.1 AdminService接口
    public interface AdminService extends BaseService<Admin> {
}

    • 1
    • 2
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    2.1.2 后端访问新增用户页面

    在resources/spring/spring.xml文件中添加

    
<mvc:view-controller path="/admin/create" view-name="admin/create"/>

    • 1
    • 2
    2.1.3 用户管理页面

    在templates/admin/index.html中给新增按钮绑定点击事件

    <script th:inline="javascript">
    $(function(){
        $(".create").on("click",function () {
            opt.openWin('/admin/create','新增',630,430)
        });
    });
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    2.2 保存用户信息
    2.2.1 AdminMapper.xml映射配置文件
    
<insert id="insert">
    insert into acl_admin(username,password,name,phone)
    values(#{username},#{password},#{name},#{phone})
insert>

    • 1
    • 2
    • 3
    • 4
    • 5
    2.2.2 表现层
    @PostMapping("/save")
public String save(Admin admin, Model model){
    adminService.insert(admin);
    return successPage(model,"新增用户成功");
}

    • 1
    • 2
    • 3
    • 4
    • 5

    3、修改用户功能

    3.1 查询要修改的用户信息
    3.1.1 AdminMapper.xml映射配置文件
    
<select id="getById" resultType="admin">
    <include refid="columns">include>
    from acl_admin
    where id = #{id}
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    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);
});

    • 1
    • 2
    • 3
    • 4
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    3.2.2 表现层
    @PostMapping("/update")
public String update(Admin admin,Model model){
    adminService.update(admin);

    return successPage(model,"编辑用户成功");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4、删除用户功能

    4.1 AdminMapper.xml映射配置文件
    
<update id="delete">
    update acl_admin set is_deleted = 1
    where id = #{id}
update>

    • 1
    • 2
    • 3
    • 4
    • 5
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    4.3 前端页面

    修改templates/admin/index.html页面给删除按钮绑定点击事件

    $(".delete").on("click",function(){
    var id = $(this).attr("data-id");
    opt.confirm('/admin/delete/'+id);
});

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    优秀的前端开发框架
    lintcode 1646 · 合法组合【字符串DFS, vip 中等 好题】
    【Java面试】这道互联网高频面试题难住了80%的程序员？索引什么时候失效？
    C++之迭代器(Iterator)模式
    2.1.9.4 MySQL udf提权
    架构设计-复杂度来源
    数学建模资料分享
    动态规划之最长公共子序列
    CKA考生注意：这些Deployment要点能助你一臂之力！
    【Golang之路】——slice总结
  • 原文地址：https://blog.csdn.net/lbw18/article/details/126613942