作者簡介:大家好,我是擼代碼的羊駝,前阿里巴巴架構師,現某互聯網公司CTO
聯系v:sulny_ann(17362204968),加我進群,大家一起學習,一起進步,一起對抗互聯網寒冬
# 序言
Thymeleaf 是Java服務端的模板引擎,與傳統的JSP不同,前者可以使用瀏覽器直接打開,因為可以忽略掉拓展屬性,相當于打開原生頁面,給前端人員也帶來一定的便利。如果你已經厭倦了JSP+JSTL的組合,Thymeleaf或許是個不錯的選擇!
# 開始使用
1.引入依賴
SpringBoot默認提供了Thymeleaf的Starter,只需簡單引入依賴即可。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
目前默認版本是2.1,如果想升級版本到3.0,可以這樣修改。
???????
<properties>
<thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>
為了方便開發,項目案例采用了熱部署工具dev-tools ,這樣我們在修改頁面之后,IDEA會自動加載,從而達到實現熱更新的效果。
???????
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
注:由于IDEA默認關閉了熱部署,需要做一些設置才能使其生效。解決方法:首先按住Ctrl+Shift+Alt+/ 然后進入 Registry (或者雙擊Shift搜索Registry...),然后勾選compiler.automake.allow.when.app.running 即可。另外,Build->Compiler 也要勾選上Build Project automatically .
2. 添加相關配置
Thymeleaf默認開啟了頁面緩存,在開發的時候,應該關閉緩存。此外,通常我們還會指定頁面的存放路徑。(默認是classpath:/templates/)
???????
application.yml 配置如下:
spring:
thymeleaf:
cache: false #關閉緩存
prefix: classpath:/views/ #添加路徑前綴
3.編寫HTML
編寫Thymeleaf和書寫HTML5頁面沒有什么不同,最大的轉變就是使用拓展屬性(th:xx)去跟服務端進行數據交互,保留原始頁面風格,也是Thymeleaf的推崇的風格。例如下面這個簡單的案例,啟動項目,我們發現頁面跳轉的是簡書的連接,這一點也驗證了Thymeleaf覆蓋原生頁面數據的極佳能力。
???????
頁面代碼:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf</title>
</head>
<body>
<h2>歡迎使用Thymeleaf!!</h2>
<a href="http://www.baidu.com" th:href="${info}">戳我有驚喜</a>
</body>
</html>
后端代碼:
@Controller
public class UserController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("info", "user/list");
return "index";
}
@GetMapping("/user")
public String hehe(Model model) {
model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
return "user";
}
@GetMapping("/user/list")
public String userlist(Model model) {
List<User> userList = new ArrayList<>();
userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
model.addAttribute("userList", userList);
return "userList";
}
}
現在我們嘗試回填一個表單,展示單個用戶信息。
???????
<!-- 使用th:object 搭配*{} 可以省略對象名 -->
<form action="/" th:object="${user}" >
<input type="hidden" name="userId" th:value="*{userId}" />
<input type="text" name="username" th:value="*{username}" />
<input type="text" name="password" th:value="*{password}" />
</form>
接下來,我們進入一個更復雜的案例,例如展示一個用戶列表信息,
不需要編寫新的標簽,就可以完成對批量用戶的遍歷。
???????
<h2>用戶列表</h2>
<!--說明:th:each="obj,stat:${objects}" 分別代表單個實例,狀態(可省略),待遍歷對象-->
<div th:each="user:${userList}">
<input type="hidden" name="userId" th:value="${user.userId}"/>
用戶姓名:<input type="text" name="password" th:value="${user.username}"/>
登錄密碼:<input type="text" name="username" th:value="${user.password}"/>
</div>
好了,Thymeleaf簡單介紹到這里