SpringBoot日記——Thymeleaf模板引擎篇


開發通常我們都會使用模板引擎,比如:JSP、Velocity、Freemarker、Thymeleaf等等很多,那么模板引擎是干嘛用的?

模板引擎,顧名思義,是一款模板,模板中可以動態的寫入一些參數,我們將這些參數在代碼中傳入,以保證數據在頁面的動態調用,這就是引擎要做的,頁面和數據的動態傳輸模板。

SpringBoot官方為我們推薦的是Thymeleaf,讓我們來看看這款引擎哪里出彩:

語法相對更簡單,且功能強大;

 

1.引入Thymeleaf

直接在pom中添加即可

        <dependency>
            <!-- 前后端分離的模板引擎 -->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

然而目前來看,官方默認的模板引擎的版本有些舊,我們需要變更下版本,那么只需要修改下version就可以了,可以去Thymeleaf的官網或者github上看一下最新的版本,引入即可,比如:

(不知道怎么添加的,自學pom.xml去,這里不做介紹,畢竟是進階的文章)

        <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
        <!-- 布局功能的支持程序,若thymeleaf 3主程序 , layout需要2以上版本 -->
        <thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>

 

2.使用Thymeleaf和語法

  首先我們需要關注下,SpringBoot若想使用模板引擎,那么需要將html文件放入在指定的文件夾才能被識別,SpringBoot這里默認識別的動態資源文件夾是

"classpath:/templates/"

所以我們需要將html頁放到這個文件夾中才能別自動識別和渲染。

Thymeleaf的語法說簡單,是因為它完全可以按照html的方式來編寫,舉例 “success.html”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功</h1>
</body>
</html>

然后我們來寫一個controller,訪問下這個頁面看看是否OK:(之前我們學習了在@Controller的類內加入@ResponseBody可以訪問json資源,這里不加的話,就是訪問頁面了)

@Controller
public class SuccessController {

    @GetMapping("/success")
    public String sucTest(){
        return "success";
    }
}

來看訪問結果:

很好,完成了我們的第一步實踐。

推薦:下載官方文檔,教你怎么用thymeleaf,如圖:(官方鏈接地址

 

演示:查詢數據到頁面展示

 1. 首先,我們先修改controller文件,寫入我們想要展示的數據

@Controller
public class SuccessController {
    @GetMapping("/success")
    public String sucTest(Map<String,Object> map){
        map.put("hello","你好");
        return "success";
    }
}

2.然后來看看怎么讓這個數據展示在頁面,修改html頁來接收這個數據

  1.首先在html中加入 xmlns:th="http://www.thymeleaf.org" ,這個可以幫助我們引導使用thymeleaf。

  2.然后使用thymeleaf語法,在需要引值的地方添加th:text,這里表示需要引入文本,使用${xx},就是我們代碼中寫的值,這里填的是hello,頁面中應當返回的就是“你好”

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> 
<h1>成功</h1>
<div th:text="${hello}">這是沒有引擎展示的數據</div>
</body>
</html>

  最后,我們來看是否展示成功:

很好,沒有問題,hello的值是“你好”,成功展示。

 另外,我們看到,在html中的div中,我們還有一段文字,沒有展示,這個文字是在沒有引入引擎的時候展示的,也就是前后端分離的作用了

以上就是一些簡單的使用,接下來,我們看下其他實現,也就是Thymeleaf的語法還有些什么。

 

語法規則

 1.  th: xxx    ——可以任意替換原生屬性值;(參照官方文檔第十課,網上有中文版)

 

比如:(可以看到,原生的屬性,都替換成了hello的值)

<div id="abc" class="aaa" th:id="${hello}" th:class="${hello}" th:text="${hello}">這是沒有引擎展示的數據</div>

 

2.表達式的語法(官方文檔第四章),最重要的幾個,如下:

 

    2.1 其中我們用的最多的當屬${...},這個功能十分強大,通常用來獲取我們在代碼中的值的,包括取方法中的參數、session/request中的參數等等,比如:

th:id="${session.abc}  或者  th:id="${string.tostring()}"

   2.2 表達式*{...}的使用,在功能上同${...},但經常會配合th:object{...}來使用,表示其子集,例如:

<div th:object="${odin.user}" th:text="${hello}">這是沒有引擎展示的數據</div>
    <a th:id="*{name}"></a>
    <a th:id="*{sex}"></a>
</div>
這里 * 就表示上邊object定義的變量odin.user。其下邊的*{name} 等同於 ${odin.user.name}

  

  2.3  表達式#{...}的使用,表示獲取國際化內容

  

  2.4 表達式@{...}的使用,用來定義url,比如:(可以看到url后邊的參數,使用小括號,key=value的形式來編寫的,多個參數,用逗號分隔)

   

  另外,還可以拼接我們需要的url,如圖:

  

  2.5 表達式~{...}表示片段的引用,如:(具體使用,去看官方文檔,自己實踐一下吧)

  

  3. 其他的表達式

  還有很多后邊會用到的表達式,

  比如,字面量、文本操作(字符串拼接)、數學/布爾/比較/條件運算、特殊操作,參考文檔來學習吧!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM