Thymeleaf基础用法

最新推荐文章于 2023-08-02 16:03:17 发布

康提扭狗兔

最新推荐文章于 2023-08-02 16:03:17 发布

阅读量220

点赞数

文章标签： java 开发语言

本文链接：https://blog.csdn.net/qq_30166465/article/details/128348312

版权

文章目录

Thymeleaf模板引擎

使用java开发的模板技术，在服务器端运行。把处理后的数据发送给浏览器。在web环境和非web环境都能用。
基于html语言，thymeleaf语法是应用在html标签中。springboot框架继承thymeleaf，使用thymeleaf代替jsp。
官网：www.thymeleaf.org

常用设置

命名空间：
application.yml

spring:
  thymeleaf:
    cache: false #在开发阶段，关闭模板缓存，让修改立即生效
    encoding: UTF-8 #编码格式
    mode: HTML #默认是html文件
    prefix: classpath:/templates/
    suffix: .html

表达式

标准表达式
语法：${key}
作用：获取Request作用域中的key，文本数据

<p th:text="${name}"></p><br/><p>获取sysUser对象</p><p th:text="${myUser.id}">id</p><p th:text="${myUser.name}">姓名</p><p th:text="${myUser.sex}">性别</p><p th:text="${myUser.age}">年龄</p><!--实际上就是调用的get方法--><p th:text="${myUser.getId()}">id</p><p th:text="${myUser.getName()}">姓名</p><p th:text="${myUser.getSex()}">性别</p><p th:text="${myUser.getAge()}">年龄</p>

选择变量表达式
语法：{key}
作用：获取key对应的数据，{key}需要和th：object这个属性一起使用，目的是简单获取对象的属性值

<p>使用*{key}获取sysUser对象的属性值</p>
    <div th:object="${myUser}">
        <!--*{key}必须在th:object内部-->
        <p th:text="*{id}">id</p>
        <p th:text="*{name}">姓名</p>
        <p th:text="*{sex}">性别</p>
        <p th:text="*{age}">年龄</p>
    </div>

链接表达式（url）
语法：@{url}
作用：表示链接，可以在src/href/action属性中用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{js/test.js}" type="text/javascript"></script>
    <!--这里需要加/因为是从项目根目录开始,不加/就会从本页面的同级目录开始,最后是/myboot/tpl/js/test.js-->
</head>
<body>
    <h3>链接绝对路径</h3>
    <a th:href="@{http://www.baidu.com}">百度</a>
    <h3>链接相对地址</h3>
    <a th:href="@{/tpl/queryAcount}">相对地址,没有参数</a>
    <a th:href="@{'/tpl/queryAcount?id='+${userId}}">获取model中数据</a>
    <p>推荐的传参方式</p>
    <a th:href="@{/tpl/queryAcount(id=${userId})}">传参1</a>
    <a th:href="@{/tpl/queryUser(name='lisi',id=1003)}">传参2</a>
</body>

thymeleaf属性

属性是放在html元素中的，就是html元素的属性，加入了th前缀。属性的作用不变，加入了th，属性的值由模板引擎处理了。在属性可以使用变量表达式。

这些都可以动态获取
th:action
th:method
th:href
th:src
th:text
th:style

循环

th:each
可以循环List，Array，Map
语法：在一个html标签中使用th：each

循环List的例子

<!--userStat(可以不写)携带了以下信息:index当前迭代对象索引、count个数、size迭代对象的大小等-->
    <div th:each="user,userStat:${myUsers}">
        <p th:text="${user.id}"></p>
        <p th:text="${user.name}"></p>
        <p th:text="${user.sex}"></p>
        <p th:text="${user.age}"></p>
    </div>

循环Array和List一样
循环Map

<div th:each="map,mapStat:${myMap}">
        <!--key是字符串-->
        <p th:text="${map.key}"></p>
        <!--value是对象-->
        <p th:text="${map.value.id}"></p>
        <p th:text="${map.value.name}"></p>
</div>

条件判断if，unless

th：if 判断语句没有else

<div th:if="10>0">显示文本内容</div>

        <h3>if的使用</h3>
        <p th:if="${sex=='m'}">性别是男</p> <!--sex为m 显示-->
        <p th:if="${sex=='f'}">性别是女</p> <!--不显示-->
        <p th:if="${isLogin}">已经登录</p>  <!--isLogin为true 显示-->
        <p th:if="${age>20}">年龄大于20</p> <!--age为20 不显示-->
        <p th:if="${name}">name是""</p>    <!--name为"" 显示-->
        <p th:if="${isOld}">isOld为null</p>    <!--isOld为null 不显示-->

switch case

