springboot-thymeleaf

最新推荐文章于 2024-08-11 21:03:29 发布

ོ執棋者

最新推荐文章于 2024-08-11 21:03:29 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/Fzicoo/article/details/100996849

版权

一、概要

官方网站

Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。

什么是模板引擎: HTML标签+模板语法+数据渲染生成浏览器能识别的特定的格式的文档(HTML)

目前可以处理的模板类型包括：HTML5、XML、TEXT、JavaScript、CSS等

特点：

可以直接在浏览器打开看到页面的静态效果
也可以在程序运行后看到动态页面效果
跟spring boot很好的集成
在Web和非Web环境下都可以正常工作

三个核心组件：

ITemplateResolver：用于设置模板引擎，例如模板的存放目录，模板的后缀（html、html），是否开启模板缓存等等。
TemplateEngine：用于解析模板。
IContext：用于保存模板中需要的一些变量。例如要把变量传递到模板中，就可以先把变量放入IContext的实现类中，然后在模板中获取该变量的值。

二、简单实用

1、pom添加以下依赖

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

2、配置thymeleaf

spring:
  mvc:
    static-path-pattern: /**
  thymeleaf:
    # 模板存放的路径  默认就是当前设置的,可以自己修改
    prefix: classpath:/templates/
    # 是否使用缓存  默认开启
    cache: false
    # 后缀
    suffix: .html
    # 编码
    encoding: UTF-8
    # 支持的模型
    mode: HTML5
    servlet:
      content-type: text/html

3、控制层

# 注意 不要使用RestController注解
@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(ModelMap model) {
        model.addAttribute("user", new User(1, "绿帽批发商"));
        return "index";
    }
}

4、index.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>SpringBoot模版渲染</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<p th:text="${user.uid}"></p>
<p th:text="${user.username}"></p>
</body>
</html>

三、基础语法

1、简介

Thymeleaf允许自定义语法。它还自带了一些标准方言，这些标准方言可以满足我们大部分的需求。

2、标准方言语法

大多数Thymeleaf属性允许将它们的值设置为或包含表达式，由于它们使用的方言，我们将其称为标准表达式。这些表达式可以有五种类型:

${...} : 变量表达式。
@{...} : 链接 (URL) 表达式。
*{...} : 选择表达式。
#{...} : 消息 (i18n) 表达式。
~{...} : 片段表达式。

3、变量表达式

说明

当后台传输对象或者变量到前端，前端可以通过变量表达式来获取后台传递过来的值

栗子

<p th:text="${user.uid}"></p>
<p th:text="${user.username}"></p>

4、链接(URL)表达式

说明

链接表达式在构建URL并向其添加有用的上下文和会话信息(通常称为URL重写的过程)

栗子

@{/account/login}

带参数的URL

<a th:href="@{/account/detail/${user.uid}}">动态路径</a>
<a th:href="@{/account/list(page=${page},size=${size})}">带参数的</a>

绝对路径

<a th:href="https://www.jianshu.com/u/3bfcd55e68b6">完整路径</a>

4、常用标签

关键字	功能介绍	案例
`th:id`	替换`id`	`<input th:id="'xxx' + ${collect.id}"/>`
`th:text`	文本替换	`<p th:text="${collect.description}">description</p>`
`th:utext`	支持`html`的文本替换	`<p th:utext="${htmlcontent}">conten</p>`
`th:object`	替换对象	`<div th:object="${session.user}">`
`th:value`	属性赋值	`<input th:value="${user.name}" />`
`th:with`	变量赋值运算	`<div th:with="isEven=${user.count}%2==0"></div>`
`th:style`	设置样式	`th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
`th:onclick`	点击事件	`th:onclick="'getCollect()'"`
`th:each`	属性赋值	`tr th:each="user,userStat:${users}">`
`th:if`	判断条件	`<a th:if="${userId == collect.userId}" >`
`th:unless`	和`th:if`判断相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
`th:href`	链接地址	`<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:src`	图片类地址引入	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`
`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">` 1.`all`:删除包含标签和所有的孩子。2.`body`:不包含标记删除,但删除其所有的孩子。3.`tag`:包含标记的删除,但不删除它的孩子。4.`all-but-first`:删除所有包含标签的孩子,除了第一个。5.`none`:什么也不做。这个值是有用的动态评估。
`th:attr`	设置标签属性，多个属性可以用逗号分隔	比如 `th:attr="src=@{/image/aa.jpg},title=#{logo}"`，此标签不太优雅，一般用的比较少。

综合栗子：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>111111</title>
<!--
标准方言  基础语法
${} 变量
@{} 链接
-->

</head>
<body>
<div th:include="top"></div>

<h1 th:text="${user.uid}"></h1>
<p th:text="${user.username}"></p>

<a th:href="@{/save}">保存</a>
<!--/xxx/list?page=1&size=10-->
<a th:href="@{/list(page=1,size=10)}"></a>
<!--shop/detail/100-->
<a th:href="@{shop/detail/${shop.id}}"></a>

<a th:href="@{https://www.baidu.com}" ></a>

<input type="text" th:value="1111111">

<div th:if="user.uid != null">
    <a th:text="${user.username}">
</div>
<div  th:unless="user.uid != null" >
    <a th:href="@{/login/}">登录</a>
    <a th:href="@{/register/}">注册</a>
</div>

<ul th:each="user:users">
    <li  th:onclick="test()">
        <a th:href="@/detail(${user.uid})" >
            <img th:src="@{#{user.img}}">
        </a>
    </li>
</ul>

<script>
    function test() {
        alert(11111)
    }
</script>

</body>
</html>