開發傳統Java WEB工程時，我們可以使用JSP頁面模板語言，但是在SpringBoot中已經不推薦使用了。SpringBoot支援如下頁面模板語言

  Thymeleaf
  FreeMarker
  Velocity
  Groovy
  JSP

上面並沒有列舉所有SpringBoot支援的頁面模板技術。其中Thymeleaf是SpringBoot官方所推薦使用的，下面來談談Thymeleaf一些常用的語法規則。

新增Thymeleaf依賴
要想使用Thhymeleaf，首先要在pom.xml檔案中單獨新增Thymeleaf依賴。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
 

資料顯示
在MVC的開發過程中，我們經常需要通過Controller將資料傳遞到頁面中，讓頁面進行動態展示。

顯示普通文字
建立一個Controller物件，在其中進行引數的傳遞

@Controller
public class ThymeleafController {

@RequestMapping(value = "show", method = RequestMethod.GET)
public String show(Model model){
    model.addAttribute("uid","123456789");
    model.addAttribute("name","Jerry");
    return "show";
}

}
在SpringBoot預設的頁面路徑下建立show.html檔案，內容如下

可以看到在p標籤中有th:text屬性，這個就是thymeleaf的語法，它表示顯示一個普通的文字資訊。

如果我們要顯示的資訊是存在資原始檔中的，同樣可以在頁面中顯示，例如資原始檔中定義了內容welcome.msg=歡迎{0}光臨！。可以在頁面中將其顯示

另外，在th:utext中還能做一些基礎的數學運算

顯示帶有樣式的普通文字 如果我們想要傳遞到的頁面的資訊，它本身是帶有CSS樣式的，這個時候如何在頁面中將攜帶的樣式資訊也顯示出來？此時我們的控制器方法這樣寫。

@RequestMapping(value = "showStyle", method = RequestMethod.GET)
public String showStyle(Model model){
model.addAttribute("uid","123456789");
model.addAttribute("name","Jerry");
return "show_style";
}
此時頁面中需要藉助th:utext屬性進行顯示

通過瀏覽器檢視頁面原始碼可以看出th:utext和th:text的區別是：th:text會對<和>進行轉義，而th:utext不會轉義。

顯示物件
我們常常需要將一個bean資訊展示在前端頁面當中。

用於前端展示的VO類
public class User implements Serializable {
private Long uid ;
private String name ;
private Integer age ;
private Date birthday ;
private Double salary ;
//省略get/set方法
}
控制器方法
@RequestMapping(value = "/message/member_show", method = RequestMethod.GET)
public String memberShow(Model model) {
User vo = new User();
vo.setUid(12345678L);
vo.setName("尼古拉丁.趙四");
vo.setAge(59);
vo.setSalary(1000.00);
vo.setBirthday(new Date());
model.addAttribute("member", vo);
return "message/member_show";
}
頁面展示

---

上面給出了兩種展現方式，一種是通過${屬性}，另外一種是通過{屬性}。 關於“${屬性}”和“{屬性}”的區別？ $訪問完整資訊，而訪問指定物件中的屬性內容， 如果訪問的只是普通的內容兩者沒有區別；

資料處理
在 thymeleaf 之中提供有相應的集合的處理方法，例如：在使用 List 集合的時候可以考慮採用 get()方法獲取指定索引的資料，那麼在使用 Set 集合的時候會考慮使用 contains()來判斷某個資料是否存在，使用 Map 集合的時候也希望可以使用 containsKey()判斷某個 key 是否存在，以及使用get()根據 key 獲取對應的 value，而這些功能在之前並不具備，下面來觀察如何在頁面中使用此類操作

控制器方法向頁面傳遞一些資料，以供操作
@RequestMapping(value = "/user/set", method = RequestMethod.GET)
public String set(Model model) {
Set allNames = new HashSet() ;
List allIds = new ArrayList() ;
for (int x = 0 ; x < 5 ; x ++) {
allNames.add("boot-" + x) ;
allIds.add(x) ;
}
model.addAttribute("names", allNames) ;
model.addAttribute("ids", allIds) ;
model.addAttribute("mydate", new java.util.Date()) ;
return "user_set" ;
}
資料處理

