基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【八】【完善整个项目】

谁践踏了优雅 2022-06-04 09:59 162阅读 0赞

上一章我们已经完成了菜单模块的开发工作，那么到了本章我们将完成我们角色管理模块的开发工作，在本章开始一个全新的模块进行开发的时候我们需要遵守一定的命名和开发规范如下：

1、我们的Controller的RequestMapping的命名要和我们的文件夹的命名一致，且增加的页面要叫add.html，修改的页面要叫update.html，若不按上述命名则需要大家自己去重写updatePage和addPage的方法来实现页面的跳转。

![Center][]![Center 1][]

2、需要在WebMvcConfig类中配置一个首页的跳转如下：

![Center 2][]

再我们接下来的模块也是完全按照这样的步骤进行开发的，接着我们开始开发我们的角色管理模块，由于我们的Java代码在第六章的时候已经全部编写完成了，因此在这里我们只需要在WebMvcConfig增加页面跳转，同时在我们的sys目录底下创建add.html、update.html和roleList.html这三个文件代码如下：

add.html代码内容如下：

update.html代码内容如下：

roleList.html内容如下：

<html xmlns:th="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head th:include="include/includebase"></head>
    <body>
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form class="form-inline" role="form" style="float: left; width: 100%;margin-left: 20px;" method="post" id="queryRole">
                    <div class="form-group">
                        <label for="name">权限代码:</label>
                        <input type="text" class="form-control" name="name" id="name"  placeholder="请输入权限代码" />
                    </div>
                    <div class="form-group">
                        <label for="roleName">权限名称:</label>
                        <input type="text" class="form-control" name="roleName" id="roleName"  placeholder="请输入权限名称" />
                    </div>
                    <div class="form-group">
                        <button type="button" id="queryBtn" οnclick="doQuery();" class="btn btn-primary">查询</button>
                    </div>
                </form>
            </div>
        </div>
        <table id="role-table" style="margin-top: -50px;">
        </table>
    </div>
    <script th:inline="javascript">
    
        $(function() {
            initTable();
            $('#role-table').bootstrapTable('hideColumn', 'id');
        });
    
        function doQuery(){
            $('#role-table').bootstrapTable('refresh');    //刷新表格
        }
    
        function initTable(){
            $('#role-table').bootstrapTable({
                url:"role/list",
                height: $(window.parent.document).find("#wrapper").height() - 252,
                width:$(window).width(),
                showColumns:true,
                formId :"queryRole",
                pagination : true,
                sortName : 'id',
                sortOrder : 'desc',
                pageSize : 13,
                toolbars:[
                    {
                        text: '添加',
                        iconCls: 'glyphicon glyphicon-plus',
                        handler: function () {
                            window.Ewin.dialog({title:"添加",url:"role/addPage",width:600,height:310})
                        }
                    },
                    {
                        text: '修改',
                        iconCls: 'glyphicon glyphicon-pencil',
                        handler: function () {
                            var rows = $('#role-table').bootstrapTable('getSelections');
                            if(rows.length==0||rows.length>1){
                                window.Ewin.alert({message:'请选择一条需要修改的数据!'});
                                return false;
                            }
                            window.Ewin.dialog({title:"修改",url:"role/updatePage?id="+rows[0].id,width:600,height:310});
                        }
                    },
                    {
                        text: '删除',
                        iconCls: 'glyphicon glyphicon-remove',
                        handler: function () {
                            var rows = $('#role-table').bootstrapTable('getSelections');
                            if(rows.length==0){
                                window.Ewin.alert({message:'请选择一条需要删除的数据!'});
                                return false;
                            }
                            window.Ewin.confirm({title:'提示',message:'是否要删除您所选择的记录？',width:500}).on(function (e) {
                                if (e) {
                                    $.post("role/removeBath",{json:JSON.stringify(rows)},function(e){
                                       if(e.result){
                                           window.Ewin.alert({message:e.msg});
                                           doQuery();
                                       }
                                    });
                                }
                            });
                        }
                    }
                ],
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: '',
                        title: '序号',
                        formatter: function (value, row, index) {
                            return index+1;
                        }
                    },
                    {
                        field : 'id',
                        title : '权限流水',
                        align : 'center',
                        valign : 'middle',
                        sortable : true
                    },
                    {
                        field : 'name',
                        title : '权限代码',
                        align : 'center',
                        valign : 'middle',
                        sortable : true
                    },
                    {
                        field : 'roleName',
                        title : '权限名称',
                        align : 'center',
                        valign : 'middle',
                        sortable : true
                    }]
            });
        }
    </script>
    </body>
    </html>

到此我们就完成了我们角色管理的开发工作，接下来的用户管理、字典维护、组织架构也是类似的开发思路，这里就不再细细说明了，大家直接从github上拿源代码下来大家自己看就明白了，完整源代码的地址： [https://github.com/185594-5-27/csdndemo/tree/base-demo-complete][https_github.com_185594-5-27_csdndemo_tree_base-demo-complete]

上一篇文章地址：[基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【七】【菜单维护模块】][springboot_bootstrap_mysql_redis]

下一篇文章地址：[基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【九】【整合websocket】][springboot_bootstrap_mysql_redis_websocket]

QQ交流群：578746866

[Center]: https://img-blog.csdn.net/20171211114729173?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluemhlZmVuZzg5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220604/bec6288c9a6942beb804ffd0ad6b95b1.png
[Center 2]: /images/20220604/f586dd24e8ca47a584e462736415a9c0.png
[https_github.com_185594-5-27_csdndemo_tree_base-demo-complete]: https://github.com/185594-5-27/csdndemo/tree/base-demo-complete
[springboot_bootstrap_mysql_redis]: http://blog.csdn.net/linzhefeng89/article/details/78770142
[springboot_bootstrap_mysql_redis_websocket]: http://blog.csdn.net/linzhefeng89/article/details/78772262