Thymeleaf

簡介

目前Java Web開發推薦使用模板模板引擎,不建議使用jsp頁面html

  • jsp 缺點L本質上就是servlet,須要後臺編譯,耗時,效率低
  • 模板引擎,不須要編譯,速度快。
    經常使用的模板引擎:Freemarker、Veloctiy、Thymeleaf等
    SpringBoot推薦使用Thymeleaf,且默認不支持jsp頁面,由於jsp必須打包。session

    經常使用屬性

    th:text,th:utext

  • 設置元素中的文本內容。
    th:text對特俗字符進行轉義,等價於[[${ }]]
    th:utext 對特俗字符不進行轉義 。等價於[(${})]app

    設置html的原生屬性

  • th:html
    用來替換指定的html原生屬性
    ### 條件判斷
  • th:if
    年齡大於10顯示這個div
<p th:if="${age>=18}">成年</p>
  • th:unless
    年齡不大於24顯示這個div
<p th:unless="${age>=24}">成年</p>
  • th:switch th:case
<p th:switch="${role}">
<span th:case="admin">管理員</span>
<span th:case="teacher">教師</span>
<span th:case="student">學生</span>
<span th:case="*">其餘</span>
</p>
  • th:each
<ul>
    <li th:each="name:${students}" th:text="${name}"></li>
</ul>
  • th:object
    用於表單對象的綁定,將表單綁定到Controller的一個JavaBean參數,常與th:field一塊兒使用,須要和*()表達式配合使用
<form action="/modify" method="post" th:object="${user}">
    編號:<input type="text"  th:field="*{id}" readonly><br>
    姓名:<input type="text" th:field="*{name}"><br>
    年齡: <input type="text"  th:field="*{age}"><br>
    <input type="submit"  value="修改">

</form>
  • th:fragment
    生命代碼片斷,經常使用語頁面的頭部和尾部的引用
  • th:include、th:insert、th:replace
    th:include 保留本身的標籤,不要th:frament的標籤(Thymeleaf 3.0不推薦使用)
    th:insert 保留本身的標籤,保留th:frament的標籤
    th:replace 不要本身的標籤,保留th:frament的標籤
<div th:include="/include/header::head"></div>

中間部分
<div th:include="/include/foot::copy"></div>


<div th:insert="/include/foot::copy"></div>
<div th:replace="/include/header::head"></div>

footless

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<footer  th:fragment="copy">
    這是頁面的底部
</footer>
</html>

headerjsp

<!DOCTYPE html>
<!---導入thymeleaf命名空間 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="head">

    這是頁面的頭部

</header>
</html>

表達式

${}變量表達式

  • 獲取對象的屬性、方法
    *使用內置的基本對象,如session、application等
  • 使用內置的工具對象,如#strings、#data、#arrays、@list、#maps工具

    *{}選擇表達式

    須要和th:object配合使用,簡化了對象屬性的獲取post

    @{} url表達式

    定義urlthis

<!DOCTYPE html>
<!---導入thymeleaf命名空間 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:text="${name}"></div>

<div>th:tex和th:utext區別</div>
<div>utext</div>
<div th:utext="${html}"></div>
<div>text</div>
<div th:text="${html}"></div>

<div>[[${html}]]aa</div>
<div>[(${html})]bb</div>
<!---替換html的原生屬性 -->
<div th:id="${id}" th:title="${title}">這是一個div</div>


<p th:if="${age>=18}">成年</p>
<p th:unless="${age>=24}">成年</p>

<p th:switch="${role}">
<span th:case="admin">管理員</span>
<span th:case="teacher">教師</span>
<span th:case="student">學生</span>
<span th:case="*">其餘</span>
</p>

<ul>
    <li th:each="name:${students}" th:text="${name}"></li>
</ul>

<h3>修改用戶信息</h3>
<form action="/modify" method="post" th:object="${user}">
    編號:<input type="text"  th:field="*{id}" readonly><br>
    姓名:<input type="text" th:field="*{name}"><br>
    年齡: <input type="text"  th:field="*{age}"><br>
    <input type="submit"  value="修改">

</form>


<!---${} 獲取對象或屬性的方法 -->

<div th:text="${user.getName()}"></div>
<div th:text="${user['age']}"></div>

<!---獲取集合 -->
<div th:text="${users.size()}"></div>
<div th:text="${users[1].getName()}"></div>
<div th:text="${users[1].getName()}"></div>
<div >元素個數[[${users.size()}]]</div>
<div th:text="${users.get(1).name}"></div>

<!---使用內置基本對象 -->
<div th:text="${session.sex}"></div>
<div th:text="${application.hbody}"></div>

<!---使用內置的工具對象 -->

<div th:text="${#strings.startsWith(user.name,'t')}"></div>
<div>是否包含t  [[${#strings.startsWith(user.name,'t')}]]</div>
<div th:text="${#strings.substring(user.name,1,2)}"></div>
<div th:text="${#strings.length(user.name)}"></div>
<div th:text="${#dates.createNow()}"></div>
<div th:text="${#dates.create(2018,1,2)}"></div>
<div th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd')}"></div>




<!---*{}選擇表達式 -->
<div>--------------------------------*{}選擇表達式 ------------------------------------------------</div>
<div th:object="${user}">
    <div th:text="*{id}"></div>
    <div th:text="*{name}"></div>
    <div th:text="*{age}"></div>
</div>

<!---@{} url表達式 -->

<a th:href="@{/finduser/(username=${user.name})}">查詢指定的用戶信息</a>

<!---運算符 -->

性別: <input type="radio" name="sex" th:value="male" th:checked="${session.sex eq 'male'}">男
<input type="radio" name="sex" th:value="male" th:checked="${session.sex eq 'fmale'}">女
<div th:if="${address==null}">未找到信息</div>
<div th:text="${users.size()>=2? '大於等於2' : '小於等於2'}"></div>
<div></div>
</body>
</html>

controllerurl

model.addAttribute("name","toms");
model.addAttribute("html","<mark>您好,\\您好啊</mark>");
model.addAttribute("id","mydiv");
model.addAttribute("title","this is mytitle");
model.addAttribute("age",21);
model.addAttribute("role","teacher");
model.addAttribute("students", Arrays.asList("tom","張三","李四"));

User user = new User(1001, "tom", 21);
model.addAttribute("user",user);

List<User> users=new ArrayList<>();
users.add(new User(10002,"lihai",20));
users.add(new User(10003,"tom",30));
users.add(new User(10004,"cat",40));
model.addAttribute("users",users);

session.setAttribute("sex","male");

session.getServletContext().setAttribute("hbody","gname");

return "success"; //使用thymeleaf 會自動拼寫前綴和後綴
相關文章
相關標籤/搜索