springboot入門_thymeleaf

時間 2019-11-13

標籤 springboot 入門 thymeleaf 欄目 Spring 简体版

原文原文鏈接

在以前的web開發中，視圖層咱們多數時間都使用的是jsp，可是在使用springboot時，已經不推薦(不推薦但依然能夠使用)jsp，而是使用模板引擎，好比thymeleaf、freemarker、velocity等，本文記錄在springboot中使用thymeleaf。html

建立一個springboot項目，並引入web和thymeleaf的依賴，以下：git

 1 <!--web依賴-->
 2 <dependency>
 3     <groupId>org.springframework.boot</groupId>
 4     <artifactId>spring-boot-starter-web</artifactId>
 5 </dependency>
 6         
 7 <!--thymeleaf依賴-->
 8 <dependency>
 9     <groupId>org.springframework.boot</groupId>
10     <artifactId>spring-boot-starter-thymeleaf</artifactId>
11 </dependency>

建立一個視圖層頁面，thymeleaf默認的視圖路徑爲classpath:/templates/，因此咱們在resources路徑下建立目錄templates，並在templates下建立頁面hello.html，代碼：github

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
 3 <head>
 4 <meta charset="UTF-8" >
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8 <span th:text="${str}">thymeleaf</span>
 9 </body>
10 </html>

建立一個控制器，並寫上對應的請求方法，訪問視圖頁面，代碼以下：web

 1 @Controller
 2 public class ThymeleafController {
 3     
 4     @GetMapping("/hello")
 5     public String hello(Model model) {
 6         model.addAttribute("str", "hello thymeleaf!");
 7         return "hello";
 8     }
 9     
10 }

啓動項目，訪問http://localhost:8080/hello 瀏覽器中輸出spring

到此說明thymeleaf已經成功和spring集成。瀏覽器

咱們在加一個方法，簡單的使用thymeleaf接收傳遞的參數。方法：springboot

@GetMapping("/welcome")
    public String welcome(Model model) {
        //傳遞字符串
        model.addAttribute("str", "world");
        //傳遞對象
        Book book = new Book("springboot", 12.3);
        model.addAttribute("book", book);
        //傳遞集合對象
        List<Book> list = new ArrayList<Book>();
        Book book1 = new Book("book1", 11.1);
        list.add(book1);
        Book book2 = new Book("book2", 22.2);
        list.add(book2);
        Book book3 = new Book("book3", 33.3);
        list.add(book3);
        model.addAttribute("list", list);
        
        model.addAttribute("id", 5);
        
        String htmlStr = "<h1>文本替換</h1>";
        model.addAttribute("htmlStr", htmlStr);
        
        Date currentDate = new Date();
        model.addAttribute("currentDate", currentDate);
        
        return "welcome";
    }

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
 3 <head>
 4 <meta charset="UTF-8" >
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8 thymeleaf 簡單用法!<br/>
 9 <hr>
10 集合遍歷 th:each：
11 <table>
12     <tr>
13         <td>書名</td>
14         <td>價格</td>
15     </tr>
16     <tr th:each="book:${list}">
17         <td th:text="${book.name}">書名</td>
18         <td th:text="${book.money}">價格</td>
19     </tr>
20 </table>
21 動態ID th:id：<input type="text" th:id="'id'+${id}"><br/>
22 屬性設置值 th:value：<input type="text" th:value="${str}"><br/>
23 文本替換值 th:text：<span th:text="${str}">文本值替換</span><br/>
24 html文本替換 th:utext:<p th:utext="${htmlStr}">文本值替換</p>
25 設置樣式：th:style<input type="text" th:style="'background-color:#FF0000;'"><br/>
26 點擊事件 th:onclick：<input type="button" th:onclick="'alert(1)'" th:value="按鈕"/><br/>
27 連接 th:href：<a th:href="@{/login1}" th:text="登陸1"></a> &nbsp;&nbsp;<a th:href="@{/login2}">登陸2</a><br/>
28 判斷 th:if(知足時纔會顯示)：<a th:if="${id} > 5">大於</a> &nbsp;&nbsp; <a th:if="${id} < 5">小於</a>&nbsp;&nbsp; <a th:if="${id} == 5">等於</a><br/>
29 表單action th:action:
30 <form action="/login.html" th:action="@{/login}"></form><br/>
31 下拉框選中 th:selected:
32 <select>
33     <option th:selected="${id} == 1">第一</option>
34     <option th:selected="${id} == 2">第二</option>
35     <option th:selected="${id} == 3">第三</option>
36     <option th:selected="${id} == 4">第四</option>
37     <option th:selected="${id} == 5">第五</option>
38 </select><br/>
39 當前時間：<span th:text="${{currentDate}}">當前時間</span><br/>
40 <span th:text="${#dates.format(currentDate,'yyyy-MM-dd HH:mm:ss')}">當前時間</span><br/>
41 計算：<input type="text" th:value="${id}+1"><br/>
42 </body>
43 </html>