2017-10-06 64 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 
     }); 
    } 
}]);