10分钟带你学会thymeleaf

浅ピ筱

已于 2022-03-03 10:52:50 修改

阅读量1.3k

点赞数

分类专栏：模板引擎文章标签： thymeleaf

于 2022-01-22 17:55:12 首次发布

本文链接：https://blog.csdn.net/weixin_44507277/article/details/122634227

版权

模板引擎专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入命名空间

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

HTML中的使用

1. 表达式（和下面的设置属性值一起使用）

1.变量表达式 ${…}
获取后端（springmvc）传递的模型数据

<span th:text="${user.nickname}"></span>

2.消息表达式 #{…}

<span th:text="#{user.nickname}"></span>

3.${…}和#{…}的区别：
#{…}是${…}的扩展，不仅可以获取后端传递的数据，还可以获取国际化文件的数据

4.选择表达式 *{…}

<div th:object="${user}">
    <img th:src="*{avatar}" alt="">
    <span th:text="*{nickname}"></span>
</div>

相当于

<img th:src="${user.avatar}" alt="">
<span th:text="${user.nickname}"></span>

就是配合${…}使用减少代码冗余，如果一个对象有很多个属性，建议用这种方式

5.链接表达式 @{…}

<img th:src="@{/images/logo.png}"></img>
它会去 resources/static/下找

传参的方式：
@{/getUser(id=${user.id})}  <==>  /getUser?id=xxx
@{/user/{id}(id=${user.id})}  <==> /user/xxx

2. 支持的字面量

字符串：<span th:text="'This is a string'"></span>
数字：<span th:text="123"></span>
布尔：<span th:if="${user.isAdmin()}"></span> user.isAdmin() return true or false
null：<span th:if="${user} == null"></span>

算术运算符：+ - * / %
比较运算符：gt（大于）、lt（小于）、ge（大于等于）、le（小于等于）、eq（等于）、ne（不等于）
条件运算符：? :

3. 设置属性值

1. 设置自定义属性值 th:attr

在html标签上设置一些自定义属性，方便请求传参

<span class="classify-item" th:each="classify : ${classifies}" th:text="${classify.classifyName}" th:attr="classify-id=${classify.id}"></span>
<script>
    $(function () {
        $('span.classify-item').click(function () {
            $.ajax({
                url: '/getGoodsByClassifyId',
                method: 'post',
                data: {
                    classifyId: $(this).attr('classify-id'),
                },
                success: function (res) {
                	....
                }
            });
        });
    });
</script>

2. 设置html原生属性值

th:action、th:value、th:href、th:title……html所有属性基本上都能用th:修饰

3. 替换所在标签内的文本内容 th:text

4. 替换所在标签内的文本内容（会解析html） th:utext

4. 迭代器 th:each

相当于Java的增强for循环：for (User user : userList)

<ul>
    <li th:each="book : ${books}" th:text="${book.title}"></li>
</ul>

state 状态变量

<ul>
    <li th:each="book, state : ${books}" th:text="${book.title}"></li>
    
    state.count 当前遍历的是第几个，从1开始
    state.index 当前遍历的是第几个，从0开始
    state.even  当前遍历的是否是第偶数个
    state.odd   当前遍历的是否是第奇数个
    state.first 当前遍历的是否是第一个
    state.last  当前遍历的是否是最后一个
    state.index 当前遍历的是第几个
    state.size  集合中元素的总个数
</ul>

5. 条件语句

th:if 内的值为true显示，false隐藏

<span th:if="${user.isVip}">您是会员</span>

th:unless 正好和th:if相反，它们可以组合成if…else…
th:switch 就是Java里的switch，唯一的区别是不会case穿透，不用加break

6. 内联（写在开始标签和结束标签之间）

<span>[[${content}]]</span>   等价于th:text
<span>[(${content})]</span>   等价于th:utext

7. 组件

用于html代码复用，比如多个页面都有相同的导航栏和页脚，只要在一个页面中设计html，其他页面进行引入（相当于jsp的<jsp:include>）

定义组件：

<footer th:fragment="组件名">
    Copyright © 2020-2021 xxx 版权所有
</footer>

其他页面引入组件：

<div th:insert="~{组件所在的文件名::组件名}"></div>
或
<div th:replace="~{组件所在的文件名::组件名}"></div>
th:insert是将组件放到外层div内，th:replace是用组件替换掉这个div

还有一种不写th:fragment的方式，有id或class属性就行，但是我感觉这种方式没有语义化，不好辨别它是组件还是普通的DOM元素，这里就不介绍了

当某个页面使用组件时，组件内部可以使用后端传递到该页面的数据，但是IDEA会报错，所以要加上一个注释（按alt+enter自动加上）

<footer th:fragment="组件名">
    <!--/*@thymesVar id="user" type="cn.lookroot.loop.thymeleafdemo.vo.UserVO"*/-->
    <div th:text="${user.getUsername()}"></div>
</footer>

组件传参

定义部分：

<footer th:fragment="组件名(message)">
    <span th:text="${message}"></span>
</footer>

引用部分：

<div th:replace="~{组件所在的文件名::组件名('传递的参数')}"></div>

组件的局部替换