spring boot thymeleaf unexpected different rendering for different @GetMapping paths

huangapple go评论107阅读模式
英文:

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")

spring boot thymeleaf unexpected different rendering for different @GetMapping paths

Broken result with 'nodes' Path: @GetMapping("/user/object/{identifier}")

spring boot thymeleaf unexpected different rendering for different @GetMapping paths

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(&quot;/user/object/{identifier}&quot;)
public String nodes(@PathVariable String identifier, Model model) {
return &quot;objectDetails&quot;;
}
@GetMapping(&quot;/nodes&quot;)
public String nodes2(Model model) {
return &quot;objectDetails&quot;;
}    
}

Both mappings/methods are using the same template. But the 'nodes2' works well, 'nodes' not.

Expected result with 'nodes2' Path: @GetMapping("/nodes")

spring boot thymeleaf unexpected different rendering for different @GetMapping paths

Broken result with 'nodes' Path: @GetMapping("/user/object/{identifier}")

spring boot thymeleaf unexpected different rendering for different @GetMapping paths

Template:

&lt;!DOCTYPE HTML&gt;
&lt;html lang=&quot;en&quot; xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;/&gt;
&lt;title&gt;Object details&lt;/title&gt;
&lt;th:block th:include=&quot;head :: head&quot;/&gt;
&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{assets/jquery-treetable/jquery.treetable.css}&quot;/&gt;
&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{assets/jquery-treetable/jquery.treetable.theme.default.css}&quot;/&gt;
&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} &quot;/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div th:replace=&quot;menu :: menu&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col mt-5&quot;&gt;
&lt;table id=&quot;treeTable&quot; class=&quot;table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Subject&lt;/th&gt;
&lt;th&gt;Predicate&lt;/th&gt;
&lt;th&gt;Object&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script th:src=&quot;@{/webjars/jquery/jquery.min.js}&quot;&gt;&lt;/script&gt;
&lt;script th:src=&quot;@{/webjars/popper.js/umd/popper.min.js}&quot;&gt;&lt;/script&gt;
&lt;script th:src=&quot;@{/webjars/bootstrap/js/bootstrap.min.js}&quot;&gt;&lt;/script&gt;
&lt;script th:src=&quot;@{/assets/jquery-treetable/jquery.treetable.js}&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
$.ajax({
&quot;type&quot;: &#39;get&#39;,
&quot;url&quot;: &#39;/tree/9d317daca74246d4be41b1a37e30ee2a&#39;,
&quot;dataType&quot;: &quot;json&quot;,
&quot;success&quot;: function (data) {
$.each(data, function (idx, obj) {
$(&quot;#treeTable&quot;).append(&quot;&lt;tr data-tt-id=\&quot;&quot; + obj.nodeId + &quot;\&quot; data-tt-parent-id=\&quot;&quot; + obj.parent + &quot;\&quot;&gt;&lt;td&gt;&quot; + obj.subjectShort + &quot;&lt;/td&gt;&lt;td&gt;&quot; + obj.predicate + &quot;&lt;/td&gt;&lt;td&gt;&quot; + obj.object + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;);
});
$(&quot;#treeTable&quot;).treetable({
expandable: true,
initialState: &quot;expanded&quot;,
clickableNodeNames: true,
indent: 30
});
}
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 1

因为使用了GetMapping,加载js资源的路径发生了变化!

localhost:8080/user/object/assets/

而不是

localhost:8080/assets/

通过修改链接解决:

&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{assets/jquery-treetable/jquery.treetable.css}&quot;/&gt;

变为:

&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{../../assets/jquery-treetable/jquery.treetable.css}&quot;/&gt;

感谢 @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:

&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{assets/jquery-treetable/jquery.treetable.css}&quot;/&gt;

to:

&lt;link th:rel=&quot;stylesheet&quot; th:href=&quot;@{../../assets/jquery-treetable/jquery.treetable.css}&quot;/&gt;

thanks @andrewJames for the hint !

huangapple
  • 本文由 发表于 2023年5月7日 21:14:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76194148.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定