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

Question

我正在尝试创建一个重视啤酒的应用程序！这将更新存储啤酒的API，并依次使用PUT方法更新API和angularJS视图上的喜欢数量。每次点击时，我都可以使视图正常工作。我不确定为什么我的PUT方法继续返回404并且不会更新API。请参阅下面的代码，了解我的put方法。我还为此包含了我的JS和HTML。我觉得我很亲密但却无法弄清楚如何得到这些＆＃34;喜欢＆＃34;更新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){}的网址为/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的错误，不管是什么。
＆＃13;
＆＃13;
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")
            });
    };
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;