一.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心和身体都换**
4.th:block
th:block是模板引擎提供的一个标签,这个标签本身没有任何含义,只是为了让我们写命令。最终渲染的时候会被删除掉
<th:block th:include="include/include::header" />
三.js中获取网站的前缀
有两种方式
var ctx = [[${#httpServletRequest.getContextPath()}]];
/*<![CDATA[*/
var ctx = /*[[@{/}]]*/ '';
/*]]>*/
一般可以将这个放在一个模板中进行引用,这样就不用每次都写了