2. 程式人生 > >spring boot使用thymeleaf模板的方法詳解

spring boot使用thymeleaf模板的方法詳解

阿新 • • 發佈：2018-12-23

thymeleaf 是新一代的模板引擎，在spring4.0中推薦使用thymeleaf來做前端模版引擎。

前言

Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較與其他的模板引擎，它有如下三個極吸引人的特點：

      1.Thymeleaf 在有網路和無網路的環境下皆可執行，即它可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式設計師在伺服器檢視帶資料的動態頁面效果。這是由於它支援 html 原型，然後在 html 標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地執行；當有資料返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。

      2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表示式效果，避免每天套模板、該jstl、改標籤的困擾。同時開發人員也可以擴充套件和建立自定義的方言。

      3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美整合的可選模組，可以快速的實現表單繫結、屬性編輯器、國際化等功能。

下面這篇文章將給

整體步驟：

（1）  在pom.xml中引入thymeleaf;

（2）  如何關閉thymeleaf快取

（3）  編寫模板檔案.html

spring Boot預設就是使用thymeleaf模板引擎的，所以只需要在pom.xml加入依賴即可：

?

1

2

3

4

5

<dependency>

  <groupId>org.springframework.boot</groupId>

  

  <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

Thymeleaf快取在開發過程中，肯定是不行的，那麼就要在開發的時候把快取關閉，只需要在application.properties進行配置即可：

?

1

2

3

4

5

6

7

8

9

10

11

12

########################################################

###THYMELEAF (ThymeleafAutoConfiguration)

########################################################

#spring.thymeleaf.prefix=classpath:/templates/

#spring.thymeleaf.suffix=.html

#spring.thymeleaf.mode=HTML5

#spring.thymeleaf.encoding=UTF-8

# ;charset=<encoding> is added

#spring.thymeleaf.content-type=text/html

# set to false for hot refresh

  

spring.thymeleaf.cache=false

編寫模板檔案src/main/resouces/templates/helloHtml.html

?

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"

 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

 <head>

 <title>Hello World!</title>

 </head>

 <body>

 <h1 th:inline="text">Hello.v.2</h1>

 <p th:text="${hello}"></p>

 </body>

</html>

編寫訪問路徑(com.kfit.test.web.TemplateController):

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

package com.kfit.test.web;

  

import java.util.Map;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

  

  

  

/**

  

 * 模板測試.

  

 * @author Administrator

  

 *

  

 */

  

@Controller

  

publicclass TemplateController {

 /**

  

 * 返回html模板.

  

 */

  

 @RequestMapping("/helloHtml")

 public String helloHtml(Map<String,Object> map){

  

 map.put("hello","from TemplateController.helloHtml");

 return"/helloHtml";

 }

}

啟動應用，輸入地址：http://127.0.0.1:8080/helloHtml 會輸出：

?

1

Hello.v.2

from TemplateController.helloHtml

使用freemarker

使用freemarker也很簡單，

在pom.xml加入freemarker的依賴：

?

1

2

3

4

<dependency>

 <groupId>org.springframework.boot</groupId>

 <artifactId>spring-boot-starter-freemarker</artifactId>

</dependency>

剩下的編碼部分都是一樣的，說下application.properties檔案：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

########################################################

###FREEMARKER (FreeMarkerAutoConfiguration)

########################################################

spring.freemarker.allow-request-override=false

spring.freemarker.cache=true

spring.freemarker.check-template-location=true

spring.freemarker.charset=UTF-8

spring.freemarker.content-type=text/html

spring.freemarker.expose-request-attributes=false

spring.freemarker.expose-session-attributes=false

spring.freemarker.expose-spring-macro-helpers=false

#spring.freemarker.prefix=

#spring.freemarker.request-context-attribute=

#spring.freemarker.settings.*=

#spring.freemarker.suffix=.ftl

#spring.freemarker.template-loader-path=classpath:/templates/#comma-separatedlist

#spring.freemarker.view-names= #whitelistofviewnamesthatcanberesolved

com.kfit.test.web.TemplateController：

?

1

2

3

4

5

6

7

8

9

/**

 * 返回html模板.

 */

  

 @RequestMapping("/helloFtl")

 public String helloFtl(Map<String,Object> map){

 map.put("hello","from TemplateController.helloFtl");

 return"/helloFtl";

 }

訪問地址：http://127.0.0.1:8080/helloFtl

?

1

Hello.v.2

from TemplateController.helloFtl

thymeleaf和freemarker是可以共存的。

------------------------------------------------------------------------------------------------------------------------------------------------

本文記錄一下幾點：

一、資原始檔的約定目錄結構

二、Maven配置

三、開發時修改thymeleaf模板自動重新載入配置

四、thymeleaf常用基礎知識點

一、資原始檔的約定目錄結構

Maven的資原始檔目錄：/src/Java/resources

