史上最全Thymeleaf用法汇总,全是干货!

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";
}

以上这些都是工作中我用到过的一些知识点,就汇总起来了,希望能对大家能有所帮助!还有其它表述不全或有问题的,欢迎大家指正补充!

你可能感兴趣的:(Thymeleaf,前端)