Maxon's Blog
Thymeleaf
前端

Thymeleaf

3
#Spring#Java#Thymeleaf#Web

http://c.biancheng.net/spring_boot/thymeleaf.html

最近需要使用Thymeleaf进行前端页面的开发,于是找机会速通了一下.看完感觉一些特性与VUE类似,入门还是挺快的!

👻开发准备:

  1. 开发时先在application.properties中将spring.thymeleaf.cache 设置为false. 上线的时候别忘了打开!!

  2. 在Configuration中将 On Update action和On frame deactivation 设置为 Update resources Configuration

  3. Setting -> Editor -> File and code templates中添加一个 Thymeleaf模板

  4. HTML
    <!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="Thymeleaf">Thymeleaf Welcome!</h1>
</body>
</html>

😺简单使用:

  1. 页面中使用th:xxx属性绑定数据

    HTML
    <!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">默认的Title</title>
</head>
<body>
<h1 th:text="label1">Thymeleaf Welcome!</h1>
</body>
</html>

  2. 编写Controller传递参数

    Java
    @Controller
public class IndexController {

    @GetMapping("/index")
    public String index(Model model){
        //Model 是用来给 页面追加数据的
        model.addAttribute("title","New  Title ");
        model.addAttribute("label1","New  Label ");
        return "index";//返回值是引用哪个页面
    }
}

3.铛铛! image-20230128162229387

简单使用:

小特性:

  1. 使用 | 来拼接 变量与字符串|

    HTML
    <title th:text="|Aowu-${title}|">默认的Title</title>

  2. 在Javascript中使用Controller传过来的参数时

    • 如果/*[[${user}]]*/中参数为空 则取后面的默认值
    JavaScript
     const user=/*[[${user}]]*/{默认值};

  3. 组件的使用

    Html
    <!--replace 替换 组件-->
<div th:replace="~{componet::com1}"></div>

<!--insert 插入 组件-->
<div th:insert="~{componet::com1}"></div>
    • replace :用组件 直接替换当前标签
    • insert : 在当前标签下插入组件

  4. 有一些工具类是可以直接使用的

    HTML
    <p th:text="|创建时间: ${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}|">创建时间</p>

    也可以自定义工具类,并将工具类通过Controller以参数传递到前端调用

小试牛刀:

index.html

HTML
<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{app.css}">  <!--引入css-->

    <style>
        .active{
            color: red;
        }
    </style>

</head>
<body>
<div class="app"></div>


<h1 th:text="${user.getUsername()}">Thymeleaf Welcome!</h1>
<h1 th:text="${user.username}">Thymeleaf Welcome!</h1>
------------------------
<div th:object="${user}">
    <h1 th:text="*{username}">Thymeleaf Welcome!</h1>
</div>
------------------------
<p th:if="${user.isVip}">我是会员</p> <!--if判断是否渲染-->
------------------------
<p th:text="|创建时间: ${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}|">创建时间</p>
------------------------
<ul th:each="tag:${user.tags}" th:text="${tag}"></ul><!--循环渲染-->

<ul>
    <li
            th:each="tag,stat:${user.tags}"
            th:text="${tag}"
            th:classappend="${stat.last}?active "
    ></li>
</ul>
------------------------
<div th:switch="${user.sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">默认</p>
</div>

------------------------
<!--replace 替换 组件-->
<div th:replace="~{componet::com1}"></div>

<!--insert 插入 组件-->
<div th:insert="~{componet::com2('传递的数据')}"></div>

--------------部分替换组件 ------
<div th:insert="~{componet::com3(~{::#message})}">

    <p id="message" > 替换的模块</p>

</div>
</body>

<script th:inline="javascript">
    const user=/*[[${user}]]*/{默认值};
        console.log(user);
</script>
</html>

component.html

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

<div th:fragment="com1">
    <!--/*@thymesVar id="user" type="tech.aowu.thymeleaflearn.vo.UserVO"*/-->
    <h2 th:text="${user.username}"></h2>
</div>
<div th:fragment="com2(message)">
    <p th:text="${message}"></p>
</div>
<div th:fragment="com3(message)">
    <p th:replace="${message}"></p>
    11
</div>
</html>

th 属性

Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。

属性描述示例
th:id替换 HTML 的 id 属性<input id="html-id" th:id="thymeleaf-id" />
th:text文本替换，转义特殊字符<h1 th:text="hello，bianchengbang" >hello</h1>
th:utext文本替换，不转义特殊字符<div th:utext="'<h1>欢迎来到编程帮！</h1>'" >欢迎你</div>
th:object在父标签选择对象，子标签使用 *{…} 选择表达式选取值。 没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。 同时即使选择了对象，子标签仍然可以使用变量表达式。<div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p></div>
th:value替换 value 属性<input th:value = "${user.name}" />
th:with局部变量赋值运算<div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style设置样式<div th:style="'color:#F00; font-weight:bold'">编程帮 www.biancheng.net</div>
th:onclick点击事件<td th:onclick = "'getInfo()'"></td>
th:each遍历，支持 Iterable、Map、数组等。<table> <tr th:each="m:${session.map}"> <td th:text="${m.getKey()}"></td> <td th:text="${m.getValue()}"></td> </tr></table>
th:if根据条件判断是否需要展示此标签<a th:if ="${userId == collect.userId}">
th:unless和 th:if 判断相反，满足条件时不显示 <div th:unless="${m.getKey()=='name'}" ></div>
th:switch与 Java 的 switch case语句类似 通常与 th:case 配合使用，根据不同的条件展示不同的内容<div th:switch="${name}"> <span th:case="a">编程帮</span> <span th:case="b">www.biancheng.net</span></div>
th:fragment模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段<footer th:fragment="footer">插入的内容</footer>
th:insert布局标签； 将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。<div th:insert="commons/bar::footer"></div>
th:replace布局标签； 使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。<div th:replace="commons/bar::footer"></div>
th:selectedselect 选择框选中<select> <option>---</option> <option th:selected="${name=='a'}"> 编程帮 </option> <option th:selected="${name=='b'}"> www.biancheng.net </option></select>
th:src替换 HTML 中的 src 属性<img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:inline内联属性； 该属性有 text、none、javascript 三种取值， 在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。<script type="text/javascript" th:inline="javascript"> var name = /*[[${name}]]*/ 'bianchengbang'; alert(name)</script>
th:action替换表单提交地址<form th:action="@{/user/login}" th:method="post"></form>
返回首页