thymeleaf基本语法

最新推荐文章于 2022-05-09 14:42:19 发布

qq_38815856

最新推荐文章于 2022-05-09 14:42:19 发布

阅读量206

点赞数

分类专栏： thymeleaf 文章标签： thymeleaf

本文链接：https://blog.csdn.net/qq_38815856/article/details/88620707

版权

thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目加入依赖，然后在html加入

<html lang="en" xmlns:th="http://www.thymeleaf.org">

1. 获取后端数据

后台代码：

@RequestMapping("/test")
public String test(Model model) {
	model.addAttribute("hello", "helloworld");
	Person person = new Person();
	person.setUsername("dc");
	person.setPassword("123");
	person.setGender(true);
	person.setBirth(new Date());
	model.addAttribute("person", person);
	return "test";
}

前台代码：

<!--指定id为helloworld，属性相加为字符串拼接-->
<span th:id="${hello}" th:text="${person.birth+person.username+person.password}"></span>
<br>
<!--可以调用java方法-->
<span th:text="${person.username.toUpperCase()}"></span>
<br>
<!--#内为thymeleaf内置对象，格式化输出日期-->
<span th:text="${#calendars.format(person.birth,'yyyy-MM-dd')}"></span>
<br>
<span th:text="${#strings.toUpperCase('eee')}"></span>
<br>
<!--支持两种方式判断-->
<span th:if="${person.gender}==true">man</span>
<span th:if="${person.gender}==false">woman</span>
<span th:if="${person.gender==true}">man</span>
<span th:if="${person.gender==false}">woman</span>
<br>
<span th:text="${person.gender==true}?'man':'woman'"></span>
<br>

2.遍历集合

后台代码：

@RequestMapping("/test")
public String test(Model model) {
	List<Person> list = new ArrayList<>();
	for (int i = 0; i < 10; i++) {
		Person person1 = new Person();
		person1.setUsername("dc" + i);
		person1.setPassword("123" + i);
		person1.setBirth(new Date());
		person1.setGender(true);
		list.add(person1);
	}
	model.addAttribute("list", list);
	return "test";
}

前台代码：

<table>
    <tr>
        <th>索引号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>性别</th>
        <th>生日</th>
    </tr>
    <tr th:if="${#lists.size(list)} eq 0">
        <td colspan="3">没有用户信息！</td>
    </tr>
    <!--iterStat内置取值-->
    <!--<tr th:each="p:${list}">-->
    <tr th:each="p ,iterStat: ${list}">
        <td th:text="${iterStat.index}"></td>
        <td th:text="${p.username}"></td>
        <td th:text="${p.password}"></td>
        <td th:text="${p.gender}? 'man' : 'woman'"></td>
        <td th:text="${#calendars.format(p.birth,'yyyy-MM-dd')}"></td>
    </tr>
</table>

3.引入静态资源及超链接

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript"  th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript"  th:src="@{/js/bootstrap.min.js}"></script>
    <title>Title</title>
</head>
<body class="container">
    <a th:href="@{'/user/toUpdate?id='+${user.id}}">修改</a>
    <a th:href="@{'/user/delete?id='+${user.id}}">删除</a>
</body>

4.if判断及字符拼接

<span th:if="${curPage<totalPages}">
    <a th:href="@{'/index?curPage='+${curPage+1}}">尾页</a>
    <a th:href="@{'/index?curPage='+${totalPages}}">下一页</a>
</span>

5.提交表单

<form role="form" th:action="@{/user/addUser}" th:method="post">
	昵称<!--user?.nick的？表示不存在就忽略-->
	<input type="text" name="nick" placeholder="请输入昵称" th:value="${user?.nick}">
	手机
	<input type="text" name="phone" placeholder="请输入手机号" th:value="${user?.phone}">
	<button type="submit" class="btn btn-default">提 交</button>
</form>

另一种方式

<form action="/users" th:action="@{/users}" method="post" th:object="${userModel.user}">
    <input type="hidden" name="id" th:value="*{id}">
    名称：<br>
    <input type="text" name="name" th:value="*{name}">
    <br>
    邮箱：<br>
    <input type="text" name="email" th:value="*{email}">
    <input type="submit" value="提交">
</form>

6.其他页面的引入

<!--header::header前面为页面名，后面为fragments名-->
<div th:replace="~{fragments/header::header}"></div>

引入了名为header的页面header.html

<div th:fragment="header">
    <a href="/users" th:href="@{~/users}">首页</a>
</div>

7.存入session数据

后台代码：

@RequestMapping("/test1")
public String test1(HttpSession session) {
	Person person = new Person();
	person.setUsername("dc");
	person.setPassword("123");
	person.setBirth(new Date());
	person.setGender(true);
	session.setAttribute("user",person);
	return "test1";
}

前台代码：

<div>
    <p>Name: <span th:text="${session.user.username}">Sebastian</span>.</p>
    <p>Surname: <span th:text="${session.user.password}">Pepper</span>.</p>
    <p>Nationality: <span th:text="${session.user.birth}">Saturn</span>.</p>
</div>

<div th:object="${session.user}">
    <p>Name: <span th:text="*{username}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{password}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{birth}">Saturn</span>.</p>
</div>