spring boot 十二 thymeleaf_spring thymeleafcontext-优快云博客

本文介绍如何在SpringBoot项目中集成Thymeleaf模板引擎。主要包括导入依赖包、编写控制器、配置属性及创建HTML文件等内容。通过具体示例展示了Thymeleaf的基本用法。

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

spring boot 集成 thymeleaf 非常简单。
第一步，导入包。
第二步，编写controller
第三步。配置。properties (thymeleaf 属于springboot 指定模板，基本使用默认配置不会改动)
第四步。创建 html 导入thymeleaf
下面直接看demo：

第一步，导入包。

<!--thymeleaf 集成 包-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
<!--热部署 方便开发使用 建议加入 ，编辑html 完成后，按ctrl + F9 刷新浏览器，就能看到最新的效果-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>

第二步：
编写controller

public class User {
    private long id;
    private String name;
    private double money;
   ... ... 
}

/**
 * @Author: zll
 * @Date @{DATE} 22:22
 */
@Controller
public class TestController {

    @RequestMapping("hello")
    public String TestThymeLeaf(Model model){
        User user = new User();
        user.setId(10);
        user.setName("zll");
        user.setMoney(9.65);
        model.addAttribute("user",user);
        model.addAttribute("msg","hello thymeleaf");
        model.addAttribute("mye","money");
        model.addAttribute("sex",1);
        model.addAttribute("date",new Date());
        
        List<User> list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            list.add(user);
        }

        Map<Integer,User> map = new HashMap();
        for (int i = 0; i < 3; i++) {
            map.put(i,user);
        }
        model.addAttribute("userList",list);
        model.addAttribute("userMap",map);
        return "index";
    }

    @RequestMapping("user/{name}")
    public @ResponseBody String TestThymeLeaf(@PathVariable("name") String name){
        return "name == "+name;
    }

    @RequestMapping("money/{money}")
    public @ResponseBody String hello(@PathVariable("money") String money){
        return "my money == "+money;
    }
    
    @RequestMapping("save")
    public @ResponseBody String saveUser(User user){
        return user.toString();
    }
}

第三步写properties

server.port=8005
server.servlet.context-path=/thyme
spring.thymeleaf.cache=false   # 去除缓存 ，在开发阶段使用false ，线上环境去掉就行因为默认是true，

第四步：在 resources/templates 目录下创建 xxx.html 文件。
导入 xmlns:th=“http://www.thymeleaf.org”
index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>
<body>
标准表达式</br>
<span th:text="${msg}">hello</span>
<span th:text="${user.id}"></span>
<span th:text="${user.name}"></span>
<span th:text="${user.money}"></span>
</br></br>
选择变量表达式
<div th:object="${user}">
    <span th:text="*{id}"></span>
    <span th:text="*{name}"></span>
    <span th:text="*{money}"></span>
</div>

选择变量表达式 也可以 直接使用 类似
<div th:text="*{user.money}"></div>

<a href="test.html" th:href="@{'http://localhost:8005/thyme/user/'+${user.name}}">绝对路径</a></br>
<a href="test.html" th:href="@{'user/zll'}">相当前页面的路径  user/zll </a></br>
<a href="test.html" th:href="@{'/money/12'}">相对于上下文根路径 前面加 /money/12 </a></br>

<form th:action="@{/save}" th:method="post">
    <!--不使用 th 静态效果-->
    <input id="id" name="id" value="12"></br>
    <!--要实现动态效果 需要在 签名加 th:-->
    <input th:id="name" name="name" th:value="${user.name}"></br>
    <!-- 属性上也可以动态使用-->
    <input th:id="${mye}" th:name="${mye}" th:value="${user.money}"></br>
    <input type="submit" value="Submit" />
</form>

<!--&lt;!&ndash;动态导入js&ndash;&gt;-->
<script th:src="@{'/js/'+'hello.js'}"></script>

<div>List 循环 (数组 也使用该方式 )</div>
<!--<div th:each="user: ${userList}">  标准写法-->
<div th:each="user: ${userList}">
    <!--变量 + Stat 可以读取出循环体信息-->
    <span th:text="${userStat.count}"></span>
    <span th:text="${userStat.size}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.name}"></span>
    <span th:text="${user.money}"></span>
</div>
<div>Map 循环</div>
<div th:each="item: ${userMap}">
    <!--变量 + Stat 可以读取出循环体信息-->
    <span th:text="${item.key}"></span>
    <span th:text="${item.value.id}"></span>
    <span th:text="${item.value.name}"></span>
    <span th:text="${item.value.money}"></span>
</div>

<span th:if="${user.money>10}">
    大于10元
</span>
<span th:if="${user.money<10}">
    小于10元
</span>

<div th:onclick="test()" th:style="'color: red;'">点我试试</div>
<div>swith 语句</div>
<span th:switch="${sex}">
    <span th:case="0">女</span>
    <span th:case="1">男</span>
    <span th:case="*">太监</span><!--* 代表 defualt-->
</span>

<!--想使用 thymeleaf 对象，必须使用内联脚本 th:inline="javacript"-->
<script type="text/javascript" th:inline="javascript">
    function test() {
        <!--必须使用 th:inline="javacript" 才可以获取到内联属性-->
        var name = [[${user.name}]]
        alert("hello "+name);
    }
</script>
<div>内置功能对象   #dates  #strings 等等  这里只以 日期格式为例，用法类似java 调用方式 以#xxxx.方法</div>
<div>日期对象</div>
<div th:text="${#dates.format(date,'yyyy-mm-dd HH:mm:ss')}"></div>

<div>三元运算符</div>
<div  th:text="${sex == 0? '女':'男'}"></div>

<div>获取内置对象：request, session 的方式(如果是2.0 的版本 需要时 httpRequest httpSession)</div>
    <span th:text="${#request.getContextPath()}"></span>
    [[${#request.getContextPath(}]]
    <br/>
    <span th:text="${#session.getAttribute('user').phone}"></span>
<br/>

<img th:src="@{'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=575666072,4111443608&fm=26&gp=0.jpg'}">

</body>
</html>

现在可以进行访问了，非常简单