SpringBoot 之Thymeleaf模板.

来源:https://www.cnblogs.com/jmcui/archive/2018/10/11/9765785.html
-Advertisement-
Play Games

一、前言 Thymeleaf 的出現是為了取代 JSP,雖然 JSP 存在了很長時間,併在 Java Web 開發中無處不在,但是它也存在一些缺陷: 1、JSP 最明顯的問題在於它看起來像HTML或XML,但它其實上並不是。大多數的JSP模板都是採用HTML的形式,但是又摻雜上了各種JSP標簽庫的標 ...


一、前言

    Thymeleaf 的出現是為了取代 JSP,雖然 JSP 存在了很長時間,併在 Java Web 開發中無處不在,但是它也存在一些缺陷:

1、JSP 最明顯的問題在於它看起來像HTML或XML,但它其實上並不是。大多數的JSP模板都是採用HTML的形式,但是又摻雜上了各種JSP標簽庫的標簽,使其變得很混亂。

2、JSP 規範是與 Servlet 規範緊密耦合的。這意味著它只能用在基於 Servlet 的Web應用之中。JSP模板不能作為通用的模板(如格式化Email),也不能用於非Servlet的 Web 應用。

    相較於 JSP 來說,Thymeleaf 很好的解決了這些缺點:

1、Thymeleaf模板是原生的,不依賴於標簽庫。它能在接受原始 HTML 的地方進行編輯和渲染。

2、因為它沒有與Servlet規範耦合,因此 Thymeleaf 模板能夠進入JSP所無法涉足的領域。這意味著Thymeleaf模板與JSP不同,它能夠按照原始的方式進行編輯甚至渲染,而不必經過任何類型的處理器。當然,我們需要Thymeleaf來處理模板並渲染得到最終期望的輸出。即便如此,如果沒有任何特殊的處理,home.html也能夠載入到Web瀏覽器中,並且看上去與完整渲染的效果很類似。

    Spring boot不建議使用 JSP 開發web。

二、集成 Thymeleaf 模板引擎

    SpringBoot 對 Thymeleaf 模板引擎的支持也很簡單:

    1、pom.xml

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

這時候,SpringBoot 對 Thymeleaf 模板的支持就完成了,我們就能在 Web 開發中使用 Thymeleaf 模板了,簡單吧?

之前的文章有提到 SpringBoot 的關鍵是 “約定俗成”。既然我們選擇了這麼簡單的配置,那麼在開發中就要遵守 SpringBoot 對 Thymeleaf 約定俗成的方案,最重要的一點就是 模板文件放在 templates 目錄下,即模板解析器首碼是 /templates/ ,尾碼是 .html 。

    2、application.yml

    如果不想要所謂約定俗成的方案,想進行一些自定義的配置呢?且看下方:

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    servlet:
      content-type: text/html
    enabled: true
    encoding: UTF-8
    mode: HTML5
    cache: false

    3、WebConfig.java

    如果上面的配置還不能達到你的要求,你想要更細化對 Thymeleaf 的控制,包括配置視圖解析器、模板解析器以及模板引擎這些,那麼請看下麵的方案!

/**
 * 1、ThymeleafViewResolver 接收邏輯視圖名稱將它解析為視圖
 * 2、SpringTemplateEngine會在Spring中啟用Thymeleaf引擎,用來解析模板,並基於這些模板渲染結果
 * 3、TemplateResolver會最終定位和查找模板。
 */
@Configuration
public class WebConfig {
    
    /**
     * 配置 Thymeleaf 視圖解析器 —— 將邏輯視圖名稱解析為 Thymeleaf 模板視圖
     *
     * @param springTemplateEngine 模板引擎
     * @return
     */
    @Bean
    public ViewResolver viewResolver(SpringTemplateEngine springTemplateEngine){
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(springTemplateEngine);
        return resolver;
    }

    /**
     * 模板引擎 —— 處理模板並渲染結果
     *
     * @param templateResolver 模板解析器
     * @return
     */
    @Bean
    public SpringTemplateEngine springTemplateEngine(ITemplateResolver templateResolver) {
        SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
        springTemplateEngine.setTemplateResolver(templateResolver);
        return springTemplateEngine;
    }

