SpringBoot日記——Thymeleaf模板引擎篇

時間 2019-11-20

標籤 springboot 日記 thymeleaf 模板引擎欄目 Spring 简体版

原文原文鏈接

開發一般咱們都會使用模板引擎，好比：JSP、Velocity、Freemarker、Thymeleaf等等不少，那麼模板引擎是幹嗎用的？html

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

SpringBoot官方爲咱們推薦的是Thymeleaf，讓咱們來看看這款引擎哪裏出彩：github

語法相對更簡單，且功能強大；spring

1.引入Thymeleaf

直接在pom中添加便可json

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

然而目前來看，官方默認的模板引擎的版本有些舊，咱們須要變動下版本，那麼只須要修改下version就能夠了，能夠去Thymeleaf的官網或者github上看一下最新的版本，引入便可，好比：後端

（不知道怎麼添加的，自學pom.xml去，這裏不作介紹，畢竟是進階的文章）session

        <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這裏默認識別的動態資源文件夾是app

"classpath：/templates/"

因此咱們須要將html頁放到這個文件夾中才能別自動識別和渲染。前後端分離

Thymeleaf的語法說簡單，是由於它徹底能夠按照html的方式來編寫，舉例「success.html」spring-boot

<!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}