天天看点

Spring Boot | 集成Thymeleaf模板引擎

作者:嗨皮汪小成

#头条创作挑战赛#

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子工程,然后创建包、项目启动类等,如果有不清楚创建子工程步骤的同学,可以看笔者汪小成的上一篇博文《Spring Boot | 手动创建一个Spring Boot入门示例项目》。这里不再赘述。

集成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可用配置。

Spring Boot | 集成Thymeleaf模板引擎

配置示例及说明:

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

继续阅读