spring boot2 Thymeleaf模板引擎的基本使用

最新推荐文章于 2025-07-22 10:12:09 发布

张晓祥-长草颜团子

最新推荐文章于 2025-07-22 10:12:09 发布

阅读量10w+

点赞数 9

CC 4.0 BY-SA版权

分类专栏： C-spring系列框架笔记

本文链接：https://blog.csdn.net/wozniakzhang/article/details/86306761

C-spring系列框架笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Thymeleaf在HTML页面中动态加载下拉框选项，并实现根据后台返回的数据自动选中相应项。通过Spring Boot项目配置，结合Thymeleaf标签和函数，实现数据的绑定与回显。

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

Thymeleaf动态加载select下拉框,并选中后台返回的对应类型作为回显

Thyme leaf应该翻译成百里香的叶子(spring boot推荐使用的页面模板,比JSP帅气一些),驼峰命名ThymeLeaf,其中L显得较为突兀,就像ipad或者iphone如果P小写那么显得p腿太长了,不协调,iPad或者iPhone,好了,这是我瞎编的,我这样理解不影响使用,毕竟这个单词查不到,不好读,所以我喜欢拆开方便理解.(标题的重点在最后)

pom依赖(spring-boot-starter-thymeleaf,不然页面404就是家常便饭了哈)

<!--thymeleaf百里香叶页面-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

配置文件配置(yml也可以)

#thymeleaf配置
#模板的模式，支持如：HTML、XML、TEXT、JAVASCRIPT等
spring.thymeleaf.mode=HTML5
#编码，可不用配置
spring.thymeleaf.encoding=UTF-8
#内容类别，可不用配置
spring.thymeleaf.servlet.content-type=text/html
#开发配置为false，避免修改模板还要重启服务器
spring.thymeleaf.cache=false
#配置模板路径，默认就是templates，可不用配置
#spring.thymeleaf.prefix=classpath:/templates/

常用标签(类似jstl,EL表达式)

th:action  定义后台控制器路径
th:each  循环语句
th:field  表单字段绑定
th:href 定义超链接
th:id  div标签中的id声明，类似html标签中的id属性
th:if  条件判断语句
th:include  布局标签，替换内容到引入文件
th:fragment  布局标签，定义一个代码片段，方便其它地方引用
th:object  替换对象
th:src  图片类地址引入
th:text  显示文本
th:value  属性赋值
常用函数：
#dates  日期函数
#lists  列表函数
#arrays  数组函数
#strings  字符串函数
#numbers  数字函数
#calendars  日历函数
#objects  对象函数
#bools  逻辑函数

例子(后台方法)

    /**
     * 去添加页时把数据填充到model,渲染模板再把model数据进行渲染把下拉框填充
     * @param model
     * @return
     */
    @RequestMapping("/goAdd")
    public String goAdd(Model model){
        List<Team> teamList = teamService.getTeamByCondition(null);
        System.out.println(teamList);
        List<PlayerRole> playerRoleList = playerRoleService.getPlayerRoleByCondition(null);
        System.out.println(playerRoleList);
        model.addAttribute("teamList",teamList);
        model.addAttribute("playerRoleList",playerRoleList);
        return "addPlayer";
    }

HTML页面例子(以前写在JSP,现在直接写在HTML,以下拉框为例子,注意HTML头部)

<html xmlns:th="http://www.w3.org/1999/xhtml">

 <div class="layui-form-item">
                <label class="layui-form-label">选择角色</label>
                <div class="layui-input-block">
                    <select name="playerRole" lay-verify="required">
                        <option value=""></option>
                        <!--playerRoleList后台获取到的集合th:each进行遍历,playerRole作为集合对象的变量名称,th:value="${playerRole.id}作为value值
                        th:text="${playerRole.name}"作为需要显示的内容-->
                        <option th:each="playerRole:${playerRoleList}" th:value="${playerRole.id}"
                                th:text="${playerRole.name}"></option>

                    </select>
                </div>
            </div>

说明:我是使用layui提供的模板,js获取数据和表单都是layui的,所以代码只展示重点,最后说明一下,你可以把Thymeleaf理解为可以直接在HTML写Thymeleaf的标签,注意html头部导入xmlns:th="http://www.w3.org/1999/xhtml"就行了

回显需求概述:比如获取到球员的类型是中锋,并选中

代码th:field="*{playerInfo.playerRole}"是选中的关键

            <div class="layui-form-item">
                <label class="layui-form-label">选择角色</label>
                <div class="layui-input-block">
                    <!--th:field="*{playerInfo.playerRole}" playerInfo表示球员实体,playerRole球员实体的属性,
                    比如 playerRole获得的是2(1:对应前锋,2:中锋,3:后卫),那么就显示中锋,*代表所有的都会匹配显示-->
                    <select name="playerRole" lay-verify="required" th:field="*{playerInfo.playerRole}">
                       <option value=""></option>
                        <!--playerRoleList后台获取到的集合
                        th:each="playerRole:${playerRoleList}"  遍历的写法,相当于foreach,playerRole表示变量(实体),${playerRoleList}表示需要遍历的集合
                        th:value="${playerRole.id}作为value值    ${playerRole.id}球员角色ID作为value值
                        th:text="${playerRole.name}"            作为下拉框需要显示的内容
                        th:each="playerRole:${playerRoleList}"-->
                        <option th:each="playerRole:${playerRoleList}"
                                th:value="${playerRole.id}"
                                th:text="${playerRole.name}"
                                ></option>
                    </select>
                </div>

如有疑问请评论,及时回复.