    /**
     * 模板解析器 —— 載入 Thymeleaf 模板
     *
     * @return
     */
    @Bean
    public ITemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setPrefix("classpath:/templates/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode(TemplateMode.HTML);
        templateResolver.setCacheable(false);
        templateResolver.setTemplateMode("HTML5");
        return templateResolver;
    }
}

三、使用 Thymeleaf 模板

    做好了上面的配置後,讓我們來看看如何在 SpringBoot 中使用 Thymeleaf 模板吧:

    1、模板文件 — /templates/user/list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
</head>
<body>
<h2>用戶列表</h2>
<div>
    <ul>
        <li  th:each="user:${users}">
            <span th:text="${user.uuid}"></span>-
            <span th:text="${user.name}"></span>-
            <span th:text="${user.age}"></span>-
            <span th:text="${user.address}"></span>
        </li>
    </ul>
</div>
</body>
</html>

    2、控制層 — ModelAndViews

    這裡 Model 指的是:控制層處理完請求,返回需要渲染的結果;Views 指的是:模板的邏輯視圖名(前後端分離)。

@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/list")
    public String listUser(Model model) {
        List<UserDto> userList = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            userList.add(new UserDto(UUID.randomUUID().toString().replace("-", ""), "張三" + i, 1, "中國北京"));
        }
        model.addAttribute("users", userList);
        return "user/list";
    }
}

    3、效果

 

演示源代碼:https://github.com/JMCuixy/Thymeleaf

附錄:thymeleaf_3.0.5_中文參考手冊.pdf》— 鏈接:https://pan.baidu.com/s/1bYZJFKH8q1ONfd1gm-73tA 密碼:sady


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 安裝 新建一個文件夾 i18n ,內新建 en.js zh.js index.js 三個文件 準備翻譯信息 en.js zh.js index.js 創建Vue-i18n實例 i18n 掛載到 vue 根實例 main.js 簡單的使用 about.vue 註意: 比如說上面的hi 你要通過這種形式 ...
  • 在h5中實現一些小標簽、按鈕的時候,很容易發現部分安卓機型上的字體顯示有問題,總會向上偏移2px左右。這是設置padding或line-height無法修複的,與rem也無關,即使在字體大於12px時依然存在。下圖來自於網友的分享,從左到右依次是顯示正常的蘋果、顯示正常的安卓、顯示異常的安卓: 可能 ...
  • IndexedDB 瀏覽器資料庫,是一個非關係型資料庫,數據形式使用的是json,IndexedDB適合存儲大量數據,它的API是非同步調用的,當然他的api 也相對複雜。 當然瀏覽器數據存儲 還有LocalStorage,Cookies,web SQL等 為什麼還再來一個indexedDB。 之前我 ...
  • var date = new Date(); //Sat Sep 29 2018 10:44:43 GMT+0800 (中國標準時間) ]new Date().toLocaleString(); // 可根據本地時間把 Date 對象轉換為字元串,並返回結果。 "2018/9/29 上午10:45: ...
  • 這篇文章本來是想模塊導入導出和事件迴圈一起寫的,但是感覺一起寫的話會太長了,所以就分開兩篇文章寫吧。下一篇會重點介紹一下js中的事件迴圈,js代碼到底是以何種順序去執行的呢?我相信你看懂了事件迴圈再去看node對你的幫助是非常大的。 講模塊系統之前先認識一下node.js中的全局對象。 node.j ...
  • 教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步 "《webpack4 系列教程(十二):處理第三方 JavaScript 庫》原文地址" 。或者來我的小站看更多內容: "godbmw.com" 0. 課程介紹和資料 " 本節課源碼" " 所有課程源碼" 本節課的代碼目錄如下: 本 ...
  • 商品,黃金交易流程最基礎、最核心的環節,無商品不電商。商品數據無處不在,商家(採銷、供應商)發佈管理、供應商下採購單、倉儲配送、促銷、搜索、商詳頁展現、購物支付、財務結算、售後服務等,都離不開商品。商品信息要準確傳導於京東整個供應鏈的各節點,必須要有一套穩健、可靠的商品服務體系支撐。 原本並沒有統一 ...
  • 在數據分析當中的東西還是很多的,我在這裡只是啟髮式的介紹一下,瞭解到這方面的東西之後,使用的時候可以更快的找到解決辦法,希望能對大家有所幫助。 這次,依然是使用的sklearn中的iris數據集,對其進行通過熱圖來展示。 預處理 sklearn.preprocessing是機器學習庫中預處理的模塊, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...