Thymeleaf

最新推荐文章于 2023-07-17 07:26:58 发布

Mikowoo007

最新推荐文章于 2023-07-17 07:26:58 发布

阅读量348

点赞数

分类专栏： spring-boot

本文链接：https://blog.csdn.net/Mikowoo007/article/details/94339636

版权

spring-boot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Thymeleaf

在pox.xml 中引入 Thymeleaf 启动器

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

在这里插入图片描述
同样在 spring-boot-autoconfigure 中

private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

public static final String DEFAULT_PREFIX = "classpath:/templates/";

public static final String DEFAULT_SUFFIX = ".html";

在这里插入图片描述
在控制层添加响应
com.mikowoo.springboot.controller 添加 HelloController.java 类

package com.mikowoo.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HelloController {
    @ResponseBody
    @RequestMapping("/success")
    public String execute(){
        return "hello mikowoo,welcome to study Thymeleaf";
    }
    @RequestMapping("/execute")
    public String success(){
        //在如下位置找 classpath:/templates/success.html 文件
        return "success";
    }
}

在这里插入图片描述
重启服务器

Thymeleaf 举例

更改 com.mikowoo.springboot.controller.HelloController.java

@RequestMapping("/execute")
    public String success(Map<String,Object> map){
        map.put("name","mikowoo");
        //在如下位置找 classpath:/templates/success.html 文件
        return "success";
    }

更改 resources/templates/success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf模板</title>
</head>
<body>
    <h2>成功!!!!!!!!!!!</h2>
    <hr/>
    <!--th:text会将获取到的数据写到标签体中-->
    <p th:text="${name}">这里显示名字</p>
</body>
</html>

Thymeleaf 语法

官网文档
在这里插入图片描述
th:fragment 与 th:replace

重启服务器

`th:replace` 与 `th:insert` 区别

th:replace 保留引入时使用的标签
th:insert 不保留引入时使用的标签,将声明片段直接覆盖当前引用
在这里插入图片描述

`th:each` 迭代

在这里插入图片描述
更新 com.mikowoo.springboot.contrllor.HelloController.java 代码

package com.mikowoo.springboot.controller;

import com.mikowoo.springboot.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class HelloController {
    @RequestMapping("/study")
    public String study(Map<String,Object> map){
        List<User> userList = new ArrayList<>();
        userList.add(new User("小麦",1));
        userList.add(new User("小张",2));
        userList.add(new User("小李",1));

        map.put("userList", userList);
        return "study";
    }
}

user 第1个值,代表每次迭代出对象,名字任意取

iterStat 第2个值,代表每次迭代器内置对象,名字任意取,并有如下属性

index	当前迭代下标0开始
count	当前迭代下标1开始
size	获取总记录数
current	当前迭代出的对象
even/old	当前迭代是偶数还是奇数(1开始算,返回布尔值)
first	当前是否是第一个元素
last	当前是否是最后一个元素

在resources/templates/ 创建 study.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>总记录数</th>
            <th>偶数/奇数</th>
            <th>第一个元素</th>
            <th>最后一个元素</th>
        </tr>
        <!--th:each作用在那个标签上,对应的就会根据它的值迭代多少次-->
        <tr th:each="user, iterStat :${userList}">
            <td th:text="${iterStat.count}">未知</td>
            <td th:text="${user.username}">未知</td>
            <td th:text="${user.gender == 1 ?'女':'男'}">未知</td>
            <td th:text="${iterStat.size}" ></td>
            <td th:text="${iterStat.even ? '偶数':'奇数'}" ></td>
            <td th:text="${iterStat.first}" ></td>
            <td th:text="${iterStat.last}" ></td>
        </tr>
    </table>

    <ur>
        <li th:each="user :${userList}" th:text="${user.username}"></li>
    </ur>

</body>
</html>

创建 User.java 实体类 com/mikowoo/springboot/entity/User.java
Alt+Insert 添加 setter/getter 方法
添加 构造器(Constructor)
添加 无参构造器

package com.mikowoo.springboot.entity;

public class User {
    private String Username;
    // 1.代表女生, 2. 代表男生
    private Integer gender;

    public User() {
    }

    public User(String username, Integer gender) {
        Username = username;
        this.gender = gender;
    }

    public String getUsername() {
        return Username;
    }

    public void setUsername(String username) {
        Username = username;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }
}

在这里插入图片描述

`th:if` 判断 true 值,显示标签

th:if 不仅判断返回为true的表达式，还判断一些特殊表达式

如果值不是 Null以下情况返回true
1. 如果值是boolean类型并且值为true
2. 如果值是数值类型并且值不为0
3. 如果值是字符类型并且值不为空
4. 如果值是字符串并且内容不为 false,off,no
5. r如果值不是上述类型也返回true
如果值是NULL，则返回false
th：if如果值为true，则显示标签，否则不显示

更新添加resources/templates/study.html 代码

<h3 th:if="${#lists.isEmpty(userList)}">显示出来则说明userList集合是空的</h3>
<hr/>
<h3 th:if="not ${#lists.isEmpty(userList)}">显示出来则说明userList集合不是空的</h3>
<h3 th:unless="${#lists.isEmpty(userList)}">显示出来则说明userList集合不是空的</h3>

`th:unless` 判断 false 值，显示标签

更新com.mikowoo.springboot.controller,HelloController.java

 @RequestMapping("/study")
    public String study(Map<String,Object> map){
        List<User> userList = new ArrayList<>();
        userList.add(new User("小麦",1));
        userList.add(new User("小张",2));
        userList.add(new User("小李",1));
        map.put("userList", userList);

        //1.女 2.男
        map.put("sex",1);
        map.put("man",2);
        return "study";
    }

更新添加resources/templates/study.html 代码

<div th:switch="${sex}">
    <p th:case="1">女</p>
    <p th:case="2">男</p>
    <p th:case="*">未知</p>
</div>

`th:text` 显示标签体内容

th:text 转义特殊字符，即 <h1> 标签以文本显示出来
th:utext 不转义特殊字符，即 <h1> 标签展现出本来效果

更新 com.mikowoo.springboot.controller,HelloController.java

map.put("desc","<h1>MIKO</h1>,welcome to study");

更新添加resources/templates/study.html 代码

<div th:text="${desc}"></div>
<div th:utext="${desc}"></div>

在这里插入图片描述

`th:object` 直接取出对象

更新 com.mikowoo.springboot.controller,HelloController.java

@Controller
public class HelloController {

    @RequestMapping("/study")
    public String study(Map<String,Object> map, HttpServletRequest request){
	//将user对象绑定到session当中
    request.getSession().setAttribute("user",new User("小不点",2));
}

更新添加resources/templates/study.html 代码

<div th:object="${session.user}">
    <p>
        姓名:<span th:text="*{username}">xxx</span>
    </p>
    <p>
        性别:<span th:text="*{gender == 1 ? '女':'男'}">xx</span>
    </p>
</div>

在这里插入图片描述

Mikowoo007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Thymeleaf

Thymeleaf在pox.xml 中引入 Thymeleaf 启动器<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </depen...
复制链接

扫一扫