spring-boot專案靜態檔案目錄：/src/java/resources/static

spring-boot專案模板檔案目錄：/src/java/resources/templates

spring-boot靜態首頁的支援，即index.html放在以下目錄結構會直接對映到應用的根目錄下：

?

1

2

3

4

classpath:/META-INF/resources/index.html

classpath:/resources/index.html

classpath:/static/index.html

calsspath:/public/index.html

由於使用thymeleaf的HTML5模板，所以我將index.html模板檔案直接放到了/src/java/resources/templates目錄下。然而這個目錄並不是首頁檔案的預設目錄，所以我們需要手動將應用根路徑對映到/src/java/resources/templates/index.html下。這個在spring-mvc的Controller下對映一下就可以了。

?

1

2

3

4

@RequestMapping("/")

 public String index(){

 return "index";

 }

在spring-boot下，預設約定了Controller試圖跳轉中thymeleaf模板檔案的的字首prefix是”classpath:/templates/”,字尾suffix是”.html”

這個在application.properties配置檔案中是可以修改的。

如下配置可以修改試圖跳轉的字首和字尾

?

1

2

spring.thymeleaf.prefix: /templates/

spring.thymeleaf.suffix: .html

更過有關thymeleaf中的預設這是可以檢視org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties這個類的屬性

二、Maven配置

在pom.xml中加入如下依賴

?

1

2

3

4

<dependency>

   <groupId>org.springframework.boot</groupId>

   <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

原來關於spring-boot-starter-web等的依賴就可以去掉了，因為spring-boot-starter-thymeleaf是包含這些依賴的。而關於jsp的依賴也可以去掉了，因為我們已經完全拋棄jsp了。

三、開發時修改thymeleaf模板自動重新載入配置

Spring-boot使用thymeleaf時預設是有快取的，即你把一個頁面程式碼改了不會重新整理頁面的效果，你必須重新執行spring-boot的main()方法才能看到頁面更改的效果。我們可以把thymeleaf的快取關掉，用於支援頁面修改後重新發布到spring-boot內嵌的tomcat中去。在application.properties配置檔案中加入以下配置。

?

1

2

3

4

# Allow Thymeleaf templates to be reloaded at dev time

spring.thymeleaf.cache: false

server.tomcat.access_log_enabled: true

server.tomcat.basedir: target/tomcat

四、thymeleaf常用基礎知識點

1、在html頁面中引入thymeleaf名稱空間，即<html xmlns:th=http://www.thymeleaf.org></html> ，此時在html模板檔案中動態的屬性使用th:名稱空間修飾

2、引用靜態資原始檔，比如CSS和JS檔案，語法格式為“@{}”，如@{/js/blog/blog.js}會引入/static目錄下的/js/blog/blog.js檔案

3、訪問spring-mvc中model的屬性，語法格式為“${}”，如${user.id}可以獲取model裡的user物件的id屬性

4、迴圈，在html的標籤中，加入th:each=“value:${list}”形式的屬性，如<span th:each=”user:${users}”></span>可以迭代users的資料

5、判斷，在html標籤中，加入th:if=”表示式”可以根據條件顯示html元素

?

1

2

3

<span th:if="${not #lists.isEmpty(blog.publishTime)}">

<span id="publishtime" th:text="${#dates.format(blog.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

</span>

以上程式碼表示若blog.publishTime時間不為空，則顯示時間

6、時間的格式化，

?

1

