SpringBoot學習筆記(7)——SpringBoot整合Thymeleaf

一、創建Thymeleaf的入門項目

1. 創建項目

2. 修改pom文件，添加座標

  <dependencies>
  	<!-- springBoot的啓動器 -->
    <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. 創建存放視圖的目錄

目錄位置：src/main/resources/templates
templates：該目錄是安全的，意味着該目錄下的內容是不允許外界直接訪問的。

二、Thymeleaf的基本使用

1. Thymeleaf特點

Thymeleaf是通過其特定語法對html的標記做渲染

2. 編寫Controller

@Controller
public class DemoController {
	@RequestMapping("/show")
	public String showInfo(Model model){
		model.addAttribute("msg", "Thymeleaf的第一個案例");
		return "index";
	}
}

3. 創建視圖(.html)

src/main/resources/templates/index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf入門</title>
</head>
<body>
	<span th:text="Hello"></span>
	<hr/>
	<span th:text="${msg}"></span>
</body>
</html>

4. 編寫啓動類

@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

5. 運行

運行App.java啓動SpringBoot，在瀏覽器端訪問localhost:8080/show

三、Thymeleaf語法詳解

1. 變量輸出與字符串操作

1.1 th:text

th:text
在頁面中輸出值

1.2 th:value

th:value
可以將一個值放入到input標籤的value中

eg:

<input type="text" name="userName" th:value="${msg}"/>

1.3 字符串操作

Thymeleaf內置對象
注意語法：
1.調用內置對象一定要用#
2.大部分的內置對象都以s結尾 strings、numbers、dates

${#strings.isEmpty(key)}
判斷字符串是否爲空，如果爲空返回true，否則返回false

${#strings.contains(msg,‘T’)}
判斷字符串是否包含指定的子串，如果包含返回true，否則返回false

${#strings.startsWith(msg,‘a’)}
判斷當前字符串是否以子串開頭，如果是返回true，否則返回false

${#strings.endsWith(msg,‘a’)}
判斷當前字符串是否以子串結尾，如果是返回true，否則返回false

${#strings.length(msg)}
返回字符串的長度

${#strings.indexOf(msg,‘h’)}
查找子串的位置，並返回該子串的下標，如果沒找到則返回-1

${#strings.substring(msg,13)} 或 ${#strings.substring(msg,13,15)}
截取子串，用戶與jdk String類下SubString方法相同

${#strings.toUpperCase(msg)} ${#strings.toLowerCase(msg)}
字符串轉大小寫。

2. 日期格式化處理

${#dates.format(key)}
格式化日期，默認的以瀏覽器默認語言爲格式化標準

${#dates.format(key,‘yyy/MM/dd’)}
按照自定義的格式做日期轉換

${#dates.year(key)}
取年

${#dates.month(key)}
取月

${#dates.day(key)}
取日

3. 條件判斷

3.1 th:if

	<span th:if="${sex} == '男'">
		性別：男
	</span>
	<span th:if="${sex} == '女'">
		性別：女
	</span>

3.2 th:switch

	<div th:switch="${id}">
		<span th:case="1">ID爲1</span>
		<span th:case="2">ID爲2</span>
		<span th:case="3">ID爲3</span>
	</div>

4. 迭代遍歷

4.1 th:each

@RequestMapping("/show3")
	public String showInfo3(Model model){
		List<Users> list = new ArrayList<>();
		list.add(new Users(1,"張三",20));
		list.add(new Users(2,"李四",22));
		list.add(new Users(3,"王五",24));
		model.addAttribute("list", list);
		return "index3";
	}

	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="u : ${list}">
			<td th:text="${u.userid}"></td>
			<td th:text="${u.username}"></td>
			<td th:text="${u.userage}"></td>
		</tr>
	</table>

4.2 th:each 狀態變量

	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
			<th>Index</th>
			<th>Count</th>
			<th>Size</th>
			<th>Even</th>
			<th>Odd</th>
			<th>First</th>
			<th>lase</th>
		</tr>
		<tr th:each="u,var : ${list}">
			<td th:text="${u.userid}"></td>
			<td th:text="${u.username}"></td>
			<td th:text="${u.userage}"></td>
			<td th:text="${var.index}"></td>
			<td th:text="${var.count}"></td>
			<td th:text="${var.size}"></td>
			<td th:text="${var.even}"></td>
			<td th:text="${var.odd}"></td>
			<td th:text="${var.first}"></td>
			<td th:text="${var.last}"></td>
		</tr>
	</table>

狀態變量屬性：
1.index：當前迭代器的索引從0開始
2.count：當前迭代對象的計數從1開始
3.size：被迭代對象的長度
4.even/odd：布爾值，當前循環是否是偶數/奇數從0開始
5.first：布爾值，當前循環的是否是第一條，如果是返回true否則返回false
6.last：布爾值，當前循環的是否是最後一條，如果是則返回true否則返回false

4.3 th:each迭代Map

@RequestMapping("/show4")
	public String showInfo4(Model model){
		Map<String, Users> map = new HashMap<>();
		map.put("u1", new Users(1,"張三",20));
		map.put("u2", new Users(2,"李四",22));
		map.put("u3", new Users(3,"王五",24));
		model.addAttribute("map", map);
		return "index4";
	}

	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="maps : ${map}">
			<td th:text="${maps}"></td>
		</tr>
	</table>
	<th/>
	<table border="1">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr th:each="maps : ${map}">
			<td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
			<td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
			<td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
		</tr>
	</table>

5. 域對象操作

5.1 HttpServletRequest

request.setAttribute("req", "HttpServletRequest");

Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>

5.2 HttpSession

request.getSession().setAttribute("sess", "HttpSession");

Session:<span th:text="${session.sess}"></span><br/>

5.3 ServletContext

request.getSession().getServletContext().setAttribute("app", "Application");

Application:<span th:text="${application.app}"></span>

在DemoController.java中，

	@RequestMapping("/show5")
	public String showInfo5(HttpServletRequest request, Model model) {
		request.setAttribute("req", "HttpServletRequest");
		request.getSession().setAttribute("sess", "HttpSession");
		request.getSession().getServletContext().setAttribute("app", "Application");
		return "index5";
	}

在index5.html中，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
	Session:<span th:text="${session.sess}"></span><br/>
	Application:<span th:text="${application.app}"></span>
</body>
</html>

運行App.java啓動SpringBoot，在瀏覽器端訪問localhost:8080/show5

6. URL表達式

6.1 url表達式語法

基本語法：@{}

6.2 url類型

1. 絕對路徑

<a th:href="@{http://www.baidu.com}">絕對路徑</a><br/>

2. 相對路徑

1)相對於當前項目的根，即相對於項目的上下文的相對路徑

<a th:href="@{/show}">相對路徑</a>

2)相對於服務器路徑的根

<a th:href="@{~/project2/resourcename}">相對於服務器的根</a>

6.3 在url中實現參數傳遞

<a th:href="@{/show(id=1,name=zhagnsan)}">相對路徑-傳參</a>

6.4 在url中通過restful風格進行參數傳遞

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">相對路徑-傳參-restful</a>