Thymeleaf 模板引擎

  • Thymeleaf 是一个服务器端 Java 模板引擎，适用于 Web 和独立环境， 能够处理 HTML，XML，JavaScript，CSS 甚至纯文本等。
  • 常见的模板引擎：Thymeleaf，FreeMarker，Velocity，JSP等。
  • Thymeleaf 是新一代的模板引擎，Spring 4.0 推荐的前端模版引擎（完 全取代 JSP）。
  • Thymeleaf 从一开始就设计了Web标准，特别是 HTML5。

模板引擎工作原理

模板引擎可以让用户界面与业务数据分离


Thymeleaf 目标

  • Thymeleaf 主要目标是为开发工作流程带来优雅的自然模板：HTML可 以在浏览器中正确显示，并且可以作为静态原型工作，从而可以在开发 团队中加强协作

自然模板示例：一个table模板

<table>
	 <thead>
		  <tr>
			   <th>商品名称</th>
			   <th>商品价格</th>
		   </tr> 
	 </thead>
	 <tbody>
		  <tr th:each="prod: ${allProducts}"> 
			  <td th:text="${prod.name}">Oranges</td> 
			  <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td> 
		  </tr> 
	 </tbody> 
</table>

Hello Thymeleaf

  • 新建带Thymeleaf引擎的Spring Boot项目：demo2
  • 在 application.properties 添加相关配置 
#关闭缓存 
spring.thymeleaf.cache = false

#设置thymeleaf页面的存储路径 
spring.thymeleaf.prefix=classpath:/templates/ 
#设置thymeleaf页面的后缀 
spring.thymeleaf.suffix=.html 
#设置thymeleaf页面的编码 
spring.thymeleaf.mode=HTML5 
spring.thymeleaf.encoding=UTF-8
  • 添加实体模型：新建 bean 包，并在包中新建 Student 类
  • student.java 
package com.example.demo.bean;

public class Student {
   
    private Integer id;  //学号
    private String name;  //姓名

    public Student() {
   
    }

    public Student(Integer id, String name) {
   
        this.id = id;
        this.name = name;
    }

    public Integer getId() {
   
        return id;
    }

    public void setId(Integer id) {
   
        this.id = id;
    }

    public String getName() {
   
        return name;
    }

    public void setName(String name) {
   
        this.name = name;
    }
}
  • 添加控制器：TestController 
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
   
    @RequestMapping("/th")
    public String index(Model model) {
   
        String msg = "hello thymeleaf!";
        model.addAttribute("msg", msg);
        return "th/index";
    }
}
  • 添加视图：index.html

th:text：文本标签，用于进行文本替换 ${ 属性变量名 }：称为 变量表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="${msg}">hello</p>
</body>
</html>
  • 运行结果：启动服务器