（二）springboot整合thymeleaf模板

正文

在我們平時的開發中，用了很久的jsp作view顯示層，但是標籤庫和JSP缺乏良好格式的一個副作用就是它很少能夠與其產生的HTML類似。所以，在Web瀏覽器或HTML編輯器中查看未經渲染的JSP模板是非常令人困惑的，而且得到的結果看上去也非常醜陋（也就是不放到服務器，直接本地打開）。

但是Thymeleaf模板是原生的，不依賴於標籤庫。它能在接受原始HTML的地方進行編輯和渲染（也就是說我們通過thymeleaf寫一個頁面，如果不放到服務器進行渲染，也是可以看到效果的，跟後端打開基本相同）

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

回到頂部

配置springbean視圖

首先我們需要讓springboot（springmvc通用）知道我們的頁面是通過什麼來渲染的（jsp,freemarker,thymeleaf等等，以及模板的位置等信息）

/**
 * 設置視圖解析器
 * @param templateEngine
 * @return
 */
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine);
    return resolver;
}

/**
 * 設置模板引擎
 * @param templateResolver
 * @return
 */
@Bean
public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

/**
 * 模板解析引擎
 * @return
 */
@Bean
public TemplateResolver templateResolver(){
    TemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setPrefix("/WEB-INF/template/");//設置地址前綴
    resolver.setSuffix(".html");//設置後綴
    resolver.setCacheable(false);//設置不緩存
    resolver.setTemplateMode("HTML5");
    return resolver;
    
}

ThymeleafViewResolver是Spring MVC中ViewResolver的一個實現類。像其他的視圖解析器一樣，它會接受一個邏輯視圖名稱，並將其解析爲視圖

TemplateResolver會最終定位和查找模板。與之前配置InternalResourceViewResolver類似，它使用了prefix和suffix屬性。前綴和後綴將會與邏輯視圖名組合使用，進而定位Thymeleaf引擎。它的templateMode屬性被設置成了HTML 5，這表明我們預期要解析的模板會渲染成HTML 5輸出

到這裏我們就基本配置完了。

接下來我們在WEB-INF/template下建立home.html,頭部加入thymeleaf的命令空間

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

建立一個controller，寫我們的第一個controller，打開訪問localhost:8080/home就會轉發到/WEB-INF/template/home.html

    @RequestMapping("/home")
    public String hello(Map<String,Object> map){
        User user = new User("1", "fei", 22, "愛好：籃球","admin");
        map.put("user",user);
        
        List<User> list = new ArrayList<>();
        for(int i =0;i<5;i++){
            User u = new User(""+(i+2), "fei"+(i+2), 22+(i+2), "愛好：籃球"+(i+2),"user"+i);
            list.add(u);
        }
        map.put("userList",list);
        
        return "home";
    }

回到頂部

thymeleaf語法

文本顯示

${}的使用和jsp的el表達式很類似，我們在後臺綁定了一個user對象那麼我們可以通過${user.name}獲取用戶名，相當於user.getName();但是注意這個只能放到th表達式裏面

th:text就相當於把裏面的渲染主來的值放到aaa的位置上，如果th:text裏面的值只有${user.name},並且爲null，那麼就會顯示aaa

<span th:text="'用戶名：' +${user.name}">aaa</span>
#或者下面的這種方式，|…|中只能包含變量表達式${…}，不能包含其他常量、條件表達式等
<span th:text="|用戶名：${user.name}|"></span>

運算符

在表達式中可以使用各類算術運算符，例如+, -, *, /, %

<span th:text="'年齡*2='+ ${user.age}*2 "></span>

邏輯運算符

在表達式中可以使用邏輯運算符，但是除了==其他的要使用轉義字符

>, <, >=, <= != 對應(gt, lt, ge, le, ne)

<span th:text="(${user.age} eq 22)">aaa</span>  //輸出true
#可以使用二元表達式
<span th:text="(${user.age} ge 23?'超過年紀':'ok')"></span>

條件判斷

th:if條件成立纔會顯示
th:unless條件不成立纔會顯示

<span th:if="(${user.age} gt 21)">年齡超過21纔會顯示</span>
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

Switch

* 代表default，其他都沒匹配到會顯示帶*的

<div th:switch="${user.role}">
  <p th:case="'admin'">用戶是管理員</p>
  <p th:case="*">用戶是普通人員</p>
</div>

循環

第二個參數稱作狀態變量，屬性有
- index:當前迭代對象的index（從0開始計算）
- count: 當前迭代對象的index(從1開始計算)
- size:被迭代對象的大小
- current:當前迭代變量
- even/odd:布爾值，當前循環是否是偶數/奇數（從0開始計算）
- first:布爾值，當前循環是否是第一個
- last:布爾值，當前循環是否是最後一個

