Spring Boot之Thymeleaf開發
1、Thymeleaf模板引擎
Spring Boot 提供了大量的模板引擎，包括FreeMarker\Groovy\Thymeleaf\Velocity和Mustache,Spring Boot 中推薦使用Thymeleaf作爲模板引擎，因爲Thymeleaf提供了完美的Spring MVC的支持。
2、Thymeleaf基礎知識
Thymeleaf是一個Java類庫，他說一個xml/xhtml/html5的模板引擎，可以作爲MVC的web應用的View層。
Thymeleaf還提供了額外的模塊與Spring MVC集成，所以我們還可以使用Thymeleaf完全替代JSP。
2.1、引入Thymeleaf
在標籤中添加thymeleaf命名空間，將靜態頁面轉換爲動態的視圖。
通過”@{}”引用web靜態資源。
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script th:src="@{jqeury.min.js}" type="text/javascript"></script>
</body>
</html>2.2範圍model中的數據
通過”${}”訪問model中的屬性，這個jsp即爲相似。
<div>
<h3>訪問model</h3>
<span th:text="${singlePerson.name}"></span>
</div>2.3.引入URL
Thymeleaf對於URL的處理是通過語法@{…}來處理的
<a th:href="@{https://blog.csdn.net/java_mdzy/article/category/7716138}">絕對路徑</a>
<a th:href="@{/}">相對路徑</a>
<a th:href="@{css/bootstrap.min.css}">Content路徑,默認訪問static下的css文件夾</a>2.4使用運算符
在表達式中可以使用各類算術運算符，例如+, -, *, /, %
th:with="isEven=(${prodStat.count} % 2 == 0)"邏輯運算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>時需要用它的HTML轉義符：
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"2.5數據迭代（數據循環）
Thymeleaf的迭代和JSP的寫法很相似，代碼如下
<div>
<ul>
<li th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</li>
</ul>
</div>3、項目實戰
3.1新建項目
新建Spring Boot 項目，具體請參考 初識springboot之快速搭建
3.2項目配置
添加項目依賴，在pom.xml中添加Thymeleaf依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>配置視圖解析器，在application.properties中可以配置thymeleaf模板解析器屬性.就像使用springMVC的JSP解析器配置一樣
#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#開發時關閉緩存,不然沒法看到實時頁面
spring.thymeleaf.cache=false
#thymeleaf end3.3編寫demo代碼
項目目錄如下圖所示：
各個子類代碼：
新建domain目錄，用於新建實體。新建Person類，代碼如下
package com.crazyang.domain;
/**
* Created with IntelliJ IDEA.
*
* @Author crazyang
* @Desciption:
* @Date 2018-6-6 15:41
*/
public class Person {
private String name;
private Integer age;
public Person() {
super();
}
public Person(String name, Integer age) {
super();
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
新建IndexController,用於控制前段請求和頁面跳轉。代碼如下:
package com.crazyang.controller;
import com.crazyang.domain.Person;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import java.util.ArrayList;
import java.util.List;
/**
* Created with IntelliJ IDEA.
*
* @Author crazyang
* @Desciption:
* @Date 2018-6-6 14:02
*/
@Controller
public class IndexController {
private Logger logger = LoggerFactory.getLogger(IndexController.class);
/**
* 測試hello
*
* @return
*/
@RequestMapping(value = "/index", method = RequestMethod.GET)
public String hello(Model model) {
//單個用戶
Person single = new Person("crazyang",66);
//多個用戶List，用於Thymeleaf中迭代
List<Person> people = new ArrayList<Person>();
Person p1 = new Person("zhangsan",11);
Person p2 = new Person("lisi",16);
Person p3 = new Person("wangwu",21);
people.add(p1);
people.add(p2);
people.add(p3);
model.addAttribute("person", single);
model.addAttribute("people", people);
return "index";
}
}
index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<div style="border: 1px gray solid ;margin: 10px">
<p th:text="'用戶名！, ' + ${single.name} + '!'" >3333</p>
<p th:text="'用戶年齡！, ' + ${single.age} + '!'" >3333</p>
</div>
<div style="border: 1px gray solid ;margin: 10px">
<li th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</li>
</div>
</body>
</html>4、運行結果
啓動項目，瀏覽器中輸入http://localhost:8080/index，結果如下圖所示：
5、項目總結
本章簡要介紹了Thymeleaf和Spring Boot結合使用，通過一個例子，展示了Thymeleaf使用中的簡潔方便。