Spring Thymeleaf 教程 - 《ZetCode 中文系列教程》

Thymeleaf
Spring Thymeleaf 示例

原文： http://zetcode.com/spring/thymeleaf/

Spring Thymeleaf 教程展示了如何在 Spring 应用中使用 Thymeleaf 模板引擎。

Spring 是用于创建企业应用的流行 Java 应用框架。

Thymeleaf

Thymeleaf 是适用于 Web 和独立环境的服务器端 Java 模板引擎。它提供了完整的 Spring Framework 集成。

Spring Thymeleaf 示例

以下应用使用 Thymeleaf 生成视图。

pom.xml
src
├───main
│   ├───java
│   │   └───com
│   │       └───zetcode
│   │           ├───config
│   │           │       MyWebInitializer.java
│   │           │       WebConfig.java
│   │           ├───controller
│   │           │       MyController.java
│   │           └───service
│   │                   WordService.java
│   └───resources
│       │   logback.xml
│       └───templates
│               index.html
│               showWords.html
└───test
    └───java

这是项目结构。

pom.xml

<?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 
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.zetcode</groupId>
    <artifactId>springthymeleafex</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
            </plugin>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.14.v20181114</version>
            </plugin>
        </plugins>
    </build>
</project>

在pom.xml中，我们具有必要的依赖项。

resources/logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <logger name="org.springframework" level="ERROR"/>
    <logger name="com.zetcode" level="INFO"/>
    <appender name="consoleAppender" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <Pattern>%d{HH:mm:ss.SSS} %blue(%-5level) %magenta(%logger{36}) - %msg %n
            </Pattern>
        </encoder>
    </appender>
    <root>
        <level value="INFO" />
        <appender-ref ref="consoleAppender" />
    </root>
</configuration>

logback.xml是 Logback 日志库的配置文件。

com/zetcode/config/MyWebInitializer.java

package com.zetcode.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
@Configuration
public class MyWebInitializer extends
        AbstractAnnotationConfigDispatcherServletInitializer {
    @Override
    protected Class<?>[] getRootConfigClasses() {
        return null;
    }
    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{WebConfig.class};
    }
    @Override
    protected String[] getServletMappings() {
        return new String[]{"/"};
    }
}

MyWebInitializer注册 Spring DispatcherServlet，它是 Spring Web 应用的前端控制器。

@Override
protected Class<?>[] getServletConfigClasses() {
    return new Class[]{WebConfig.class};
}

getServletConfigClasses()返回 Web 配置类。

com/zetcode/config/WebConfig.java

package com.zetcode.config;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"com.zetcode"})
public class WebConfig implements WebMvcConfigurer {
    @Autowired
    private ApplicationContext applicationContext;
    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        var templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("classpath:/templates/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }
    @Bean
    public SpringTemplateEngine templateEngine() {
        var templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setEnableSpringELCompiler(true);
        return templateEngine;
    }
    @Bean
    public ViewResolver viewResolver() {
        var resolver = new ThymeleafViewResolver();
        var registry = new ViewResolverRegistry(null, applicationContext);
        resolver.setTemplateEngine(templateEngine());
        registry.viewResolver(resolver);
        return resolver;
    }
}

WebConfig配置 Thymeleaf 模板引擎。我们将模板文件的位置设置为classpath上的templates目录。（resources在类路径上。）

com/zetcode/service/WordService.java

package com.zetcode.service;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class WordService {
    private final List<String> words = List.of("pen", "sky",
            "rock", "forest", "falcon", "eagle");
    public List<String> all() {
        return words;
    }
}

WordService返回几个字。

com/zetcode/controller/MyController.java

package com.zetcode.controller;
import com.zetcode.service.WordService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MyController {
    @GetMapping(value = "/")
    public String home() {
        return "index";
    }
    @GetMapping(value = "/words")
    public String showWords(Model model, WordService wordService) {
        var words = wordService.all();
        model.addAttribute("words", words);
        return "showWords";
    }
}

MyController提供请求路径和处理器方法之间的映射。我们有两个映射：home页面和showWords页面。

var words = wordService.all();
model.addAttribute("words", words);

我们使用wordService检索所有单词并将其放入模型中。该模型将传递给 Thymeleaf，后者将处理模板中的数据。

resources/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home page</title>
</head>
<body>
<p>
    <a href="words">Show words</a>
</p>
</body>
</html>

主页包含显示所有单词的锚点。

resources/templates/showWords.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Words</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>List of words</h2>
<ul th:each="word : ${words}">
    <li th:text="${word}">word</li>
</ul>
</body>
</html>

使用 Thymeleaf 的th:each指令，我们可以显示 HTML 列表中的所有单词。

$ mvn jetty:run

我们运行服务器并定位到localhost:8080以获取具有锚点的主页。

在本教程中，我们使用了Thymeleaf模板引擎。

您可能对这些相关教程也感兴趣： Spring Freemarker 教程， Spring @Configuration教程， Java 教程或列出所有 Spring 教程。