SpringBoot的子項目: 需要依賴包:
<!-- springBoot的親兒子 thymeleaf 相關四個依賴,可以設置松校驗,熱部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
<dependency>
<groupId>xml-apis</groupId>
<artifactId>xml-apis</artifactId>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-ext</artifactId>
</dependency>
使用
1.resource目錄下 創建 static 存放js css , 創建 templates 存放html
2.配置文件
# thymeleaf的配置
#關閉thymeleaf的緩存,熱部署
spring.thymeleaf.cache=false
#松校驗
spring.thymeleaf.mode=LEGACYHTML5
3.啓動類 不要使用json返回, return 'index' ,會從template下面尋找對應的html文件渲染
@Controller
public class itemController {
@RequestMapping("index")
public String index(ModelMap modelMap){
List<String> arrayList = new ArrayList<>();
for (int i = 0; i < 5; i++) {
arrayList.add("循環數據:" + i);
}
modelMap.put("list",arrayList);
modelMap.put("hello","hello my thymeleaf !!@");
modelMap.put("ifcheck","1");
return "index";
}
}
4.html 文件需要引入thymeleaf 的約束
1.取值 <p th:text="${hello}"><p> 優先使用thymeleaf
2. 循環 <p th:each="str:${list}" th:text="${str}"> </p> 使用th:each把列表每一個賦值給 str 再使用 th:text 取值
3.支持三目運算 th:text="(${ifcheck}=='1')?'checked':''
4.input 勾選狀態的判斷 <input type="checkbox" th:checked="${ifcheck}==1">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1>wyc !212</h1>
取值
<p th:text="${hello}"><p>
兩種循環
<p th:each="str:${list}" th:text="${str}"></p>
<p th:each="str:${list}">
<input th:text="${str}" th:value="${str}" value="111"/>
</p>
判斷-
<p th:if="1==2">我在不在</p>
<input type="checkbox" th:checked="${ifcheck}==1">
<input type="checkbox" th:text="(${ifcheck}=='1')?'checked':''">
<!--頁面引入-->
<!--傳值給java script-->
</body>
</html>
頁面效果:
thymeleaf與javascript 傳值
普通javascript 函數傳一個字符串
<a href="javascript:f('abc')">點我1</a>
<!--頁面引入-->
<script type="text/javascript">
function f(a) {
alert("ok !!!!"+a)
}
</script>
th 表示 需要 使用 \' 轉義 表示後面 加入一個動態的參數
<button onclick="f()">點我1</button>
<a th:href="'javascript:f(\''+${hello}+'\')'">點我2</a>
<!--頁面引入-->
<script type="text/javascript">
function f(a) {
alert("ok !!!!"+a)
}
</script>
th:onclick="'javascript:item(\''+${skuLsInfo.id}+'\')'"
thymeleaf 頁面引入
被引入頁面 indexinner.htlm :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1> 被引入的頁面!!!</h1>
</body>
</html>
1.使用 th:include="indexinner" 引入它
<!--頁面引入-->
<div th:include="indexinner">引入頁面</div>
2.如果只引入部分頁面 使用 <div th:fragment="innerPart"> </div> 需要被引入的部分起名:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1> 被引入的頁面!!!</h1>
<div th:fragment="innerPart"> 被引入的部分頁面!!!</div>
</body>
</html>
使用 th:include="indexinner :: innerPart" 引入它的部分
<div th:include="indexinner::innerPart">引入頁面</div>
頁面 不會顯示 第一句話
如果還使用 <div th:include="indexinner">引入頁面</div> 那麼顯示兩句話
3.th:replace="indexinner"
與th:include="indexinner"類似但是
include只是將 <div th:fragment="innerPart"> 被引入的部分頁面!!!</div> 其中的 "被引入的部分頁面!!!" 這句話引入
replace 是完全將自己替換爲引入的部分 使用replace後 --> <div > 被引入的部分頁面!!!</div>