SpringBoot -04 Thymeleaf入门与基础语法

最新推荐文章于 2024-05-23 09:58:06 发布

yinying293

最新推荐文章于 2024-05-23 09:58:06 发布

阅读量564

点赞数 3

本文链接：https://blog.csdn.net/yinying293/article/details/130402262

版权

Java 同时被 2 个专栏收录

69 篇文章 1 订阅

订阅专栏

框架演进

48 篇文章 0 订阅

订阅专栏

Thymeleaf

1 Thymeleaf介绍
2 Thymeleaf入门
3 Thymeleaf语法

1 Thymeleaf介绍

在spring的官方中并不支持jsp的渲染模板，对jsp并不友好，推荐使用Thymeleaf、FreeMarker等模板引擎
.html（不能取域对象的值）
能写Java代码的HTML，但是thymsleaf可以取值存值

特点：
动静结合：Thymeleaf页面可以独立运行，不依赖与服务器(jsp不可以)
开箱即用：支持标准的模板语言，无需导入第三方配置
SpringBoot完美整合：SpringBoot支持Thymeleaf的启动器

2 Thymeleaf入门

2.1 导入依赖

创建导入web起步依赖
Thymeleaf模板起步依赖

<!-- Thymeleaf模板起步依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.2 编写Thymeleaf页面

页面默认情况下必须定义在templates文件夹中

templates文件夹默认不能直接访问（不是静态资源），必须通过Controller转发访问

xmlns:th xml name space ：Thymeleaf 必须导入Thymeleaf名称空间
msg即为后端的key

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello,Thymeleaf</h1>
    <h1 th:text="${msg}"></h1>   
</body>
</html>

2.3 编写Controller

Thymeleaf默认的视图解析器前缀和后缀

spring.thymeleaf.prefix=classpath:/templates/

spring.thymeleaf.suffix=.html

@Controller
public class TestController {

    @RequestMapping("hello")
    public String test(Model model){
        model.addAttribute("msg","Hello,Thymeleaf！！！！");
        return "hello";
    }
}

3 Thymeleaf语法

3.1 th:text 标签

th:text 标签：表示获取域对象中的内容

简单类型
对象类型
Map集合

<h1>th:text标签取值</h1>
<!--简单类型-->
<span th:text="${name}"></span>
<span th:text="${age}"></span>
<span th:text="${money}"></span><br>

<!--对象类型-->
<span th:text="${user.username}"></span>
<span th:text="${user.password}"></span>
<span th:text="${user.salary}"></span><br>

<!--Map集合-->
<span th:text="${k1}"></span>
<span th:text="${k2}"></span>
<span th:text="${k3}"></span><br>

3.2 th:each标签

th:each标签用于获取集合中的值

<h1>th:each标签遍历</h1>
<!--集合类型-->
<table width="80%" align="center" border="1px" cellspacing="0px">
    <tr>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>工资</th>
    </tr>
    <tr th:each="u:${userList}">
        <td th:text="${u.id}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.password}"></td>
        <td th:text="${u.salary}"></td>
    </tr>
</table>

3.3 th:if标签

th:if标签用于做if判断

<h1>th:if标签判断</h1>
<span th:if="${age<18}">未成年</span>
<span th:unless="${age<18}">成年</span>

3.4 th:inline标签

th:inline 内联标签，嵌套在标签内部使用

<h1>th:inline标签内联</h1>

<!--html内联-->
<span th:inline="text">姓名为：[[${name}]]</span>

<!-- css内联(css中取值) -->
<style th:inline="css">
    span{
        color:[[${color}]]
    }
</style>

<!-- javascript内联(javascript中取值) -->
<script th:inline="javascript">
    console.log([[${name}]]);
</script>

3.5 碎片标签

<!--定义碎片-->
<div th:fragment="header"  style="height: 200px;background-color: #889988">
    网页头部
</div>

<div th:fragment="footer" style="height: 200px;background-color: red">
    网页底部
</div>

直接引入页面

引入头部页面
引入尾部页面

<!-- 引入头部页面 -->
<div th:include="header"></div>
<h1>页面正文内容</h1>
<!-- 引入尾部页面 -->
<div th:include="footer"></div>

引入页面中的碎片

注意：如果引入碎片那么css样式会失效，那么需要使用th:replace标签

th:replace="header::header" 前面的header表示页面名，后面表示碎片名称

<!-- 引入头部片段-->
<div th:replace="header::header"></div>
<h1>页面正文内容</h1>
<!-- 引入尾部片段 -->
<div th:replace="footer::footer"></div>

3.日期处理

日期处理接近于固定格式
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>

<!--日期处理-->
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>