Question

我将创建一个控制器，它将列出数据库中所选表中的选定字段，并将其传递给我的API。

目前，我正在使用一个脏方法，它创建了几个具有字段名称和表名的控制器。

controller.js

.controller('ListDistinctCustomerCtrl', function($scope, $http) {
  var xhr = $http({
    method: 'post',
    url: 'http://localhost/api/list-distinct.php?table=customer&field=cust_code'
  });
  xhr.success(function(data){
    $scope.data = data.data;
  });
})

.controller('ListDistinctSupplierCtrl', function($scope, $http) {
  var xhr = $http({
    method: 'post',
    url: 'http://localhost/api/list-distinct.php?table=supplier&field=supp_code'
  });
  xhr.success(function(data){
    $scope.data = data.data;
  });
})

这是API文件

列表distinct.php

<?php
require_once '/config/dbconfig.php';
$table = $_GET['table'];
$field = $_GET['field'];
GetData($table,$field);

function GetData($tablename,$fieldname) {
    $sql = "SELECT distinct $fieldname as expr1 FROM $tablename order by expr1 asc";
    try {
        $db = getdb();
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $data = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo json_encode(array('data' => $data));
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}
?>

我相信有一种干净，更好的方法可以做到这一点。

Answer 1

首先，如果你想通过$ http传递参数，那么有一个更简洁的方法：

$http( 
    {
       url: 'your url',
       method: 'GET or POST',
       params: {
         // list of params
       }
    }
);

现在，使用Service provider对于代码维护和可读性非常重要。您可以使用Factory作为服务并创建API服务。

示例：

angular.module( 'yourModule' ).factory( 'ServiceAPI', [ '$http', function ( $http ) {

var factory = {};

//PUBLIC METHODS
factory.method = method;

function method() {
  return $http( 
           {
               url: 'your url',
               method: 'GET or POST',
               params: {
                 // list of params
               }
           }
        );
}

return factory;
} ] );

现在，您可以在Controller上注入ServiceAPI，并使用以http的承诺回复的方法函数。

angular.module( 'your module' ).controller( 'Ctrl', [ '$scope', 'ServiceAPI' ,
function ( $scope, ServiceAPI ) {

  ServiceAPI.method.then( function ( data) {
      $scope.data = data;
    }, function(){console.err('error');} );
}
] );

AngularJS方面，现在清晰可读。

我希望对你有所帮助。享受

Answer 2

您可以创建一个包含访问API的方法的服务。这将使您能够减少控制器中的代码重复，并允许更清晰的代码。

.service('APIService', function($http){
    var base = 'http://localhost/api/';
    this.listDistinct = function(table, field){
        return $http({
            method: 'post'
            , url: base + '/list-distinct.php'
            , params: {
                table: table
                , field: field
            }
        });
    }
});

您的控制器将注入服务并调用访问api所需的任何方法。通过附加承诺回调，将以相同的方式获得结果。

.controller('ListCtrl', function($scope, APIService){
    APIService.listDistinct('customer', 'cust_code').then(function(data){
        $scope.data = data;
    })
});

对于代码的PHP端，您需要使用可能的表/字段名称的白名单以确保安全操作。如果没有这样的检查，您很容易受到SQL注入攻击。一个简单的数组检查就足够了。

$safeTables = ['customer', 'supplier'];
$safeFields = ['cust_code', 'supp_code'];

if (!in_array($tablename, $safeTables) || !in_array($fieldname, $safeFields)){
   throw new Exception('Invalid parameter');
}

Answer 3

Angular Providers

的时间

这是您的案例：

angular.module('starter')
.factory('services', services);

function services($http) {
        var services = {
            customer: customer,
            supplier: supplier,
        };
        return services;

        //customer service
        function customer() {
            var req = {
                method: 'POST',
                url: 'http://localhost/api/list-distinct.php?table=customer&field=cust_code',
                headers: {
                    'Accept' : 'application/json',
                    'contentType': "application/json"
                }
            };
            return $http(req);
        },

       //supplier service
        function supplier() {
            var req = {
                method: 'POST,
                url: 'http://localhost/api/list-distinct.php?table=supplier&field=supp_code',
                headers: {
                    'Accept' : 'application/json',
                    'contentType': "application/json"
                }
            };
            return $http(req);
        };
 }

然后你从控制器中这样称呼它们：

services.customer().then(
      function(response) {
      //do whatever is needed with the response
        console.log(response);
      },

      function (error) {
        console.log(error); 
      }
   );




services.supplier().then(
          function(response) {
          //do whatever is needed with the response
            console.log(response);
          },

          function (error) {
            console.log(error); 
          }
        );

将参数传递给Angular

3 个答案: