thymeleaf 的基本用法笔记总结

最新推荐文章于 2024-07-30 23:05:40 发布

ajungejava

最新推荐文章于 2024-07-30 23:05:40 发布

阅读量772

点赞数

分类专栏：小笔记

小笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

thymeleaf 的基本使用方法 www.thymeleaf.org 里面有官方文档

基本的使用的方式
th:value th:name th:action th:object th:filed

<select>
<option><th:selected="${user.name eq sss}"></option> 判断是不是这个值，如果是就代替标签的内容实现选择框
</select>

时间类型转换
dates.fromat(user.birthday(参数)，'yy-mm-dd'(fomat的表达式))

对象引用方式

url

<th:href= "@{http://localhost:8080}"> 必须加@符号

引入静态的资源文件 js/css
   配置参数 spring.mvc.static-path-pattern=/static/**
   html配置连接文件
   <link th:href="@{/static/js/test.js}"/>

条件判断 th:if 条件判断 gt 大于 lt 小于 ge 大于等于 le 小于等于

th:each 和jstl的foreach差不多用法th:each="user:${userlist}"

th:switch 选择的参数 th:case 实现选择的具体内容

text和utext

text 会原封不动的展现你返回的html代码

utext 会相当于解析你的html代码，相当于进行文本的编辑

我觉得用代码更能直观的显示

测试的环境 win10 + STS

springboot+thymeleaf

配置thymeleaf 的依赖

<!-- 引入 thymeleaf 模板依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

配置静态thymeleaf 的读取的静态的js和css文件
spring.mvc.static-path-pattern=/static/** 表示默认是在classpath下

test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    
<!--  <script th:src="@{/static/js/test.js}"></script><!-- 这里使用链接的时候就要用@符号加大括号 -->-->
    
</head>
<body>

<div>
    用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
    <br/>
    用户年龄：<input th:value="${user.age}"/>
    <br/>
    用户生日：<input th:value="${user.birthday}"/>
    <br/>

    用户生日：<input th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}">
    
    <br/>
</div>

<br/>
 
<div th:object="${user}"><!--不写user 我们就要用*{name} *{age} *{birthday}  在前面的标签里面加入th:object='${user}'-->
    用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
    <br/>
    用户年龄：<input th:value="*{age}"/>
    <br/>
    用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
    <br/>
</div>

<br/>
 
text 与 utext ：<br/>
<span th:text="${user.desc}">abc</span><!-- 会直接映射内容 th:text -->
<br/>
<span th:utext="${user.desc}">abc</span><!-- 回当做是一个解释器，解析html的内容 th:utext -->
<br/>
<br/>

URL:<br/>
<a  th:href="@{http://www.imooc.com}">网站地址</a>
<br/>

<br/>
<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/><!-- 这里th:filed='*{name}'  = th:id='name' + th:name='name' + th:value='*{name} 也就是name的值，很好用' -->
    <input type="text" th:field="*{age}"/>
    <input type="submit"/>
</form>
<br/>

<br/>
<div th:if="${user.age} == 18">十八岁的天空</div>
<div th:if="${user.age} gt 18">你老了</div><!-- gt 大于  lt 小于    -->
<div th:if="${user.age} lt 18">你很年轻</div>
<div th:if="${user.age} ge 18">大于等于</div>
<div th:if="${user.age} le 18">小于等于</div>
<br/>

<br/>
<select>
     <option >选择框</option>
     <option th:selected="${user.name eq 'lee'}">lee</option><!-- 如果匹配会显示默认的值实现选择 -->
     <option th:selected="${user.name eq 'imooc'}">imooc</option>
     <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
</select>
<br/>

<br/>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.name}"></td>
        <td th:text="${person.age}"></td>
        <td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td>
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>
<br/>

<br/>
<div th:switch="${user.name}">
  <p th:case="'lee'">lee</p>
  <p th:case="'manager'">普通管理员</p>
  <p th:case="'superadmin'">超级管理员</p>
  <p th:case="*">其他用户</p><!-- * 表示其他 -->
</div>
<br/>

</body>
</html>

上面是直观的显示html里面用thymeleaf的一些表达式

实现的controller类

package com.soft.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.huahang.pojo.User;

@Controller
@RequestMapping("th")
public class ThymeleafController {

	@RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name", "thymeleaf-imooc");
        return "thymeleaf/index";
    }
	
	@RequestMapping("center")
    public String center() {
        return "thymeleaf/center/center";
    }
	
	@RequestMapping("test")
    public String test(ModelMap map) {
		
		User u = new User();
		u.setName("superadmin");
		u.setAge(20);
		u.setPassword("123465");
		u.setBirthday(new Date());
		u.setDesc("<font color='green'><b>hello imooc</b></font>");
		
		map.addAttribute("user", u);
		
		User u1 = new User();
		u1.setAge(19);
		u1.setName("imooc");
		u1.setPassword("123456");
		u1.setBirthday(new Date());
		
		User u2 = new User();
		u2.setAge(17);
		u2.setName("LeeCX");
		u2.setPassword("123456");
		u2.setBirthday(new Date());
		
		List<User> userList = new ArrayList<>();
		userList.add(u);
		userList.add(u1);
		userList.add(u2);
		
		map.addAttribute("userList", userList);
		
        return "thymeleaf/test";
    }
	
	@PostMapping("postform")
    public String postform(User u) {
		
		System.out.println("姓名：" + u.getName());
		System.out.println("年龄：" + u.getAge());
		
        return "redirect:/th/test";
    }
}

亲测有效

注意：本文的代码来自于慕课网风间影月 springboot开发常用技术整合的课程

本文是用于笔记，有神魔问题还请指教