IntelliJ IDEA14.0.3+Maven+SpringMVC+Spring+Hibernate光速构建Java权限管理系统(五)

权限管理（中）

--前端页面的编写（bootstrap、angularjs）

一、主页布局

先将主页分为上下两部分，上部分为顶部导航条，下部分又分成左右结构（左侧导航与右边表格主体）。如下图所示：

其中顶部导航的代码如下：

<div class="container" style="background-color: #f7f7f7;padding: 0px;">
    <nav class="navbar navbar-default" role="navigation" style="background-color: #31708f;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" style="color: #fcf8e3;font-size: 25px;">UMS</a>
            </div>
            <div>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-user"></span> 
                                <span ng-bind="usernameOfLoger"></span>
                            </button>
                            <button type="button" class="btn btn-warning"  ng-click="topOperation(constRef[3][0])">
                                <span class="glyphicon glyphicon-envelope"></span> 
                                <span ng-bind="constRef[3][0]"></span>
                            </button>
                            <button type="button" class="btn btn-success" ng-click="topOperation(constRef[3][1])">
                                <span class="glyphicon glyphicon-edit"></span> 
                                <span ng-bind="constRef[3][1]"></span>
                            </button>
                            <button type="button" class="btn btn-danger" ng-click="topOperation(constRef[3][2])">
                                <span class="glyphicon glyphicon-off"></span> 
                                <span ng-bind="constRef[3][2]"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>
</div>

以上代码中，ng-bind为angularjs的语法，代表数据绑定，而constRef是我在angularjs文件中定义的二位数组，里面存放的全部是常量。其余的应该很好理解，如下贴出angularjs主要代码：

angular.module("mainapp",[])
    .constant('constRef',[["查看详情","分配角色","删除","搜索"],//user table
        ["首页","用户管理","文件管理","角色管理"],//left nav bar
        ["查看详情","删除","新增角色","搜索","编辑","取消","提交","用户管理"],// role table
        ["系统消息","编辑","注销"]])//topOperation
    .controller("maincontroller",function($scope,constRef){
        $scope.currentPage = 0;
        $scope.totalPage = 0;
        $scope.listLength = 0;
        $scope.prevPage = "上一页";
        $scope.nextPage = "下一页";
        $scope.constRef = constRef;
        $scope.searchRoleName = "";//search role
        $scope.searchUserName = "";//search user
        $scope.justForModalInfomation = "";
//省略一万字。。。
})

了解angularjs基础的朋友很容易看懂以上代码。下面贴出左侧导航代码：

<div class="col-xs-2" style="border: 1px solid #d9edf7;padding: 2px;">
            <ul class="nav nav-pills nav-stacked">
                <%--这里a标签不能加href属性，否则会相对首页进行#跳转，但在静态页面无影响--%>
                <li class="active" id="liid-homepage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][0])" ng-bind="constRef[1][0]"></a></li>
                <li id="liid-usermanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][1])" ng-bind="constRef[1][1]"></a></li>
                <%--<li id="liid-filemanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][2])" ng-bind="constRef[1][2]"></a></li>--%>
                <li id="liid-rolemanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][3])" ng-bind="constRef[1][3]"></a></li>
            </ul>
        </div>

上面代码中出现的rightDiv（obj）函数代码如下：

