AngularJS内置服务$http的使用——用户权限管理实例

1.实现目标:

选择用户角色,自动勾选权限。

2.

(1)MySQL数据库的建立

(2)ng-repeat指令显示用户权限

(3)ng-checked指令控制用户权限

3.实例

(1)MySQL数据库的建立

t_role表

id     rolename

1      系统管理员

2      总经理


r_right表

id    rightname  ischecked

1     人员管理    0

2     合同管理    0

3     项目管理    0

4     新闻公告    0


r_role_right表

id     roleid        rightid

1          1                1

2          1                2

3          1                3

4          1                4

5          2                1

6          2                2


(2)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
    <style type="text/css">
        html,body{font-size:14px;}
    </style>
</head>
<body style="padding:10px;" ng-app="app">
    <div ng-controller="MyCtrl">
        <fieldset>
            <legend>用户角色</legend>
            <select ng-model="curselect">
                <option>--请选择--</option>
                <option ng-repeat="r in roles" value={{r.id}}>{{r.rolename}}</option>
            </select>
        </fieldset>
        <fieldset>
            <legend>权限管理</legend>
            <span ng-repeat="right in rights">
                <input type="checkbox" ng-checked="right.ischecked">&nbsp;{{right.rightname}}
            </span>
        </fieldset>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

angular.module('app', [])
    .controller('MyCtrl', function ($scope, $http) {
        $scope.id=" ";
        $scope.name=" ";
        $scope.roles = [];
        $scope.rights = [];
        $scope.curselect = [];

        $http.$watch('curselect',function () {
            loadRoleRight();
        })

        function loadRoleRight() {
            $http.post('http://127.0.0.1:80/user/getRoleRight',{roleid:$scope.curselect})
                .success(function (resp) {
                    var rights = resp;
                    for(var i = 0; i < $scope.rights.length; i++){
                        $scope.rights[i].ischecked = false;
                        for(var j = 0; j < rights.length; j++){
                            if($scope.rihgts[i].id == rights[j].rightid){
                                $scope.rights[i].ischecked = true;
                            }
                        }
                    }
                })
        }
        
        function init(){
            $http.get('http://127.0.0.1:80/user/getRoles')
                .success(function (resp) {
                    $scope.roles = resp;
                })

            $http.get('http://127.0.0.1:80/user/getRights')
                .success(function (resp) {
                    $scope.roles = resp;
                })
        }
        init();

    })

后台Java代码如下:

public void getRoles(){
List<Role> roles = Role.dao.find("select * from t_role");
renderJson(roles);
}

public void getRights(){
List<Right> rights = Right.dao.find("select * from t_right");
renderJson(rights);
}

public void getRoleRight(){
String roleid = getPara("roleid");
List<Record> rights = Db.find("select * from t_role_right where roleid=?",roleid);
renderJson(rights);
}

(3)运行界面


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值