與AngularJS一起使用Java REST服務（問題與更新，刪除）

Question

我用Java實現了一個REST服務，當我用Postman測試時，所有的HTTP方法都能正常工作。現在我決定了解更多關於AngularJS的內容，並添加它來消費REST服務。 GET請求正常工作，所有產品都顯示在HTML頁面上。但由於某些原因，刪除和放置方法完全不起作用。而且我很難找出導致此類行爲的原因。

我注意到問題出現在涉及產品ID的方法中。實體Product.java有一個名爲prod_id的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(); 

}); 

'表' 視圖

  <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 '刪除' 方法

@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

這可能是問題所在。當你追加的URL這樣

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

，你會得到結果字符串未在後端定義http://localhost:8080/webstore/product1。試着改變分配是這樣的：

baseUrl + "/" + product.prod_id 

或者你只是冷在的BaseURL的末尾添加/。像這樣：

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