我正在創建一個應用程序,該應用程序將根據用戶在網頁上輸入的內容在我商店的數據庫上運行查詢。我已經成功創建了後端方法。併成功返回響應。但我無法檢索數據並以動態表格的形式顯示在我的網頁上。 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/
但它不填充從我的後端控制器方法收到的數據表。我沒有任何實體,因爲這只是查詢現有的數據庫,所以我不需要添加任何實體。
它沒有爲我工作。但在我的存儲庫方法。我正在使用Jdbctemplate,但是用戶在文本框中輸入的內容將在其查詢前面選擇。所以如果他們進入DROP SCHEMA,在後臺它將會是SELECT DROP SCHEMA,這會導致錯誤。 – user3116769
如果jdbc連接被配置爲允許執行多條語句,則不會。然後可以去發佈:'?query = * FROM items; DROP SCHEMA;' 無論如何:你可以檢查瀏覽器Web控制檯,如果響應包含任何數據? – Markus
所以它似乎沒有找到角度文件。它說404從CDN的檢索角文件。但試圖做sql注入,並沒有奏效。我在幕後使用Jdbctemplate的函數使用Preparedstatement,所以我認爲這是惡意輸入的防禦。但是會試圖使文件可見,如果它能正常工作,我會讓你知道。 – user3116769