SpringBoot整合thymeleaf

時間  2019-11-29
標籤 springboot 整合 thymeleaf 欄目 Spring 简体版
原文   原文鏈接

概述（轉）

  • Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP 。相較與其餘的模板引擎，它有以下三個極吸引人的特色css

  • Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外
    的屬性來達到模板 + 數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
  • Thymeleaf 開箱即用的特性。它提供標準和 Spring 標準兩種方言，能夠直接套用模板實現 JSTL、 OGNL 表達式效果，避免天天套模板、改 JSTL、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。

  • Thymeleaf 提供 Spring 標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。html

爲何要使用thymeleaf ？（轉）

若是但願以 Jar 形式發佈模塊則儘可能不要使用 JSP 相關知識，這是由於 JSP 在內嵌的 Servlet 容器上運行有一些問題 (內嵌 Tomcat、 Jetty 不支持 Jar 形式運行 JSP，Undertow 不支持 JSP)。

Spring Boot 中推薦使用 Thymeleaf 做爲模板引擎，由於 Thymeleaf 提供了完美的 Spring MVC 支持java

Spring Boot 提供了大量模板引擎，包括：程序員

  • FreeMarker
  • Groovy
  • Mustache
  • Thymeleaf
  • Velocity
  • Beetl

SpringBoot整合Thymeleaf

1、使用SpringBoot Initializer建立SpringBoot的web項目

2、引入thymeleaf依賴

<!--引入thymeleaf依賴-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3、建立thymeleaf模板

在templates下新建index.html,內容以下：web

<!doctype html>

<!--注意：引入thymeleaf的名稱空間-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p th:text="'hello SpringBoot'">hello thymeleaf</p>
</body>
</html>

4、啓動項目

訪問http://localhost:8080 ,展現效果以下：
spring

5、經過控制器定位thymeleaf模板：

在入口類所在目錄創建controller包，新建控制器，寫法與SpringMVC一致：數組

package com.hncj.spring.boot.thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("home")
    public String index() {
        return "index";
    }
}

訪問http://localhost:8080/home,也能顯示index.html的內容。瀏覽器

thymeleaf的相關全局配置

SpringBoot支持.properties和.yml兩種格式的全局配置，下面給出thymeleaf的yml格式全局配置：緩存

spring:
  thymeleaf:
    enabled: true  #開啓thymeleaf視圖解析
    encoding: utf-8  #編碼
    prefix: classpath:/templates/  #前綴
    cache: false  #是否使用緩存
    mode: HTML  #嚴格的HTML語法模式
    suffix: .html  #後綴名

thymeleaf經常使用標籤的使用

用到的User實體以下：springboot

package com.hncj.spring.boot.thymeleaf.domain;

import java.util.List;
import java.util.Map;

public class User {
    String username;
    String password;
    List<String> hobbies;
    Map<String, String> secrets;
    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public List<String> getHobbies() {
        return hobbies;
    }

    public void setHobbies(List<String> hobbies) {
        this.hobbies = hobbies;
    }

    public Map<String, String> getSecrets() {
        return secrets;
    }

    public void setSecrets(Map<String, String> secrets) {
        this.secrets = secrets;
    }
}

具體的屬性值爲：

package com.hncj.spring.boot.thymeleaf.controller;

import com.hncj.spring.boot.thymeleaf.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

@Controller
public class IndexController {

    @GetMapping("home")
    public String index(Model model) {
        User user = new User();
        user.setUsername("jack");
        user.setPassword("112233");
        user.setHobbies(Arrays.asList(new String[]{"singing", "dancing", "football"}));
        Map<String, String> maps = new HashMap<>();
        maps.put("1", "o");
        maps.put("2", "g");
        maps.put("3", "a");
        maps.put("4", "j");
        user.setSecrets(maps);
        model.addAttribute("user", user);
        return "index";
    }
}

測試界面以下：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--字符串輸出-->
    <p th:text="'hello SpringBoot'">hello thymeleaf</p>
    <!--數學運算-->
    <p th:text="9 + 10"></p>
    <p th:text="10 * 10"></p>
    <p th:text="1 - 10"></p>
    <p th:text="8 / 3"></p>
    <p th:text="3 % 2"></p>
    <!--操做域對象-->
    <p th:text="${user}"></p>
    <p th:text="${user.username}"></p>

    <!--遍歷數組-->
    <table th:each="item, sta:${user.hobbies}">
        <tr>
            <td th:text="${item}"></td>
            <td th:text="${sta.index}"></td>
            <td th:text="${sta.odd}"></td>
            <td th:text="${sta.size}"></td>
        </tr>
    </table>


    <!--遍歷map-->
    <div th:each="item:${user.secrets}" th:text="${item.key}"></div>

    <!--遍歷數組-->
    <div th:each="item:${user.hobbies}" th:text="${item}"></div>

    <!--設置屬性-->
    <input type="text" th:attr="value=${user.username}">
    <input type="text" th:attr="value=${user.username}, title=${user.username}">

    <!--表單數據綁定-->
    <form action="" th:object="${user}">
        <input type="text" th:value="*{username}">
        <input type="password" th:value="*{password}">
        <select>
            <option th:each="item:${user.secrets}" th:text="${item.value}" th:selected="'a' eq ${item.value}"></option>
        </select>
    </form>

    <!--解析html文本內容-->
    <p th:utext="'<span>html</span>'"></p>

    <!--流程控制-->
    <p th:if="${user.username} != ${user.password}">yes</p>
    <div th:switch="${user.username}">
        <p th:case="rose">name is rose</p>
        <p th:case="jack">name is jack</p>
    </div>

    <!--外部引入-->
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <script th:src="@{/js/index.js}"></script>

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

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程