springboot整合thymeleaf3

  • springboot整合thymeleaf
  • thymeleaf3语法

springboot整合thymeleaf

1. 导入起步依赖

1
2
3
4
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

2. 更改引入版本

1
2
3
4
<properties>
<springboot-thymeleaf.version>3.0.2.RELEASEspringboot-thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.1thymeleaf-layout-dialect.version>
properties>
  1. springboot自带的thymeleaf依赖为2.1.3版本,使用thymeleaf-layout-dialect版本为2以下版本。
  2. 使用3或3以上的thymeleaf时,需要thymeleaf-layout-dialect的版本为2或以上。
  3. 锁定thymeleaf版本时不能使用thymeleaf.version标签,会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。

语法

1. 替换标签体内容

1
2
3
4

<div th:text="${Hello}">显示欢迎div>

<div th:utext="${Hello}">显示欢迎div>

2. 替换属性

1
2
3
<div id="div01" th:id="${Hello}" th:class="${Hello}" th:text="${Hello}">显示欢迎div>

<div style="background-color: yellow" th:style="'background-color:green'">div>

3. 在表达式中访问属性域

1
2
3
4
5
6
7
<h3>访问属性域h3>
<p th:text="${attrRequestScope}">访问请求域 方式一p> <br>
<p th:text="${#httpServletRequest.getAttribute('attrRequestScope')}">访问请求域 方式二p><br/>

<h3>访问Session域h3>
<p th:text="${session.atttrSessionScope}">访Session域 方式一p><br/>
<p th:text="${application.attrAppSocpe}">访问Application域 方式一p>

4. 解析url地址

1
2
3
<h3>解析URL地址,获取ContextPath的值h3>
<p th:text="@{/success}">@{}是把ContextPath的值附加到指定的地址前p>
<a th:href="@{/test}">@{}是把ContextPath的值附加到指定的地址前a>

5. 直接执行表达式

1
2
3
<h3>直接执行表达式h3>
<p>无转义效果 : [[${attrRequestScope}]] p>
<p>有转义效果 : [(${attrRequestScope})] p>

6. 分支与迭代

1. if 判断

1
2
3
<h3>if判断字符串是否为空h3>
<p th:if="${not #strings.isEmpty(attrRequestScope)}">attrRequestScope不为空显示p>
~~~<p th:if="${#strings.isEmpty(attrRequestScope)}">attrRequestScope为空显示p>~~~~

2. 测试循环

1
2
3
4
<h3>测试循环h3>
<div>
<p th:text="${str}" th:each="str :${list}">p>
div>
  1. 使用th:each进行集合数据迭代
  2. th:each=”声明变量:${集合}”
  3. th:each 用在哪个标签上,哪个标签就会出现多次

7.引入外部代码

  1. 要被引入的代码 include/part.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="myFirstPart">
    <p>
    被包含的内容1111
    p>
    div>

    <div th:fragment="mySecondPart">
    <p>
    被包含的内容2222
    p>
    div>

    <div th:fragment="myThirdPart">
    <p>
    被包含的内容3333
    p>
    div>
  2. 需要引入的页面

    1
    2
    3
    <div th:insert="~{include/part :: myFirstPart }">div>
    <div th:replace="~{include/part :: mySecondPart }" style="background-color: yellow">div>
    <div th:include="~{include/part ::myThirdPart }" style="background-color: red">div>
  3. 渲染后的页面源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div>
    <div>
    <p>
    被包含的内容1111
    p>
    div>
    div>
    <div>
    <p>
    被包含的内容2222
    p>
    div>
    <div style="background-color: red">
    <p>
    被包含的内容3333
    p>
    div>
  1. “ :: “左边的值拼前后缀后必须能够找到要包含的文件。
  2. “ :: “ 右边的值是代码片段的名字 ,就是th:fragment的值。
  3. insert将代码原样引入。
  4. replace使用被引入的代码和属性替换原有的。
  5. include使用被引入的代码div内部的代码。

你可能感兴趣的:(springboot整合thymeleaf3)