$scope.rightDiv = function (obj) {
            $scope.currentPage = 0;
            $scope.totalPage = 0;
            if(obj == "首页"){
                $("#divid-homepage").show();
                $("#divid-usermanage").hide();
                $("#divid-filemanage").hide();
                $("#divid-rolemanage").hide();
                $("#liid-homepage").attr("class","active");
                $("#liid-usermanage").removeClass("active");
                $("#liid-filemanage").removeClass("active");
                $("#liid-rolemanage").removeClass("active");
            }else if(obj == "用户管理"){
                $("#divid-homepage").hide();
                $("#divid-usermanage").show();
                $("#divid-filemanage").hide();
                $("#divid-rolemanage").hide();
                $("#liid-homepage").removeClass("active");
                $("#liid-usermanage").attr("class","active");
                $("#liid-filemanage").removeClass("active");
                $("#liid-rolemanage").removeClass("active");

                $scope.searchUserName = "";
                $scope.searchUserNameUrlSufix = "";
                $scope.getUserPageList();
            }else if(obj == "文件管理"){
                $("#divid-homepage").hide();
                $("#divid-usermanage").hide();
                $("#divid-filemanage").show();
                $("#divid-rolemanage").hide();
                $("#liid-homepage").removeClass("active");
                $("#liid-usermanage").removeClass("active");
                $("#liid-filemanage").attr("class","active");
                $("#liid-rolemanage").removeClass("active");
            }else if(obj == "角色管理"){
                $("#divid-homepage").hide();
                $("#divid-usermanage").hide();
                $("#divid-filemanage").hide();
                $("#divid-rolemanage").show();
                $("#liid-homepage").removeClass("active");
                $("#liid-usermanage").removeClass("active");
                $("#liid-filemanage").removeClass("active");
                $("#liid-rolemanage").attr("class","active");

                $scope.searchRoleName = "";
                $scope.searchRoleNameUrlSufix = "";
                $scope.getRolePageList();
            }
        };

由于表格什么的我都放在div标签中，所以用jquery获取到相应id的div元素后，再用show（）和hide（）分别控制显示和隐藏。以达到点击左侧导航栏右边表格视图进行相应变化。
不过上面代码中的文件管理我还没实现，所以先忽略。下面贴出用户管理表格代码：

<div class="col-xs-10" style="background-color: #f7f7f7;display: none;" id="divid-usermanage">
            <table class="table table-hover table-striped table-bordered">
                <caption>
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <a class="navbar-brand">用户列表</a>
                            </div>
                            <div>
                                <form class="navbar-form navbar-right" role="search"  οnsubmit="return ;">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="请输入用户名" ng-model="searchUserName">
                                    </div>
                                    <button type="button" class="btn btn-default" ng-click="actionOnUser(this,constRef[0][3])">
                                        <span class="glyphicon glyphicon-search"></span> <span ng-bind="constRef[0][3]"></span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </nav>
                </caption>
                <thead>
                <tr><th>用户名</th><th>电话</th><th>创建时间</th><th>操作</th></tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in userList">
                    <td ng-bind="item.username"></td>
                    <td ng-bind="item.tel"></td>
                    <td ng-bind="item.createTime"></td>
                    <td><button ng-click="actionOnUser(item,constRef[0][0])" type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-user"></span> <span ng-bind="constRef[0][0]"></span></button>
                    <button ng-click="actionOnUser(item,constRef[0][1])" type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-exclamation-sign"></span> <span ng-bind="constRef[0][1]"></span></button>
                    <button ng-click="actionOnUser(item,constRef[0][2])" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> <span ng-bind="constRef[0][2]"></span></button></td>
                </tr>
                </tbody>
            </table>
            <div><!--分页bar ng-if则不能给button设置disabled因为ng-if不满足条件不会生成相应dom元素-->
                <span ng-show="userList.length > 0">
                    <input type="button" ng-click="beforePaging(prevPage)" class="btn btn-default btnid-prevpage" value={{prevPage}} /> 
                    <input type="text" disabled style="text-align:center;width:50px;" ng-model="currentPage" /> 
                    <input type="button" ng-click="beforePaging(nextPage)"  class="btn btn-default btnid-nextpage" value="{{nextPage}}" /> 
                    <span>共 </span>
                    <input type="text" readonly="readonly" style="text-align:center;width:50px;border:none;" ng-model="totalPage" />
                    <span> 页</span>
                </span>
            </div>
        </div>

而角色管理表格与此类似，故不再贴出。下面对上面出现的一些函数做一些说明：actionOnUser（item，obj）表示对用户进行的操作（查看详情，分配角色，删除，搜索）；

beforePaging（obj）代表分页操作。具体代码如下：

