JAVA入門[22]—thymeleaf

一、thymeleaf官網

1.修改pom.xml，引入相關依賴。

<code> </code><code><groupId>junit</groupId></code>

<code> </code><code><artifactId>junit</artifactId></code>

<code> </code><code></code>

<code> </code><code><groupId>org.thymeleaf</groupId></code>

<code> </code><code><artifactId>thymeleaf</artifactId></code>

<code> </code><code><version></code><code>3.0</code><code>.</code><code>2</code><code>.RELEASE</version></code>

<code> </code><code></code>

<code> </code><code><artifactId>thymeleaf-spring4</artifactId></code>

<code> </code><code><version></code><code>2.1</code><code>.</code><code>2</code><code>.RELEASE</version></code>

2.xml方式配置thymeleaf視圖解析器：

<code></code>

<code> </code><code><bean id=</code><code>"viewResolver"</code> <code>class</code><code>=</code><code>"org.thymeleaf.spring4.view.ThymeleafViewResolver"</code><code>></code>

<code> </code><code><property name=</code><code>"templateEngine"</code> <code>ref=</code><code>"templateEngine"</code> <code>/></code>

<code> </code><code><property name=</code><code>"characterEncoding"</code> <code>value=</code><code>"UTF-8"</code> <code>/></code>

<code> </code><code><bean id=</code><code>"templateEngine"</code> <code>class</code><code>=</code><code>"org.thymeleaf.spring4.SpringTemplateEngine"</code><code>></code>

<code> </code><code><property name=</code><code>"templateResolvers"</code><code>></code>

<code> </code><code><ref bean=</code><code>"templateResolver"</code> <code>/></code>

<code> </code><code><bean id=</code><code>"templateResolver"</code> <code>class</code><code>=</code><code>"org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver"</code><code>></code>

<code> </code><code><property name=</code><code>"prefix"</code> <code>value=</code><code>"/WEB-INF/templates/"</code> <code>/></code>

<code> </code><code><property name=</code><code>"templateMode"</code> <code>value=</code><code>"HTML"</code> <code>/></code>

<code> </code><code><property name=</code><code>"suffix"</code> <code>value=</code><code>".html"</code><code>></property></code>

<code> </code><code><property name=</code><code>"characterEncoding"</code> <code>value=</code><code>"UTF-8"</code><code>></property></code>

3.在controller中為變量name指派。

<code>@RequestMapping</code><code>(value=</code><code>"/index"</code><code>)</code>

