《中级前端5.4》AngularJS内置服务$http的使用——Mysql增删改查,用户权限,$watch监听
核心内容： 1.使用$http查询MySQL数据； 2.使用$http新增修改删除数据 ；
课程是用java演示的，这里我们刚学过php的pdo，就自己用php来写几个小例子，开始：
使用$http查询MySQL数据
1.建立数据表
2.写一个PHP文件读取数据库并返回JSON数据
3.写AngularJS页面，通过$http获取php文件返回的JSON数据并显示到页面
数据表：
/user/index.php:
1 <?php 2 3 //1.连接数据库 4 try{ 5 $pdo = new PDO("mysql:host=localhost;dbname=woodk", "root", "root"); 6 $pdo->query('set names utf8'); //字符集 7 }catch(PDOException $e){ 8 die("数据库连接失败".$e->getMessage()); 9 } 10 11 //2.执行query（查询）返回一个预处理对象 12 $sql= "SELECT * FROM stu"; 13 $stmt = $pdo->query($sql); 14 $list = $stmt->fetchAll(PDO::FETCH_ASSOC); //处理成关联数组 15 echo json_encode($list); 16 17 //4.释放资源 18 $stmt = null; 19 $pdo = null; 20 21 ?>
index.html:
<body ng-app="app"> <div ng-controller="MyCtrl"> <ul> <li ng-repeat="item in users"> {{item.id + ' , ' + item.name + ' , ' + item.sex}} </li> </ul> </div> </body>
js:
angular.module('app', [])
.config(function($httpProvider){
})
.controller('MyCtrl', function($scope, $http){
$scope.users = "";
$http.get('http://www.ng.com/user/index.php')
.success(function(resp){
$scope.users = resp;
})
})
访问页面：www.ng.com/index.html
$http实现对数据的增删改
我们用php+Mysql+AngularJS演示一个增加数据库内容的功能：
1.mysql数据库：
2.index.html AngularJS页面，用于提交数据：
<body ng-app="app"> <div ng-controller="MyCtrl"> <input type="text" ng-model="uname"> <button class="button" ng-click="addUser()">添加</button> </div> </body>
3.js: 处理页面的添加操作，通过$http以post形式传数据给后端程序：
1 angular.module('app', []) 2 .config(function($httpProvider){ 3 }) 4 .controller('MyCtrl', function($scope, $http){ 5 6 $scope.uname = ''; 7 //$http的post传送的参数是JSON格式的，php后端获取的是JSON数据，不能用$POST_['...'] 8 $scope.addUser = function(){ 9 $http.post('http://www.ng.com/user/addUser.php', {name:$scope.uname}) 10 .success(function(resp){ 11 if(resp.success){ 12 alert('添加成功'); 13 }else{ 14 console.log(resp); 15 } 16 }) 17 } 18 })
这里，$http通过post发送的数据是JSON格式，需要注意！
4.php后端程序，接收提交的请求和参数，入库操作：
1 <?php 2 3 //1.连接数据库 4 try{ 5 $pdo = new PDO("mysql:host=localhost;dbname=woodk", "root", "root"); 6 $pdo->query('set names utf8'); //字符集 7 }catch(PDOException $e){ 8 die("数据库连接失败".$e->getMessage()); 9 } 10 11 //2.接收数据并转换为php数组 12 $dataJson = file_get_contents("php://input"); //获取POST原始数据（JSON） 13 $data = json_decode($dataJson, true); //将JSON数据强制转换为数组对象 14 $name = $data['name']; 15 16 //3.插入一条数据 17 $sql= "INSERT INTO t_user VALUES(null, '$name')"; 18 $result = $pdo->exec($sql); 19 echo '{"success":'.$result.'}'; 20 21 //4.释放资源 22 $stmt = null; 23 $pdo = null; 24 25 ?>
PHP后端接收 $http的post来的数据 是JSON，不能用$_POST['..']
5.运行程序：
打开数据表查看，数据已经添加成功！
添加操作已经成功，删除和修改操作也类似，改变下post的参数，写好php后端程序，就可以了。
总结：AngularJS的双向绑定，节省了很多jQuery对DOM的操作，比如ajax提交数据，返回数据后再修改页面内容等操作。在AngularJS中都是自动的。前后端数据自动同步，非常方便。
用户角色权限实例
实例分析：我们实现一个用户权限显示的功能。前台界面选择用户角色后，勾选出对应的权限选项。
1.建立数据表。一共分3个表，分别存储
用户t_role，
权限t_right，
用户拥有的权限t_role_right
。
2.AngularJS前台界面
<body ng-app="app" style="padding:10px;"> <div ng-controller="MyCtrl"> <fieldset> <legend>用户角色</legend> <select ng-model="curselect"> <option value="">--请选择--</option> <option value="{{item.id}}" ng-repeat="item in roles">{{item.rolename}}</option> </select> </fieldset> <fieldset> <legend>权限列表</legend> <span ng-repeat="item in rights"> <input type="checkbox" ng-checked="item.ischecked>0"> {{item.rightname}} </span> </fieldset> </div> </body>
3.js:
1 angular.module('app', []) 2 .controller('MyCtrl', function($scope, $http){ 3 4 $scope.roles = []; 5 $scope.rights = []; 6 $scope.curselect = ""; 7 8 //监听select选择 9 $scope.$watch('curselect', function() { 10 loadRoleRight(); 11 }); 12 13 //当更改选中用户时，获取当前用户的权限数组，并改变checkbox的状态 14 function loadRoleRight(){ 15 $http.post('http://www.ng.com/user/getRoleRight.php', {roleid:$scope.curselect}) 16 .success(function(resp){ 17 console.log(resp); 18 var rights = resp; 19 for(var i=0; i<$scope.rights.length; i++){ 20 $scope.rights[i].ischecked = false; 21 for(var j=0; j<rights.length; j++){ 22 if($scope.rights[i].id == rights[j].rightid){ 23 $scope.rights[i].ischecked = true; 24 break; 25 } 26 } 27 } 28 }) 29 } 30 31 //初始化用户角色和权限列表 32 function init(){ 33 $http.get('http://www.ng.com/user/getRoles.php') 34 .success(function(resp){ 35 $scope.roles = resp; 36 }) 37 38 $http.get('http://www.ng.com/user/getRights.php') 39 .success(function(resp){ 40 $scope.rights = resp; 41 }) 42 } 43 init(); 44 })
4.php:
1 /*************** getRoles.php 获取用户列表 ***************/ 2 <?php 3 4 //1.连接数据库 5 try{ 6 $pdo = new PDO("mysql:host=localhost;dbname=woodk", "root", "root"); 7 $pdo->query('set names utf8'); //字符集 8 }catch(PDOException $e){ 9 die("数据库连接失败".$e->getMessage()); 10 } 11 12 //2.执行query（查询）返回一个预处理对象 13 $sql= "SELECT * FROM t_role"; 14 $stmt = $pdo->query($sql); 15 $list = $stmt->fetchAll(PDO::FETCH_ASSOC); //处理成关联数组 16 echo json_encode($list); 17 18 //4.释放资源 19 $stmt = null; 20 $pdo = null; 21 22 ?> 23 24 25 26 27 28 /*************** getRights.php 获取权限列表 ***************/ 29 <?php 30 31 //1.连接数据库 32 try{ 33 $pdo = new PDO("mysql:host=localhost;dbname=woodk", "root", "root"); 34 $pdo->query('set names utf8'); //字符集 35 }catch(PDOException $e){ 36 die("数据库连接失败".$e->getMessage()); 37 } 38 39 //2.执行query（查询）返回一个预处理对象 40 $sql= "SELECT * FROM t_right"; 41 $stmt = $pdo->query($sql); 42 $list = $stmt->fetchAll(PDO::FETCH_ASSOC); //处理成关联数组 43 echo json_encode($list); 44 45 //4.释放资源 46 $stmt = null; 47 $pdo = null; 48 49 ?> 50 51 52 53 54 55 /*************** getRoleRight.php 获取当前用户权限数组返回JSON ***************/ 56 <?php 57 58 //1.连接数据库 59 try{ 60 $pdo = new PDO("mysql:host=localhost;dbname=woodk", "root", "root"); 61 $pdo->query('set names utf8'); //字符集 62 }catch(PDOException $e){ 63 die("数据库连接失败".$e->getMessage()); 64 } 65 66 //2.接收数据并转换为php数组 67 $dataJson = file_get_contents("php://input"); //获取POST原始数据（JSON） 68 $data = json_decode($dataJson, true); //将JSON数据强制转换为数组对象 69 $roleid = $data['roleid']; 70 71 //3.执行query（查询）返回一个预处理对象 72 $sql= "SELECT * FROM t_role_right WHERE roleid=".$roleid; 73 $stmt = $pdo->query($sql); 74 $list = $stmt->fetchAll(PDO::FETCH_ASSOC); //处理成关联数组 75 echo json_encode($list); 76 77 //4.释放资源 78 $stmt = null; 79 $pdo = null; 80 81 ?>
