項(xiàng)目名稱(chēng):040-springboot-thymeleaf-expression
1.創(chuàng)建SpringBoot的web項(xiàng)目并使用模版引擎
2.pom.xml中應(yīng)該有如下兩個(gè)依賴(lài)
<!--SpringBoot集成Thymeleaf模版引擎的起步依賴(lài)-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot的web項(xiàng)目起步依賴(lài)-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
3.在application.properties中設(shè)置thymeleaf參數(shù)
#設(shè)置thymeleaf頁(yè)面緩存失效
spring.thymeleaf.cache=false
#thymeleaf模版前綴,默認(rèn)值,可選項(xiàng)
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf模版后綴,默認(rèn)值,可選項(xiàng)
spring.thymeleaf.suffix=.html
4.創(chuàng)建實(shí)體User實(shí)體類(lèi)
在com.abc.springboot.model包下創(chuàng)建User實(shí)體類(lèi)
package com.abc.springboot.model;
/**
* ClassName:User
* Package:com.abc.springboot.model
* Description:
*/
public class User {
private Integer id;
private String nick;
private String phone;
private String address;
//此處省略屬性的set和get
}
5.創(chuàng)建ThymeleafController類(lèi)
在com.abc.springboot.web包下創(chuàng)建ThymeleafController類(lèi)
package com.abc.springboot.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* ClassName:ThymeleafController
* Package:com.abc.springboot.web
* Description:
*/
@Controller
public class ThymeleafController {
@RequestMapping(value = "/springboot/thymeleaf/index")
public String index(Model model) {
model.addAttribute("data","哈嘍,SpringBoot");
return "index";
}
}
6.在src/main/resources/templates在創(chuàng)建html頁(yè)面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf'Index</title>
</head>
<body>
<span th:text="${data}"></span>
</body>
</html>
7.測(cè)試
標(biāo)準(zhǔn)變量表達(dá)式
注意:th:text="" 是Thymeleaf的一個(gè)屬性,用于文本的顯示
1.語(yǔ)法 ${...}
2.說(shuō)明
標(biāo)準(zhǔn)變量表達(dá)式用于訪(fǎng)問(wèn)容器(tomcat)上下文環(huán)境中的變量,功能和EL中的 ${} 相同。Thymeleaf 中的變量表達(dá)式使用 ${變量名} 的方式獲取Controller中model其中的數(shù)據(jù)。
3.案例演示
在ThymeleafController中添加user方法中,向model放入U(xiǎn)ser對(duì)象
@RequestMapping(value = "/thymeleaf/expression/user")
public String user(Model model) {
User user = new User();
user.setId(100);
user.setPhone("13700000000");
user.setNick("張三");
user.setAddress("北京市亦莊");
model.addAttribute("user",user);
return "user";
}
在templates目錄下創(chuàng)建user.html頁(yè)面獲取User對(duì)象數(shù)據(jù)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf標(biāo)準(zhǔn)變量表達(dá)式</title>
</head>
<body>
<h2>Thymeleaf以HTML為載體展示數(shù)據(jù)</h2>
<h2>展示用戶(hù)信息:</h2>
<span th:text="${user.id}"></span><br/>
<span th:text="${user.nick}"></span><br/>
<span th:text="${user.phone}"></span><br/>
<span th:text="${user.address}"></span><br/>
</body>
</html>
為了演示方便,在pom.xml文件中加入熱部署插件
<!--熱部署插件-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
瀏覽器訪(fǎng)問(wèn)http://localhost:8080/thymeleaf/expression/user 測(cè)試
4.重新Recompile即可生效
1.語(yǔ)法:*{...}
2.說(shuō)明
選擇變量表達(dá)式,也叫星號(hào)變量表達(dá)式,使用 th:object 屬性來(lái)綁定對(duì)象;
選擇表達(dá)式首先使用th:object來(lái)綁定后臺(tái)傳來(lái)的User對(duì)象,然后使用 * 來(lái)代表這個(gè)對(duì)象,后面 {} 中的值是此對(duì)象中的屬性。
選擇變量表達(dá)式 *{...} 是另一種類(lèi)似于標(biāo)準(zhǔn)變量表達(dá)式 ${...} 表示變量的方法;
選擇變量表達(dá)式在執(zhí)行時(shí)是在選擇的對(duì)象上求解,而${...}是在上下文的變量Model上求解,這種寫(xiě)法比標(biāo)準(zhǔn)變量表達(dá)式繁瑣,只需要大家了解即可。
3.案例演示
在user.html通過(guò)選擇變量表達(dá)式獲取用戶(hù)數(shù)據(jù)
<h2>選擇變量表達(dá):又叫做*號(hào)表達(dá)式</h2>
<h3 style="color: red">用戶(hù)對(duì)象僅在div范圍內(nèi)有效</h3>
<div th:object="${user}">
<span th:text="*{id}"></span><br/>
<span th:text="*{nick}"></span><br/>
<span th:text="*{phone}"></span><br/>
<span th:text="*{address}"></span><br/>
</div>
瀏覽器訪(fǎng)問(wèn)http://localhost:8080/thymeleaf/expression/user 測(cè)試
標(biāo)準(zhǔn)變量表達(dá)式和選擇變量表達(dá)式可以混合一起使用, 也可以不使用 th:object 進(jìn)行對(duì)象的選擇,而直接使用 *{...} 獲取數(shù)據(jù)
<h2>=====標(biāo)準(zhǔn)變量表達(dá)式和選擇變量表達(dá)式混合使用</h2>
<h3 style="color: red">1.標(biāo)準(zhǔn)變量表達(dá)式展示數(shù)據(jù)</h3>
<div th:text="${user.id}"></div>
<div th:text="${user.phone}"></div>
<div th:text="${user.nick}"></div>
<div th:text="${user.address}"></div>
<h3 style="color: red">2.選擇變量表達(dá)式其它用法展示數(shù)據(jù)</h3>
<div>
<span th:text="*{user.id}"></span><br/>
<span th:text="*{user.phone}"></span><br/>
<span th:text="*{user.nick}"></span><br/>
<span th:text="*{user.address}"></span><br/>
</div>
測(cè)試查看結(jié)果
URL表達(dá)式
1.語(yǔ)法@{...}
2.說(shuō)明
主要用于鏈接、地址的展示,可用于
<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等,可以在URL路徑中動(dòng)態(tài)獲取數(shù)據(jù)
3.案例演示
在user.html頁(yè)面中加入如下代碼
<h2>=====URL表達(dá)式:@{...}</h2>
<div style="font-size:large">絕對(duì)路徑</div>
<a href="info.html" th:href="@{'http://localhost:8080/springboot/user/info?id=' + ${user.id}}">絕對(duì)路徑:查看</a>
<div style="font-size:large">相對(duì)路徑:相對(duì)于當(dāng)前頁(yè)面</div>
<a th:href="@{'user/info?id=' + ${user.id}}">相對(duì)路徑:查看</a>
<div style="font-size:large;color: red">相對(duì)路徑:相對(duì)于項(xiàng)目上下文,實(shí)際開(kāi)發(fā)推薦這種方式,避免路徑找不到的問(wèn)題</div>
<a th:href="@{'/user/info?id=' + ${user.id}}">相對(duì)路徑:相對(duì)于上下文-查看</a>
為了演示加上下文的效果,在application.properties中配置項(xiàng)目上下文
#設(shè)置項(xiàng)目上下文根
server.servlet.context-path=/040-springboot-thymeleaf-expression
瀏覽器訪(fǎng)問(wèn),右鍵查看源代碼