释放双眼，带上耳机，听听看~！
权限管理（中）
–前端页面的编写（bootstrap、angularjs）
一、主页布局
先将主页分为上下两部分，上部分为顶部导航条，下部分又分成左右结构（左侧导航与右边表格主体）。如下图所示：
其中顶部导航的代码如下：
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
2 <nav class="navbar navbar-default" role="navigation" style="background-color: #31708f;">
3 <div class="container-fluid">
4 <div class="navbar-header">
5 <a class="navbar-brand" style="color: #fcf8e3;font-size: 25px;">UMS</a>
6 </div>
7 <div>
8 <form class="navbar-form navbar-right" role="search">
9 <div class="form-group">
10 <div class="btn-group">
11 <button type="button" class="btn btn-default">
12 <span class="glyphicon glyphicon-user"></span>
13 <span ng-bind="usernameOfLoger"></span>
14 </button>
15 <button type="button" class="btn btn-warning" ng-click="topOperation(constRef[3][0])">
16 <span class="glyphicon glyphicon-envelope"></span>
17 <span ng-bind="constRef[3][0]"></span>
18 </button>
19 <button type="button" class="btn btn-success" ng-click="topOperation(constRef[3][1])">
20 <span class="glyphicon glyphicon-edit"></span>
21 <span ng-bind="constRef[3][1]"></span>
22 </button>
23 <button type="button" class="btn btn-danger" ng-click="topOperation(constRef[3][2])">
24 <span class="glyphicon glyphicon-off"></span>
25 <span ng-bind="constRef[3][2]"></span>
26 </button>
27 </div>
28 </div>
29 </form>
30 </div>
31 </div>
32 </nav>
33</div>
34
以上代码中，ng-bind为angularjs的语法，代表数据绑定，而constRef是我在angularjs文件中定义的二位数组，里面存放的全部是常量。其余的应该很好理解，如下贴出angularjs主要代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2 .constant('constRef',[["查看详情","分配角色","删除","搜索"],//user table
3 ["首页","用户管理","文件管理","角色管理"],//left nav bar
4 ["查看详情","删除","新增角色","搜索","编辑","取消","提交","用户管理"],// role table
5 ["系统消息","编辑","注销"]])//topOperation
6 .controller("maincontroller",function($scope,constRef){
7 $scope.currentPage = 0;
8 $scope.totalPage = 0;
9 $scope.listLength = 0;
10 $scope.prevPage = "上一页";
11 $scope.nextPage = "下一页";
12 $scope.constRef = constRef;
13 $scope.searchRoleName = "";//search role
14 $scope.searchUserName = "";//search user
15 $scope.justForModalInfomation = "";
16//省略一万字。。。
17})
18
了解angularjs基础的朋友很容易看懂以上代码。下面贴出左侧导航代码：
2
3
4
5
6
7
8
9
10
2 <ul class="nav nav-pills nav-stacked">
3 <%--这里a标签不能加href属性，否则会相对首页进行#跳转，但在静态页面无影响--%>
4 <li class="active" id="liid-homepage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][0])" ng-bind="constRef[1][0]"></a></li>
5 <li id="liid-usermanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][1])" ng-bind="constRef[1][1]"></a></li>
6 <%--<li id="liid-filemanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][2])" ng-bind="constRef[1][2]"></a></li>--%>
7 <li id="liid-rolemanage"><a style="cursor: pointer;" ng-click="rightDiv(constRef[1][3])" ng-bind="constRef[1][3]"></a></li>
8 </ul>
9 </div>
10
上面代码中出现的rightDiv（obj）函数代码如下：
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
2 $scope.currentPage = 0;
3 $scope.totalPage = 0;
4 if(obj == "首页"){
5 $("#divid-homepage").show();
6 $("#divid-usermanage").hide();
7 $("#divid-filemanage").hide();
8 $("#divid-rolemanage").hide();
9 $("#liid-homepage").attr("class","active");
10 $("#liid-usermanage").removeClass("active");
11 $("#liid-filemanage").removeClass("active");
12 $("#liid-rolemanage").removeClass("active");
13 }else if(obj == "用户管理"){
14 $("#divid-homepage").hide();
15 $("#divid-usermanage").show();
16 $("#divid-filemanage").hide();
17 $("#divid-rolemanage").hide();
18 $("#liid-homepage").removeClass("active");
19 $("#liid-usermanage").attr("class","active");
20 $("#liid-filemanage").removeClass("active");
21 $("#liid-rolemanage").removeClass("active");
22
23 $scope.searchUserName = "";
24 $scope.searchUserNameUrlSufix = "";
25 $scope.getUserPageList();
26 }else if(obj == "文件管理"){
27 $("#divid-homepage").hide();
28 $("#divid-usermanage").hide();
29 $("#divid-filemanage").show();
30 $("#divid-rolemanage").hide();
31 $("#liid-homepage").removeClass("active");
32 $("#liid-usermanage").removeClass("active");
33 $("#liid-filemanage").attr("class","active");
34 $("#liid-rolemanage").removeClass("active");
35 }else if(obj == "角色管理"){
36 $("#divid-homepage").hide();
37 $("#divid-usermanage").hide();
38 $("#divid-filemanage").hide();
39 $("#divid-rolemanage").show();
40 $("#liid-homepage").removeClass("active");
41 $("#liid-usermanage").removeClass("active");
42 $("#liid-filemanage").removeClass("active");
43 $("#liid-rolemanage").attr("class","active");
44
45 $scope.searchRoleName = "";
46 $scope.searchRoleNameUrlSufix = "";
47 $scope.getRolePageList();
48 }
49 };
50
由于表格什么的我都放在div标签中，所以用jquery获取到相应id的div元素后，再用show（）和hide（）分别控制显示和隐藏。以达到点击左侧导航栏右边表格视图进行相应变化。
不过上面代码中的文件管理我还没实现，所以先忽略。下面贴出用户管理表格代码：
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
2 <table class="table table-hover table-striped table-bordered">
3 <caption>
4 <nav class="navbar navbar-default" role="navigation">
5 <div class="container-fluid">
6 <div class="navbar-header">
7 <a class="navbar-brand">用户列表</a>
8 </div>
9 <div>
10 <form class="navbar-form navbar-right" role="search" οnsubmit="return ;">
11 <div class="form-group">
12 <input type="text" class="form-control" placeholder="请输入用户名" ng-model="searchUserName">
13 </div>
14 <button type="button" class="btn btn-default" ng-click="actionOnUser(this,constRef[0][3])">
15 <span class="glyphicon glyphicon-search"></span> <span ng-bind="constRef[0][3]"></span>
16 </button>
17 </form>
18 </div>
19 </div>
20 </nav>
21 </caption>
22 <thead>
23 <tr><th>用户名</th><th>电话</th><th>创建时间</th><th>操作</th></tr>
24 </thead>
25 <tbody>
26 <tr ng-repeat="item in userList">
27 <td ng-bind="item.username"></td>
28 <td ng-bind="item.tel"></td>
29 <td ng-bind="item.createTime"></td>
30 <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>
31 <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>
32 <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>
33 </tr>
34 </tbody>
35 </table>
36 <div><!--分页bar ng-if则不能给button设置disabled因为ng-if不满足条件不会生成相应dom元素-->
37 <span ng-show="userList.length > 0">
38 <input type="button" ng-click="beforePaging(prevPage)" class="btn btn-default btnid-prevpage" value={{prevPage}} />
39 <input type="text" disabled style="text-align:center;width:50px;" ng-model="currentPage" />
40 <input type="button" ng-click="beforePaging(nextPage)" class="btn btn-default btnid-nextpage" value="{{nextPage}}" />
41 <span>共 </span>
42 <input type="text" readonly="readonly" style="text-align:center;width:50px;border:none;" ng-model="totalPage" />
43 <span> 页</span>
44 </span>
45 </div>
46 </div>
47
而角色管理表格与此类似，故不再贴出。下面对上面出现的一些函数做一些说明：actionOnUser（item，obj）表示对用户进行的操作（查看详情，分配角色，删除，搜索）；
beforePaging（obj）代表分页操作。具体代码如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2 if(obj == "查看详情"){
3 $scope.userViewInfo = item;
4 $("#modalid-viewInfo").modal("toggle");
5 //console.log($scope.userViewInfo);
6 }else if(obj == "分配角色"){
7 $scope.userViewInfo = item;
8 $scope.checkBoxArray = new Array();
9 $scope.getRoleBelongToUser(item);
10 $scope.getSimpleRoleList();
11 $("#modalid-roleForUser").modal("toggle");
12 }else if(obj == "删除"){
13 $scope.deleteOneUserItem = item;
14 $("#modalid-delUserConf").modal("toggle");
15 }else if(obj == "搜索"){
16 if($scope.searchUserName != null && $scope.searchUserName != ""){
17 $scope.currentPage = 1;
18 $scope.searchUserNameUrlSufix = "ForSearch";
19 $scope.getUserPageList();
20 }else{
21 //console.log($scope.searchRoleName);
22 }
23 }
24 };
25
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
2 var activeId = $(".active").attr("id");
3 if(activeId == "liid-usermanage"){
4 $scope.makePagingList(obj,"用户管理");
5 }else if(activeId == "liid-rolemanage"){
6 $scope.makePagingList(obj,"角色管理");
7 }
8 };
9 $scope.makePagingList = function(obj,str){
10 if(obj=="上一页"){
11 if($scope.currentPage == 0){
12 //nothing to do
13 }else if($scope.currentPage == 1){
14 alert("当前已经是第一页！");//其实并不会发生，因为disabled
15 }else{
16 $scope.currentPage = $scope.currentPage - 1;
17 if(str == "用户管理"){
18 $scope.getUserPageList();
19 }else if(str == "角色管理"){
20 $scope.getRolePageList();
21 }
22 }
23 }else if(obj=="下一页"){
24 if($scope.currentPage == 0){
25 //nothing to do
26 }else if($scope.currentPage == $scope.totalPage){
27 alert("当前已经是最后一页！");//其实并不会发生，因为disabled
28 }else{
29 $scope.currentPage = $scope.currentPage + 1;
30 if(str == "用户管理"){
31 $scope.getUserPageList();
32 }else if(str == "角色管理"){
33 $scope.getRolePageList();
34 }
35 }
36 }
37 };
38 $scope.getUserPageList = function(){
39 if($scope.currentPage == 0){
40 this.currentPage = 1;
41 }else{
42 this.currentPage = $scope.currentPage;
43 }
44 $.ajax({
45 type:"POST",
46 url:"/login/getUserPageList"+$scope.searchUserNameUrlSufix,
47 data:{"currentPage":this.currentPage,"pageSize":5,"blurUserName":$scope.searchUserName},
48 contentType:"application/x-www-form-urlencoded",
49 dataType:"json",
50 success:function(data){
51 console.log(data);
52 /**16-11-5 16:05
53 * angularjs 必须在$scope上下文中刷新数据才能更新视图
54 * 要用$scope.$apply(function(){
55 * //更新数据
56 * })
57 * 用$http服务的ajax获取可以直接修改数据，因为这个服务是在$scope上下文中的，但是jquery方法不是
58 */
59 $scope.$apply(function(){
60 if(data.page.list.length == 0){
61 $scope.currentPage = $scope.currentPage - 1;
62 $scope.getUserPageList();
63 }
64 $scope.userList = new Array();
65 var obj = {};
66 for(var temp in data.page.list){
67 obj['id'] = data.page.list[temp].id;
68 obj['username'] = data.page.list[temp].username;
69 obj['email'] = data.page.list[temp].email;
70 obj['tel'] = data.page.list[temp].tel;
71 var datestr = new Date(parseInt(data.page.list[temp].createTime));
72 var temstr = datestr.getFullYear() + "年" + (parseInt(datestr.getMonth())+1) + "月" + datestr.getDate() + "日"
73 //+ datestr.getHours() + ":" + datestr.getMinutes() + ":" + datestr.getSeconds()
74 ;
75 obj['createTime'] = temstr; //创建时间
76 $scope.userList.push(obj);obj = {};
77 }
78 //分页相关更新
79 $scope.currentPage = data.page.current;
80 $scope.totalPage = data.page.total;
81 if($scope.currentPage == 1){
82 for(var i1=0;i1<$(".btnid-prevpage").length;i1++){
83 $(".btnid-prevpage").eq(i1).attr("disabled","disabled");
84 }
85 }else{
86 for(var i2=0;i2<$(".btnid-prevpage").length;i2++){
87 $(".btnid-prevpage").eq(i2).removeAttr("disabled");
88 }
89 }
90 if($scope.currentPage == $scope.totalPage){
91 for(var i3=0;i3<$(".btnid-nextpage").length;i3++){
92 $(".btnid-nextpage").eq(i3).attr("disabled","disabled");
93 }
94 }else{
95 for(var i4=0;i4<$(".btnid-nextpage").length;i4++){
96 $(".btnid-nextpage").eq(i4).removeAttr("disabled");
97 }
98 }
99 });
100 }
101 });
102 };
103
以上我就将用户管理的获取分页列表的代码给出来了，在angularjs中通过jquery的ajax服务与后台进行交互，其实angularjs也有内置的$http服务，我只是用jquery的ajax用惯了哈哈。而角色管理的获取分页列表与此类似， 故不再重复。
二、用户相关操作
点击查看详情按钮，弹出模态弹出框。演示如下：
点击分配角色按钮（分配为秘书），演示如下：
下面我们到角色管理界面看看，秘书角色中是否包含名为tomayao的用户：
可以看到逻辑正常，下面我们给出相应代码。首先我们讨论下复选框的相关函数。
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
2<div class="modal fade" id="modalid-roleForUser">
3 <div class="modal-dialog">
4 <div class="modal-content">
5 <div class="modal-header">
6 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
7 <!-- >模态弹出窗标题< -->
8 <h4 class="modal-title">分配角色</h4>
9 </div>
10 <div class="modal-body">
11 <!-- >模态弹出窗主体内容< -->
12 <form class="form-horizontal" role="form">
13 <div class="form-group">
14 <label for="username" class="col-sm-2 col-sm-offset-2 control-label">用户名</label>
15 <div class="col-sm-6">
16 <input type="text" class="form-control" name="username" ng-model="userViewInfo.username" disabled>
17 </div>
18 </div>
19 <div class="form-group">
20 <label for="email" class="col-sm-2 col-sm-offset-2 control-label">角色</label>
21 <div class="col-sm-6">
22 <div ng-repeat="item in roleSimpleList">
23 <label class="checkbox-inline"><input type="checkbox" ng-checked="ifSetChecked(item)" ng-click="roleForUserCheckBoxs($event,item)"><span ng-bind="item.roleName"></span></label>
24 </div>
25 </div>
26 </div>
27 </form>
28 </div>
29 <div class="modal-footer">
30 <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
31 <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="roleForOneUser()">提交</button>
32 </div>
33 </div><!-- /.modal-content -->
34 </div><!-- /.modal-dialog -->
35</div><!-- /.modal -->
36
上面代码中的ifSetChecked（item）作用是当模态框弹出时，如果该用户已有相应角色，则对应角色的复选框应当为选中状态。
2
3
4
5
6
7
8
9
10
11
12
13
2 if($scope.roleBelongToUser.length != 0){
3 for(var i=0;i<$scope.roleBelongToUser.length;i++){
4 if(obj.id == $scope.roleBelongToUser[i].roleId){
5 return true;
6 }else{
7 continue;
8 }
9 }
10 }
11 return false;
12 };
13
roleForUserCheckBoxs（$event,item）函数作用是当我们操作人员点击复选框时触发该函数执行相应代码，将全部被选中的复选框所对应的角色id存放进一个数组中。
2
3
4
5
6
7
8
9
10
11
12
13
2 //console.log(item.id);
3 //console.log($event.target.checked);//被点击的checkbox是否被选中
4 if($event.target.checked == true){
5 $scope.checkBoxArray.push(item.id);
6 }else{
7 $scope.checkBoxArray.splice(
8 $scope.checkBoxArray.indexOf(item.id),1
9 );
10 }
11 console.log($scope.checkBoxArray);
12 };
13
下面给出点击为用户分配角色的提交按钮后执行的函数：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2 this.roleArray = "";
3 for(var index in $scope.checkBoxArray){
4 this.roleArray += $scope.checkBoxArray[index].toString()+"-";
5 }
6 console.log(this.roleArray);
7 $.ajax({
8 type:"POST",
9 url:"/user_role/roleForOneUser",
10 data:{"id":$scope.userViewInfo.id,"roleList":this.roleArray},
11 contentType:"application/x-www-form-urlencoded",
12 dataType:"json",
13 success:function(data){
14 console.log(data);
15 $scope.$apply(function(){
16 $scope.justForModalInfomation = "为用户分配角色成功!";
17 $("#modalid-toastInfo").modal("toggle");
18 });
19 }
20 });
21 };
22
三、角色相关操作
我们先新增一个角色。
由于新增角色只是简单的在数据库中保存一条记录的操作，前后端代码都不复杂，故不贴出相应代码。
到这里前端的主要内容我就介绍的差不多了，而后台的代码我将在下一篇博客中给出，并补充这一篇博客中的部分前端代码。
下一篇将是我的本系列博客中的结尾篇。