<code>public</code> <code>String index(Model model){</code>

<code> </code><code>model.addAttribute(</code><code>"name"</code><code>,</code><code>"world"</code><code>);</code>

<code> </code><code>return</code> <code>"index.html"</code><code>;</code>

4.在index.html中使用thymeleaf文法讀取變量name的值。

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

<code> </code><code><title>Title</title></code>

1.如何添加連結：

<code><a th:href=</code><code>"@{/category/index}"</code><code>>首頁</a></code>

2.表單綁定示例：

<code><form method=</code><code>"post"</code> <code>th:object=</code><code>"${cate}"</code> <code>th:action=</code><code>"@{/category/save}"</code> <code>enctype=</code><code>"multipart/form-data"</code><code>></code>

<code> </code><code><td><input type=</code><code>"text"</code> <code>th:field=</code><code>"*{cateId}"</code><code>></td></code>

<code> </code><code><td><input type=</code><code>"text"</code> <code>th:field=</code><code>"*{cateName}"</code><code>></td></code>

<code> </code><code><input type=</code><code>"file"</code> <code>accept=</code><code>"image/jpeg,image/png,image/jpg"</code> <code>name=</code><code>"picture"</code><code>></code>

<code> </code><code><input type=</code><code>"submit"</code> <code>value=</code><code>"送出"</code><code>></code>

3.展示文本

如何替換子字元串

<code><span th:text=</code><code>"|welcome,${name}|"</code><code>></span></code>

如何轉換日期格式

<code>${#dates.format(v.AddDate,</code><code>'yyyy-MM-dd HH:mm:ss'</code><code>)}</code>

4.如何在js讀取背景資料

5.條件表達式

<code><td th:text=</code><code>"(${r.deleteFlag}==0)?'正常':'删除'"</code><code>></td></code>

6.thymeleaf如何實作switch選擇

<code><td th:</code><code>switch</code><code>=</code><code>"${r.type}"</code><code>></code>

<code> </code><code><span th:</code><code>case</code><code>=</code><code>"module"</code><code>>子產品</span></code>

注意：預設值用th:case="*"

7.th:object文法

首先在controller為對象指派

<code>@Controller</code>

<code>@RequestMapping</code><code>(</code><code>"/demo"</code><code>)</code>

<code>public</code> <code>class</code> <code>DemoController {</code>

<code> </code><code>@RequestMapping</code><code>(</code><code>"/index"</code><code>)</code>

<code> </code><code>public</code> <code>String index(Model model){</code>

<code> </code><code>OrgResource resource=</code><code>new</code> <code>OrgResource();</code>

<code> </code><code>resource.setId(</code><code>"11"</code><code>);</code>

<code> </code><code>resource.setName(</code><code>"test"</code><code>);</code>

<code> </code><code>model.addAttribute(</code><code>"resource"</code><code>,resource);</code>

<code> </code><code>return</code> <code>"demo/index.html"</code><code>;</code>

使用*{}文法可以友善讀取th:object對象的屬性。

<code><div th:object=</code><code>"${resource}"</code><code>></code>

8.疊代 th:each

<code><th:block th:each=</code><code>"r,iterstat:${resources}"</code><code>></code>

<code> </code><code><tr th:</code><code>class</code><code>=</code><code>"${iterstat.odd}?'odd'"</code><code>></code>

<code> </code><code><td th:text=</code><code>"${r.orderNo}"</code><code>></td></code>

<code> </code><code><td th:</code><code>switch</code><code>=</code><code>"${r.type}"</code><code>></code>

<code> </code><code><span th:</code><code>case</code><code>=</code><code>"module"</code><code>>子產品</span></code>

<code> </code><code><td th:text=</code><code>"(${r.deleteFlag}==0)?'正常':'删除'"</code><code>></td></code>

<code> </code><code><td th:</code><code>switch</code><code>=</code><code>"${r.deleteFlag}"</code><code>></code>

9.如何使用Fragment layout布局

首先建立layout.html作為布局模闆。

<code><html lang=</code><code>"zh-CN"</code> <code>xmlns:layout=</code><code>"http://www.thymeleaf.org"</code> <code>xmlns:th=</code><code>"http://www.thymeleaf.org"</code><code>></code>

<code><div layout:fragment=</code><code>"content"</code><code>></div></code>

然後在index.html中使用layout，并用頁面具體内容替代content fragment。

<code><html layout:decorator=</code><code>"task/layout"</code> <code>xmlns:layout=</code><code>"http://www.w3.org/1999/xhtml"</code><code>></code>

<code><div layout:fragment=</code><code>"content"</code><code>></code>

第一次使用layout布局的時候，調試了好半天就是不生效。後來找到了原因，dependency需要添加：

<code> </code><code><groupId>nz.net.ultraq.thymeleaf</groupId></code>

<code> </code><code><artifactId>thymeleaf-layout-dialect</artifactId></code>

<code> </code><code><version>${nz.net.ultraq.thymeleaflayout-version}</version></code>

10.如何用if條件動态調整form action

<code><form th:action=</code><code>"@{/Video/{path}(path=${isCollect}?'CollectVideoList':'VideoList')}"</code><code>></code>

11.thymeleaf回顯富文本編輯器内容

将th:text換成th:utext即可。

本文轉自陳敬（Cathy）部落格園部落格，原文連結：http://www.cnblogs.com/janes/p/7234465.html，如需轉載請自行聯系原作者

JAVA入門[22]—thymeleaf

繼續閱讀

Java String.format方法的簡單使用

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method