springboot整合thymeleaf

简介: springboot整合thymeleaf

springboot整合thymeleaf

1. 导入起步依赖

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

2. 更改引入版本

<properties>
    <springboot-thymeleaf.version>3.0.2.RELEASE</springboot-thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

springboot自带的thymeleaf依赖为2.1.3版本,使用thymeleaf-layout-dialect版本为2以下版本。

使用3或3以上的thymeleaf时,需要thymeleaf-layout-dialect的版本为2或以上。

锁定thymeleaf版本时不能使用thymeleaf.version标签,会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。

3. 配置文件配置

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML
spring.thymeleaf.cache=false


spring.thymeleaf.cache为缓存,需要热部署时,需要设置为false


语法

1. 替换标签体内容

<!--渲染效果-->
<div  th:text="${Hello}">显示欢迎</div>
<!--不渲染效果-->
<div  th:utext="${Hello}">显示欢迎</div>

2. 替换属性

<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. 在表达式中访问属性域

<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地址

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

5. 直接执行表达式

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

6. 分支与迭代

1. if 判断

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

2. 测试循环

<h3>测试循环</h3>
<div>
    <p th:text="${str}" th:each="str :${list}"></p>
</div>

使用th:each进行集合数据迭代

th:each=“声明变量:${集合}”

th:each 用在哪个标签上,哪个标签就会出现多次

7. 引入外部代码

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

<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>

需要引入的页面

<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>

渲染后的页面源码

<div>
    <div>
        <p>
            被包含的内容1111
        </p>
    </div>
</div>
<div>
    <p>
        被包含的内容2222
    </p>
</div>
<div style="background-color: red">
    <p>
        被包含的内容3333
    </p>
</div>

" :: "左边的值拼前后缀后必须能够找到要包含的文件。

" :: " 右边的值是代码片段的名字 ,就是th:fragment的值。

insert将代码原样引入。

replace使用被引入的代码和属性替换原有的。

include使用被引入的代码div内部的代码。


相关文章
|
6月前
|
XML 前端开发 Java
Springboot整合freemarker
Springboot整合freemarker
|
6月前
|
XML JavaScript 前端开发
SpringBoot整合Freemarker使用
SpringBoot整合Freemarker使用
47 0
|
6月前
|
移动开发 Java HTML5
Thymeleaf - 与SpringBoot整合入门
Thymeleaf - 与SpringBoot整合入门
87 0
|
移动开发 缓存 前端开发
|
前端开发 JavaScript Java
Springboot整合Thymeleaf并详解热部署
Springboot整合Thymeleaf并详解热部署
523 0
SpringBoot整合thymeleaf
SpringBoot整合thymeleaf
123 0
SpringBoot整合thymeleaf
|
缓存 编解码 移动开发
SpringBoot 整合 Thymeleaf|学习笔记
快速学习 SpringBoot 整合 Thymeleaf
185 0
SpringBoot 整合 Thymeleaf|学习笔记
|
缓存 Java 数据库
SpringBoot 整合 Freemarker|学习笔记
快速学习 SpringBoot 整合 Freemarker
192 0
SpringBoot 整合 Freemarker|学习笔记
|
前端开发 JavaScript Java
SpringBoot——SpringBoot集成Thymeleaf
SpringBoot——SpringBoot集成Thymeleaf
SpringBoot——SpringBoot集成Thymeleaf