thymeleaf高级使用

最新推荐文章于 2024-04-14 12:17:36 发布

Antgeek

最新推荐文章于 2024-04-14 12:17:36 发布

阅读量1.3k

点赞数 1

分类专栏： spring boot 文章标签： thymeleaf

本文链接：https://blog.csdn.net/weixin_44745147/article/details/119956272

版权

spring boot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.th:onclick

语法:
如果需要使用th:onclick,这个时候我们需要把代码用||包裹起来，之后在||里面就可以添加表达式了如${}，或者@{}。

<button class="layui-btn" th:onclick="|xadmin.open('添加用户','@{/user/add}',600,400)|">
  添加
</button>

注意:
如果需要传参是数值或者布尔类型,可以直接写,其他类型需要使用data-变量名的方式来传值,主要是为了防止脚本注入
例子:

<!--
    data-* : 作用是为了设置标签上自定参数
	this触发点击事件的dom对象,this.getAttribute("data-title")
-->
<button id="addBtn" th:data-title="${title}" data-id="主键" class="layui-btn"
    th:onclick="|xadmin.open(this.dataset.title,'@{/user/add}',600,400)|"><i
	class="layui-icon"></i>添加
</button>

data-*:
每个html标签上可以通过data-*设置标签自定义参数，如果我们希望给标签添加一个title指定参数，可以data-title=""进行设置
获取data-参数：

dom对象 .dataset.参数名
dom对象.getAttrbute(“data-参数名”)
jquery对象.data(“参数名”)

二.thymeleaf模板引擎实现引用

为了实现html中代码的复用性,thymeleaf给我们提供了引用的功能,下面来看一下如何使用吧

1.定义模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>包含</title>
</head>
<body>
    <div th:fragment="header">
        <div>头部</div>
    </div>
</body>
</html>

2.引入模板

有两种方式

<div th:replace="include::header"></div>
<div th:include="include::header"></div>

3.include和replace的区别

<span th:fragment="content">
    这是一段模板
</span>

include是将模板里面的内容放到当前标签的内部,最终渲染出来,例子:

<div th:include="include/include::content">
  13123
</div>
后会变成:
<div>
  一行代码
</div>

replace是用该模板直接替换掉当前引用的标签

<div th:replace="include/include::content">
  13123
</div>
后会变成:
<span>
    一行代码
</span>

总结一句:**include只换心,replace心和身体都换**

5.th:block

th:block是模板引擎提供的一个标签，这个标签本身没有任何含义，只是为了让我们写命令。最终渲染的时候会被删除掉

<th:block th:include="include/include::header" />

三.js中获取网站的前缀

有两种方式

var ctx = [[${#httpServletRequest.getContextPath()}]];
    /*<![CDATA[*/
        var ctx = /*[[@{/}]]*/ '';
    /*]]>*/

一般可以将这个放在一个模板中进行引用,这样就不用每次都写了

Antgeek

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
thymeleaf高级使用

一.th:onclick语法:如果需要使用th:onclick,这个时候我们需要把代码用||包裹起来，之后在||里面就可以添加表达式了如${}，或者@{}。<button class="layui-btn" th:onclick="|xadmin.open('添加用户','@{/user/add}',600,400)|"> 添加</button>注意:如果需要传参是数值或者布尔类型,可以直接写,其他类型需要使用data-变量名的方式来传值,主要是为了防止脚本注入例
复制链接

扫一扫