Spring Boot 中使用 Thymeleaf:从页面渲染到数据绑定

简介: Thymeleaf是Spring Boot推荐的模板引擎,HTML即原型又可动态渲染,提升前后端协作效率。支持页面跳转、数据绑定、列表遍历、条件显示等常用功能,开发时关闭缓存可实时预览。静态页可直接浏览,后端注入数据无缝衔接,助力高效开发。

Thymeleaf 是 Spring Boot 官方推荐的服务端模板引擎。它最大的优势是:HTML 既是静态原型,又是动态模板——前端可以直接在浏览器打开调试,后端启动后又能自动注入数据,极大提升协作效率。

下面通过几个典型场景,带你快速上手 Thymeleaf 的日常用法。

  1. 注意:别用 @RestController!

使用 Thymeleaf 渲染页面时,Controller 必须使用 @Controller,而不是 @RestController。

java
@Controller // ✅ 正确
public class PageController {
@GetMapping("/home")
public String home() {
return "index"; // 返回 templates/index.html
}
}
❌ 如果用了 @RestController,Spring 会把 "index" 当作字符串直接返回,而不是去加载 index.html 页面。

  1. 自定义错误页(404 / 500)

Spring Boot 会自动识别 templates/error/ 目录下的错误页面:
404.html → 路径不存在
500.html → 服务器内部错误

例如:

html

<!DOCTYPE html>



页面走丢了 😢



只要放在正确目录,无需额外配置,系统会自动跳转。

  1. 渲染单个对象

后端通过 Model 传递数据:

java
@GetMapping("/blogger")
public String getBlogger(Model model) {
Blogger blogger = new Blogger(1L, "张三", "123456");
model.addAttribute("blogger", blogger);
return "blogger";
}

前端页面(blogger.html)使用 Thymeleaf 表达式取值:

html
<!DOCTYPE html>

姓名:默认名




取值方式对比:

写法 说明


${blogger.name} 推荐,直接访问属性(支持 getter)
${blogger.getName()} 调用方法(不常用)
{name} 需配合 th:object="${blogger}" 使用,适用于表单绑定
⚠️ {} 语法仅在 th:object 作用域内有效。

  1. 遍历 List 列表

后端传一个列表:

java
@GetMapping("/bloggers")
public String getList(Model model) {
List list = Arrays.asList(
new Blogger(1L, "张三", "xxx"),
new Blogger(2L, "李四", "yyy")
);
model.addAttribute("bloggers", list);
return "list";
}

前端用 th:each 遍历:

html

ID:

姓名:



❌ 在 th:each 循环中*不能使用 {},因为没有 th:object 上下文。
  1. 常用 Thymeleaf 属性速查

属性 用途 示例


th:text 替换元素文本 默认
th:value 设置 input 值
th:href 动态链接 个人中心
th:src 图片/资源路径
th:if 条件显示

管理员面板

th:unless 反向条件
th:each 循环

  • th:action 表单提交地址
    所有 @{...} 表示 URL 表达式,会自动处理上下文路径。
    1. 开发小贴士
      关闭缓存**(开发时必须):
      yaml
      spring:
      thymeleaf:
      cache: false
      模板文件默认放在 src/main/resources/templates/;
      静态资源(CSS/JS/图片)放在 src/main/resources/static/;
      浏览器可直接打开 HTML 查看静态效果,Thymeleaf 属性会被忽略。

    结语

    Thymeleaf 不追求炫技,而是解决实际问题:
    ✅ 让前端写原型无依赖,
    ✅ 让后端渲染数据无负担,
    ✅ 让团队协作更顺畅。

  • 相关文章
    |
    12天前
    |
    数据采集 人工智能 安全
    |
    7天前
    |
    机器学习/深度学习 人工智能 前端开发
    构建AI智能体:七十、小树成林,聚沙成塔:随机森林与大模型的协同进化
    随机森林是一种基于决策树的集成学习算法,通过构建多棵决策树并结合它们的预测结果来提高准确性和稳定性。其核心思想包括两个随机性:Bootstrap采样(每棵树使用不同的训练子集)和特征随机选择(每棵树分裂时只考虑部分特征)。这种方法能有效处理大规模高维数据,避免过拟合,并评估特征重要性。随机森林的超参数如树的数量、最大深度等可通过网格搜索优化。该算法兼具强大预测能力和工程化优势,是机器学习中的常用基础模型。
    344 164
    |
    6天前
    |
    机器学习/深度学习 自然语言处理 机器人
    阿里云百炼大模型赋能|打造企业级电话智能体与智能呼叫中心完整方案
    畅信达基于阿里云百炼大模型推出MVB2000V5智能呼叫中心方案,融合LLM与MRCP+WebSocket技术,实现语音识别率超95%、低延迟交互。通过电话智能体与座席助手协同,自动化处理80%咨询,降本增效显著,适配金融、电商、医疗等多行业场景。
    345 155
    |
    7天前
    |
    编解码 人工智能 自然语言处理
    ⚽阿里云百炼通义万相 2.6 视频生成玩法手册
    通义万相Wan 2.6是全球首个支持角色扮演的AI视频生成模型,可基于参考视频形象与音色生成多角色合拍、多镜头叙事的15秒长视频,实现声画同步、智能分镜,适用于影视创作、营销展示等场景。
    581 4
    |
    15天前
    |
    SQL 自然语言处理 调度
    Agent Skills 的一次工程实践
    **本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
    1018 7

    热门文章

    最新文章