Web开发：Thymeleaf模板引擎

菠萝咕噜肉i

于 2024-09-20 21:32:26 发布

阅读量2k

点赞数 15

文章标签：前端 Thymeleaf html

本文链接：https://blog.csdn.net/Bisikl/article/details/142401945

版权

1.1 Thymeleaf简介

1.1.1 模板引擎

模板引擎是为了使用户界面与业务数据分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

1.1.2 Thymeleaf介绍

Thymeleaf是一个流行的现代服务器端Java模板引擎，它专门设计用于Web和独立环境中的应用程序。它允许开发者以清晰和直观的方式将服务器端的数据与HTML、XML、JavaScript、CSS以及纯文本等模板文件结合起来。Thymeleaf的最大特点之一是它的“自然模板”技术，这意味着开发者可以编写标准的HTML代码，并通过Thymeleaf特有的属性和表达式（如th:text、th:if等）来动态插入或修改内容，而无需改变HTML的结构或引入特定的模板语法。

Thymeleaf与Spring MVC等Java Web框架集成得非常好，是Spring Boot推荐的默认模板引擎之一。它提供了丰富的功能，包括数据绑定、条件语句、循环、国际化支持、模板布局等，使得开发者可以轻松地构建出动态、响应式且易于维护的Web界面。

Thymeleaf的性能也非常出色，它能够在短时间内处理并渲染大量的模板数据，从而满足高并发Web应用的需求。此外，Thymeleaf还具有良好的扩展性和可定制性，允许开发者根据需要进行配置和优化。

总的来说，Thymeleaf是一个功能强大、易于使用且高度灵活的模板引擎，它为Java Web开发者提供了一种高效且优雅的方式来处理模板渲染和数据展示。

1.1.3 Thymeleaf特点

Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎，它可以完全代替JSP。
与其他的模板引擎相比较，它又如下极吸引人的特点。

Thymeleaf的模板语法设计得非常接近HTML，它允许开发者编写几乎无差异的HTML代码，并通过添加Thymeleaf特有的属性和表达式（如th:text、${...}等）来动态插入数据或控制页面元素。这种设计保持了HTML的清晰和可读性，降低了模板的复杂度。
与其他模板引擎相比，如JSP或Velocity，Thymeleaf的自然模板技术使得前端设计师和开发者能够更容易地协同工作。设计师可以直接使用和设计标准的HTML模板，而无需担心模板引擎的特定语法会破坏HTML结构或增加学习成本。
Thymeleaf能够轻松集成到Spring框架中，特别是与Spring MVC的结合使用，为开发者提供了更加灵活和强大的Web开发能力。它支持Spring的表达式语言（SpEL），使得数据绑定、表单验证、国际化等功能变得更加简便。
相比其他模板引擎，Thymeleaf与Spring框架的集成更为紧密。在Spring Boot项目中，Thymeleaf甚至被作为默认的模板引擎之一，进一步简化了配置和使用过程。这使得基于Spring框架的Web应用开发更加高效和便捷。
Thymeleaf在提供丰富功能的同时，也注重性能优化。它采用高效的模板解析和执行机制，能够快速处理并渲染大量数据，满足高并发Web应用的需求。此外，Thymeleaf还提供了自动的HTML转义功能，防止跨站脚本攻击（XSS）等安全问题。

1.2 快速上手

1.构建项目

2.添加依赖

<?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>
        <!-- 在此处将3.3.4版本修改成3.3.3版本 -->
        <version>3.3.3</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.bdqn</groupId>
    <artifactId>Thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Thymeleaf</name>
    <description>Thymeleaf</description>
    <properties>
        <java.version>21</java.version>
    </properties>
    <dependencies>
        <!-- 引入SpringBoot的Web依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>6.3.3</version>
        </dependency>
        <!-- 引入JSP引擎依赖，SpringBoot内置Tomcat没有此依赖 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.7</version>
        </dependency>
        <!-- 引入JSTL标签库依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!-- 引入MyBatis-Plus支持（不需要再引入MyBatis包） -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-spring-boot3-starter</artifactId>
            <version>3.5.7</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>3.0.3</version>
        </dependency>
        <!-- 引入Druid数据源 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-3-starter</artifactId>
            <version>1.2.20</version>
        </dependency>
        <!-- &lt;!&ndash; 引入MyBatis-Plus动态数据源支持 &ndash;&gt; -->
        <!-- <dependency> -->
        <!--     <groupId>com.baomidou</groupId> -->
        <!--     <artifactId>dynamic-datasource-spring-boot3-starter</artifactId> -->
        <!--     <version>4.1.2</version> -->
        <!-- </dependency> -->
        <!-- 引入MySQL驱动 -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- 引入Lombok完成实体类自动Getter/Setter -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- 引入Slf4j日志依赖 -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <!-- 引入SpringBoot测试依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>

        <!-- 配置热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

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

    <build>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <excludes>
                    <exclude>application-dev.properties</exclude>
                    <exclude>application-pro.properties</exclude>
                    <exclude>application-test.properties</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <includes>
                    <include>application.yml</include>
                </includes>
            </resource>
        </resources>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <fork>true</fork>
                        <exclude>
                            <groupId>org.project-lombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

spring-boot-starter-data-jpa：Spring Boot DataJPA 启动器
spring-boot-starter-thymeleaf：Spring Boot Thymeleaf 模板引擎启动器

3.application.yml添加配置

spring:
  #Thymeleaf配置
  thymeleaf:
    cache: false #开启模板缓存（默认值：true）

4.Model准备

public interface UserService {

    User login(String usrName, String usrPassword);

    int addUser(User user);

    int deleteUser(Long usrId);

    int updateUser(User user);

    User getUser(Long usrID);

    List<User> findAllUsers();

}

5.控制器开发

@Controller
public class ExampleController {
    @Resource
    private UserService userService;


    @GetMapping("/hello/{id}")
    public String getUser(@PathVariable("id")Long usrId, Model model){
        User user = userService.getUser(usrId);
        model.addAttribute("user",user);
        return "demo/hello";
    }

6.页面开发

<!DOCTYPE html>
<!--加入对Thymeleaf模板引擎支持-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
</head>
<body>
欢迎您，<span th:text="${user.usrName}">张三</span>！
</body>
</html>

7.运行访问

启动项目后在浏览器中输入网址：http://localhost:8080/hello/2

1.3 核心语法

1.3.1 表达式

    赋值，<span th:text="${userName}">userName</span>!<br>
    拼接：<span th:text="'Hello '+ ${userName} + ' ! '"></span><br>
    拼接：<span th:text="|Hello ${userName}! |">Hello userName!</span><br>

    <p th:text="${test}"></p>
    <p th:text="${session.test}"></p>

    <p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></p>
    <p th:text="${#dates.createToday()}"></p>

    <div th:object="${user}">
        <span th:text="*{usrId}"></span>
        <span th:text="*{usrName}"></span>
    </div>

    @GetMapping("/string")
    public String getString(Model model, HttpServletRequest request){
        User user = userService.getById(1);
        model.addAttribute("user",user);
        model.addAttribute("userName","李哈哈");
        request.setAttribute("test","request");
        request.getSession().setAttribute("test","session");
        model.addAttribute("date",new Date());
        return "demo/string";
    }

<script th:inline="javascript">
    var msg = 'Hello'+ [[${userName}]] + '!';
    alert(msg)
</script>

    @GetMapping("/inline")
    public String inline(Model model){
        model.addAttribute("userName","李哈哈");
        return "demo/inline";
    }

菠萝咕噜肉i

关注

15
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