文章参考:
原文链接:https://blog.csdn.net/zhangyuliang6430/article/details/90230640
https://www.cnblogs.com/xuchao0506/p/9896430.html
还引用了其他作者的文章,未引用请见谅
本文是在SSM中实践得出的一些笔记,引用资源文件是加了static,在springboot中引入静态资源是不需要加static的,因为springboot整合thymeleaf时,默认静态资源目录已经设置在static中了
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.
废话不多说,正文开始
@{/资源路径} :相对于项目上下文路径(常用)
@{资源路径} :相对于当前路径
@{~/资源路径} :相对于服务器根路径
<img th:src="@{/static/images/myOrder/myOrder1.png}">
th:href="@{/user/showPersonal.do}"
访问request域中的变量: 默认是访问context域对象,ModelAndView存放的值是在request域
${msg} 或 [[${msg}]]
访问session域变量:
${session.user.username}
如:
<th th:text="${msg}"/>
<th>[[${msg}]]th>
访问其他作用域对象:使用#指定某个作用域的数据
<body>
request:<span th:text="${#httpServletRequest.getAttribute('req')}">span>
session:<span th:text="${session.sess}">span>
Context:<span th:text="${application.con}">span>
body>
页面调用对象属性值:
${item.getId()}
${item.id} //内部会自动调用getID()方法
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
<div th:id="addresId+${state.count}">div>
<span th:text="|Welcome to our application, ${user.name}!|">
<div th:onclick="edit([[${emp.id}]])" >div>
<div th:href="@{/order/list.do(status=1)}" >div>
<a th:href="@{/product_details.do(id=${leftStationery.id})}">查看详情a>
<img th:src="@{/static{src}(src=${leftStationery.image})}" alt=""/>
url: "[[@{/address/getProvince.do}]]" + pid
支持:
~{ templatename :: #html_id } 表示 取 html 的 id 标签
~{ ::selector} 表示 代码段在本页面
~{ templatename } 引入 templatename 所有的 html 代码
参数说明:
:: 前面的部分是 模板文件名(包括路径,模板文件名的后缀省略,默认都是.html),
:: 后面部分是 selector(选择器)
<div id="leftsidebar_box" th:fragment="leftsidebar" class="lf">。。。div>
引用公共代码块:
<div th:replace="~{common/common::leftsidebar}">div>
可以使用insert、replace、include
th:insert:插入。在div 中插入代码块。
th:replace:替换。用代码块替换掉当前的代码。
th:include:包含、引入。将代码块中的内容引入到当前代码块中,注意只引入内容,代码块外层的标签要去掉。
<div th:replace="~{common/commons::sidebar(active='list.html')}"/>
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
<a th:class="${active=='main.html'? 'nav-link active':'nav-link'}" >xxxxa>
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}">xxxxxa>
nav>
<tr th:each="prod, prodState : ${prods}">
<td th:text="${prod.name}">Onionstd>
<td th:text="${prod.price}">2.41td>
<td th:text="${prod.inStock}? #{true} : #{false}">yestd>
<td th:text="${prodState.index}">td>
tr>
<div th:each="items,itState:${items}">
<p th:text="${itState.current.key}">p>
<ul >
<li th:each="it:${itState.current.value}"><a href="#" th:text="${it.name}">a>li>
ul>
div>
Logina>
<p th:if="${session.user} == null">
th:unless 跟th:if作用相反
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administratorp>
<p th:case="#{roles.manager}">User is a managerp>
<p th:case="*">User is some other thingp>
div>
<tr th:class="${row.even}? 'even' : 'odd'">
<tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'">
<div th:object="${session.user}">
<p>Age: <span th:text="*{age}?: '(no age specified)'">27span>.p>
div>
<p>Age: <span th:text="*{age != null}? *{age} : '(no age specified)'">27span>.p>
1.#ctx:上下文对象
2.#vars:上下文变量
3.#locale:上下文语言环境
4.#httpServletRequest:(只有在Web上下文)HttpServletRequest对象
5.#httpSession:(只有在Web上下文)HttpSession对象。
<span th:text="${#locale.country}">USspan>
<div th:text="${#calendars.format(today,'dd MMMM yyyy')}">
div>
内层是对外层对象的引用
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastianspan>.p>
<p>Surname: <span th:text="*{lastName}">Pepperspan>.p>
<p>Nationality: <span th:text="*{nationality}">Saturnspan>.p>
div>
如果没有外层的th:object,*{}与 ${} 效果一样, 直接是对context引用
Thymeleaf提供了套Utility对象,内置于Context中,可通过#直接访问:
dates: java.util 的实用方法。对象:日期格式、组件提取等.
calendars: 类似于#日期,但对于java.util。日历对象
numbers: 格式化数字对象的实用方法。
strings:字符串对象的实用方法:包含startsWith,将/附加等
<p class="top_ys2" th:text="${#strings.abbreviate(rightStationery.title,25)}" />
<p style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}">p>
objects: 实用方法的对象。
bools: 布尔评价的实用方法。
arrays: 数组的实用方法。
lists: list集合。
sets:set集合。
maps: map集合。
aggregates: 实用程序方法用于创建聚集在数组或集合.
messages: 实用程序方法获取外部信息内部变量表达式,以同样的方式,因为他们将获得使用# {…}语法
ids: 实用程序方法来处理可能重复的id属性(例如,由于迭代)。
具体使用详情请参考官文