<table>
  <tr>
       <th>index</th>
        <th>id</th>
        <th>name</th>
       <th>age</th>
  </tr>
  <tr th:each="user,iterStat: ${userList}" >
      <td th:text="${iterStat.index}">1</td>
        <td th:text="${user.id}">1</td>
        <td th:text="${user.name}">王五</td>
        <td th:text="${user.age}">55</td>
  </tr>
</table>

* 號和$符號共用

*{}裏面的值就是上層th:object對象裏面對應的屬性

 <div th:object="${user}">
   <p>Name: <span th:text="*{name}">wangwu</span>.</p>
   <p>AGE: <span th:text="*{age}">22</span>.</p>
 </div>

Utilities

Utilities爲了模板更加易用，Thymeleaf還提供了一系列Utility對象（內置於Context中），可以通過#直接訪問

- dates ： java.util.Date的功能方法類。
- calendars : 類似#dates，面向java.util.Calendar
- numbers : 格式化數字的功能方法類
- strings : 字符串對象的功能類，contains,startWiths,prepending/appending等等。
- objects: 對objects的功能類操作。
- bools: 對布爾值求值的功能方法。
- arrays：對數組的功能類方法。
- lists: 對lists功能類方法
- sets
- maps

表達式基本對象
- #ctx: 上下文對象.
- #vars: context中的變量們.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest對象.
- #httpSession: (只在web context中) HttpSession對象.

將date渲染成後面的格式
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
得到當前時間
${#dates.createNow()}
得到當前時間並顯示
<span th:text=" ${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')} "></span>

utilities其他使用鏈接，很詳細

內聯

Text inlining

後面[[]]裏面的值是從域中獲取的text文本，跟使用th:text效果類似

<span th:inline="text">[[${user.name}]]</span>

JavaScript inlining

<script th:inline="javascript">
    var name = [[${user.name}]];
</script>

下面這個意思是如果沒有跑在服務器，name就會是我們的lisi，如果在服務器上，會取出user.name的值，忽略lisi

var name = /*[[${user.name}]]*/"lisi";

CSS inlining

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

none inlining

但是如果我麼就要顯示[[${user.name}]]不需要他轉換呢，就會用到none inlining

<span th:inline="none">[[${user.name}]]</span>

嵌套

在當前home.html路徑下有個footer.html,內容如下

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <body>
    <footer th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </body>
</html>

在home.html引用這個footer，footer代表html的名稱，copy代表fragmen的值

<div th:replace="footer:: copy"></div>
<div th:include="footer:: copy"></div>

展現的源碼：

<footer>
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>
<div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

得出結論：
- th:replace會將當前div整個替換成foot的元素
- th:include只是將footer裏面的內容拷貝進來

鏈接

鏈接一般用th:href="@{地址}"，“@{}”表達式，用來計算相對於URL的路徑,在html ==<a href="/register"></a>

<a th:href="@{/register}">register</a>

常用標籤

回到頂部

springboot簡化配置

當然在springboot中，上面的視圖解析器等註冊都不需要我們做了，因爲springboot都默認幫我們做了，（只要我們將Thymeleaf maven依賴添加到項目的pom文件下，就啓用了Spring Boot的自動配置。當應用運行時，Spring Boot將會探測到類路徑中的Thymeleaf，然後會自動配置視圖解析器、模板解析器以及模板引擎）

如果什麼都不配置，springboot會默認查找類跟目錄下的templates文件夾下的模板，home.html放到src/main/ resources/templates目錄下

如果我們要在home的html中引入一些靜態資源怎麼辦呢，這點springboot也幫我們考慮到了

springboot它會將“/**”映射到幾個資源路徑中

META-INF/resources/
resources
static
public

也就是說我們在有一個static/css/home.css

那麼我們這樣引入就可以了。

<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>

當然，我們還是可以配置前綴後綴，以及是否緩存等，只需要一個簡單的配置即可

#配置前綴
#spring.thymeleaf.prefix=classpath:/templates/  
#配置後綴
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5 
#spring.thymeleaf.encoding=UTF-8 
#spring.thymeleaf.content-type=text/html 
#是否開啓緩存
spring.thymeleaf.cache=false

q781045982

發佈了26 篇原創文章 · 獲贊 2 · 訪問量 2萬+

私信關注

（二）springboot整合thymeleaf模板

配置springbean視圖

thymeleaf語法

文本顯示

運算符

邏輯運算符

條件判斷

Switch

循環

* 號和$符號共用

Utilities

內聯

Text inlining

JavaScript inlining

CSS inlining

none inlining

嵌套

鏈接

常用標籤

springboot簡化配置

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

Owin中間件動手做

（二）springboot整合thymeleaf模板

HTTPS 建立連接的詳細過程

jQuery學習筆記之Ajax用法詳解

最近實現的一個分離文章內容功能，挺有意思，分享一下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結