Thymeleaf菜鸟教程详解

随着Java Web应用程序的普及，前端开发越来越重要。Thymeleaf是一种前端模板引擎，可以将数据与 HTML 的表现层进行绑定，同时保持代码的优雅和清晰。

一、优点

1、模板自然（Natural Template）

Thymeleaf 模板引擎通过自然模板实现数据绑定，可以避免JSP中各种Java代码的情况，写起来更加舒适自然，更易读更易维护。

 <html>
     <body>
         <h1 th:text="${title}">页面标题</h1>
         <p th:text="${content}">内容区域内容区域内容区域</p>
     </body>
 </html>

2、支持HTML5标准

Thymeleaf 在设计时考虑了 HTML 的语法规则，所以在开发过程中，使用 Thymeleaf 不用担心 XHTL 的语法问题。

3、开箱即用

使用 Spring Boot 框架和 Thymeleaf 模板，可以轻松快速地启动项目，您会发现您无需花费大量时间和精力进行项目的构建。

二、常用方法

1、文本输出

 <span th:text="${name}">[name]</span>
 <p>[[${name}]]</p>

2、判断语句

 <span th:if="${name != null}">[[${name}]]</span>
 <span th:unless="${name == null}">[[${name}]]</span>
 <ul>
     <li th:each="product : ${products}">
         <p th:text="${product.name}">商品名称</p>
         <p th:text="${product.price}">商品价格</p>
     </li>
 </ul>

3、链接处理和表单处理

 <a th:href="@{/home}">home</a>
 <form th:action="@{/login}" method="post">
     <input type="text" name="username" id="username" />
     <input type="password" name="password" id="password" />
     <input type="submit" value="Submit" />
 </form>

三、Thymeleaf模板

Thymeleaf 模板引擎通过自然模板实现数据绑定，下面是一个简单的模板。

 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
     <head>
         <meta charset="UTF-8" />
         <title th:text="${title}">页面标题</title>
     </head>
     <body>
         <div th:replace="fragments/header :: header" />
         <div th:replace="fragments/footer :: footer" />
     </body>
 </html>

在代码中使用

 <div th:insert="fragments/header :: header"></div>
 <div th:replace="fragments/footer :: footer"></div>

四、SpringMVC + Thymeleaf框架项目

1、配置Thymeleaf模板引擎，并设置视图解析器

 @Autowired
 private WebApplicationContext webApplicationContext;

 @Bean
 public ITemplateResolver templateResolver() {
     SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
     resolver.setApplicationContext(webApplicationContext);
     resolver.setCharacterEncoding("UTF-8");
     resolver.setTemplateMode(TemplateMode.HTML);
     resolver.setCacheable(false);
     return resolver;
 }

 @Bean
 public SpringTemplateEngine templateEngine() {
     SpringTemplateEngine engine = new SpringTemplateEngine();
     engine.setTemplateResolver(templateResolver());
     return engine;
 }

 @Bean
 public ViewResolver viewResolver() {
     ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
     viewResolver.setTemplateEngine(templateEngine());
     viewResolver.setCharacterEncoding("UTF-8");
     viewResolver.setOrder(0);
     viewResolver.setViewNames(new String[] {"*"});
     viewResolver.setCache(false);
     viewResolver.setRedirectContextRelative(false);
     return viewResolver;
 }

2、实体类与控制器

 public class User {
     private Integer id;
     private String name;
     private String password;       
     // getter setter
 }

@Controller
public class UserController {
    @RequestMapping("/user")
    public ModelAndView getUser(){
        ModelAndView modelAndView = new ModelAndView();
        List users = new ArrayList();
        modelAndView.addObject("userList",users);
        modelAndView.setViewName("user");
        return modelAndView;
    }
}

3、模板

 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
     <head>
         <title>Spring MVC + Thymeleaf</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     </head>
     <body>
         <!--表格-->
         <table>
             <tr th:each="user : ${userList}">
                 <td th:text="${user.id}">id</td>
                 <td th:text="${user.name}">name</td>
                 <td th:text="${user.password}">password</td>
             </tr>
         </table>
     </body>
 </html>

五、总结

本篇文章讲解了Thymeleaf的基本使用方式、优点、常用方法以及实战操作，在开发中可以根据实际需求加深对Thymeleaf的使用。Thymeleaf让前端和后端工作能够更加协调，提高了前后端协同开发的效率。

原创文章，作者：QBBEQ，如若转载，请注明出处：https://www.506064.com/n/331940.html