Thymeleaf使用

Littewood

已于 2022-02-28 16:42:09 修改

阅读量899

点赞数 3

分类专栏： SpringBoot 文章标签： javascript java html

于 2022-02-28 16:41:23 首次发布

本文链接：https://blog.csdn.net/Littewood/article/details/123186061

版权

SpringBoot 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了SpringBoot如何集成Thymeleaf模板引擎，包括Thymeleaf的基本使用步骤，如导入依赖、创建.html文件、设置文本、链接、样式、循环、判断等语法，并给出了实际示例。同时，文章提到了一些常见问题和解决方案，例如避免在返回视图路径时使用前导‘/’。最后，作者分享了在使用Thymeleaf过程中遇到的挑战，认为其语法要求较高，但SpringBoot官方推荐使用。

摘要由CSDN通过智能技术生成

使用步骤：

1.导入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.创建.html文件

在中添加xmlns:th=“http://www.thymeleaf.org”，如下

<html lang="en" xmlns:th="http://www.thymeleaf.org">

3.语法

th:text="${变量}" 改变文本的值

变量通过controller中model.addAttribute(“msg”,“atguigu”)；发送

<h1 th:text="${msg}">哈哈</h1>

th:href=“${变量}”; //跳转到该页面

th:href=“@{变量}”； //在默认途径后面加上此路径

路径中添加参数

<a th:href="@{'/findProductById?id='+${Product.id}}">书名：
    [[${Product?.name}]]<br/>售价：￥[[${Product?.price}]] </a>

<h2>
    <a href="www.baidu.com" th:href="${link}">去百度</a>
    <a href="www.baidu.com" th:href="@{link}">去百度</a>  
</h2>

th:src

<link rel="stylesheet" th:href="@{/client/css/main.css}" type="text/css" />
<script type="text/javascript" th:src="@{/client/js/order.js}"></script>

获取request中的值**：[[${变量}]]

如 order为Controller中request.setAttribute(“order”,order)中的值

<td class="tableopentd02">[[${order.id}]]</td>
<td class="tableopentd02">[[${order.receiverName }]]</td>
<td class="tableopentd02">[[${order.ordertime}]]</td>
<td class="tableopentd02">[[${order.paystate==0?"未支付":"已支付"}]]</td>

th:value

th:value="${session?.user?.username}"

th:each 循环

<table th:each="entry,vs:${session?.cart}" width="100%" border="0" cellspacing="0">
    <tr>
        <td width="10%">[[${vs.count}]]</td>
        <td width="40%">[[${entry.key.name }]]</td>
        <td width="10%">[[${entry.key.price }]]</td>
        <td width="10%">[[${entry.key.category}]]</td>
        <td width="10%">[[${entry.value}]]
        </td>
        <td width="10%">[[${entry.key.price*entry.value}]]</td>
    </tr>
</table>

th:if 判断

<li th:if="${bean.currentPage!=1}" class="disablepage_p">
    <a class="disablepage_a"
       th:href="@{'/showProductByPage?currentPage='+${bean.currentPage-1}+'&category='+${bean.category}}"></a>
</li>
<!--                                    </th:if>-->
<!--                                    <c:if test="${bean.currentPage==1}">-->
<li th:if="${bean.currentPage==1}" class="disablepage_p2"></li>
<!--                                    </c:if>-->

th:style设置背景

th:style="'background:url('+'/admin/images/loginbg.gif'+');'"

th:onclick

传递参数

如：传递三个参数

<input type="button" value='+' style="width:20px"
       th:onclick="changeProductNum([[${entry.value+1}]],[[${entry.key.pnum}]],[[${entry.key.id}]])">

前提是：

			<script th:inline="javascript">

					function changeProductNum(abc){

							//相关代码

						}

			</script>

onclick="javascript:return cart_del()">X</a>

获取session中的值：[[${session.变量}]]

user为Controller中session.setAttribute(“user”,user)中的值;

如果session中的变量不存在，则会报错，可使用[[${session?.变量}]]进行判断，如果变量不存在，则不显示

<p>你好，[[${session?.user?.username}]]！欢迎您来到网上书城结算中心</p>

th:insert 引入其他html

<div th:insert="client/head::#divhead"></div>
<div th:insert="client/menu_search::#divmenu"></div>
<div th:insert="client/menu_search::#divsearch"></div>

client/head为其他静态资源的相对路径

#divhead表示client/head中id为divhead的部分

注意：如果导入的client/head::#divhead中引入了其他的css或者js文件需要将css/js等静态资源包含在div中才可生效

<div id="divmenu">
    <script type="text/javascript">
        /**
         * my_click和my_blur均是用于前台页面搜索框的函数
         */
        //鼠标点击搜索框时执行
        function my_click(obj, myid){
            //点击时，如果取得的值和搜索框默认value值相同，则将搜索框清空
            if (document.getElementById(myid).value == document.getElementById(myid).defaultValue){
                document.getElementById(myid).value = '';
                obj.style.color='#000';
            }
        }
        //鼠标不聚焦在搜索框时执行
        function my_blur(obj, myid){
            //鼠标失焦时，如果搜索框没有输入值，则用搜索框的默认value值填充
            if (document.getElementById(myid).value == ''){
                document.getElementById(myid).value = document.getElementById(myid).defaultValue;
                obj.style.color='#999';
            }
        }
        /**
         * 点击搜索按钮执行的函数
         */
        function search(){
            document.getElementById("searchform").submit();
        }
    </script>

th:incline ->script标签中使用thymeleaf语法

<script th:inline="javascript">
    /*<![CDATA[*/
    document.querySelector('#ctl_p').innerHTML =/*[[${n.details}]]*/;
    /*]]>*/
</script>

th:checked

<input type="radio" name="gender" value="男"  th:checked="${session?.user?.gender=='男'}?true:false"/> 男
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" value="女"  th:checked="${session?.user?.gender=='女'}?true:false"/> 女

springboot集成thymeleaf

springboot集成thymeleaf的注意事项

如果controller中使用return “/admin/login/home.html”，在打包成jar包之后会显示找不到templates下的静态资源

正确写法：将前面的"/"去掉。

@GetMapping("/admin/home.html")
public String home(){
    return "admin/login/home.html";
}

总结：由于对于thymeleaf完全不熟悉，在使用过程中需要了好多坑。而且thymeleaf对于语法的要求比较严格，稍微写错可能就会报错，虽然springboot官方推荐使用thymeleaf，但是thymeleaf的语法比较难记。

Littewood

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录