我正在创建一个应用程序,它将根据用户在网页上输入的内容在我的商店数据库上运行查询。我已经成功创建了后端方法。它成功返回响应。但我无法检索数据并以动态表格的形式显示在我的网页上。我对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/
但它没有使用从我的后端控制器方法接收的数据填充表格。我没有任何实体,因为这只是查询现有数据库,所以我不需要添加任何实体。
答案 0 :(得分:2)
问题可能就是控制器内服务回调中的这一行:
.then (function (data){
$scope.rows = response.data;
// ...
}
尝试:
.then (function (data){
$scope.rows = data;
// ...
}
您在调用时已经在服务中返回响应数据:
}).then( function(response){
return reponse.data;
});
除了你的问题,我应该提一下,你的Spring控制器似乎对SQL注入很有帮助。允许用户直接访问您的数据库通常不是一个好主意。虽然我不知道后端的StoreService是如何实现的。但似乎攻击者可以轻松地向您的终端发送HTTP调用并丢弃您的数据库。
答案 1 :(得分:1)
computed: {
title() {
return this.$i18n.t('hello');
}
}
函数中有一个拼写错误:
runQuery