AngularJS 使用 PUT 将新数据（喜欢/不喜欢）推送/更新到 API

Question

我正在尝试创建一个可以计算啤酒点赞数的应用！这将更新存储啤酒的 API，进而使用 PUT 方法更新 API 和 angularJS 视图上的点赞数。每次单击类似时，我都能使视图正常工作。我不确定为什么我的 PUT 方法继续返回 404 并且不会更新 API。请参阅下面的代码了解我的 put 方法。为此，我还包含了我的 JS 和 HTML。我觉得我很接近，但不知道如何让“喜欢”在 API 上更新。先感谢您！！我认为我将不正确的数据传递给 PUT 方法。

HTML：

<div ng-app="beerApp" ng-controller="BeerController" class="jumbotron">
    <div class="all-beer">
        <div class="single-beer" ng-repeat="beer in allBeer">
            <div>{{beer.name}}</div>
            <div>{{beer.likes}}</div>
            <button ng-click="decrease(beer)">X</button>
            <button ng-click="increase(beer)">\3</button>
        </div>
    </div>
</div>

JS：

 angular.module('beerApp', []).controller('BeerController', function($scope, $http) {

             $scope.allBeer = [];
             $scope.beerSum = function() {
             $http({
                method: 'GET',
                url: /api/beers
              }).
             then( function(response) {

             if(typeof response === 'object') {
                var dataArr = response.data;
                for (var i = 0; i < dataArr.length; i++) {
                    var beer = dataArr[i];

                    $scope.allBeer.push(beer);
                }

            } else {
                return;
            }

            }, function(error) {
            console.log('i am an error', error);
            })
          };

          $scope.beerSum();

          $scope.increase = function(beer){

          var newLikes = beer.likes++;

          $http({
            method: 'PUT',
            url: '/api/beer/',
            data: JSON.stringify($scope.allBeer.likes),
        }).then(function successCallback(response) {
            console.log("Updated!");
        }, function errorCallback(response) {
            console.log("not updated")

        });

    };

Answer 1

首先，您缺少一些 http api 的语法。其次，您正在调用不存在的数组上的属性。第三，由于您拥有的逻辑，您的 api 将无法工作。你有一系列啤酒，你想增加对单一啤酒的喜欢。在接受啤酒的服务器上创建一个方法，服务器将获取该啤酒并将其喜欢的次数增加 1，然后保存到数据库或其他任何内容。

根据您使用的服务器，您有两种选择。 您可以简单地在/api/beers 处定义一个命令，并将服务器配置为接受一个对象并将该对象ID 用于服务器更新。如果是这种情况，我建议创建此端点 /api/beers/update 并将其设为 POST，并将对象传递给它，然后在此命令中执行所有更新逻辑。

或者例如 Microsoft Web Api，默认的 put（更新）端点看起来像这样，public void Update(int id, object data){} 的 URL 为 /api/beers/{id}。要使用此方法，您需要更改我编写的updateLikes 方法的代码。 见下文：

$scope.updateLikes = function(beer, likeCount){
        beer.likes+= likeCount;
        $http({
              method: 'PUT',
              url: '/api/beer/' + beer.id,
              data: JSON.stringify(beer),
          }).then(function successCallback(response) {
                console.log("Updated!");
                //Trigger reload of data
                $scope.beerSum();
          }, function errorCallback(response) {
                console.log("not updated")
            });
    };

额外帮助

如果您仍然遇到问题并且在 GitHub 环境中工作，我很乐意更直接地帮助您编写代码。除此之外，我发布的答案是您的问题，并且我认为这是 AngularJS 的良好编码实践。除了一个小例外，代码会更改为 beer.likes += likeCount 的行，因为这也会更新原始啤酒对象。我想这是偏好，但如果您需要更多帮助，请与我联系。

JS：

     angular.module('beerApp', []).controller('BeerController', function($scope, $http) {
     $scope.allBeer = [];
     $scope.beerSum = function() {
     $http({
        method: 'GET',
        url: '/api/beers' //<-- Added string opening and closing tags
      }).
     then( function(response) {

         if(typeof response === 'object') {
            var dataArr = response.data;
            for (var i = 0; i < dataArr.length; i++) {
                var beer = dataArr[i];

                $scope.allBeer.push(beer);
            }

        } else {
            return;
        }

        }, function(error) {
        console.log('i am an error', error);
        })
      };

      $scope.beerSum();

      $scope.increase = function(beer){

      var newLikes = beer.likes++;

//Your code
          $http({
            method: 'PUT',
            url: '/api/beer/', //<-- closing 
            data: JSON.stringify($scope.allBeer.likes), //<-- Where does likes come from? $scope.allBeer is an array of beer but the array itself doesn't have a property called likes.
        }).then(function successCallback(response) {
            console.log("Updated!");
        }, function errorCallback(response) {
            console.log("not updated")

        });

//End your code

//My Code
    beer.likes+=1; //<-- My bad I fixed this.
    $http({
          method: 'PUT',
          url: '/api/beer/', //<-- closing 
          data: JSON.stringify(beer), //<-- The object you passed into the function
      }).then(function successCallback(response) {
            console.log("Updated!");
      }, function errorCallback(response) {
            console.log("not updated")

        });
//End my code

    };

可能的问题

1. 您的 api 不适用于 put，在这种情况下，此问题不正确。
   1. 您的程序内部还有其他问题，但从现在开始，我认为您的 api 有问题，不管是什么问题。

angular.module('beerApp', []).controller('BeerController', function($scope, $http) {
     $scope.allBeer = [];
     $scope.beerSum = function() {
       $scope.allBeer.push({
         "name": "Miller Lite",
         "likes": 0
       });
     $http({
        method: 'GET',
        url: '/api/beers' //<-- Added string opening and closing tags
      }).
     then( function(response) {
         if(typeof response === 'object') {
            var dataArr = response.data;
            for (var i = 0; i < dataArr.length; i++) {
                var beer = dataArr[i];

                $scope.allBeer.push(beer);
            }
          }
        }, function(error) {
        console.log('i am an error', error);
        })
      };

      $scope.beerSum();

      $scope.updateLikes = function(beer, likeCount){
        beer.likes+= likeCount;
        $http({
              method: 'PUT',
              url: '/api/beer/',
              data: JSON.stringify(beer),
          }).then(function successCallback(response) {
                console.log("Updated!");
                //Trigger reload of data
                $scope.beerSum();
          }, function errorCallback(response) {
                console.log("not updated")
            });
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="beerApp" ng-controller="BeerController" class="jumbotron">
      <h1>Beers on Tap</h1>
      <div class="all-beer">
        <div class="single-beer" ng-repeat="beer in allBeer">
          <div>{{beer.name}}</div>
          <div>{{beer.likes}}</div>
          <button ng-click="updateLikes(beer, -1)">Down Vote</button>
          <button ng-click="updateLikes(beer, 1)">Up Vote</button>
        </div>
      </div>
    </div>
  </body>

</html>