Spring Boot整合Thymeleaf視圖層

目錄

• Spring Boot整合Thymeleaf
  • Spring Boot整合Thymeleaf 的項目步驟
• Thymeleaf 語法詳解

Spring Boot整合Thymeleaf

Spring Boot整合Thymeleaf（Spring Boot官方推薦的視圖層技術）

Thymeleaf特色：thymeleaf經過特定的語法對html的標記進行渲染。

Spring Boot整合Thymeleaf 的項目步驟

1. 建立Thymeleaf的項目（maven project的jar類型的spring boot項目）
   
2. 打開pom.xml文件，添加啓動器座標
   
   代碼：

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.4.RELEASE</version>
</parent>
    <dependencies>
        <!-- spring boot的web啓動器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf 啓動器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

3. 編寫Controller控制器
   

代碼：

@Controller
public class UserController {
	/**
	 * 返回一個String的返回值（恆跳轉），而且不是一個異步的ResponseBoby響應
	 * 框架會自動在templates目錄下查找與之對應的html頁面，
	 * 由Thymeleaf渲染出來。
	 * 前綴：classpath:/templates  後綴：.html
	 * 若是想要跳轉到控制器，必需要讓前綴和後綴失效，加上forward或redirect
	 */
	@RequestMapping("/show")
	public String  showInfo(Model model) {
		//存儲用戶名字符串，顯示到頁面
		model.addAttribute("username","翠花");
		//前綴：classpath:/templates  後綴：.html
		return "index";
	}
}

4. 編寫Thymeleaf視圖層頁面 (負責數據的展現)
   Thymeleaf頁面必需要放在src/main/resources/templates下
   templates：該目錄是安全.意味着目錄下的內容不容許外界直接訪問。
   
5. 啓動類
   
6. 瀏覽器輸入: localhost:8080/show
   

Thymeleaf 語法詳解

1. 變量輸出
   th:text :在頁面中輸出值
   th:value : 將值放入input標籤的value屬性中

用戶名：<span th:text="${username}"></span>
<hr/>
用戶名: <input th:value="${username}"/>

2. Thymeleaf內置對象 （內置對象必定用#）
   1：字符串操做 strings
   strings.isEmpty() : 判斷字符串是否爲空。True,false
   strings.startsWith() : 判斷字符串是否已什麼開頭。True,false
   strings.endsWith() : 判斷字符串是否已什麼結尾。True,false
   strings.length() : 返回字符串的長度
   strings.indexOf() : 查找子字符串出現的位置
   strings.toUpperCase():轉大寫
   strings.tolowerCase():轉小寫
   Strings.substring() :截取子字符串

用戶名的長度：<span th:text="${#strings.length(username)}"></span>  
  <hr/>
  獲取用戶名的姓：<span th:text="${#strings.substring(username,0,1)}"></span>

2. 日期格式化處理 dates
   dates.format():默認以瀏覽器做爲格式化標籤
   dates.format(time,’yyyy-MM-dd hh:mm:ss ’): 按照自定義的格式進行轉換
   dates.year():獲取年
   dates.month():獲取月
   dates.day():獲取日

當前時間：<span th:text="${time}"></span>
 <hr/>
 格式化日期：<span th:text="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"></span>

3. 條件判斷
   1：th: if

controller：

model.addAttribute("sex", "男");

html：

您可能喜歡：<span th:if="${sex}=='男'">籃球,動漫</span>

4. th:switch
   th:case

5. 循環迭代遍歷

6. th:each

1：迭代遍歷list
		<table border="1" width="50%">
     <tr>
        <td>序號</td>
        <td>編號</td>
        <td>姓名</td>
        <td>年齡</td>
     </tr>
     <!--var:狀態變量  index ,count,first last size  even odd-->
     <tr th:each="user,var:${list}">
        <td th:text="${var.count}"></td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
     </tr>
 </table>

2：迭代遍歷map
...

5. 做用域的對象數據的獲取操做

//做用域  request，session  application 
request.setAttribute("req", "HttpServletRequest");
request.getSession().setAttribute("sess", "HttpSession");
request.getSession().getServletContext().setAttribute("app", "ServletContext");

<!--頁面部分-->
Request數據：<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
Session數據：<span th:text="${session.sess}"></span><br/>
Application數據：<span th:text="${application.app}"></span><br/>

6. Url表達式
   th:href
   th:src
   th:action
   1：表達式語法 @{}
   2: 路徑類型

   1. 絕對路徑

   2. 相對路徑

1：相對於當前項目的根目錄  /
      <a th:href=」@{/index}」></a>
2: 相對於服務器路徑的根目錄 ~
      <a th:href=」@{~/項目名/資源}」></a>

<!-- 鏈接 url表達式 -->
 <a href="http://www.baidu.com">百度一下</a>
 <a th:href="@{http://www.baidu.com}">百度一下</a>
 <a th:href="@{/show}">show</a>
 <hr/>
 <img src="images/3.jpg" />
 <img th:src="@{${img}}"  />