spingboot使用thymeleaf框架

最新推荐文章于 2024-07-28 19:41:52 发布

China大熊猫

最新推荐文章于 2024-07-28 19:41:52 发布

阅读量203

点赞数

文章标签： java 开发语言 js javascript

本文链接：https://blog.csdn.net/qq_45117532/article/details/125185926

版权

spingboot使用thymeleaf框架
1、导入依赖包

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

2、配置选项

# thymeleaf模板配置
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3、在html页面中添加如下命名空间

xmlns:th="http://www.thymeleaf.org"

如：<html xmlns:th="http://www.thymeleaf.org">

4、使用thymeleaf标签库
常用的thymeleaf标签有：

标签	说明	案例
th:id	替换id	<input th:id=“‘xxx’ + ${collect.id}”/>
th:text	文本替换	<p th:text=“${collect.description}”>description
th:utext	支持html的文本替换	<p th:utext=“${htmlcontent}”>conten</p>
th:object	替换对象	<div th:object=“${session.user}”>
th:value	属性赋值	<input th:value=“${user.name}” />
th:with	变量赋值运算	<div th:with=“isEven=${prodStat.count}%2==0”></div>
th:style	设置样式	th:style=“‘display:’ + @{(${sitrue} ? ‘none’ : ‘inline-block’)} + ‘’” th:onclick 点击事件 th:οnclick=“‘getCollect()’”
th:each	属性赋值	<tr th:each=“user,userStat:${users}”> </tr>
th:if	判断条件	<a th:if=“${userId == collect.userId}” />
th:unless	和th:if判断相反	<a th:href=“@{/login}” th:unless=${session.user != null}>Login
th:href	链接地址	<a th:href=“@{/login}” th:unless=${session.user != null}>Login />
th:switch	多路选择配合th:case 使用	<div th:switch=“${user.role}” > </div>
th:case	th:switch的一个分支	<p th:case=“‘admin’”>User is an administrator
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	<div th:fragment=“alert”>
th:include	布局标签，替换内容到引入的文件	<head th:include=“layout :: htmlhead” th:with=“title=‘xx’”></head>
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace=“fragments/header :: title”></div>
th:selected	selected选择框选中	<th:selected=“(${xxx.id} == ${configObj.dd})”>
th:src	图片类地址引入	<img class=“img-responsive” alt=“App Logo” th:src=“@{/img/logo.png}” />
th:inline	定义js脚本可以使用变量	<script type=“text/javascript” th:inline=“javascript”>
th:action	表单提交的地址	<form action=“subscribe.html” th:action=“@{/subscribe}”>
th:remove	删除某个属性	<tr th:remove=“all”> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr	设置标签属性，多个属性可以用逗号分隔	<th:attr=“src=@{/image/aa.jpg},title=#{logo}” />

5、在js中获取后台返回的信息

通过两个中括号表达式获取，如：var msg = '[[${msg}]]';

6、访问session的值
要访问session中的值，必须要加前缀session.
如：后端设置session为：session.setAttribute("curUser", user);
访问方式：<span th:text="${session.curUser.id}"></span>

7、访问servlet内置对象的方法
访问方式以#号开头
如：

<span th:text="${#servletContext.getAttribute('')}"></span>
<span th:text="${#session.getAttribute('')}"></span>
<span th:text="${#request.getParameter('')}"></span>
<span th:text="${#response.getHeader('')}"></span>