thymeleaf渲染

穗余

已于 2022-11-05 09:18:31 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： servlet java mybatis

于 2022-10-25 10:51:35 首次发布

本文链接：https://blog.csdn.net/wwh1st/article/details/127508993

版权

前端专栏收录该内容

10 篇文章 2 订阅

订阅专栏

1-thymeleaf条件渲染

概述

使用th:if进行条件渲染

代码实现

@RequestMapping("/test01")
public String test01(Model model){
    model.addAttribute("flag1",true);
    model.addAttribute("flag2",false);
    return "demo01";
}

<a href="/toDemo02" th:if="${flag1}">超链接1</a>
<a href="/toDemo02" th:unless="${flag2}">超链接2</a>

<body>
	<!--表达式的结果为布尔类型时，if 直接以它为结果-->
	<p th:if="true">th:if="true"</p>
	
	<!--当表达式结果为null时，则if判定为false-->
	<p th:if="null">th:if="null"</p>
	
	<!--表达式为数字时，不为0，if判定为true,为0,时，if判定为false-->
	<p th:if="11">th:if="11"</p>
	<p th:if="0">th:if="0"</p>
 
	<!--表达式结果为字符串时，如果为 true，则if判定为true；值为 false，则if判定为false-->
	<!--结果为 off、no 等特殊字符串时，if 判定为false-->
	<p th:if="'true'">th:if="'true'"</p>
	<p th:if="'false'">th:if="'false'"</p>
	<p th:if="'off'">th:if="'off'"</p>
	<p th:if="'no'">th:if="'no'"</p>
	<!--表达式结果字符串不为false，off,no时，if判定为true-->
	<p th:if="'Love China'">th:if="'Love China'"</p>
 
	<!--后台传输：model.addAttribute("userList", User.getUsers());-->
	<!--只要 userList 不等于null，则if判定为true，否则为false-->
	<p th:if="${userList}">th:if="${userList}"</p>
 
	<!--后台传输：model.addAttribute("name", "");-->
	<!--字符串为空时，if判定为 true-->
	<p th:if="${name}eq''">name 等于空</p>
	<p th:if="${name}">th:if="${name}"</p>
</body>

th:if ：如果条件成立
th:unless ：如果条件不成立
flag1成立，也就是为true，超链接1才显示；flag2不成立，也就是为false，超链接2才显示

条件不成立的标签不在DOM树中。

2-thymeleaf分支渲染

概述

使用th:switch进行分支渲染

语法

<span th:switch="${参数名}">
<span th:case="值1">内容1</span>
<span th:case="值2">内容2</span>
<span th:case="值3">内容3</span>
</span>

代码实现

@RequestMapping("/toDemo03")
public String toDemo03(Model model){
    model.addAttribute("roleName","admin");
    return "demo03";
}

<span th:switch="${roleName}">
<span th:case="admin">管理员</span>
<span th:case="kefu">客服</span>
<span th:case="customer">用户</span>
</span>

3-thymeleaf列表渲染

概述

使用th:each进行列表渲染

th:each属性用于迭代循环，语法：th:each="obj,iterStat:${objList}"

迭代对象可以是java.util.List,java.util.Map,数组等;

iterStat称作状态变量，属性有：
index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个

代码实现

@RequestMapping("/test02")
public String test02(Model model) {
    List<User> userList = new ArrayList<>();
    User user1 = new User(1, "张三","root", 10000.0);
    User user2 = new User(2, "李四","admin", 20000.0);
    userList.add(user1);
    userList.add(user2);
    model.addAttribute("userList", userList);
    return "demo01";
}

<table>
    <tr>
        <td>脚标</td>
        <td>ID</td>
        <td>姓名</td>
        <td>密码</td>
        <td>余额</td>
    </tr>
    <tr th:each="user,userState:${userList}">
        <td th:text="${userState.index}"></td>
        <td th:text="${user.id}">ID</td>
        <td th:text="${user.username}">姓名</td>
        <td th:text="${user.password}">密码</td>
        <td th:text="${user.money}">余额</td>
    </tr>
</table>

    <ol>
		<li>List循环：
			<table border="1">
		      <tr>
		        <th>用户名</th>
		        <th>邮箱</th>
		        <th>管理员</th>
		        <th>状态变量：index</th>
		        <th>状态变量：count</th>
		        <th>状态变量：size</th>
		        <th>状态变量：current.userName</th>
		        <th>状态变量：even</th>
		        <th>状态变量：odd</th>
		        <th>状态变量：first</th>
		        <th>状态变量：last</th>
		      </tr>
		      <tr  th:each="user,userStat : ${list}">
		        <td th:text="${user.userName}">Onions</td>
		        <td th:text="${user.email}">test@test.com.cn</td>
		        <td th:text="${user.isAdmin}">yes</td>
		         <th th:text="${userStat.index}">状态变量：index</th>
		        <th th:text="${userStat.count}">状态变量：count</th>
		        <th th:text="${userStat.size}">状态变量：size</th>
		        <th th:text="${userStat.current.userName}">状态变量：current</th>
		        <th th:text="${userStat.even}">状态变量：even****</th>
		        <th th:text="${userStat.odd}">状态变量：odd</th>
		        <th th:text="${userStat.first}">状态变量：first</th>
		        <th th:text="${userStat.last}">状态变量：last</th>
		      </tr>
	    	</table>
		</li>
		<li>Map循环：
			<div th:each="mapS:${map}">
			<div th:text="${mapS}"></div>
			</div>
		</li>
		<li>数组循环：
			<div th:each="arrayS:${arrays}">
			<div th:text="${arrayS}"></div>
			</div>
		</li>
	</ol>