Thymeleaf 入門_ZenDei技術網路在線

Thymeleaf是一個表現層的模板引擎，一般被使用在Web環境中。 Thymeleaf支持多種模板類型：HTML、XML、JavaScript、CSS和普通文本等，預設提供了6種模板處理模式：HTML、XML、TEXT、JAVASCRIPT 、CSS和RAW。最後一個RAW表示不會對模板進行處理... ...

Thymeleaf是一個表現層的模板引擎，一般被使用在Web環境中。
Thymeleaf支持多種模板類型：HTML、XML、JavaScript、CSS和普通文本等，預設提供了6種模板處理模式：HTML、XML、TEXT、JAVASCRIPT 、CSS和RAW。最後一個RAW表示不會對模板進行處理。

開發環境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8

新建一個名稱為demo的Spring Boot項目。
pom.xml加入Thymeleaf依賴：

        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>

一、處理HTML

新建一個類HtmlTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;

public class HtmlTest {
    public static void main(String[] args){
        TemplateEngine templateEngine = new TemplateEngine();
        Context ctx = new Context();
        String html = "<input type='' th:value='lc' />";
        String result = templateEngine.process(html, ctx);
        System.out.println(result);
    }
}

右鍵Run 'XmlTest.main()'，控制台輸出：

<input type='' value='lc' />

根據輸出可知，TemplateEngine類會將含有Thymeleaf邏輯的HTML代碼轉換成純HTML輸出，這就是模板引擎的作用。

二、更換模板解析器

預設情況下，模板處理模式為HTML，可以設置不同的解析器。
新建一個類XmlTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.StringTemplateResolver;

public class XmlTest {
    public static void main(String[] args){
        TemplateEngine templateEngine = new TemplateEngine();
        //新建模板解析器
        StringTemplateResolver resolver = new StringTemplateResolver();
        //設置模板模式為XML
        resolver.setTemplateMode(TemplateMode.XML);
        //將解析器設置到引擎實例中
        templateEngine.setTemplateResolver(resolver);
        Context ctx = new Context();
        String xml = "<bean id=\"bean1\" th:attr='class=com.example.demo'></bean>";
        String result = templateEngine.process(xml, ctx);
        System.out.println(result);
    }
}

右鍵Run 'HtmlTest.main()'，控制台輸出：

<bean id="bean1" class="com.example.demo"></bean>

三、處理資源文件

可以為模板引擎設置資源解析器，讓它去找文件進行處理。

1、在src/main/resources下新建文件index.html，只保留下麵一行代碼

<input type='' th:value='lc' />

2、新建一個類 ClassLoaderTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

public class ClassLoaderTest {
    public static void main(String[] args) {
        TemplateEngine templateEngine = new TemplateEngine();
        //創建解析器
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        //將解析器設置到引擎實例中
        templateEngine.setTemplateResolver(resolver);
        //處理classpath下的index.html
        String result = templateEngine.process("index.html", new Context());
        System.out.println(result);
    }
}

右鍵Run 'ClassLoaderTest.main()'，控制台輸出：

<input type='' value='lc' />

四、變數處理

可以通過Context實例設置變數值。

1、在src/main/resources下新建文件var.html

<input type='' th:value='${userName}' />

2、新建一個類 VarTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

public class VarTest {
    public static void main(String[] args) {
        TemplateEngine templateEngine = new TemplateEngine();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        templateEngine.setTemplateResolver(resolver);
        Context ctx = new Context();
        ctx.setVariable("userName", "lc");
        String result = templateEngine.process("var.html", ctx);
        System.out.println(result);
    }
}

右鍵Run 'VarTest.main()'，控制台輸出：

<input type='' value='lc' />

五、遍歷集合

1、在src/main/resources下新建文件iteration.html

<table>
    <tr th:each="data : ${datas}">
        <td th:text="${data}">姓名</td>
    </tr>
</table>

2、新建一個類 IterationTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

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

public class IterationTest {
    public static void main(String[] args) {
        TemplateEngine templateEngine = new TemplateEngine();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        templateEngine.setTemplateResolver(resolver);
        List<String> datas = new ArrayList<String>();
        datas.add("張三");
        datas.add("李四");
        Context ctx = new Context();
        ctx.setVariable("datas", datas);
        ctx.setVariable("username", "lc");
        String result = templateEngine.process("iteration.html", ctx);
        System.out.println(result);
    }
}

右鍵Run 'IterationTest.main()'，控制台輸出：

<table>
    <tr>
        <td>張三</td>
    </tr>
    <tr>
        <td>李四</td>
    </tr>
</table>

六、設置首碼與尾碼

1、在src/main/resources/templates下新建文件index.html

<input type='' th:value='lc' />

2、新建一個類 PrefixSuffixTest.java

package com.example.demo;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

public class PrefixSuffixTest {
    public static void main(String[] args) {
        TemplateEngine templateEngine = new TemplateEngine();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        resolver.setPrefix("/templates/");
        resolver.setSuffix(".html");
        templateEngine.setTemplateResolver(resolver);
        String result = templateEngine.process("index", new Context());
        System.out.println(result);
    }
}

右鍵Run 'PrefixSuffixTest.main()'，控制台輸出：

<input type='' value='lc' />

七、Spring Boot中整合Thymeleaf

1、pom.xml加入Thymeleaf依賴：

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

2、application.yml
備註，下麵配置的值都為預設值，實際上可不配置。

spring:
  thymeleaf:
    mode: HTML
    prefix: classpath:/templates/
    suffix: .html

3、在src/main/resources/templates下新建文件test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type='' th:value='${userName}' />
</body>
</html>

4、新建一個控制器類 DemoController.java

package com.example.demo;

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

@Controller
public class DemoController {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("userName", "lc");
        return "test";
    }
}

運行後，瀏覽器訪問http://localhost:8080/test
可看到輸出結果。