• 【SpringBoot】| Thymeleaf 模板引擎

    目录

    Thymeleaf 模板引擎

    1. 第一个例子

    2. 表达式

    ①标准变量表达式

    ②选择变量表达式（星号变量表达式）

    ③链接表达式（URL表达式）

    3. Thymeleaf的属性

    ①th:action

    ②th:method

    ③th:href

    ④th:src

    ⑤th:text

    ⑥th:style

    ⑦th:each （重点）

    ⑧条件判断 if-unless

    ⑨switch-case 判断语句

    ⑩th:inline内联

    内联 text

    内联javascript

    4. 字面量

    5.字符串连接（重要）

    6. 运算符

    7. Thymeleaf内置对象

    8. Thymeleaf内置工具类对象

    9.自定义模板（内容复用）

    模板语法

    插入模板和包含模板

    整个html页面作为模板插入 

    图书推荐：《巧用ChatGPT轻松玩转新媒体运营》

    Thymeleaf 模板引擎

            Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发。

            模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下 的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。

            Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境 下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从 后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体， Thymeleaf 要寄托在 HTML 标签下实现。

            Spring Boot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来 替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot 只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们 往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低 。

    Thymeleaf 的官方网站：Thymeleaf

    Thymeleaf 官方手册：Tutorial: Using Thymeleaf

    1. 第一个例子

    ①创建项目，引入web和thymeleaf依赖

    ②pom.xml主要依赖

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.7.15version>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.zlgroupId>
    12.     <artifactId>springboot-myredisartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>springboot-myredisname>
    15.     <description>springboot-myredisdescription>
    16.     <properties>
    17.         <java.version>1.8java.version>
    18.     properties>
    19.     <dependencies>
    20.         
    21.         <dependency>
    22.             <groupId>org.springframework.bootgroupId>
    23.             <artifactId>spring-boot-starter-thymeleafartifactId>
    24.         dependency>
    25.         
    26.         <dependency>
    27.             <groupId>org.springframework.bootgroupId>
    28.             <artifactId>spring-boot-starter-webartifactId>
    29.         dependency>
    30.  
    31.         <dependency>
    32.             <groupId>org.springframework.bootgroupId>
    33.             <artifactId>spring-boot-devtoolsartifactId>
    34.             <scope>runtimescope>
    35.             <optional>trueoptional>
    36.         dependency>
    37.         <dependency>
    38.             <groupId>org.springframework.bootgroupId>
    39.             <artifactId>spring-boot-configuration-processorartifactId>
    40.             <optional>trueoptional>
    41.         dependency>
    42.         <dependency>
    43.             <groupId>org.projectlombokgroupId>
    44.             <artifactId>lombokartifactId>
    45.             <optional>trueoptional>
    46.         dependency>
    47.         <dependency>
    48.             <groupId>org.springframework.bootgroupId>
    49.             <artifactId>spring-boot-starter-testartifactId>
    50.             <scope>testscope>
    51.         dependency>
    52.     dependencies>
    53.  
    54.     <build>
    55.         <plugins>
    56.             <plugin>
    57.                 <groupId>org.springframework.bootgroupId>
    58.                 <artifactId>spring-boot-maven-pluginartifactId>
    59.                 <configuration>
    60.                     <excludes>
    61.                         <exclude>
    62.                             <groupId>org.projectlombokgroupId>
    63.                             <artifactId>lombokartifactId>
    64.                         exclude>
    65.                     excludes>
    66.                 configuration>
    67.             plugin>
    68.         plugins>
    69.     build>
    70.  
    71. project>

    ③Controller编写存放数据

    1. package com.zl.controller;
    2.  
    3. import org.springframework.stereotype.Controller;
    4. import org.springframework.web.bind.annotation.GetMapping;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7.  
    8. @Controller
    9. public class HelloThymeleafController {
    10.     @GetMapping("/hello")
    11.     public String helloThymeleafController(HttpServletRequest request){
    12.         // 添加数据到request域当中，模板引擎可以从request域当中获取
    13.         request.setAttribute("data","第一个Thymeleaf数据");
    14.         // 返回到视图(html)
    15.         return "hello";
    16.     }
    17. }

    ④视图hello.html取出数据（放到templates中）

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    10. <h1 th:text="${data}">h1>想显示的数据
    11. body>
    12. html>

    ⑤进行访问

    模板引擎的常用配置

    思考：为什么controller返回一个字符串就可以直接找到templates下的对应html呢？这些和模板引擎的默认设置是有关的！

    application.properties配置

    注：在开发阶段只需要把cache设置为false即可，其它都是默认选项不需要修改！

    1. #开发阶段设置为 false ，上线后设置为 true，默认是true走缓存
    2. spring.thymeleaf.cache=false
    3. # 设置模版文件的路径，前缀，默认就是classpath:/templates/
    4. spring.thymeleaf.prefix=classpath:/templates/ 
    5. # 设置后缀,默认就是 .html
    6. spring.thymeleaf.suffix=.html
    7. #编码方式，默认就是UTF-8，所以中文不会乱码
    8. spring.thymeleaf.encoding=UTF-8
    9. #模板的类型，默认是HTML，模板是html文件
    10. spring.thymeleaf.mode=HTML

    2. 表达式

    表达式是在页面获取数据的一种 thymeleaf 语法。类似 ${key} 。

    ①标准变量表达式

    注意：th:text="${key}" 是 Thymeleaf 的一个属性，用于文本的显示。

    语法: ${key} 。

    说明：标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 EL 中的 ${} 相 同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。 也就是 request 作用域中的数据。

    准备Student数据

    1. package com.zl.pojo;
    2.  
    3. public class Student {
    4.     private String name;
    5.     private Integer age;
    6.  
    7.     public Student(String name, Integer age) {
    8.         this.name = name;
    9.         this.age = age;
    10.     }
    11.  
    12.     public Student() {
    13.     }
    14.  
    15.     @Override
    16.     public String toString() {
    17.         return "Student{" +
    18.                 "name='" + name + '\'' +
    19.                 ", age=" + age +
    20.                 '}';
    21.     }
    22.  
    23.     public String getName() {
    24.         return name;
    25.     }
    26.  
    27.     public void setName(String name) {
    28.         this.name = name;
    29.     }
    30.  
    31.     public Integer getAge() {
    32.         return age;
    33.     }
    34.  
    35.     public void setAge(Integer age) {
    36.         this.age = age;
    37.     }
    38. }

    欢迎页面index.html放入静态资源static下，不走模板引擎

    1. html>
    2. <html lang="en" >
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <a href="thymeleaf/expression1">标准变量表达式a>
    9. body>
    10. html>

    application.properties

    1. #配置端口号
    2. server.port=8082
    3. #开发阶段设置为 false ，上线后设置为 true，默认是true走缓存
    4. spring.thymeleaf.cache=false

    controller存放数据，跳转到expression1

    1. package com.zl.controller;
    2.  
    3. import com.zl.pojo.Student;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.ui.Model;
    6. import org.springframework.web.bind.annotation.GetMapping;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8.  
    9. @Controller
    10. @RequestMapping("/thymeleaf")
    11. public class ThymeleafExpressionController {
    12.     @GetMapping("/expression1")
    13.     public String expression1(Model model){
    14.         // 添加数据
    15.         model.addAttribute("student",new Student("Jack",18));   
    16.         // 跳转到视图 
    17.         return "expression1";
    18.     }
    19. }

    expression1.html接收数据

    注：${student.getName()}也能获取到值，底层实际上就是调用对应的Get方法！

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>expression1title>
    6. head>
    7. <body>
    8. <h1 th:text="${student.name}">h1>
    9. <h1 th:text="${student.age}">h1>
    11. <h1 th:text="${student.getAge()}">h1> 
    12. body>
    13. html>

    执行结果：

    ②选择变量表达式（星号变量表达式）

    语法：*{key} 。

    说明：不能单独使用，需要配和 th:object 一起使用。选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，选择表达式首先使用 th:object 来绑定后台传来的对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性。可以简化上述的开发。

    欢迎页面

    1. html>
    2. <html lang="en" >
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <a href="thymeleaf/expression1">标准变量表达式a>
    9. <a href="thymeleaf/expression2">选择变量表达式a>
    10. body>
    11. html>

    controller存放数据

    1.     @GetMapping("/expression2")
    2.     public String expression2(Model model){
    3.         model.addAttribute("student",new Student("Jack",18));
    4.         return "expression2";
    5.     }

    expression2.html取出数据：使用th:object +*{key}简化上述的开发

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>expression2title>
    6. head>
    7. <body>
    8.     
    9.     <div th:object="${student}">
    10.         
    11.         <p th:text="*{name}">p>
    12.         <p th:text="*{age}">p>
    13.     div>
    14.     
    15.     <p th:text="*{student.name}">p>
    16. body>
    17. html>

    ③链接表达式（URL表达式）

    语法：@{链接 url} 。

    说明：主要用于链接、地址的展示，可用于