$ http.get無法從SpringBoot控制器獲取數據

Question

我正在創建一個應用程序，該應用程序將根據用戶在網頁上輸入的內容在商店的數據庫上運行查詢。 我已經成功創建了后端方法。 並成功返回響應。 但是我無法檢索數據並將其以動態表格的形式顯示在我的網頁上。 我對AngularJS有點陌生，所以請多多包涵，但我們會提供任何幫助。

StoreController.java

@RequestMapping(value = "/runQuery", method = RequestMethod.GET)
public List<Map<String, Object>> runQuery(@RequestParam(value="query", defaultValue="* FROM items") String statement, Model model)  {
    List<Map<String, Object>> answer = storeService.executeUserQuery(statement);
    model.addAttribute("resultList", answer);
    return answer;
}

我試圖對控制器進行建模，使其可以動態地獲取從Java控制器接收到的數據並將其分配給$ scope變量。

app.module.js

(function(){
    'use strict';

    angular.module('app', []);
})();

store.controller.js

angular
.module('app').controller('StoreController', ['$scope','StoreService','StoreController','$q', function ($scope,StoreService, StoreController, $q) {

    $scope.runQuery = function () {

               StoreService.runQuery($scope.statement)
              .then (function (data){
                  $scope.rows = response.data;
                  $scope.cols = Object.keys($scope.rows[0]);
              },
              function error(response){
                  if (response.status == 404){
                  $scope.errorMessage = response.data[0];
              }
                  else {
                      $scope.errorMessage = 'Error displaying result user!';
                  }
            });
          }
    }

]);

app.service('StoreService',['$http', function ($http,$q) {

    this.runQuery = function runQuery(statement){
        return $http({
          method: 'GET',
          url: 'http://localhost:8080/runQuery/',
          params: {statement:statement},
          headers: 'Accept:application/json'
        }).then( function(response){
            return reponse.data;
        });
    }

index.html

<body data-ng-app="app" data-ng-controller="StoreController">
    <div class="container">

        <form th:action="@{/logout}" method="get">
            <button class="btn btn-md btn-danger btn-block"
                style="color: #fff; background-color: #e213a2; border-color: #c3c2c0;"
                name="registration" type="Submit">Logout</button>
        </form>

        <div class="panel-group" style="margin-top: 40px">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span th:utext="${userName}"></span>
                </div>
                    <div>
                <form name="queryForm" method="get" data-ng-submit="runQuery()">
                    <div class="panel-body">
                        <h3 id="queryLabel">Select Query:</h3>
                        <textarea id="query" wrap="soft"
                            placeholder="Please do not enter SELECT with your query, it's added automatically!!" data-ng-model="statement"></textarea>
                        <button type="submit">Run Query</button>
                    </div>
                    </form>
                    <div class="panel-body" id="results">
                        <h3 id="queryLabel">Result:</h3>
                        <table border="1">
                            <tr>
                                <th data-ng-repeat="column in cols">{{column}}</th>
                            </tr>
                            <tr data-ng-repeat="row in rows">
                                <td data-ng-repeat="column in cols">{{row[column]}}</td>
                            </tr>
                        </table>
                    </div>

                </div>
                <div>
                    <p class="admin-message-text text-center" th:utext="${adminMessage}"></p>

                </div>
    </div>
    </div>
    </div>
</body>

html頁面上的表有效，因為我是從此鏈接http://jsfiddle.net/v6ruo7mj/1/收到的

但這不是用從我的后端控制器方法接收的數據填充表。 我沒有任何實體，因為這只是查詢現有數據庫，因此不需要添加任何實體。

Answer 1

問題可能是控制器中的服務回調中的以下行：

.then (function (data){
    $scope.rows = response.data;
    // ...
}

嘗試：

.then (function (data){
    $scope.rows = data;
    // ...
}

調用時，您已經在服務中返回了響應數據：

}).then( function(response){
        return reponse.data;
    });

除了您的問題外，我還應該提到您的Spring控制器似乎很容易受到SQL注入的攻擊。 通常，不允許用戶直接訪問您的數據庫不是一個好主意。 盡管我不知道后端的StoreService如何實現。 但是，似乎攻擊者可以輕松地將HTTP調用發送到您的端點並刪除數據庫。

Answer 2

您在runQuery函數中有一個錯字：

app.service('StoreService',['$http', function ($http,$q) {

    this.runQuery = function runQuery(statement){
        return $http({
          method: 'GET',
          url: 'http://localhost:8080/runQuery/',
          params: {statement:statement},
          headers: 'Accept:application/json'
        }).then( function(response){
            ̶r̶e̶t̶u̶r̶n̶ ̶ ̶r̶e̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶;̶
            return response.data
        });
    }
 }]);

$ http.get無法從SpringBoot控制器獲取數據

問題描述

2 個解決方案

解決方案1
2 已采納 2017-10-06 21:43:30

解決方案2
1 2017-10-06 21:51:51

$ http.get無法從SpringBoot控制器獲取數據

問題描述

2 個解決方案

解決方案1 2 已采納 2017-10-06 21:43:30

解決方案2 1 2017-10-06 21:51:51

解決方案1
2 已采納 2017-10-06 21:43:30

解決方案2
1 2017-10-06 21:51:51