Thymeleaf 模版引擎
  GPYyDLfgzzIb 2023年11月02日 33 0

1. thymeleaf常用配置(最好用默认的)

spring:
  thymeleaf:
    cache: false
    mode: LEGACYHTML5
    # 配置了前缀
    prefix: classpath:/templates/
    # 配置了后缀
    suffix: .html

  web:
    resources:
      # 配置静态文件路径默认是classpath:/static/
      static-locations: classpath:/static/

  mvc:
    # 静态文件匹配模式
    static-path-pattern: /**
  • 一般都有默认的,不用改,知道就会配置就行。

2. 设置th的命名空间(加上后item加数据不会爆红)

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

设置完成之后,就会代码的提示了,lang指的是英文,可以改成中文ch

3. 取值操作

3.1 取普通值

  • th:text="${}"
<div th:text="${name}"></div>

3.2 取富文本

  • th:utext="${}"
  • <div th:utext="${content}"></div>
  • 它可以识别html的标签

3.3 取对象的值

  • th:object="${对象}"
  • 在标签内部通过 *{属性} 引用对象里的属性,不用写对象的前缀了

3.3.1 通过对象加属性的方法

<div th:text="${user.username}"></div>

3.3.2 通过th:object

<ul th:object="${user}">
        <li th:text="*{username}">用户名</li>
        <li th:text="*{password}"></li>
        <li th:text="*{id}"></li>
    </ul>

3.4 在标签内获取对应值

  • 默认情况th:text 会覆盖掉标签内的值,这时候如果我们希望他们能共存的话
  • th:inline="text"
  • 在标签内可以通过[[${变量}]]
<div th:inline="text">
        用户名:[[${name}]]
    </div>

3.5 在js脚本中取值

  • th:inline="javascript"
  • 在js脚本里通过[[${变量}]]
<script th:inline="javascript">
        var name = [[${name}]];
        console.log(name)
    </script>

3.6 数据处理

我们经常需要对元数据进行一些处理,这里thymeleaf给我们提供了数据处理的api

<!-- 时间格式化 -->
	<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}" />
	<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}" />
	<hr />
	<!-- 替换 把.换成$ -->
	<p th:text="${#strings.replace('www.baidu.cn','.','$')}" />
	<!-- 	转大写 -->
	<p th:text="${#strings.toUpperCase('www.baidu.cn')}" />
	<!-- 	去除两边空格 -->
	<p th:text="${#strings.trim('www.baidu.cn')}" />
	<hr />
	<!-- 	判断names中是否包含boot-0 -->
	<p th:text="${#sets.contains(names,'boot-0')}" />
	<p th:text="${#sets.contains(names,'boot-9')}" />
	<!-- 	元素个数 -->
	<p th:text="${#sets.size(names)}" />
	<hr />
	<!-- 判断ids中是否包含 0  -->
	<p th:text="${#sets.contains(ids,0)}" />
	<!-- 	取出下标为1的元素 -->
	<p th:text="${ids[1]}" />
	<p th:text="${names[1]}" />

除了上面提到的api,还有很多别的api,大家用到的时候可以自行查阅


4. 地址操作

4.1 spring boot 内置地址处理

spring boot内置了地址处理,如果需要引用静态资源,我们可以通过@{}处理地址

<!-- 引用 js-->
<script th:src="@{/js/index.js}" ></script>
<!-- 引用 css-->
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
<!-- 引用 图片-->
<img th:src="@{/images/mao.png}"  alt="图片"/>

4.2 在css中引入静态资源

可以通过相对地址引用

div {
    background-color: lightblue;
    background-image: url("../images/mao.png");
}

4.3 链接跳转

<a href="detail">详情</a>
    <a href="/api/detail">绝对地址</a>
    <a th:href="@{/detail}">thymeleaf写法</a>
    <a th:href="@{/detail?name=张三丰}">thymeleaf传参</a>
    <a th:href="@{/detail(name=张三丰,id=123)}">thymeleaf新写法</a>
    <a th:href="@{/detail(name=${name},id=123)}">thymeleaf引用变量</a>

5. 获取内置对象

当我们需要使用内置对象的时候,可以通过#内置对象获取,如

<!-- 使用request中的方法 -->
	<p th:text="${#httpServletRequest.getRemoteAddr()}" />
	<!-- 	获取request中的数据 -->
	<p th:text="${#httpServletRequest.getAttribute('requestMessage')}" />
	<!-- 	获取session中的数据 -->
	<p th:text="${#httpSession.getAttribute('sessionMessage')}" />
	<p th:text="${#httpSession.getId()}" />
	<!-- 	获取项目根目录 -->
	<p  th:text="${#httpServletRequest.getServletContext().getRealPath('/')}" />
	<hr />
	<!-- 	默认获取request中的数据 -->
	<p th:text="'requestMessage = ' + ${requestMessage}" />
	<!-- 	获取session中的数据,需要使用session调用 -->
	<p th:text="'sessionMessage = ' + ${session.sessionMessage}" />
	<!-- 	获取application中的数据,需要使用application调用 -->
	<p th:text="'applicationMessage = ' + ${application.applicationMessage}" />

6、条件判断

6.1 th:if

满足条件的显示

6.2 th:unless

不满足条件的显示

<div th:unless="${user == null}" th:object="${user}">
        <div th:text="*{username}"></div>
        <div th:text="*{password}"></div>
    </div>
    <div th:if="${user == null}">
        暂无数据
    </div>

6.3 当条件不为bool类型时的判断依据

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false,规则如下:

  • boolean 类型并且值是 true, 返回 true
  • 数值类型并且值不是 0, 返回 true
  • 字符类型(Char)并且值不是 0, 返回 true
  • String 类型并且值不是 “false”, “off”, “no”, 返回 true
  • 不是 boolean, 数值, 字符, String 的其他类型, 返回 true
  • 值是 null, 返回 false

7. 循环渲染

<ul>
        <li th:each="item,eachInfo:${list}" th:object="${item}">
            <div th:text="*{username}"></div>
            <div th:text="*{password}"></div>
            <div th:text="${eachInfo}"></div>
        </li>
    </ul>
  • th:each="【数组的每一项】,【遍历的信息】:【遍历的数组】"
  • 条件渲染中的隐士转换
  • boolean
  • 数值类型: 只要不是0都是true
  • 字符类型(Char):只要不是0都是true
  • String类型,只要不是表示否定的词都是true;否定包括(false\off\no)
  • 其它类型,只要不是null,都返回true
  • js做判断的时候也有隐士转换
  • 0是false
  • 空字符串是false
  • null是false

8.最终地址的生成规则

  • 绝对路径
  • ip:port/路径
  • 相对路径
  • ip:port/当前地址去掉最后一个斜杠后面的内容+路径
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
GPYyDLfgzzIb