Spring Boot2 实战系列之使用Thymeleaf模板引擎

前言

Thymeleaf 是一个 xml, xhtml,html5 的模板引擎，Spring Boot 官方推荐使用 Thymeleaf 引擎，因为它对 Spring MVC 提供了完美的支持。我们知道以前的 Spring MVC web应用在视图层常使用 JSP，但 springboot 使用的是内嵌的 servlet 容器，而内嵌的 Tomcat 和 Jetty 不支持以 jar 形式运行 JPS，Undertow也不支持 JPS，所以在SpringBoot 中我们完全可以使用 Thymeleaf来代替 JSP。

在 Spring Boot 中使用 Thymeleaf 非常方便，它已经通过 org.springframework.boot.autoconfigure.thymeleaf 包对 Thymeleaf 进行了自动配置, 如下图所示

我们只需要引入它的依赖即可

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

下面通过一个例子来说明 Thymeleaf 的一些用法，更多详情请看 Thymeleaf 官网：https://www.thymeleaf.org/

创建项目

项目结构图如下：

pom 依赖文件如下：

<?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.5.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>top.yekongle</groupId>
	<artifactId>springboot-thymeleaf-sample</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springboot-thymeleaf-sample</name>
	<description>Thymeleaf sample for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</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-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</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>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

代码编写

application.properties, 全局配置文件

# Thymeleaf 配置
# 模板文件位置
spring.thymeleaf.prefix=classpath:/templates/
# 文件后缀
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
# 编码
spring.thymeleaf.encoding=UTF-8
# 关闭缓存
spring.thymeleaf.cache=false

Product.java, 商品属性

package top.yekongle.thymeleaf.entity;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Product {
    private String category;
    private String name;
    private double price;
}

PageController.java, 将商品信息返回给页面

package top.yekongle.thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import top.yekongle.thymeleaf.entity.Product;

import java.util.ArrayList;
import java.util.List;

@Controller
public class PageController {

    @GetMapping
    public String index(Model model) {
        List<Product> productList = this.getProductList();
        model.addAttribute("products", productList);
        model.addAttribute("title", "商品列表");
        return "index";
    }

    List<Product> getProductList() {
        List<Product> productList = new ArrayList<>();
        Product product1 = new Product("手机", "小米10", 3499);
        Product product2 = new Product("手机", "华为P40", 4188);
        Product product3 = new Product("手机", "一加8", 3999);
        productList.add(product1);
        productList.add(product2);
        productList.add(product3);

        return productList;
    }
}

index.html，商品展示页面

<html xmlns:th="http://www.thymeleaf.org"><!-- Thymeleaf的命名空间，将静态页面转换为动态的视图 -->
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
</head>
<body>

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <!-- 需要动态处理的元素使用 th: 为前缀，通过 ${} 访问 model中的属性-->
            <h3 class="panel-title" th:text="${title}">title</h3>
        </div>
        <div class="panel-body">
            <!--数据判断-->
            <div th:if="${not #lists.isEmpty(products)}">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>Category</th>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                    </thead>
                    <tbody>
                        <!--数据迭代-->
                        <tr th:each="product: ${products}">
                            <td th:texts="${product.category}">Category</td>
                            <td th:text="${product.name}">name</td>
                            <td th:text="${#numbers.formatDecimal(product.price, 1, 2)}">0.99</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script th:src="@{jquery.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

<!--在 javascript 中访问model属性, 使用 [[${}]] 来获得实际的值-->
<script th:inline="javascript">
  	var title = [[${title}]];
  	console.log(title);
</script>

</body>
</html>

运行演示

启动项目
访问 http://localhost:8080/, 商品信息都展示了出来，控制台也打印出了属性 title

项目已上传至 Github: https://github.com/yekongle/springboot-code-samples/tree/master/springboot-thymeleaf-sample , 希望对小伙伴们有帮助哦。