14 微服務電商【黑馬樂優商城】：day01-springboot（Thymeleaf快速入門）

時間 2020-06-12

標籤微服黑馬樂優商城 day01 day springboot thymeleaf 快速入門欄目 Spring 简体版

原文原文鏈接

本項目的筆記和資料的Download，請點擊這一句話自行獲取。css

day01-springboot（理論篇）；day01-springboot（實踐篇）；day01-springboot（Thymeleaf快速入門）html

day02-springcloud（理論篇一：Robbin負載均衡) ；程序員

5.Thymeleaf快速入門

SpringBoot不推薦使用jsp，可是支持一些模板引擎技術：spring

5.1.爲何是Thymeleaf？

簡單說， Thymeleaf 是一個模板引擎，它能夠徹底替代 JSP 。相較於其餘的模板引擎，它有以下四個極吸引人的特色：瀏覽器

動靜結合：Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
開箱即用：它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、改jstl、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。
多方言支持：Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。
與SpringBoot完美整合，SpringBoot提供了Thymeleaf的默認配置，而且爲Thymeleaf設置了視圖解析器，咱們能夠像之前操做jsp同樣來操做Thymeleaf。代碼幾乎沒有任何區別，就是在模板語法上有區別。

接下來，咱們就經過入門案例來體會Thymeleaf的魅力：緩存

5.2.提供數據

編寫一個controller方法，返回一些用戶數據，放入模型中，未來在頁面渲染springboot

@GetMapping("/all") public String all(ModelMap model) { // 查詢用戶
    List<User> users = this.userService.queryAll(); // 放入模型
    model.addAttribute("users", users); // 返回模板名稱（就是classpath:/templates/目錄下的html文件名）
    return "users"; }

5.3.引入啓動器

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

SpringBoot會自動爲Thymeleaf註冊一個視圖解析器：服務器

與解析JSP的InternalViewResolver相似，Thymeleaf也會根據前綴和後綴來肯定模板文件的位置：網絡

默認前綴：classpath:/templates/
默認後綴：.html

因此若是咱們返回視圖：users，會指向到 classpath:/templates/users.html併發

通常咱們無需進行修改，默認便可。

5.4.靜態頁面

根據上面的介紹，模板默認放在classpath下的templates文件夾，咱們新建一個html文件放入其中：

編寫html模板，渲染模型中的數據：

注意，把html 的名稱空間，改爲：xmlns:th="http://www.thymeleaf.org" 會有語法提示。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style type="text/css"> table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto} table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">歡迎光臨！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>用戶名</th>
            <th>年齡</th>
            <th>性別</th>
            <th>生日</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}">張三</td>
            <td th:text="${user.userName}">zhangsan</td>
            <td th:text="${user.age}">20</td>
            <td th:text="${user.sex}">男</td>
            <td th:text="${user.birthday}">1980-02-30</td>
        </tr>
    </table>
</div>
</body>
</html>

咱們看到這裏使用瞭如下語法：

${} ：這個相似與el表達式，但實際上是ognl的語法，比el表達式更增強大
th-指令：th-是利用了Html5中的自定義屬性來實現的。若是不支持H5，能夠用data-th-來代替
- th:each：相似於c:foreach 遍歷集合，可是語法更加簡潔
- th:text：聲明標籤中的文本
  - 例如<td th-text='${user.id}'>1</td>，若是user.id有值，會覆蓋默認的1
  - 若是沒有值，則會顯示td中默認的1。這正是thymeleaf可以動靜結合的緣由，模板解析失敗不影響頁面的顯示效果，由於會顯示默認值。

5.5.測試

接下來，咱們打開頁面測試一下：

5.6.模板緩存

Thymeleaf會在第一次對模板解析以後進行緩存，極大的提升了併發處理能力。可是這給咱們開發帶來了不便，修改頁面後並不會馬上看到效果，咱們開發階段能夠關掉緩存使用：

# 開發階段關閉thymeleaf的模板緩存 spring.thymeleaf.cache=false

在Idea中，咱們須要在修改頁面後按快捷鍵：`Ctrl + Shift + F9` 對項目進行rebuild才能夠。

============================

參考資料：

end

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。