$scope.actionOnUser = function(item,obj){
            if(obj == "查看详情"){
                $scope.userViewInfo = item;
                $("#modalid-viewInfo").modal("toggle");
                //console.log($scope.userViewInfo);
            }else if(obj == "分配角色"){
                $scope.userViewInfo = item;
                $scope.checkBoxArray = new Array();
                $scope.getRoleBelongToUser(item);
                $scope.getSimpleRoleList();
                $("#modalid-roleForUser").modal("toggle");
            }else if(obj == "删除"){
                $scope.deleteOneUserItem = item;
                $("#modalid-delUserConf").modal("toggle");
            }else if(obj == "搜索"){
                if($scope.searchUserName != null && $scope.searchUserName != ""){
                    $scope.currentPage = 1;
                    $scope.searchUserNameUrlSufix = "ForSearch";
                    $scope.getUserPageList();
                }else{
                    //console.log($scope.searchRoleName);
                }
            }
        };

$scope.beforePaging = function(obj){//different tables
            var  activeId = $(".active").attr("id");
            if(activeId == "liid-usermanage"){
                $scope.makePagingList(obj,"用户管理");
            }else if(activeId == "liid-rolemanage"){
                $scope.makePagingList(obj,"角色管理");
            }
        };
        $scope.makePagingList = function(obj,str){
            if(obj=="上一页"){
                if($scope.currentPage == 0){
                    //nothing to do
                }else if($scope.currentPage == 1){
                    alert("当前已经是第一页！");//其实并不会发生，因为disabled
                }else{
                    $scope.currentPage = $scope.currentPage - 1;
                    if(str == "用户管理"){
                        $scope.getUserPageList();
                    }else if(str == "角色管理"){
                        $scope.getRolePageList();
                    }
                }
            }else if(obj=="下一页"){
                if($scope.currentPage == 0){
                    //nothing to do
                }else if($scope.currentPage == $scope.totalPage){
                    alert("当前已经是最后一页！");//其实并不会发生，因为disabled
                }else{
                    $scope.currentPage = $scope.currentPage + 1;
                    if(str == "用户管理"){
                        $scope.getUserPageList();
                    }else if(str == "角色管理"){
                        $scope.getRolePageList();
                    }
                }
            }
        };
        $scope.getUserPageList = function(){
            if($scope.currentPage == 0){
                this.currentPage = 1;
            }else{
                this.currentPage = $scope.currentPage;
            }
            $.ajax({
                type:"POST",
                url:"/login/getUserPageList"+$scope.searchUserNameUrlSufix,
                data:{"currentPage":this.currentPage,"pageSize":5,"blurUserName":$scope.searchUserName},
                contentType:"application/x-www-form-urlencoded",
                dataType:"json",
                success:function(data){
                    console.log(data);
                    /**16-11-5 16:05
                     * angularjs  必须在$scope上下文中刷新数据才能更新视图
                     * 要用$scope.$apply(function(){
				 *	//更新数据
				 *	})
                     * 用$http服务的ajax获取可以直接修改数据，因为这个服务是在$scope上下文中的，但是jquery方法不是
                     */
                    $scope.$apply(function(){
                        if(data.page.list.length == 0){
                            $scope.currentPage = $scope.currentPage - 1;
                            $scope.getUserPageList();
                        }
                        $scope.userList = new Array();
                        var obj = {};
                        for(var temp in data.page.list){
                            obj['id'] = data.page.list[temp].id;
                            obj['username'] = data.page.list[temp].username;
                            obj['email'] = data.page.list[temp].email;
                            obj['tel'] = data.page.list[temp].tel;
                            var datestr = new Date(parseInt(data.page.list[temp].createTime));
                            var temstr = datestr.getFullYear() + "年" + (parseInt(datestr.getMonth())+1) + "月" + datestr.getDate() + "日"
                            //+ datestr.getHours() + ":" + datestr.getMinutes() + ":" + datestr.getSeconds()
                                ;
                            obj['createTime'] = temstr;	//创建时间
                            $scope.userList.push(obj);obj = {};
                        }
                        //分页相关更新
                        $scope.currentPage = data.page.current;
                        $scope.totalPage = data.page.total;
                        if($scope.currentPage == 1){
                            for(var i1=0;i1<$(".btnid-prevpage").length;i1++){
                                $(".btnid-prevpage").eq(i1).attr("disabled","disabled");
                            }
                        }else{
                            for(var i2=0;i2<$(".btnid-prevpage").length;i2++){
                                $(".btnid-prevpage").eq(i2).removeAttr("disabled");
                            }
                        }
                        if($scope.currentPage == $scope.totalPage){
                            for(var i3=0;i3<$(".btnid-nextpage").length;i3++){
                                $(".btnid-nextpage").eq(i3).attr("disabled","disabled");
                            }
                        }else{
                            for(var i4=0;i4<$(".btnid-nextpage").length;i4++){
                                $(".btnid-nextpage").eq(i4).removeAttr("disabled");
                            }
                        }
                    });
                }
            });
        };

