Spring Thymeleaf 教程 · ZetCode 中文系列教程

# Spring Thymeleaf 教程 > 原文： [http://zetcode.com/spring/thymeleaf/](http://zetcode.com/spring/thymeleaf/) Spring Thymeleaf 教程展示了如何在 Spring 应用中使用 Thymeleaf 模板引擎。 Spring 是用于创建企业应用的流行 Java 应用框架。 ## Thymeleaf Thymeleaf 是适用于 Web 和独立环境的服务器端 Java 模板引擎。它提供了完整的 Spring Framework 集成。 ## Spring Thymeleaf 示例以下应用使用 Thymeleaf 生成视图。 ```java 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` ```java <?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` ```java <?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` ```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 应用的前端控制器。 ```java @Override protected Class<?>[] getServletConfigClasses() { return new Class[]{WebConfig.class}; } ``` `getServletConfigClasses()`返回 Web 配置类。 `com/zetcode/config/WebConfig.java` ```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` ```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` ```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`页面。 ```java var words = wordService.all(); model.addAttribute("words", words); ``` 我们使用`wordService`检索所有单词并将其放入模型中。该模型将传递给 Thymeleaf，后者将处理模板中的数据。 `resources/templates/index.html` ```java <!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` ```java <!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 列表中的所有单词。 ```java $ mvn jetty:run ``` 我们运行服务器并定位到`localhost:8080`以获取具有锚点的主页。在本教程中，我们使用了`Thymeleaf`模板引擎。您可能对这些相关教程也感兴趣： [Spring Freemarker 教程](/spring/freemarker/)， [Spring `@Configuration`教程](/spring/configuration/)， [Java 教程](/lang/java/)或列出[所有 Spring 教程](/all/#spring)。