SpringBoot(四)整合thymeleaf

最新推荐文章于 2025-10-22 14:00:08 发布

原创最新推荐文章于 2025-10-22 14:00:08 发布 · 503 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring boot #spring #经验分享

Spring Boot 专栏收录该内容

10 篇文章

订阅专栏

本文介绍Thymeleaf模板引擎的基础知识及其在Spring Boot项目中的应用，涵盖配置、语法详解等内容。

1.Thymeleaf介绍

1.1.什么是Thymeleaf

Thymeleaf [taɪm]是一个跟 Velocity、FreeMarker 类似的用Java语言编写的模板引擎，它基于模板和数据生成输出文本（HTML网页、WORD、XML，PDF或Java等）。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpexYJA4-1640243523994)(assets\1587380945141.png)]$

2.2.为什么要使用Thymeleaf

两方面影响用户访问速度：

1、数据库查询

使用缓存

2、服务器编译jsp页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NO8dGPIk-1640243523997)(assets\1587383471778.png)]$

可以使用Thymeleaf、Freemarker实现网页静态化。

2.3.Thymeleaf 的启动器

    <!-- thymeleaf的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

2.Thymeleaf 入门

2.1.创建工程

03_springboot_thymeleaf

2.2.pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>

    <groupId>com.qf</groupId>
    <artifactId>03_springboot_thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!-- springBoot的启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf的启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

</project>

2.3.thymeleaf

hymeleaf也会根据前缀和后缀来确定模板文件的位置：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7g1c5YeU-1640243523998)(assets\1587384246272.png)]$

默认前缀：classpath:/templates/
默认后缀：.html

Thymelaef特点：

语法：通过他特定标签操作html属性
目录位置：src/main/resources/templates
后缀名：.html
注意，把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf入门</title>
</head>
<body>
	<span th:text="Hello"></span>
	<hr/>
	<span th:text="${msg}"></span>
</body>
</html>

2.4.controller

@Controller
public class ShowController {

    @RequestMapping("/show1")
    public String show1(Model model){
        model.addAttribute("msg","师姐你好！！！");
        return "hello";
    }
}

2.4.启动类

package com.qf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 *Thymeleaf入门案例
*/
@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

2.5.测试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBCQbnUK-1640243523999)(assets\1587387035090.png)]$

3.Thymeleaf语法详解

3.1.变量输出

3.1.1.th:text

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4nzVwFY5-1640243524000)(assets\1587387243344.png)]$

<span th:text="Hello"></span>
<hr/>
<span th:text="${msg} "></span>

3.1.2.th:value

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yabcTvav-1640243524002)(assets\1587387269071.png)]$

<input type="text" name="username" th:value="${msg}"/>

3.2.日期和字符串处理

Thymeleaf 内置对象

注意语法：

1.调用内置对象一定要用#

2.大部分的内置对象都以 s 结尾 strings、numbers、dates

日期处理：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Inq4IMcH-1640243524003)(assets\1587387381878.png)]$

<input type="text" name="birth" th:value="${#dates.format(birth,'yyyy-MM-dd')}"/>

字符串处理：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7uTZdXZ-1640243524005)(assets\1587387576109.png)]$

<input type="text" name="msg" th:value="${#strings.substring(msg,0,6)}"/>

3.3.条件判断

3.3.1.th:if

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wt8Ecwqn-1640243524007)(assets\1587387764171.png)]$

3.4.迭代遍历

3.4.1.th:each

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OndHb88h-1640243524008)(assets\1587387907190.png)]$

3.5.URL表达式

th:href

th:src

3.5.1.url表达式语法

基本语法：@{}

3.5.2.URL的相对路径

3.5.2.1.相对于当前项目的根

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kC6Aayfs-1640243524009)(assets\1587388062342.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7FooQ2pa-1640243524010)(assets\1587388147651.png)]$

3.5.2.2.相对于服务器路径的根

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ipnCfs4W-1640243524011)(assets\1587388250983.png)]$

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EC8uVU0e-1640243524013)(assets\1587388276546.png)]$

3.5.3.在 url中实现参数传递

3.5.3.1.问号形式传参

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElzC48RF-1640243524014)(assets\1587388398641.png)]$

3.5.3.2.restful风格传参

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YA0qimxx-1640243524015)(assets\1587388480304.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4dtB5f3-1640243524017)(assets\1587388510365.png)]$