以上我就将用户管理的获取分页列表的代码给出来了，在angularjs中通过jquery的ajax服务与后台进行交互，其实angularjs也有内置的$http服务，我只是用jquery的ajax用惯了哈哈。而角色管理的获取分页列表与此类似，故不再重复。
二、用户相关操作

点击查看详情按钮，弹出模态弹出框。演示如下：

点击分配角色按钮（分配为秘书），演示如下：

下面我们到角色管理界面看看，秘书角色中是否包含名为tomayao的用户：

可以看到逻辑正常，下面我们给出相应代码。首先我们讨论下复选框的相关函数。

<!-- 为用户分配角色  模态弹出框 -->
<div class="modal fade" id="modalid-roleForUser">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <!--  >模态弹出窗标题<  -->
                <h4 class="modal-title">分配角色</h4>
            </div>
            <div class="modal-body">
                <!--  >模态弹出窗主体内容<  -->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 col-sm-offset-2 control-label">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="username" ng-model="userViewInfo.username" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 col-sm-offset-2 control-label">角色</label>
                        <div class="col-sm-6">
                            <div ng-repeat="item in roleSimpleList">
                                <label class="checkbox-inline"><input type="checkbox" ng-checked="ifSetChecked(item)" ng-click="roleForUserCheckBoxs($event,item)"><span ng-bind="item.roleName"></span></label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="roleForOneUser()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

上面代码中的ifSetChecked（item）作用是当模态框弹出时，如果该用户已有相应角色，则对应角色的复选框应当为选中状态。

$scope.ifSetChecked = function(obj){
            if($scope.roleBelongToUser.length != 0){
                for(var i=0;i<$scope.roleBelongToUser.length;i++){
                    if(obj.id == $scope.roleBelongToUser[i].roleId){
                        return true;
                    }else{
                        continue;
                    }
                }
            }
            return false;
        };

roleForUserCheckBoxs（$event,item）函数作用是当我们操作人员点击复选框时触发该函数执行相应代码，将全部被选中的复选框所对应的角色id存放进一个数组中。

$scope.roleForUserCheckBoxs = function($event,item){//$event类似于普通js的this对象
            //console.log(item.id);
            //console.log($event.target.checked);//被点击的checkbox是否被选中
            if($event.target.checked == true){
                $scope.checkBoxArray.push(item.id);
            }else{
                $scope.checkBoxArray.splice(
                    $scope.checkBoxArray.indexOf(item.id),1
                );
            }
            console.log($scope.checkBoxArray);
        };

下面给出点击为用户分配角色的提交按钮后执行的函数：

$scope.roleForOneUser = function(){
            this.roleArray = "";
            for(var index in $scope.checkBoxArray){
                this.roleArray += $scope.checkBoxArray[index].toString()+"-";
            }
            console.log(this.roleArray);
            $.ajax({
                type:"POST",
                url:"/user_role/roleForOneUser",
                data:{"id":$scope.userViewInfo.id,"roleList":this.roleArray},
                contentType:"application/x-www-form-urlencoded",
                dataType:"json",
                success:function(data){
                    console.log(data);
                    $scope.$apply(function(){
                        $scope.justForModalInfomation = "为用户分配角色成功!";
                        $("#modalid-toastInfo").modal("toggle");
                    });
                }
            });
        };

三、角色相关操作

我们先新增一个角色。