java - 在 Spring Boot 应用程序中将 json 从 AngularJS 发送到 Spring Controller 时导致异常

Question

我正在尝试使用 angularjs 生成动态表行，它工作正常，但问题是在将 json 发送到服务器(即 Spring Boot Controller )时，它导致了如下异常:

nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not deserialize instance of com.practice.dto.BillsDto out of START_ARRAY token

json是这样的:

[
  {
    "description": "sfd",
    "quantity": 3,
    "amount": 2
  },
  {
    "description": "sdf",
    "quantity": 4,
    "amount": 2
  }
]

dto 是

public class BillsDto {
    private List<BillDto> billDtos;

    public BillsDto() {

    }

   // getters setters
}

另一个 dto 是:

 public class BillDto {
        private int id;
        private String description;
        private double quantity;
        private double amount;

        public BillDto() {

        }

        // getters setters
    }

spring Controller 方法是:

@RequestMapping(value = "/savePatientBill", method = RequestMethod.POST)
    public ModelAndView saveBill(@RequestBody BillsDto billings){
        System.out.println(billings.getBillDtos().size());
        for(BillDto billDto: billings.getBillDtos()){
            System.out.println(billDto.getDescription());
            System.out.println(billDto.getAmount());
            System.out.println(billDto.getQuantity());
          }
        }

AngularJS 代码是:

app.controller('newBillCtrl', function ($scope, $http, $httpParamSerializer, PatientConstants) {
    $scope.billings = [{}];

    $scope.addNew = function (billings) {
        $scope.billings.push({
            'description': "",
            'quantity': "",
            'amount': "",
        });
    };

    $scope.remove = function () {
        var newDataList = [];
        $scope.selectedAll = false;
        angular.forEach($scope.billings, function (selected) {
            if (!selected.selected) {
                newDataList.push(selected);
            }
        });
        $scope.billings = newDataList;
    };

    $scope.checkAll = function () {
        if (!$scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.billings, function (billings) {
            billings.selected = $scope.selectedAll;
        });
    };
    $scope.submit = function () {
        $scope.bill=angular.toJson($scope.billings);
        console.log($scope.bill)
        $http.post(PatientConstants.DOMAIN_URL + '/savePatientBill', $scope.bill);
    }

});

我的 html 模板是:

<script type="text/ng-template" id="newBill.jsp">
    <div class="container-fluid">
        <div class="row">
            <div style="margin-bottom: 50px;">
                <h2 align="center">Patient New Bill</h2>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <form ng-submit="submit()">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Amount</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="billing in billings">
                                            <td>
                                                <input type="checkbox" ng-model="billing.selected"/></td>
                                            <td>
                                                <input type="text" class="form-control" ng-model="billing.description" required/></td>
                                            <td>
                                                <input type="number" class="form-control" ng-model="billing.quantity" required/></td>
                                            <td>
                                                <input type="number" class="form-control" ng-model="billing.amount" required/></td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <div class="form-group">
                                        <input ng-hide="!billings.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
                                        <input type="button" ng-click="addNew()" class="btn btn-primary addnew pull-right" value="Add New">
                                        <input type="submit" class="btn btn-primary addnew pull-right" value="Submit">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

请帮助我。提前致谢。

Answer 1

您的 REST 服务的 json 请求应如下所示。请在soapui或Postman中测试您的服务并验证您的jsp/html页面生成的请求。

{
"billDtos" : [
 {
   "description": "sfd",
   "quantity": 3,
   "amount": 2
 },
 {
   "description": "sdf",
   "quantity": 4,
   "amount": 2
  }
 ]
}