spring整合thymeleaf模板
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
依賴
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.3.RELEASE</version>
正文
在我們平時的開發中，用了很久的jsp作view顯示層，但是標簽庫和JSP缺乏良好格式的一個副作用就是它很少能夠與其產生的HTML類似。所以，在Web瀏覽器或HTML編輯器中查看未經渲染的JSP模板是非常令人困惑的，而且得到的結果看上去也非常丑陋（也就是不放到服務器，直接本地打開）。
但是Thymeleaf模板是原生的，不依賴於標簽庫。它能在接受原始HTML的地方進行編輯和渲染（也就是說我們通過thymeleaf寫一個頁面，如果不放到服務器進行渲染，也是可以看到效果的，跟后端打開基本相同）
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置springbean視圖
首先我們需要讓springboot（springmvc通用）知道我們的頁面是通過什么來渲染的（jsp,freemarker,thymeleaf等等，以及模板的位置等信息）
/**
* 設置視圖解析器
* @param templateEngine
* @return
*/
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine);
return resolver;
}
/**
* 設置模板引擎
* @param templateResolver
* @return
*/
@Bean
public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
return engine;
}
/**
* 模板解析引擎
* @return
*/
@Bean
public TemplateResolver templateResolver(){
TemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setPrefix("/WEB-INF/template/");//設置地址前綴
resolver.setSuffix(".html");//設置后綴
resolver.setCacheable(false);//設置不緩存
resolver.setTemplateMode("HTML5");
return resolver;
}
ThymeleafViewResolver是Spring MVC中ViewResolver的一個實現類。像其他的視圖解析器一樣，它會接受一個邏輯視圖名稱，並將其解析為視圖
TemplateResolver會最終定位和查找模板。與之前配置InternalResourceViewResolver類似，它使用了prefix和suffix屬性。前綴和后綴將會與邏輯視圖名組合使用，進而定位Thymeleaf引擎。它的templateMode屬性被設置成了HTML 5，這表明我們預期要解析的模板會渲染成HTML 5輸出
到這里我們就基本配置完了 。
接下來我們在WEB-INF/template下建立home.html,頭部加入thymeleaf的命令空間
<html xmlns:th="http://www.thymeleaf.org">
建立一個controller，寫我們的第一個controller，打開訪問localhost:8080/home就會轉發到/WEB-INF/template/home.html
@RequestMapping("/home")
public String hello(Map<String,Object> map){
User user = new User("1", "fei", 22, "愛好：籃球","admin");
map.put("user",user);
List<User> list = new ArrayList<>();
for(int i =0;i<5;i++){
User u = new User(""+(i+2), "fei"+(i+2), 22+(i+2), "愛好：籃球"+(i+2),"user"+i);
list.add(u);
}
map.put("userList",list);
return "home";
}
thymeleaf語法
文本顯示
${}的使用和jsp的el表達式很類似，我們在后台綁定了一個user對象那么我們可以通過${user.name}獲取用戶名，相當於user.getName();但是注意這個只能放到th表達式里面
th:text就相當於把里面的渲染主來的值放到aaa的位置上，如果th:text里面的值只有${user.name},並且為null，那么就會顯示aaa
<span th:text="'用戶名：' +${user.name}">aaa</span>
#或者下面的這種方式，|…|中只能包含變量表達式${…}，不能包含其他常量、條件表達式等
<span th:text="|用戶名：${user.name}|"></span>
運算符
在表達式中可以使用各類算術運算符，例如+, -, *, /, %
<span th:text="'年齡*2='+ ${user.age}*2 "></span>
邏輯運算符
在表達式中可以使用邏輯運算符，但是除了==其他的要使用轉義字符
>, <, >=, <= != 對應(gt, lt, ge, le, ne)
<span th:text="(${user.age} eq 22)">aaa</span> //輸出true
#可以使用二元表達式
<span th:text="(${user.age} ge 23?'超過年紀':'ok')"></span>
條件判斷
th:if條件成立才會顯示
th:unless條件不成立才會顯示
<span th:if="(${user.age} gt 21)">年齡超過21才會顯示</span>
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
Switch
* 代表default，其他都沒匹配到會顯示帶*的
<div th:switch="${user.role}">
<p th:case="'admin'">用戶是管理員</p>
<p th:case="*">用戶是普通人員</p>
</div>
循環
第二個參數稱作狀態變量，屬性有
- index:當前迭代對象的index（從0開始計算）
- count: 當前迭代對象的index(從1開始計算)
- size:被迭代對象的大小
- current:當前迭代變量
- even/odd:布爾值，當前循環是否是偶數/奇數（從0開始計算）
- first:布爾值，當前循環是否是第一個
- last:布爾值，當前循環是否是最后一個
<table>
<tr>
<th>index</th>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr th:each="user,iterStat: ${userList}" >
<td th:text="${iterStat.index}">1</td>
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">王五</td>
<td th:text="${user.age}">55</td>
</tr>
</table>
* 號和$符號共用
*{}里面的值就是上層th:object對象里面對應的屬性
<div th:object="${user}">
<p>Name: <span th:text="*{name}">wangwu</span>.</p>
<p>AGE: <span th:text="*{age}">22</span>.</p>
</div>
Utilities
Utilities為了模板更加易用，Thymeleaf還提供了一系列Utility對象（內置於Context中），可以通過#直接訪問
- dates ： java.util.Date的功能方法類。
- calendars : 類似#dates，面向java.util.Calendar
- numbers : 格式化數字的功能方法類
- strings : 字符串對象的功能類，contains,startWiths,prepending/appending等等。
- objects: 對objects的功能類操作。
- bools: 對布爾值求值的功能方法。
- arrays：對數組的功能類方法。
- lists: 對lists功能類方法
- sets
- maps
表達式基本對象
- #ctx: 上下文對象.
- #vars: context中的變量們.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest對象.
- #httpSession: (只在web context中) HttpSession對象.
將date渲染成后面的格式
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
得到當前時間
${#dates.createNow()}
得到當前時間並顯示
<span th:text=" ${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')} "></span>
內聯
Text inlining
后面[[]]里面的值是從域中獲取的text文本，跟使用th:text效果類似
<span th:inline="text">[[${user.name}]]</span>
JavaScript inlining
<script th:inline="javascript">
var name = [[${user.name}]];
</script>
下面這個意思是如果沒有跑在服務器，name就會是我們的lisi，如果在服務器上，會取出user.name的值，忽略lisi
var name = /*[[${user.name}]]*/"lisi";
CSS inlining
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
none inlining
但是如果我么就要顯示[[${user.name}]]不需要他轉換呢，就會用到none inlining
<span th:inline="none">[[${user.name}]]</span>
嵌套
在當前home.html路徑下有個footer.html,內容如下
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
</body>
</html>
在home.html引用這個footer，footer代表html的名稱，copy代表fragmen的值
<div th:replace="footer:: copy"></div> <div th:include="footer:: copy"></div>
展現的源碼：
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
得出結論：
- th:replace會將當前div整個替換成foot的元素
- th:include只是將footer里面的內容拷貝進來
鏈接
鏈接一般用th:href="@{地址}"，“@{}”表達式，用來計算相對於URL的路徑,在html ==<a href="/register"></a>
<a th:href="@{/register}">register</a>
常用標簽
springboot簡化配置
當然在springboot中，上面的視圖解析器等注冊都不需要我們做了，因為springboot都默認幫我們做了，（只要我們將Thymeleaf maven依賴添加到項目的pom文件下，就啟用了Spring Boot的自動配置。當應用運行時，Spring Boot將會探測到類路徑中的Thymeleaf，然后會自動配置視圖解析器、模板解析器以及模板引擎）
如果什么都不配置，springboot會默認查找類跟目錄下的templates文件夾下的模板，home.html放到src/main/ resources/templates目錄下
如果我們要在home的html中引入一些靜態資源怎么辦呢，這點springboot也幫我們考慮到了
springboot它會將“/**”映射到幾個資源路徑中
- META-INF/resources/
- resources
- static
- public
也就是說我們在有一個static/css/home.css
那么我們這樣引入就可以了。
<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>
當然，我們還是可以配置前綴后綴，以及是否緩存等，只需要一個簡單的配置即可
#配置前綴 #spring.thymeleaf.prefix=classpath:/templates/ #配置后綴 #spring.thymeleaf.suffix=.html #spring.thymeleaf.mode=HTML5 #spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.content-type=text/html #是否開啟緩存 spring.thymeleaf.cache=false