2017-10-06 78 views
0

我正在創建一個應用程序,該應用程序將根據用戶在網頁上輸入的內容在我商店的數據庫上運行查詢。我已經成功創建了後端方法。併成功返回響應。但我無法檢索數據並以動態表格的形式顯示在我的網頁上。 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控制器接收到的數據,並將其分配給$範圍變量模型。

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/

但它不填充從我的後端控制器方法收到的數據表。我沒有任何實體,因爲這只是查詢現有的數據庫,所以我不需要添加任何實體。

回答

0

問題可能是這條線在這裏你的控制器內的服務回調:

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

嘗試:

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

你已經在你的服務調用時返回的響應數據:

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

除了你的問題,我應該提到你的Spring控制器看起來像t o適合SQL注入。一般來說,允許用戶直接訪問數據庫並不是一個好主意。雖然我不知道後端的StoreService如何實現。但似乎攻擊者可以輕鬆地將HTTP調用發送到您的端點並丟棄數據庫。

+0

它沒有爲我工作。但在我的存儲庫方法。我正在使用Jdbctemplate,但是用戶在文本框中輸入的內容將在其查詢前面選擇。所以如果他們進入DROP SCHEMA,在後臺它將會是SELECT DROP SCHEMA,這會導致錯誤。 – user3116769

+0

如果jdbc連接被配置爲允許執行多條語句,則不會。然後可以去發佈:'?query = * FROM items; DROP SCHEMA;' 無論如何:你可以檢查瀏覽器Web控制檯,如果響應包含任何數據? – Markus

+0

所以它似乎沒有找到角度文件。它說404從CDN的檢索角文件。但試圖做sql注入,並沒有奏效。我在幕後使用Jdbctemplate的函數使用Preparedstatement,所以我認爲這是惡意輸入的防禦。但是會試圖使文件可見,如果它能正常工作,我會讓你知道。 – user3116769

0

你必須在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 
     }); 
    } 
}]); 
相關問題