springboot整合thymeleaf3
其他
2020-07-27 11:41:35
阅读次数: 0
- springboot整合thymeleaf
- thymeleaf3语法
springboot整合thymeleaf
1. 导入起步依赖
1 2 3 4
|
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
|
2. 更改引入版本
1 2 3 4
|
<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标签来锁定版本。
语法
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>
|
- 使用th:each进行集合数据迭代
- th:each=”声明变量:${集合}”
- th:each 用在哪个标签上,哪个标签就会出现多次
7.引入外部代码
要被引入的代码 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>
|
需要引入的页面
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>
|
渲染后的页面源码
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>
|
- “ :: “左边的值拼前后缀后必须能够找到要包含的文件。
- “ :: “ 右边的值是代码片段的名字 ,就是th:fragment的值。
- insert将代码原样引入。
- replace使用被引入的代码和属性替换原有的。
- include使用被引入的代码div内部的代码。
转载自blog.csdn.net/qq_45370568/article/details/106817788