Spring Boot 框架（四）—— Spring Boot 之 Thymeleaf 页面模板引擎

最新推荐文章于 2024-05-07 22:11:26 发布

TwoYellowGuns

最新推荐文章于 2024-05-07 22:11:26 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/baidu_27414099/article/details/105521496

版权

Spring Boot 之 Thymeleaf 页面模板引擎

一、Thymeleaf 页面模板概述

一、Thymeleaf 页面模板概述

1.1 Thymeleaf 页面模板概述

1.1.1 Thymeleaf 介绍
freemaker 是一种模板引擎技术，其工作原理是在服务器响应html之前，先将html模板文件中的插值替换为真实的数据，然后在将html响应到客户端。使用模板引擎可以替代JSP实现动态网页。Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎。

Thymeleaf是当今比较流行的模板框架，并且是Spring Boot官方推荐使用的模板框架。

1.2 Spring Boot 集成 Thymeleaf 模板

1.2.1 新建项目引入Thymeleaf 依赖
Thymeleaf 的依赖如下

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

另外，由于Thymeleaf对HTML的校验特别严格，比如标签没有结束等可能会对不熟悉者造成未知的困惑，因此我们还需要加入nekohtml的依赖来避免这种情况。

<dependency>
   <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

1.2.2 在配置文件中配置Thymeleaf

## thymeleaf缓存是否开启，开发时建议关闭，否则更改页面后不会实时展示效果
spring.thymeleaf.cache=false
## thymeleaf编码格式
spring.thymeleaf.encoding=UTF-8
## thymeleaf对HTML的校验很严格，用这个去除thymeleaf严格校验
spring.thymeleaf.mode=LEGACYHTML5
## thymeleaf模板文件前缀
spring.thymeleaf.prefix=classpath:/templates/
## thymeleaf模板文件后缀
spring.thymeleaf.suffix=.html

配置结果
在这里插入图片描述
1.2.3 测试Thymeleaf
新建Controller类

@Controller
public class ThymeleafController {

    @GetMapping("/")
    public String test(ModelMap modelMap){
        modelMap.addAttribute("code","This is Thymeleaf");
        return "index";
    }
}

在src/mian/resources/templates下新建一个index.html（需要结合配置文件中spring.thymeleaf.prefix的配置信息存放HTML），使用th:text="${code}"来接收后台传来的数据。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf</title>
</head>
<body>
    <h1 th:text="${code}"></h1>
</body>
</html>

启动项目并在浏览器访问``，得到如下结果
在这里插入图片描述

完整的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 https://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.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.test</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf-demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- Thymeleaf 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 去除HTML的严格校验-->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>
        <!-- 热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

1.3 Thymeleaf 模板常用语法

1.3.1 内容替换指令

th:text：设置当前元素的文本内容，替换标签的文本内容
th:utext：支持html标签的内容替换
th:value：设置当前元素的值，替换表单控件的value值
th:attr：设置当前元素的属性，语法 th:attr="属性名称=值或者表达式",可用于设置单选款或者多选款选中，例如：th:attr="checked=${user.sex==1}"
th:checked：设置单选框是否选中th:checked="${实体属性==单选框的value值}"
th:selected：设置下拉框选中，语法th:selected="${user.majorid eq major.id}"。
th:onclick：添加点击事件，在点击事件的函数中可以使用表达式传参
除了上述指令外，还可以使用th:属性名称设置html的属性值，例如超链接的 href、图片的src等等

1.3.2 内容拼接
要讲动态数据与字符串进行拼接的方式：th:onclick="|del(${user.id})|"，写在两个竖线之间的内容可以直接进行静态数据和动态数据的拼接

1.3.3 代码块引入指令

th:insert：代码块引入，一般用作提取公共文件，或者引用公共静态文件等。
th:replace：代码块引入，一般用作提取公共文件，或者引用公共静态文件等。
th:incloud：代码块引入，一般用作提取公共文件，或者引用公共静态文件等。

1.3.4 条件判断指令

th:if：th:if="${条件表达式}"：条件成立渲染该标签
th:unless：th:unless="${条件表达式}"：条件不成立渲染该标签
th:switch：用作条件判断
th:case：用作条件判断

1.3.5 循环指令

th:each：th:each=“变量名状态值名称:集合”，例如：th:each="user ,i:${list}"，其中user表示循环产生的对象，i表示状态值，状态值中包含了序号，集合长度等信息：
i.index：当前迭代对象的 index（从0开始计算）
i.count：当前迭代对象的 index(从1开始计算)
i.size：被迭代对象的大小
i.current：当前迭代变量
i.even/odd：布尔值，当前循环是否是偶数/奇数（从0开始计算）
i.first：布尔值，当前循环是否是第一个
i.last：布尔值，当前循环是否是最后一个

1.3.6 Thymeleaf 内置方法

#numbers：数字方法。
#dates：日期方法。
#calendars：日历方法。
#strings：字符串方法。
#lists：集合方法。
#maps：对象方法。

TwoYellowGuns

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring Boot 框架（四）—— Spring Boot 之 Thymeleaf 页面模板引擎

freemaker 是一种模板引擎技术，其工作原理是在服务器响应html之前，先将html模板文件中的插值替换为真实的数据，然后在将html响应到客户端。使用模板引擎可以替代JSP实现动态网页。Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎。Thymeleaf是当今比较流行的模板框架，并且是Spring Boot官方推荐使用的模板框架。
复制链接

扫一扫