View

2022 iThome 鐵人賽

DAY 2

自我挑戰組

Spring In Action系列第 2 篇

14th鐵人賽

kirin0127

2022-09-16 20:04:08

735 瀏覽

分享至

本書範例的前端頁面採用Thymeleaf來產生，若學過JSP的話可以很快體會Thymeleaf在做什麼事情，因為他們的用途基本是一樣的，就是讓一般的html檔案內可以夾帶程式化的語言，透過Thymeleaf來渲染成最終的html後再response給user。

我們來看一個簡單的例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
	<head>
		<title>SpringBoot Application</title>
	</head>
	
	<body>
		<h1>Welcome!</h1>
		<img th:src="@{/images/Welcome.png}"/> 
	</body>
</html>

要透過Thymeleaf渲染的html檔案預設要放"src/main/resources/templates”中，假設上面的html檔名為”index.html”。

在以上html中的img tag就使用了Thymeleaf的語法，讓Thymeleaf去"/images/Welcome.png”這個路徑拿圖，並渲染到img tag中。

然後我們會需要一個Controller來將request導到這個頁面：

package demo;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class IndexController {
 
  @GetMapping("/")
  public String index() {
    return "index";
  }
 
}

有趣的地方就在於我們的controller只回傳了"index”的String，但Spring會自動幫我們去對應templates中有沒有相符的html檔名，若有的話就會使用Thymeleaf來渲染html並response。

再來看看test的部分，若是要對我們寫的function來測試，會滿直覺知道可以怎麼寫的，但是要如何寫網頁的測試？

所幸Spring提供了@WebMvcTest(xxxController.class)以及MockMvc等功能，讓我們可以很方便的模擬當web server起起來後的狀態來測試。

package demo;
 
import static org.hamcrest.Matchers.containsString;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.view;
 
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
import org.springframework.test.web.servlet.MockMvc;
 
@WebMvcTest(IndexController.class)
public class IndexControllerTest {
 
  @Autowired
  private MockMvc mockMvc;
  
  @Test
  public void testIndexPage() throws Exception {
    mockMvc.perform(get("/"))
      .andExpect(status().isOk())
      .andExpect(view().name("index"))
      .andExpect(content().string(containsString("Welcome!")));
  }
 
}

另外也介紹了我們選擇的dev-tool dependency有哪三個作用：

當code改變時，自動重啟SpringBoot
能做到這點是因為在背後起了兩個class loader，一個會偵測code有沒有改動，一個給dependency來使用，所以如果是改變了dependency，那是不會自動重啟的。
自動更新browser該顯示的畫面，但須搭配browser plugin: LiveReload
內建H2資料庫的console功能
只要在瀏覽器打 http://localhost:8081/h2-console 就可以開啟h2的console。