SpringBoot使用Thymeleaf模板引擎,前端的基本语法

1. 基础取值:变量表达式 ${...}

这是最常用的语法,用于从后端 Controller 传递的 Model 中获取数据。

  • 后端代码:

    1@GetMapping("/test")
    2public String test(Model model) {
    3 model.addAttribute("name", "张三");
    4 model.addAttribute("user", new User("李四", 25));
    5 return "index";
    6}

  • 前端页面(index.html):

    1
    2

    默认值


    3
    4

    姓名


    5

    年龄

2. 表单绑定与回显:th:objectth:field

在修改或新增数据时,这套组合拳能让表单自动填充数据,并在提交时自动封装到后端实体类中。

  • 后端代码:

    1// 编辑页面,将查到的用户塞入模型
    2model.addAttribute("user", userService.getById(1));

  • 前端页面:

    1


    2
    3
    4
    5
    6
    7
    8
    9
    10

3. 动态链接生成:URL 表达式 @{...}

Thymeleaf 处理 URL 极其强大,能自动带上项目的上下文路径(Context Path),并且完美支持参数拼接。

4. 循环遍历:th:each

用于渲染表格、下拉框等重复结构。

  • 后端代码:

    1List userList = userService.list();
    2model.addAttribute("users", userList);

  • 前端页面:

    1


    2
    3
    4
    5
    6
    7
    8
    9
    10
    14
    15
    序号姓名操作

    11
    12 删除
    13

5. 条件判断与逻辑运算:th:if / th:unless

控制页面元素的显示与隐藏。

  • 判空与非空:

    1
    2

    暂无数据

    3
    4

  • 三元运算符与 Elvis 运算符(防止空指针):

    1
    2
    3
    4

6. 常用工具对象(内置神器)

Thymeleaf 提供了一系列以 # 开头的工具类,专门用来处理格式化。

  • 日期格式化(解决你之前遇到的时间戳问题):

    1
    2

  • 字符串处理:

    1
    2

7. 页面布局复用:th:fragmentth:replace

避免每个页面都重复写导航栏和页脚。

  • 定义公共片段(common/header.html):

    1


    2

    我的网站标题


    3
    4

  • 在主页面引用:

    1
    2

相关推荐
JJJennie77733 分钟前
Gemini 3.7 Flash 上线,Google 想让 AI 多干活
开发语言·javascript·ecmascript
wuyk5551 小时前
Python 第三章:列表 List
服务器·开发语言·python
笨鸟先飞,勤能补拙1 小时前
从预测到决策:人工智能与机器学习的系统方法、工程闭环与现实边界
大数据·人工智能·windows·python·机器学习·密码学
Evand J2 小时前
【MATLAB例程,车联网7】CACC网联车辆协同控制:ACC对比、V2X时延丢包与队列稳定性,附例程下载链接
开发语言·matlab·车联网
MgArcher2 小时前
抖音a_bogus参数逆向实战:JSVMP环境模拟与Hook技术(2025最新)
javascript·爬虫·python
circuitsosk2 小时前
AI输出的“质检员”:构建智能体质量评估、异常检测与人工兜底的三层防线
人工智能·python·microsoft·正则表达式·langchain
要努力点2 小时前
Python入门第六课
开发语言·python
CTA终结者3 小时前
先用小策略练清条件和动作
人工智能·python
Bruce_Liuxiaowei3 小时前
从零到可运行:基于 Vue3 + FastAPI + DeepSeek-V3 的 AI 英语单词学习系统全栈实战
人工智能·python·学习·fastapi·全栈·智能体
萧瑟余晖3 小时前
Java深入解析篇三十三之消息队列
java·开发语言