英文:
spring boot thymeleaf unexpected different rendering for different @GetMapping paths
问题
I'm currently playing with spring-boot-bootstrap-thymeleaf-tree-table
I was migrating the code into my spring-boot project and anything went well.
But if I change the @GetMapping path to pass a @PathVariable to the Thymeleaf page, the rendering changed.
My Controller:
@Controller
public class NodesController {
@GetMapping("/user/object/{identifier}")
public String nodes(@PathVariable String identifier, Model model) {
return "objectDetails";
}
@GetMapping("/nodes")
public String nodes2(Model model) {
return "objectDetails";
}
}
Both mappings/methods are using the same template. But 'nodes2' works well, 'nodes' not.
Expected result with 'nodes2' Path: @GetMapping("/nodes")
Broken result with 'nodes' Path: @GetMapping("/user/object/{identifier}")
Template:
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Object details</title>
<th:block th:include="head :: head"/>
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.css}"/>
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.theme.default.css}"/>
<link th:rel="stylesheet" th:href="@{webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
</head>
<body>
<div th:replace="menu :: menu"></div>
<div class="container-fluid">
<div class="row">
<div class="col mt-5">
<table id="treeTable" class="table">
<thead>
<tr>
<th>Subject</th>
<th>Predicate</th>
<th>Object</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/jquery-treetable/jquery.treetable.js}"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
"type": 'get',
"url": '/tree/9d317daca74246d4be41b1a37e30ee2a',
"dataType": "json",
"success": function (data) {
$.each(data, function (idx, obj) {
$("#treeTable").append("<tr data-tt-id=\"" + obj.nodeId + "\" data-tt-parent-id=\"" + obj.parent + "\">" +
"<td>" + obj.subjectShort + "</td><td>" + obj.predicate + "</td><td>" + obj.object + "</td></tr>");
});
$("#treeTable").treetable({
expandable: true,
initialState: "expanded",
clickableNodeNames: true,
indent: 30
});
}
});
});
</script>
</body>
</html>
英文:
I'm currently playing with spring-boot-bootstrap-thymeleaf-tree-table
I was migrating the code into my spring-boot project and anything went well.
But if i change the @GetMapping path to pass a @PathVariable to the thymeleaf page the rendering changed.
My Controller:
@Controller
public class NodesController {
@GetMapping("/user/object/{identifier}")
public String nodes(@PathVariable String identifier, Model model) {
return "objectDetails";
}
@GetMapping("/nodes")
public String nodes2(Model model) {
return "objectDetails";
}
}
Both mappings/methods are using the same template. But the 'nodes2' works well, 'nodes' not.
Expected result with 'nodes2' Path: @GetMapping("/nodes")
Broken result with 'nodes' Path: @GetMapping("/user/object/{identifier}")
Template:
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Object details</title>
<th:block th:include="head :: head"/>
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.css}"/>
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.theme.default.css}"/>
<link th:rel="stylesheet" th:href="@{webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
</head>
<body>
<div th:replace="menu :: menu"></div>
<div class="container-fluid">
<div class="row">
<div class="col mt-5">
<table id="treeTable" class="table">
<thead>
<tr>
<th>Subject</th>
<th>Predicate</th>
<th>Object</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/jquery-treetable/jquery.treetable.js}"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
"type": 'get',
"url": '/tree/9d317daca74246d4be41b1a37e30ee2a',
"dataType": "json",
"success": function (data) {
$.each(data, function (idx, obj) {
$("#treeTable").append("<tr data-tt-id=\"" + obj.nodeId + "\" data-tt-parent-id=\"" + obj.parent + "\"><td>" + obj.subjectShort + "</td><td>" + obj.predicate + "</td><td>" + obj.object + "</td></tr>");
});
$("#treeTable").treetable({
expandable: true,
initialState: "expanded",
clickableNodeNames: true,
indent: 30
});
}
});
});
</script>
</body>
</html>
答案1
得分: 1
因为使用了GetMapping，加载js资源的路径发生了变化！
localhost:8080/user/object/assets/
而不是
localhost:8080/assets/
通过修改链接解决：
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.css}"/>
变为：
<link th:rel="stylesheet" th:href="@{../../assets/jquery-treetable/jquery.treetable.css}"/>
感谢 @andrewJames 的提示！
英文:
Because of the GetMapping, the path for loading js resources is changing!
localhost:8080/user/object/assets/
instead of
localhost:8080/assets/
Resolved by changing the link from:
<link th:rel="stylesheet" th:href="@{assets/jquery-treetable/jquery.treetable.css}"/>
to:
<link th:rel="stylesheet" th:href="@{../../assets/jquery-treetable/jquery.treetable.css}"/>
thanks @andrewJames for the hint !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论