Spring Boot | 集成Thymeleaf模板引擎

时间：2022-02-10 00:39:38

Thymeleaf简介

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

—— 引自Thymeleaf官网

Thymeleaf是一个Java模板引擎，可以处理如下6种模板模式：

  • HTML
  • XML
  • TEXT
  • JavaScript
  • CSS
  • RAW

准备工作

创建02.spring-boot-thymeleaf子工程，然后创建包、项目启动类等，如果有不清楚创建子工程步骤的同学，可以看笔者汪小成的上一篇博文。这里不再赘述。

集成Thymeleaf

1、引入Thymeleaf依赖

在Spring Boot项目中使用Thymeleaf模板引擎，需要在pom.xml文件中引入Thymeleaf相关依赖。

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

2、配置Thymeleaf

我们可以在application.properties文件中添加Thymeleaf配置。Thymeleaf配置以spring.thymeleaf开头。下图列出了所有的Thymeleaf可用配置。

<img src="http://img.bigcherry.vip/image-20230208230329274.png" alt="image-20230208230329274" style="zoom:50%;" />

配置示例及说明：

spring:
  thymeleaf:
    # 开发时配置成false，避免修改模板还要重启服务
    cache: false
    # 模板模式，支持HTML、XML、TEXT、JAVASCRIPT、CSS、RAW 6种
    mode: HTML
    # 编码，可以不用配置，默认值为UTF-8
    encoding: UTF-8
    # 模板路径，默认是templates
    prefix: classpath:/templates/
    # 模板后缀，默认是.html
    suffix: .html

3、控制器类开发

在项目目录/src/main/java/cn.ddcherry.springboot.demo.controller下创建控制器类UserController.java，代码如下：

package cn.ddcherry.springboot.demo.controller;

import cn.ddcherry.springboot.demo.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/user")
public class UserController {

	@RequestMapping("/info")
	public String info(Model model) {
		User user = new User("001", "wangxiaocheng", "汪小成");
		model.addAttribute("user", user);
		return "userInfo";
	}
}

就是一个很简单的控制器类，将页面需要的数据放置在Model对象中。

4、模板页面开发

在项目目录/src/main/java/templates下创建模板文件userInfo.html，模板文件代码如下：

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户详情页面</title>
</head>
<body>
    <div class="container">
        <div th:id="${'user_' + user.id}">
            <div class="row">
                <label>用户ID：</label>
                <span th:text="${user.id}"></span>
            </div>
            <div class="row">
                <label>用户编码：</label>
                <span th:text="${user.usercode}"></span>
            </div>
            <div class="row">
                <label>用户名称：</label>
                <span th:text="${user.name}"></span>
            </div>
        </div>
    </div>
</body>
</html>

使用Thymeleaf标签，需要在<html>标签中引入Thymeleaf命名空间，即<html>标签要改成如下形式：

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

引入Thymeleaf命名空间后就可以在模板文件中使用Thymeleaf标签了。

Thymeleaf标签都是以th:为前缀。

Thymeleaf常用标签：

标签 说明
th:id 替换HTML的id属性
th:text 显示文本，转义特殊字符
th:if 根据条件判断是否显示该标签
th:each 循环，支持Map、Iterable、数组等

4、测试

运行Spring Boot启动类，然后在浏览器中访问http://192.168.3.102:8002/user/info出现如下所示的页面。

Spring Boot | 集成Thymeleaf模板引擎

至此，Spring Boot项目集成Thymeleaf就完成啦。

附录

项目源码：https://github.com/wanggch/spring-boot-demos/tree/main/02.spring-boot-thymeleaf

标签：

相关文章