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

来源：互联网发布：公牛队球员名单数据编辑：程序博客网时间：2024/06/03 21:21

1.实现目标：

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

(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