Thymeleaf作为Spring官方支持的Web开发模版引擎,可以大大简化日常工作J2EE的开发,下来我以实际工作中用到的场景为例,详细介绍一下Thymeleaf的实用方法。
后端可以通过两种方式:一种是ModelMap,另一种是HttpSession。这两种方式都可以把值从后端传到前端来,前端可以通过Thymeleaf的${…}模式把值快速绑定、展示。
@GetMapping("/index")
public String index(ModelMap mmap, HttpSession session){
mmap.put("sex","1");
session.setAttribute("phone","182********");
return "index";
}
前端只需要通过${…}就可以取到后端的传值了
<input id="sex" type="text" th:value="${sex}"/>
<input id="phone" type="text" th:value="${phone}"/>
input标签:
<input id="sex" type="text" th:value="${sex}"/>
p标签:
<p th:text="${sex}">p>
<p><span th:text="${sex}">span>p>
a标签:
<a><span th:text="${msg}">span>a>
span标签:
<span th:text="${sex}">span>
<span><span th:text="${msg}">span>span>
textarea标签:
<textarea id="remark" class="form-control" th:text="${remark}">textarea>
<textarea id="remark" class="form-control">[[*{remark}]]textarea>
href连接:
<a th:href="@{'/news/newdetails/'+${news.newsId}}">测试a>
div中读取background-image:
<div th:style="'background-image:url('+@{/img/common/bg6.jpg}+')'">
//TODO 代码块
div>
(一)字符串的用法
1.字符串拼接
<span th:text="'我的手机号是'+${phone}+', 你记住了吗'">span>
2.字符串内置对象使用
判断字符串是否为空
<span th:text="${#strings.isEmpty(str)}">span>
判断字符串str中是否包含str1
<span th:text="${#strings.contains(str, str1)}">span>
获取字符串str的长度
<span th:text="${#strings.length(str)}">span>
判断字符串str是否以str1开始,以str2结尾
<span th:text="${#strings.startsWith(str,str1)}">span>
<span th:text="${#strings.endsWith(str,str2)}">span>
判断字符串str是否以str1开始,以str2结尾
<span th:text="${#strings.startsWith(str,str1)}">span>
<span th:text="${#strings.endsWith(str,str2)}">span>
字符串str截取,从start开始,到end结束
<span th:text="${#strings.substring(str,start)}">span>
<span th:text="${#strings.substring(str,start,end)}">span>
字符串大小写转换
<span th:text="${#strings.toUpperCase(str)}">span>
<span th:text="${#strings.toLowerCase(str)}">span>
(二)运算符的用法
1.三目运算符
<span th:text="${sex eq 0} ? '男' : '女'">性别span>
2.if判断
<th:block th:if="${null != newsList}">
//TODO 代码块
th:block>
<span th:if="${user.age} > 18">span>
if 取反,可以用unless
<th:block th:unless="${null != newsList}">
//TODO 代码块
th:block>
3.for循环
普通for循环
<th:block th:each="news : ${newsList}">
//TODO 代码块
th:block>
迭代for循环,其中stat对象包含许多属性,常用的有(index->下标,current->当前遍历到的元素,count->元素的个数,size->总数统计)
<th:block th:each="news,stat: ${newsList}">
//TODO 代码块
th:block>
扩展:已知数组下标取值
<span th:text="*{newsList[0].title}">span>
4.switch case用法
<div th:switch="${name}">
<div th:case="'zs'">
//TODO 代码块
div>
<div th:case="'ls'">
//TODO 代码块
div>
div>
(三)其它用法
1.获取session
再h5页面中,通过#session就可以获取后端保存的session值,相当于后端的HttpSession
获取后端session保存的登录对象
<th:block th:if="${session.CurrentUser != null}">
//TODO 代码块
th:block>
获取后端通过session传的值
${#session.getAttribute("user")}
2.在js中获取ModelMap传过来的值
$(function () {
let news= [[${news}]];
})
3.局部刷新
一般使用Thymeleaf都是从后端Controller中通过ModelMap或Session中直接传过来的,相当于页面初始化的时候就同步执行的。如果需要异步(局部刷新)怎么办?
第一步,在需要异步刷新的div中加入 th:fragment
<div id="table_refresh" th:fragment="table_refresh">
//TODO 代码块
div>
第二步,在js中对应后台执行的方法
function partRefresh(){
$('#table_refresh').load("/test/partRefresh");
}
第三步,在后台返回对应的页面+div。注意规则:页面名称::待刷新div的id
@RequestMapping("/test/partRefresh")
public String partRefresh(ModelMap mmap) {
//TODO 代码块
return "index::table_refresh";
}
以上这些都是工作中我用到过的一些知识点,就汇总起来了,希望能对大家能有所帮助!还有其它表述不全或有问题的,欢迎大家指正补充!