Thymeleaf使用

一、什么是Thymeleaf：

  • Thymeleaf 官网是这么解释的：Thymeleaf is a modern server-side Java template engine for both web and standalone environments。

  • 译过来就是：Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

  • 动静结合： Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。

  • 开箱即用： Thymeleaf提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

  • 多方言支持： Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

  • 与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

 Thymeleaf模板的运行离不开web的环境，所以你需要对相关知识学习理解才能更好的有助于你对Thymeleaf的学习和认知。（补充：这个玩意缓存要关闭哦~因为很牛逼，咱们需要在properties里面加：spring.thymeleaf.cache=false,当然我们也可以在yml里面加，只需要变换一个代码书写格式就行。）

二、Thymeleaf依赖：

<!--引入thymeleaf的依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

三、Thymeleaf案例：

3.1）：案例目录

3.2）：Controller的test.java

package com.sxtt.springboot.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class test {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("msg","Hello,Laugh");
        return "test";
    }
}

3.3）：templates的test.html

3.3.1）：这个是咱们一贯的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　　123
</body>
</html>

然后执行结果：

3.3.2）：这个是Thymeleaf的写法

<!DOCTYPE html>
<!--把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 th:text="${msg}">123</h1>
</body>
</html>

然后执行结果：

四、Thymeleaf语法：

语法名称描述作用
${…} Variable Expressions 变量表达式 取出上下文变量的值
*{…} Selection Variable Expressions 选择变量表达式 取出选择的对象的属性值
#{…} Message Expressions 消息表达式 使文字消息国际化，I18N
@{…} Link URL Expressions 链接表达式 用于表示各种超链接地址
~{…} Fragment Expressions 片段表达式 引用一段公共的代码片段

五、举例说明案例：

5.1）：th:text / th:utext 案例

Controller的test.java

package com.sxtt.springboot.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class test {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("msg","Hello,Laugh");
        model.addAttribute("msgs","<h1>Hello,Laugh</h1>");
        return "test";
    }
}

templates的test.html

<!DOCTYPE html>
<!--把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:text="${msg}">123</div>
    <div th:utext="${msgs}">123</div>
</body>
</html>

输出结果对比：

5.2）：th:each 案例

Controller的test.java 

package com.sxtt.springboot.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Arrays;

@Controller
public class test {
    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("msg", Arrays.asList("Laugh","FalseDreams"));
        return "test";
    }
}

templates的test.html

<!DOCTYPE html>
<!--把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方法1-->
    <h3 th:each="user:${msg}" th:text="${user}"></h3>
    <p>-------------------------------------------</p>
    <!--方法2-->
    <h3 th:each="user:${msg}">[[${user}]]</h3>
</body>
</html>

输出结果对比：

 

5.3）：再来一个下拉吧！

Controller的test.java（这个不变同上↑）

templates的test.html

<!DOCTYPE html>
<!--把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <spn>你的名字叫啥子：</spn>
        <select name="user">
            <option th:each="user : ${msg}" th:text="${user}"></option>
        </select>
    </div>
</body>
</html>

输出结果查看：

六、th常用标签：

标签作用样例
th:id 替换id <input th:id="${user.id}"/>
th:text 文本替换 <p text:="${user.name}">name</p>
th:utext 支持html的文本替换 <p utext:="${htmlcontent}">content</p>
th:object 替换对象 <div th:object="${user}"></div>
th:value 属性赋值 <input th:value="${user.name}" >
th:with 变量赋值运算 <div th:with="isEven=${user.age}%2==0"></div>
th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:src 替换资源 <script type="text/javascript" th:src="@{index.js}"></script>
th:onclick 点击事件 th:onclick="'getCollect()'"
th:href 替换超链接 <a th:href="@{index.html}">url</a>
th:each 迭代 <tr th:each="student:${user}" >
th:if 判断条件 <a th:if="${userId == collect.userId}" >
th:unless 和th:if判断相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch 多路选择，配合th:case 使用 <div th:switch="${user.role}">
th:case th:switch的一个分支 <p th:case="'admin'">User is an administrator</p>
th:fragment 布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert">
th:include 布局标签，替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace 布局标签，替换整个标签到引入的文件 <div th:replace="fragments/header :: title"></div>
th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"
th:inline 定义js脚本可以使用变量 <script type="text/javascript" th:inline="javascript">
th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">
th:remove 删除某个属性 <tr th:remove="all"> all：删除所有的孩子、body：删除其所有的孩子，不包含标签、tag：删除标签、all-but-first：删除除第一个以外的所有、none：什么也不做
posted @ 2023-11-24 11:35  Laugh"  阅读(35)  评论(0)  编辑  收藏  举报