thymeleaf知识点小结

编程初学者01

已于 2023-03-14 23:17:02 修改

阅读量92

点赞数

分类专栏： springboot 文章标签： java 前端 html spring boot

于 2023-03-14 22:54:21 首次发布

本文链接：https://blog.csdn.net/m0_67587248/article/details/129541671

版权

springboot 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

thymeleaf模板基础知识学习

thymeleaf的官网 https://www.thymeleaf.org

一、Spring Boot视图技术简介

在Web应用中，我们一般采用MVC设计模式实现对应的模型（M）、视图(V)和控制器©，而视图就是用户看到的并与之交互的界面。而现在的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。而Spring Boot对很多模板技术提供了支持，比如FreeMarker、Groovy、Mustache、thymeleaf。而其中的thymeleaf，它是一种用于Web和独立环境的现代服务器端的java模板引擎，其主要目的是将优雅的java模板带到开发工作流程中，将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。因此，thymeleaf也成为现在的主流的模板技术，我们不得不对它有着必要的认识。

二、基本配置

导入thymeleaf依赖

dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

全局配置文件中配置thymeleaf一些参数，示例如下：

spring:
  thymeleaf:
    cache: false

三、语法规则

在html页面上使用Thymeleaf标签，thymeleaf基本页面文件如下：

<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{css/bootstrap.css}"
    <title>标题</title>
</head>
<body>

</body>
</html>

常用标签

th：任意html属性；来替换原生属性的值（如：th:name，th:value）
th:text；改变当前元素里面的文本内容

<p th:text="stu.name">张三</p>

th:include：加载模板的内容：读取加载节点的内容（不含节点名称），替换div内容
th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div
th:attr 来设置任意属性
th:attrprepend 来追加(不是替换)属性值
th:classappend
th:each每次遍历都会生成当前这个标签，用于循环处理
th:text=“ ${...}"　　转译特殊字符，特殊符号原方不动输出 th:utext="$ {…}　　会转译字符,特殊符号被转译后输出结果
th:href=”@{…}" 替换url
th:if/ th:unless 使用th:if和th:unless属性进行条件判断，th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:switch/case

<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>

四、行内写法

[[ ]]等价于th:text
[( )]等价于th:utext
模板引擎不仅可以渲染html，也可以对JS中的进行预处理。而且为了在纯静态环境下可以运行，其Thymeleaf代码可以被注释起来：

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

五、表达式语法

基本表达式：${…}

<span th:text="${...}">CN</span>

选择变量表达式: *{…}
消息表达式: #{…}
URL 表达式: @{…}

<a th:href="@{/order(id=o.id)}"></a>

代码段表达式: ~{…}

<div th:insert="~{htmlname ::segment}"></div>

六、字面量

文本字面量: ‘some text’
数值字面量: 0, 34, 3.0, 12.3
布尔值字面量: true, false
Null 值字面量: null
Tokens 字面量: one, content, sometext, …

七、Link url

th:href=“@{/}“返回首页
th:href=”@{/thymeleaf/demo1}“跳转demo1 页面
th:href=”@{/thymeleaf/demo1(username= $KaTeX parse error: Expected 'EOF', got '}' at position 21: \dotsoyees[0].name})}̲">去 demo1 页面, 带\dots$ {employees[1].id})}”>去 demo1 页面, 带 RESTful 风格参数

其余的有关thymeleaf的知识点，大家可以自行探究。

编程初学者01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
thymeleaf知识点小结

在Web应用中，我们一般采用MVC设计模式实现对应的模型（M）、视图(V)和控制器©，而视图就是用户看到的并与之交互的界面。而现在的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。而Spring Boot对很多模板技术提供了支持，比如FreeMarker、Groovy、Mustache、thymeleaf。
复制链接

扫一扫