权限管理（中）
--前端页面的编写（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 tablesvar 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");});}});};
三、角色相关操作
我们先新增一个角色。
由于新增角色只是简单的在数据库中保存一条记录的操作，前后端代码都不复杂，故不贴出相应代码。
到这里前端的主要内容我就介绍的差不多了，而后台的代码我将在下一篇博客中给出，并补充这一篇博客中的部分前端代码。
下一篇将是我的本系列博客中的结尾篇。
