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/zh-hant/n/331940.html