Java REST-Dienst mit AngularJS (Problem mit UPDATE, DELETE) verwenden

Question

Ich habe einen REST-Dienst mit Java implementiert und alle HTTP-Methoden funktionieren ordnungsgemäß, wenn ich es mit Postman teste. Jetzt entschied ich mich, mehr über AngularJS zu erfahren und fügte es für den Konsum des REST-Dienstes hinzu. Die GET-Anfrage funktioniert einwandfrei und alle Produkte werden auf einer HTML-Seite angezeigt. Aber aus irgendeinem Grund funktionieren Delete and Put-Methoden überhaupt nicht. Und ich habe Probleme herauszufinden, was ein solches Verhalten verursacht.

Ich habe festgestellt, dass das Problem bei Methoden auftritt, die Produkt-ID enthalten. Die Entität Product.java hat ein ID-Feld mit dem Namen prod_id.

app.js

angular.module("AppProducts", []) 
.constant("baseUrl", "http://localhost:8080/webstore/product") 
.controller("ProductsCtrl", function ($scope, $http, baseUrl) { 

    $scope.currentView = "table"; 

    //Works correctly 
    $scope.showAll = function() { 
     $http.get(baseUrl).success(function (data) { 
      $scope.products = data; 
     }); 
    } 
    //if product exists, copy it, otherwise new empty 
    $scope.editOrCreate = function (product) { 
     $scope.currentProduct = product ? angular.copy(product) : {}; 
     $scope.currentView = "edit"; 
    } 

    $scope.create = function (product) { 
     $http.post(baseUrl, product).success(function (product) { 
      $scope.products.push(product); 
      $scope.currentView = "table"; 
     }); 
    } 

    $scope.update = function (product) { 
     $http({ 
      url: baseUrl + product.prod_id, 
      method: "PUT", 
      data: product 
     }).success(function (modifiedItem) { 
      for (var i = 0; i < $scope.products.length; i++) { 
       if ($scope.products[i].prod_id == modifiedItem.prod_id) { 
        $scope.products[i] = modifiedItem; 
        break; 
       } 
      } 
      $scope.currentView = "table"; 
     }); 
    } 

    $scope.delete = function (product) { 
     // HTTP DELETE 
     $http({ 
      method: "DELETE", 
      url: baseUrl + product.prod_id 
     }).success(function() { 
      $scope.products.splice($scope.products.indexOf(product), 1); 
     }); 
    } 

    // Save changes 
    $scope.saveEdit = function (product) { 
     if (angular.isDefined(product.prod_id)) { 
      $scope.update(product); 
     } else { 
      $scope.create(product); 
     } 
    } 

    $scope.cancelEdit = function() { 
     $scope.currentProduct = {}; 
     $scope.currentView = "table"; 
    } 

    $scope.sortType  = 'brand'; // set the default sort type 
    $scope.sortReverse = false; // set the default sort order 
    $scope.searchProduct = '';  // set the default search/filter term 

    $scope.showAll(); 

}); 

'Tisch' Ansicht

  <table id="myTable" class="table table-hover"> 
       <thead> 
       <tr> 
        <th>Brand</th> 
        <th>Product Name</th> 
        <th>Description</th> 
        <th>Price</th> 
        <th width="100"></th> 
        <th width="100"></th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr ng-repeat="product in products | orderBy:sortType:sortReverse"> 
        <td>{{product.brand}}</td> 
        <td>{{product.productName}}</td> 
        <td>{{product.description}}</td> 
        <td>{{product.price}}</td> 

        <td><button class="btn btn-success" ng-click="editOrCreate(product)">Edit</button></td> 
        <td><button class="btn btn-danger" ng-click="delete(product)">Delete</button></td> 
       </tr> 
       </tbody> 
      </table> 

RestController 'Löschen' Methode

@RequestMapping(value = "/product/{id}", method = RequestMethod.DELETE) 
    public ResponseEntity<?> deleteProduct(@PathVariable("id") int id) { 

     Product product = productService.getProductById(id); 
     if (product == null) { 
      return new ResponseEntity(new CustomError("Unable to delete. Product with id " + id + " not found."), 
        HttpStatus.NOT_FOUND); 
     } 
     productService.deleteProduct(id); 
     return new ResponseEntity<Product>(HttpStatus.NO_CONTENT); 
    } 

Answer 1

Dies könnte das Problem sein. Wenn Sie die URL anhängen wie diese

baseUrl + product.prod_id // let product.prod_id = 1 

würden Sie String als http://localhost:8080/webstore/product1 bekommen führt, die nicht in Ihrem Backend definiert ist. Versuchen Sie, die Zuordnung zu so etwas wie dies zu ändern:

baseUrl + "/" + product.prod_id 

Oder Sie kalt nur ein / am Ende der baseurl hinzuzufügen. Wie folgt:

.constant("baseUrl", "http://localhost:8080/webstore/product/")