---

---

---

路徑處理 在傳統WEB工程開發時，路徑的處理操作是有點麻煩的。SpringBoot中為我們簡化了路徑的處理。

在"src/main/view/static/js"中建立一個js檔案

js檔案路徑
然後在頁面中可以通過“@{路徑}”來引用。

頁面之間的跳轉也能通過@{}來實現

訪問controller方法
訪問靜態頁面
操作內建物件
雖然在這種模版開發框架裡面是不提倡使用內建物件的，但是很多情況下依然需要使用內建物件進行處理，所以下面來看下如何在頁面中使用JSP內建物件。

在控制器裡面增加一個方法，這個方法將採用內建物件的形式傳遞屬性。
@RequestMapping(value = "/inner", method = RequestMethod.GET)
public String inner(HttpServletRequest request, Model model) {
request.setAttribute("requestMessage", "springboot-request");
request.getSession().setAttribute("sessionMessage", "springboot-session");
request.getServletContext().setAttribute("applicationMessage",
"springboot-application");
model.addAttribute("url", "www.baidu.cn");
request.setAttribute("url2",
"www.baidu.cn");
return "show_inner";
}
在頁面之中如果要想訪問不同屬性範圍中的內容，則可以採用如下的做法完成：

---

thymeleaf 考慮到了實際的開發情況，因為 request 傳遞屬性是最為常用的，但是 session 也有可能使用，例如：使用者登入之後需要顯示使用者 id，那麼就一定要使用到 session，所以現在必須增加屬性範圍的形式後才能夠正常使用。在 thymeleaf 裡面也支援有 JSP 內建物件的獲取操作，不過一般很少這樣使用。

邏輯處理
所有的頁面模版都存在各種基礎邏輯處理，例如：判斷、迴圈處理操作。在 Thymeleaf 之中對於邏輯可以使用如下的一些運算子來完成，例如：and、or、關係比較（>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne）。

通過控制器傳遞一些屬性內容到頁面之中：

未成年人！ 歡迎小三來訪問！ 不滿足條件的判斷 你還不滿18歲，不能夠看電影！ 通過swith進行分支判斷

uid為101的員工來了

uid為102的員工來了

沒有匹配成功的資料！

資料遍歷 在實際開發過程中常常需要對資料進行遍歷展示，一般會將資料封裝成list或map傳遞到頁面進行遍歷操作。

定義控制器類，向頁面傳遞List資料和Map資料
@Controller
public class UserController {
@RequestMapping(value = "/user/map", method = RequestMethod.GET)
public String map(Model model) {
Map<String,User> allMembers = new HashMap<String,User>();
for (int x = 0; x < 10; x++) {
User vo = new User();
vo.setUid(101L + x);
vo.setName("趙四 - " + x);
vo.setAge(9);
vo.setSalary(99999.99);
vo.setBirthday(new Date());
allMembers.put("mldn-" + x, vo);
}
model.addAttribute("allUsers", allMembers);
return "user_map";
}

@RequestMapping(value = "/user/list", method = RequestMethod.GET)
public String list(Model model) {
    List<User> allMembers = new ArrayList<User>();
    for (int x = 0; x < 10; x++) {
        User vo = new User();
        vo.setUid(101L + x);
        vo.setName("趙四 - " + x);
        vo.setAge(9);
        vo.setSalary(99999.99);
        vo.setBirthday(new Date());
        allMembers.add(vo) ;
    }
    model.addAttribute("allUsers", allMembers);
    return "user_list";
}

}
list型別資料遍歷

No.	UID	姓名	年齡	偶數	奇數

map型別資料遍歷

No.	KEY	UID	姓名	年齡	偶數	奇數

頁面引入 我們常常需要在一個頁面當中引入另一個頁面，例如，公用的導航欄以及頁尾頁面。thymeleaf中提供了兩種方式進行頁面引入。

th:replace
th:include
新建需要被引入的頁面檔案，路徑為"src/main/view/templates/commons/footer.html"

可以看到頁面當中還存在一個變數projectName，這個變數的值可以在引入頁面中通過th:with="projectName=百度"傳過來。

引入頁面中只需要新增如下程式碼即可