Springboot：thymeleaf使用小记

最新推荐文章于 2025-03-17 10:41:52 发布

Java大佬~

最新推荐文章于 2025-03-17 10:41:52 发布

阅读量168

点赞数 1

分类专栏： thymeleaf springboot 模板 html

本文链接：https://blog.youkuaiyun.com/u013127419/article/details/84999908

版权

springboot 同时被 3 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

thymeleaf

1 篇文章

订阅专栏

本文介绍如何在Spring Boot项目中使用Thymeleaf模板引擎，包括添加依赖、控制器数据准备及前端数据渲染，展示文本、样式、列表数据及逻辑判断的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

thymeleaf是新一代的模板引擎，在spring4.0中推荐使用thymeleaf来做前端模版引擎。

之前用过JSP的jstl标签库，现在很少有公司使用jsp了吧，Java代码和前端代码写在一起，看起来很不舒服，维护也很困难，对前端开发人员也不是很友好。thymeleaf使用起来很干净，也不需要过多的配置，加入依赖直接就可以使用。

首先在pom中添加依赖：

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-thymeleaf</artifactId>
		    <version>1.5.11.RELEASE</version>
		</dependency>

在controller中准备我们需要在前端渲染的数据。

import com.learning.thymeleaf.model.User;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


@RestController
@RequestMapping("/lucky")
public class LuckyController {

    @RequestMapping("/show")
    public ModelAndView add(ModelMap map) {
        Map<String, Object> data = new HashMap<>();

        // 文本
        data.put("a", "31岁儿子扮高中生新");
        data.put("b", "苹果声明尊重裁定新");
        data.put("c", "母女奔丧遭杀害");
        //样式
        data.put("d", "margin: 12px 0 0 0;line-height: 150%;color:red");
        data.put("e", "font-family: 微软雅黑;font-size: 18px;color: #3f3f3f;");
        data.put("f", "color: #900b09;border-bottom: 1px solid #900b09");
        
        // 遍历集合
        List<User> userList = new ArrayList<>();
        User user = new User();
        user.setUsername("wuli");
        user.setAge("23");
        user.setSex("男");
        userList.add(user);
        
        User user1 = new User();
        user1.setUsername("linbo");
        user1.setAge("24");
        user1.setSex("男");
        userList.add(user1);

        User user2 = new User();
        user2.setUsername("wangjh");
        user2.setAge("22");
        user2.setSex("男");
        userList.add(user2);

        data.put("user", userList);

        //逻辑运算
        data.put("flag", false);

        map.addAllAttributes(data);
        ModelAndView modelAndView = new ModelAndView("lucky/show");
        modelAndView.addObject("data", data);
        return modelAndView;

    }
}

在这里使用的是ModelAndView发送数据，然后就可以在前端渲染这些数据了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>luckyshow</title>
</head>
<body>
<!-- 文本和样式渲染-->
<span th:text="${data.a}" th:style="${data.d}"></span>
<span th:text="${data.b}" th:style="${data.e}"></span>
<span th:text="${data.c}" th:style="${data.f}"></span>

<hr>
<!-- 列表数据的遍历-->
<ul th:each="item,index:${data.user}">
    <li>
        姓名： <span class="name" th:text="${item.username}"></span>
        年龄： <span class="age" th:text="${item.age}"></span>
        性别： <span class="sex" th:text="${item.sex}"></span>
    </li>
</ul>

<hr>
<!-- 逻辑渲染-->
<button th:if="${!data.flag}" style="width: 200px;height: 45px;">
    我是按钮点击我
</button>
</body>
</html>

效果如下：

Tips：这里ModelAndView对应的页面是templates下面的lucky/show.html页面。如果没有使用thymeleaf，还使用return跳转页面，那么就是对应static下面的页面。不过要去掉@RestController和@ResponseBody等注解，防止返回的是Json数据。

@Controller
public class HtmlController {
	@GetMapping("/html")
	public String html() {
		return "/index.html";
	}

其他常用th标签：

https://blog.youkuaiyun.com/zrk1000/article/details/72667478