【Spring Boot】Sping Boot 模板引擎 thymeleaf 的使用以及 layout 的使用例子

怼烎@ 2022-04-03 08:24 211阅读 0赞

### 引言 ###

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。也是Spring Boot官方推荐的模板引擎

### 引用 依赖 ###

<parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.1.1.RELEASE</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <artifactId>demo-themleaf</artifactId>
    
        <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>nz.net.ultraq.thymeleaf</groupId>
                <artifactId>thymeleaf-layout-dialect</artifactId>
                <version>2.3.0</version>
            </dependency>
    
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>

> 在Spring Boot 2.0 以上版本，一定要引用 thymeleaf-layout-dialect ！！！，不然你得layout就无法使用

### application.yml ###

spring:
      thymeleaf:
        cache: false
        mode: LEGACYHTML5
        check-template: true

> 默认配置下，thymeleaf对.html的内容要求很严格，比如 < meta charset=“UTF-8” />，如果少最后的标签封闭符号/，就会报错而转到错误页。

### Controller ###

package top.yuyufeng.demo.action;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.Date;
    
    /**
     * @author yuyufeng
     * @date 2018/12/21.
     */
    @Controller
    public class IndexController {
    
        @RequestMapping(value = "index")
        private String index(Model model) {
            model.addAttribute("myDate", new Date());
            return "index";
        }
    
        @RequestMapping(value = "hello")
        private String hello(Model model) {
            model.addAttribute("userName","用户1" );
            return "hello";
        }
    
    }

### Application ###

package top.yuyufeng.demo;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    /**
     * @author yuyufeng
     * @date 2018/12/21.
     */
    @SpringBootApplication
    public class Application {
        public static void main(String[] args) {
            SpringApplication.run(Application.class, args);
        }
    }

### layout页面 ###

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <title>layout</title>
    </head>
    <body>
    <h1>--------------------这是layout内容------------------------</h1>
    <div layout:fragment="content"></div>
    <h1>---------------------这是layout内容-----------------------</h1>
    </body>
    </html>

### 首页 ###

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
          layout:decorator="include/layout">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
    <div layout:fragment="content">
        <h1>这是首页内容</h1>
        <p>时间：<b th:text="${myDate}"></b></p>
        <p><b  th:text="${'时间：'+#dates.format(myDate, 'yyyy年MM月dd日 HH:mm:ss')}"></b></p>
    </div>
    </body>
    </html>

### 文件目录结构与页面效果展示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70 1]

### themleaf 的常用标签参考 ###

待整理  
[https://www.thymeleaf.org/][https_www.thymeleaf.org]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70]: /images/20220403/933ebea60b83479cacb69f8572994eb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODYwNjUz_size_16_color_FFFFFF_t_70 1]: /images/20220403/13deb7365f3c4d20826f8ee0db76dc04.png
[https_www.thymeleaf.org]: https://www.thymeleaf.org/