springboot(8)——springboot整合Thmeleaf

時間 2019-11-13

原文原文鏈接

一、概述

Thymeleaf相似JSP、Velocity、Freemarker都是模板引擎，主要用來展現數據，原理以下javascript

springboot官網仍是推薦使用Thymeleaf而不是jsp，
html

不使用jsp的緣由是快速建立的springboot應用是jar應用，而且使用的是嵌入式的tomcat，固然Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 Thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
java

二、如何整合

第一步：引入Thmeleaf依賴
程序員

選擇性修改thymeleaf版本
spring

第二步：把HTML頁面放在classpath:/templates/，thymeleaf就能自動渲染
瀏覽器

原理在boot中能夠查看源碼
tomcat

也能夠經過在application配置文件中修改
springboot

而後再html頁面中導入命名空間
服務器

<html lang="en" xmlns:th="http://www.thymeleaf.org">
微信

3、thymeleaf語法

上面，咱們環境已經搭建好了，加下來就是如何展現後臺傳來的數據，這裏主要說下經常使用的一些標籤

`關鍵字`	`功能介紹`	`案例`
`th:id`	`替換id`	`<input th:id="'xxx' + ${collect.id}"/>`
`th:text`	`文本替換`	`<p th:text="${collect.description}">description</p>`
`th:utext`	`支持html的文本替換`	`<p th:utext="${htmlcontent}">conten</p>`
`th:object`	`替換對象`	`<div th:object="${session.user}">`
`th:value`	`屬性賦值`	`<input th:value="${user.name}" />`
`th:with`	`變量賦值運算`	`<div th:with="isEven=${prodStat.count}%2==0"></div>`
`th:style`	`設置樣式`	`th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
`th:onclick`	`點擊事件`	`th:onclick="'getCollect()'"`
`th:each`	`屬性賦值`	`tr th:each="user,userStat:${users}">`
`th:if`	`判斷條件`	`<a th:if="${userId == collect.userId}" >`
`th:unless`	`和th:if判斷相反`	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
`th:href`	`連接地址`	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />`
`th:switch`	`多路選擇配合th:case 使用`	`<div th:switch="${user.role}">`
`th:case`	`th:switch的一個分支`	`<p th:case="'admin'">User is an administrator</p>`
`th:fragment`	`佈局標籤，定義一個代碼片斷，方便其它地方引用`	`<div th:fragment="alert">`
`th:include`	`佈局標籤，替換內容到引入的文件`	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />`
`th:replace`	`佈局標籤，替換整個標籤到引入的文件`	`<div th:replace="fragments/header :: title"></div>`
`th:selected`	`selected選擇框選中`	`th:selected="({xxx.id} == {configObj.dd})"`
`th:src`	`圖片類地址引入`	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`
`th:inline`	`定義js腳本可使用變量`	`<script type="text/javascript" th:inline="javascript">`
`th:action`	`表單提交的地址`	`<form action="subscribe.html" th:action="@{/subscribe}">`
`th:remove`	`刪除某個屬性`	`<tr th:remove="all"> 1.all:刪除包含標籤和全部的孩子。2.body:不包含標記刪除,但刪除其全部的孩子。3.tag:包含標記的刪除,但不刪除它的孩子。4.all-but-first:刪除全部包含標籤的孩子,除了第一個。5.none:什麼也不作。這個值是有用的動態評估。`
`th:attr`	`設置標籤屬性，多個屬性能夠用逗號分隔`	`好比th:attr="src=@{/image/aa.jpg},title=#{logo}"，此標籤不太優雅，通常用的比較少。`