thymeleaf 采坑

Posted 2022-11-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了thymeleaf 采坑相关的知识，希望对你有一定的参考价值。

如果我请求的url需要返回视图，如果这个url不是第一层url，那么视图层会找不到这个页面引用的一些静态资源。例如，下面的代码：
我的请求路径为：

http://localhost:8080/user/goods/detail?gid=x

代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layouts/layout  :: common_header(~::link)">

    <link th:href="@../pages/css/goods_detail.css" rel="stylesheet"/>

</head>

<body th:replace="layouts/layout :: specificContent(~::.wrapper,~::script)">
<!--<body th:replace="layouts/layout :: specificContent(~::.wrapper,~::script)">-->


<!--body wrapper start -------------------------------模板内容--------------->

<div class="wrapper">
    <div class="row">
        <div class="col-md-12">
            <ul class="breadcrumb panel" style="font-size: 16px">
                <li><i class="fa fa-user"></i> 物品详情</li>
            </ul>
        </div>
    </div>
    <div class="userinfo" id="$value.gid" >
        <div class="imgdev">
            <img  class="goodsimage" th:src="$value.goods_image">
        </div>
        <div class="userinfoinput">
            <span class="biaoti">物品名字：</span>
            <br>
            <span id="goods_name" th:text="$value.goods_name"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">物品类型：</span>
            <br>
            <span id="goods_type" th:text="$value.goods_type"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">更新时间:</span>
            <br>
            <span th:text="$value.modify_dt"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">创建时间:</span>
            <br>
            <span id="crt_dt" th:text="$value.crt_dt"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">物品价格：</span>
            <br>
            <span id="goods_price" th:text="$value.goods_price"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">物品归属人：</span>
            <br>
            <span id="username" th:text="$value.username"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">联系邮箱：</span>
            <br>
            <span id="email" th:text="$value.email"></span>
        </div>
        <br>
        <div class="userinfoinput">
            <span class="biaoti">交易地址：</span>
            <br>
            <span id="address" th:text="$value.address"></span>
        </div>
        <br>

    </div>

</div>


<!--body wrapper end-->

<script th:src="@../pages/js/art-template/art-template.js"></script>


</body>
</html>

那么，我引用的css文件将找不到。当我将请求路径改为：

http://localhost:8080/detail?gid=x

就可以引用到css文件了。这里我使用的后端方案是spring boot，然后直接返回的视图的名称。问题的原因还没有发现，特地在这里记录一下，需要研究一下原因。

以上是关于thymeleaf 采坑的主要内容，如果未能解决你的问题，请参考以下文章

Java之SpringBoot-Thymeleaf详情

采坑: 前后端分离 Cookie

vue2.x + vux采坑总结

Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）

3.springboot+Thymeleaf