springboot thymleaf 中 @、$、~的区别

最新推荐文章于 2023-03-05 09:54:49 发布

专注写bug

最新推荐文章于 2023-03-05 09:54:49 发布

阅读量820

点赞数

CC 4.0 BY-SA版权

分类专栏： thymleaf

本文链接：https://blog.youkuaiyun.com/qq_38322527/article/details/98034300

thymleaf 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Thymeleaf模板引擎的使用方法，包括如何引入静态文件、接收控制器传递的变量信息以及页面嵌套技巧。通过实例展示了Thymeleaf在Web开发中的强大功能。

一、引入静态文件：

@ 用于引入外部js、css文件和 form、href等请求引入指定的控制器requestMapping

<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
<form th:action="@{/demo/test}" method="post" >

注：此处书写 / 是因为配置了拦截器后，造成静态资源被拦截。

二、接收controller传递来的变量信息：

$ 通常用于接收controller传递至页面的值

<input type="hidden" id="randomVal" name="randomVal" th:value="${randomVal }">

三、页面嵌入

~ 一般用户页面的嵌套

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 头部信息汇总 -->
<!-- 定义文件名称th:fragment -->
<head th:fragment="head">
<meta charset="UTF-8">
<!-- web icon -->
<link rel="shortcut icon" th:href="@{/logo.ico}" href="/logo.ico">
<!-- phone view -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" href="/plugins/layui/css/layui.css">
<link rel="stylesheet" th:href="@{/login/login.css}" href="/login/login.css">
<script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}" src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" th:src="@{/plugins/layui/layui.all.js}" src="/plugins/layui/layui.all.js"></script>
<!-- 导入bootstrap组件信息 -->
<link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap.css}" href="/plugins/bootstrap/bootstrap.css" />
<!-- <link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap-theme.min.css}" href="/plugins/bootstrap/bootstrap-theme.min.css" /> -->
<script type="text/javascript" th:src="@{/plugins/bootstrap/bootstrap.js}"></script>
</head>

</html>

<!-- th:include="~{html名 :: 代码名称}" -->
<head th:include="~{import :: head}"></head>