thymeleaf使用
thymeleaf使用
·
thymeleaf使用
thymeleaf基本使用
用法
1.需要在html里添加< html xmlns:th=“http://www.thymeleaf.org”>
这样才能正确使用th:*的形式
2.通过${}取值和ONGL表达式一致
3选择变量表达式*{}
4链接表达式@{}
5循环：通过th：each
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr th:each="emp : ${empList}">
<td th:text="${emp.id}">1</td>
<td th:text="${emp.name}">啊</td>
<td th:text="${emp.age}">18</td>
</tr>
</table>
1.简单表达式
变量表达式:${...} 例如:${my.name}
选择性/星号表达式:*{...} 一般是 th:object 后 取的 object中的属性,当没有选取对象时,功能等同于${...},*{firstName}也等同于${#object.firstName}
消息表达式:#{...}
链接表达式:@{...}
<div th:object="${session.user}">
<p>Name:<span th:text="*{firstName}">Seb</span>.</p>
<p>Surname:<span th:text="*{lastName}">Pep</span>.</p>
</div>
等价于
<div >
<p>Name:<span th:text="${session.user.firstName}">Seb</span>.</p>
<p>Surname:<span th:text="${session.user.lastName}">Pep</span>.</p>
</div>
<script th:src="@{//scriptserver.example.net/myscript.js}">...</script>
等价于
<script src="//scriptserver.example.net/myscript.js">...</script>
2.文字
2.1 文本(text literals)(放在单引号里面,可以是任意字符)
<div th:class="‘the content’">...</div>
2.2 数字(number literals)
<p>The year is <span th:text="2013">1492</span>.</p>
<p>In two years, it will be <span th:text="2013 + 2">1494</span>.</p>
结果是：The year is 2013.
The year is 2015.
2.3 布尔值(boolean literals)：true,false
<div th:if="${user.isAdmin()} == false">
<div th:if="${user.isAdmin() == false}">
2.4 null(the null literal)：null
<div th:if="${variable.something} == null">
2.5 文字符号(literal tokens)（不需单引号）：
<div th:class="content">...</div>
3.文本操作符
3.1.字符串并置：+ (就是普通的连接符号)
3.2.文字替换：|The name is ${name}|
4.算数运算符
+, -, *, /, %
<ol>
<li>+：<span th:text="1+1">1+1</span>.</li>
<li>-： <span th:text="2-1">2-1</span>.</li>
<li>*：<span th:text="2*3">2*3</span>.</li>
<li>/： <span th:text="9/4">9/4</span>.</li>
<li>%：<span th:text="9%4">9%4</span>.</li>
</ol>
5.布尔运算
<ol>
<li>and：<span th:if="${!#lists.isEmpty(list)} and ${#lists.isEmpty(list2)}" th:text="${!#lists.isEmpty(list)} and ${!#lists.isEmpty(list2)}">and</span>
</li>
<li>or：<span th:if="${!#lists.isEmpty(list)} or ${#lists.isEmpty(list)}"
th:text="${!#lists.isEmpty(list)} or ${#lists.isEmpty(list)}">or</span>
</li>
<li>!(not)：<span th:if="${!#lists.isEmpty(list)}"
th:text="${!#lists.isEmpty(list)}">not</span>
</li>
</ol>
6.比较和相等运算符
<ol>
<li>>(gt)：<span th:if="${#lists.size(list)} > 1">大于></span>else</li>
<li>小于lt：<span th:if="${#lists.size(list)} lt 1">小于</span>else</li>
<li>>=(ge)：<span th:if="${#lists.size(list)} >= 1">大于等于>=</span>else</li>
<li>小于等于(le)：<span th:if="${#lists.size(list)} le 1">小于等于</span>else</li>
<li>!(not)：<span th:if="${!#lists.isEmpty(list)}">!(not)</span>else</li>
<li>==(eq)：<span th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')">等于==</span></li>
<li>!=(ne/neq)：size:<span th:text="${#lists.size(list)}" th:if="${#lists.size(list)} != 1"> </span></li>
</ol>
7.条件表达式
<1>a ? b:c (if then:else)
<2>a?c (if else)
例如:
<li>? 'xx' :'xx'(if ? then:else)<span th:class="${title} ? 'green' :' red'">样例一</span></li>
<li>?'xx'(if ? then)<span th:class="${title1} ? 'green'">样例二</span></li>
8.默认表达式
语法: ?: (if:defaultValue)
<div th:object=${session.user}>
<p>Age:<span th:text="*{age}? : '(no age specified)' ">27</span>.</p>
</div>
等价于
<div th:object=${session.user}>
<p>Age:<span th:text="*{age！=null}? *{age} : '(no age specified)' ">27</span>.</p>
</div>
8.th:each
<select th:field="*{departmentId}" style="width:100px;">
<option th:each="department : ${allDepartments}"
th:value="${department .id}" th:text="${department .name}">Credit</option>
</select>
参考：
https://www.pianshen.com/article/3836348992/
https://blog.csdn.net/weixin_47120348/article/details/116379165
https://blog.csdn.net/android_heng/article/details/54408812
th:block th:switch th:case
<select name="proMatType" lay-verify="required" lay-search>
<th:block th:switch="${proflow?.proMatType}">
//编辑
<th:block th:case="1">
<option th:value="1" checked>成品</option>
<option th:value="2">原料</option>
<option th:value="3">辅料</option>
<option th:value="4">领料条形码</option>
<option th:value="5">成品条形码</option>
</th:block>
<th:block th:case="2">
<option th:value="1" checked>成品</option>
<option th:value="2">原料</option>
<option th:value="3">辅料</option>
<option th:value="4">领料条形码</option>
<option th:value="5">成品条形码</option>
</th:block>
//新建
<th:block th:case="*">
<option th:value="1" checked>成品</option>
<option th:value="2">原料</option>
<option th:value="3">辅料</option>
<option th:value="4">领料条形码</option>
<option th:value="5">成品条形码</option>
</th:block>
</th:block>
</select>
th:inline=“javascript”
th:inline="javascript"这是Thymeleaf中的内联写法，支持在javascript访问model中的数据，所以以后想写[[${xxx.xxx}]]这样写法的时候一定要记得在script中写上th:inline="javascript"这样才能骚起来……
页面获取值的方式
thymeleaf的textarea数据回显用th:text，th:value不能回显
thymeleaf中th:text和th:utext的区别
th:text
1.可以对表达式或变量进行求值
2.用“+”符号可进行文本连接
3.当获取后端传来的参数时，若后端有标签，如：
@RequestMapping("/")
public String aa(Model model) {
String msg = "<h1>啦啦啦</h1>";
model.addAttribute("msg", msg);
return "index";
}
则用th:text获取传来的参数值时
<p th:text="采用text标签： + ${msg}"></p>
结果为
采用text标签：<h1>啦啦啦</h1>
th:utext
上面的例子，用th:utext
<p th:utext="采用utext标签： + ${msg}"></p>
结果为：
采用utext标签：
啦啦啦
也就是说用utext，会解析html，显示相应的效果
常用语法
${}
Thymeleaf通过${}来获取model中的变量
欢迎您：<span th:text="${user.name}">请登录</span>
th:object
<h2>
<p th:text="${user.name}">Jack</p>
<p> th:text="${user.age}">21</p>
<p th:text="${user.friend.name}">Rose</p>
</h2>
因此，Thymeleaf提供了自定义变量来解决：当数据量比较多的时候，频繁的写user.就会非常麻烦。我们获取用户的所有信息，分别展示。
<h1 th:object="${user}">
<p th:text="*{name}">Jack</p>
<p th:text="*{age}">21</p>
<p th:text="*{friend.name}">Rose</p>
</h1>
在 h2上 用 th:object="${user}"获取user的值，并且保存
在h2内部的任意元素上，可以通过 *{属性名}的方式，来获取user中的属性，这样就省去了user.前缀了
[ thymeleaf ] - th:field和th:value的区别
th:field 用法：th:field=“*{name}”，(用来绑定后台对象和表单数据)
th:value 用法：th:value=“${brand.name}”，(用对象对name值替换value属性)
thymeleaf里的th:field等同于th:name和th:value，浏览器在解析th:field的时候，会解析成name="${th:field}"的值。
然后后台就可以接收到从前台传过来的值。而th:value可以接受到后台的的值，后台则可以根据name获取到前台的值。
th:field和th:value都有两种从后台接受值的方式:
1、${obj.name}
2、*{name}
需要注意的是，th:field需要有th:object指定前台传过来的参数，否则浏览器在解析的时候会出现错误。
参考：
https://blog.csdn.net/qq_43279637/article/details/86406836?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-86406836-blog-106216362.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-86406836-blog-106216362.pc_relevant_default&utm_relevant_index=1
https://blog.csdn.net/yzx3105/article/details/106216362
https://blog.csdn.net/qq_42282074/article/details/108111432
https://blog.csdn.net/rongxiang111/article/details/79678765?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-79678765-blog-89394269.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-79678765-blog-89394269.pc_relevant_paycolumn_v3&utm_relevant_index=1
https://blog.csdn.net/zflb2008/article/details/89394269
判断
https://blog.csdn.net/heiren_a/article/details/119011471
IF判断
Thymeleaf 条件
gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=
案例
<div th:if="${score gt 60}">及格了</div>
其实按照常规写法也是可以的
<div th:if="${score >= 60}">及格了</div>
多个判断可以用and 或者or来连接
<div th:if="${score lt 60 and score gt 0.0}"></div >
我们还可以给不同的值设置不同的样式，比如成绩大于60字体颜色位绿色，小于60的为红色
<div th:if="${score>=60}" th:text="${score}" style="color: green"></div >
<div th:if="${score<60 and score > 0.0}" th:text="${score}" style="color: red"></div >
Switch Case
<select th:switch="${gender}">
<option th:case="1">男</option>
<option th:case="0">女</option>
<option th:case="*">其他</option>
</select>
unless
Thymeleaf中是没有else的，但是可以使用unless配合if来完成if else的操作
unless字面意思就是除非
unless也可以理解为在表达式前加了个非
<!--/* word不为空时显示 */-->
<div th:if="${word}" th:text="${word}"></div>
<!--/* word为空时显示（除非word不为空才不显示） */-->
<div th:unless="${word}" th:text="${word}"></div>
在js中获取后端的值
https://blog.csdn.net/weixin_43992455/article/details/123945744
分为两种情况
获取java的字段
获取Thymeleaf的路径
针对这两种情况
首先要在script的标签上加th:inline=“javascript”
然后第一种情况：
<script type="text/javascript" th:inline="javascript">
let a = [[${a}]];
</script>
第二种情况
<script type="text/javascript" th:inline="javascript">
window.location.href = [[@{/login}]];
</script>
th:selected 回显遇到的问题
<select name="subcontractor" class="form-control m-b" required >
<option th:each="LwOrg:${LwOrgs}" th:text="${LwOrg.orgName}" th:value="${LwOrg.orgId}" th:selected="${lwPersonalInformation.subcontractor} == ${LwOrg.orgId}">
</option>
</select>
selected中用以上写法${lwPersonalInformation.subcontractor} == ${LwOrg.orgId} 获取值判断没有问题，但是不能写在一个括号里面，如：
${lwPersonalInformation.subcontractor == LwOrg.orgId}
上面的表达式会取不到值
参考：https://blog.csdn.net/morningrain1995/article/details/105366085
判断
有时候在th:selected中写三元不生效，可以试试在外面写
//不生效
<option th:if="${pmPlan!=null}" th:selected="${pmAffiliatedEnterprises != null ? (pro.id eq pmAffiliatedEnterprises.productId) : (pro.id eq promat.productId)}"
//生效
th:selected="${pro.id}== ${pmAffiliatedEnterprises.productId}"
例子
<select name="productId" lay-verify="" lay-search lay-filter="productId"
id="selectProductId">
<option value="">请选择</option>
<th:block th:if="${pmPlan!=null}">
<option
th:if="${pmAffiliatedEnterprises!=null}"
th:selected="${pro.id}== ${pmAffiliatedEnterprises.productId}"
th:value="${pro.id}" th:each="pro:${templateList}"
th:text="${pro.productname}"
th:img="${pro.productImg}"></option>
<option
th:unless="${pmAffiliatedEnterprises!=null}"
th:selected="${pro.id}==${promat.productId}"
th:value="${pro.id}" th:each="pro:${templateList}"
th:text="${pro.productname}"
th:img="${pro.productImg}"></option>
</th:block>
<th:block th:unless="${pmPlan}">
<option th:value="${pro.id}" th:each="pro:${templateList}"
th:text="${pro.productname}" th:img="${pro.productImg}">
</option>
</th:block>
</select>
时间转换：
<span th:text="${#dates.format(createDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
js中可以获取到接口
//js中可以接收后端参数thymeleaf：
<script type="text/javascript" th:inline="javascript"></script>
循环 获取index
参考：
https://blog.51cto.com/u_15300825/5219231
https://blog.csdn.net/FCXAIQQ/article/details/109816991
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)