<div th:switch="${sex}"> <!--需要判断的值-->
        <p th:case="m">性别为男</p>
        <p th:case="n">性别为男</p>
        <p th:case="*">默认值</p>
        <!--以上的case只有一个会执行-->
    </div>

内联

内联text
语法

<!--th:inline="text"可以省略-->
<p th:inline="text">显示姓名：[[${key}]]</p>
<p>显示姓名：[[${key}]]</p>

内联JavaScript
th:inline="javascript"将js与模板结合，js中也能使用模板中的数据

<script type="text/javascript" th:inline="javascript">
        var sex=[[${sex}]];
        alert(sex);
</script>

字面量

    <p th:text="'我是'+${name}+',我的年龄为'+${age}"></p>
    <p th:if="${age>10}">age大于10</p>
    <p th:if="${isLogin==true}">已经登录</p>
    <p th:if="${isOld==null}">isOld为null</p>

字符串连接

<!--方式一：＋号拼接-->
<p th:text="'我是'+${name}+',我的年龄为'+${age}"></p>
<!--方式一：|字符串，表达式|-->
<p th:text="|我是${name},我的年龄为${age}|"></p>

运算符

<p th:if="20>10">20大于10</p>         <!--可以-->
<p th:if="${age}>10">age大于10</p>    <!--可以-->
<p th:if="${age>10}">age大于10</p>    <!--可以-->

<p th:text="${age>10}"></p>          <!--显示true-->
<p th:text="${age}>10"></p>          <!--显示true-->
<p th:text="${age}&gt;10"></p>          <!--显示true-->
<p th:text="${age}+'>10'"></p>          <!--显示20>10-->
<p th:text="|${age}>10|"></p>           <!--报红，但显示20>10-->
<p th:text="${isLogin==true?'用户已经登录':'用户未登录'}"></p> <!--显示用户已经登录-->
<p th:text="|${isLogin==true?'用户已经登录':'用户未登录'}|"></p> <!--显示用户已经登录-->
<p th:text="|${isLogin}==true?'用户已经登录':'用户未登录'|"></p> <!--报红，但显示true==true?'用户已经登录':'用户未登录'-->

Thymeleaf内置对象

#request表示HttpServletRequest
#session（只是获取值可以简写为session，需要使用方法不能简写）表示HttpSession

    <h3>获取作用域中的数据</h3>
    <p th:text="${#request.getAttribute('name1')}"></p> <!--能取到值-->
    <p th:text="${#session.getAttribute('name2')}"></p> <!--能取到值-->
    <p th:text="${session.name2}"></p> <!--能取到值-->
    <p th:text="${name1}"></p> <!--报红 但能取到值-->
    <p th:text="${name2}"></p> <!--报红 取不到值 f12查看是空标签-->
    <p th:text="${name3}"></p> <!--Model设置的值 不报红-->
    <!--下面的方法是错误写法-->
    <!--
    <p th:text="${#request.name1}"></p>
    <p th:text="${#session.name2}"></p>
    -->
    <h3>使用内置对象的方法</h3>
    <!--getRequestURL=http://127.0.0.1:8080/myboot/tpl/switchcase-->
    getRequestURL=<span th:text="${#request.getRequestURL()}"></span><br/>
    <!--/myboot/tpl/switchcase-->
    getRequestURI=<span th:text="${#request.getRequestURI()}"></span><br/>
    <!--空-->
    getQueryString=<span th:text="${#request.getQueryString()}"></span><br/>
    <!--/myboot-->
    getContextPath=<span th:text="${#request.getContextPath()}"></span><br/>
    <!--127.0.0.1-->
    getServerName=<span th:text="${#request.getServerName()}"></span><br/>
    <!--8080-->
    getServerPort=<span th:text="${#request.getServerPort()}"></span><br/>

Thymeleaf还有很多内置对象，ctx，param，dates，strings，objects，lists，arrays，sets，maps等，可以用来简化对一些对象的处理，看文档吧www.thymeleaf.org

自定义模板

定义模板
使用模板

    <!--
    模板定义
    th:fragment="模板自定义名称"
    -->
    <div th:fragment="head">
        <p>hello</p>
        <p>我叫张三</p>
    </div>

   <!--
   1.
   ~{文件名称 :: 自定义模板名称} 注意冒号前后有空格
   2.
   文件名称 :: 自定义模板名称 注意冒号前后有空格
   -->   
   <!--insert 在引用的div内部插入该模板-->
   <div th:insert="~{link :: head}">
      
   </div>
   <!--include 用被引用的模板替换掉引用的div-->
   <div th:insert="~{link :: head}">
      
   </div>
   
   <!--引用整个html文件 body；也可以去掉：：html-->
   <div th:insert="~{link :: html}">
      
   </div>