${#dates.format(blog.publishTime,'yyyy-MM-dd HH:mm:ss')}

表示將時間格式化為”yyyy-MM-dd HH:mm:ss”格式化寫法與Java格式化Date的寫法是一致的。

7、字串拼接，有兩種形式

比如拼接這樣一個URL:/blog/delete/{blogId}

第一種：th:href="'/blog/delete/' + ${blog.id }" rel="external nofollow"

第二種：th:href="${'/blog/delete/' + blog.id }" rel="external nofollow"

相關推薦

Spring IoC getBean 方法詳解

前言 本篇文章主要介紹 Spring IoC 容器 getBean() 方法。 下圖是一個大致的流程圖： 正文 首先定義一個簡單的 POJO，如下： public class User { private Long id; private String name; pu

Spring IoC createBean 方法詳解

# 前言 本篇文章主要分析 Spring IoC 的 `createBean()` 方法的流程，以及 `bean` 的生命週期。 下面是一個大致的流程圖： ![Spring IoC createBean 方法流程.png](http://ww1.sinaimg.cn/large/006Vpl27gy1g

spring boot使用thymeleaf模板的方法詳解

thymeleaf 是新一代的模板引擎，在spring4.0中推薦使用thymeleaf來做前端模版引擎。 前言 Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較與其他的模板引擎，它有如下三個極吸引人的特點：  

Spring JdbcTemplate方法詳解

                   JdbcTemplate主要提供以下五類方法：execute方法：可以用於執行任何SQL語句，一般用於執行DDL語句；update方法及batchUpdate方法：update方法用於執行新增、修改、刪除等語句；batchUpdate方法用於執行批處理相關語句；query

Java Spring Controller 獲取請求引數的幾種方法詳解

1、直接把表單的引數寫在Controller相應的方法的形參中，適用於get方式提交，不適用於post方式提交。若”Content-Type”=”application/x-www-form-urlencoded”,可用post提交 /** * 1.

spring獲取webapplicationcontext,applicationcontext幾種方法詳解

方法一：在初始化時儲存ApplicationContext物件 程式碼： ApplicationContext ac = new FileSystemXmlApplicationContext("applicationContext.xml"); ac.getBean("

$.ajax()方法詳解

例如 lencod ace 包含 等等 json 返回 用戶名 代碼 jquery中的ajax方法參數總是記不住，這裏記錄一下。 1.url: 要求為String類型的參數，（默認為當前頁地址）發送請求的地址。 2.type: 要求為String類型的參數，請求方式（p

Python的反射機制、hasattr() getattr() setattr() 函數使用方法詳解

對象 tee lin sel __main__ err ace traceback 一個 hasattr(object, name)判斷一個對象裏面是否有name屬性或者name方法，返回BOOL值，有name特性返回True， 否則返回False。需要註意的是name要用

elasticSearch+spring 整合 maven依賴詳解

elastics tail -s clas 1.0 too group nbsp snapshot 摘自：http://www.mayou18.com/detail/nTxPQSyu.html 【Elasticsearch基礎】elasticSearch+spring 整合

php上傳文件大小限制的方法詳解

mem 限制 upload 文件夾 tro 最大 指定 php上傳文件 配置 打開php.ini，首先找到file_uploads = on ;是否允許通過HTTP上傳文件的開關。默認為ON即是開upload_tmp_dir ;文件上傳至服務器上存儲臨時文件的地方，如果沒指

接口測試工具soapUI的安裝和使用方法詳解

service 技術 key custom media 負載 bmp file text soapUI是一個開源測試工具，通過soap/http來檢查、調用、實現Web Service的功能/負載/符合性測試。 使用soapUI可以非常方便的實現接口的功能測試、穩

Arrays 類的 binarySearch() 數組查詢方法詳解

strong object tro search mage bject 技術分享 eight 獲得 Arrays類的binarySearch()方法，可以使用二分搜索法來搜索指定的數組，以獲得指定對象。該方法返回要搜索元素的索引值。binarySearch()方法提供多種重

JavaScript中getBoundingClientRect()方法詳解

script otto java chrome 頁面 支持 urn client fire getBoundingClientRect() 這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。

spring配置文件詳解

type ransac 啟動 toc ref 意圖 new admins 裝配 轉自： http://book.51cto.com/art/201004/193743.htm 此處詳細的為我們講解了spring2.5的實現原理，感覺非常有用

C# Process.Start()方法詳解

stat 字符串 檔案 atd 一個 用戶名 菜單 簡單介紹 run System.Diagnostics.Process.Start(); 能做什麽呢？它主要有以下幾個功能： 1、打開某個鏈接網址（彈窗）。 2、定位打開某個文件目錄。 3、打開系統特殊文件夾，如“控制面板

HTML中javascript的<script>標簽使用方法詳解

mime類型 jsp source 方式 clas 處理 網頁 鏈接 屬性。 原文地址：HTML中javascript的<script>標簽使用方法詳解 只要一提到把JavaScript放到網頁中，就不得不涉及Web的核心語言——HTML。在當初開發javasc

解析xml的4種方法詳解（轉）

項目 目標 源碼 更多 news 大量 優秀 大型 頻繁 http://blog.csdn.net/jzhf2012/article/details/8532873 1. 介紹 1）DOM(JAXP Crimson解析器) DOM是用與平臺和語言無關的方式表

php中二維數組排序問題方法詳解

ges cti cmp each ace esc 對數 x11 用法 PHP中二維數組排序，可以使用PHP內置函數uasort() 示例一： 使用用戶自定義的比較函數對數組中的值進行排序並保持索引關聯 回調函數如下：註意回調函數的返回值是負數或者是false的時候，表

SylixOS 調試方法詳解——靜態代碼分析

sylixos 調試方法1. SylixOS調試方法介紹SylixOS 實現了一個功能強大的調試 stub，可在設備或模擬器上在線調試應用程序，RealEvo-IDE 也提供配套的調試插件。目前 RealEvo-IDE 既支持自動推送調試、也支持傳統的手動啟動 gdbserver 的調試方式。在官方公布的使用

python魔法方法詳解

返回 call __init__ and -m 描述 nbsp shift 賦值 文章來源：http://blog.csdn.net/koko66/article/details/42709279 據說，Python 的對象天生擁有一些神奇的方法，它們總被雙下劃線所包圍