javascript - 使用 AngularJS 使用 Java REST 服务(更新、删除问题)

Question

我已经使用 Java 实现了 REST 服务，并且当我使用 Postman 测试它时，所有 HTTP 方法都可以正常工作。现在我决定了解有关 AngularJS 的更多信息，并将其添加到消费 REST 服务中。 GET 请求工作正常，所有产品都显示在 html 页面上。但由于某种原因，Delete 和 Put 方法根本不起作用。我很难弄清楚是什么导致了这种行为。

我注意到涉及产品 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();

});

“表格” View

            <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

这可能就是问题所在。当您像这样附加网址时

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

您将得到结果字符串 http://localhost:8080/webstore/product1您的后端没有定义它。尝试将分配更改为如下所示:

baseUrl + "/" + product.prod_id

或者您只需在基本网址末尾添加一个 / 即可。像这样:

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