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

相关推荐
闵孚龙1 天前
动态图机制:为什么 PyTorch 调试起来更舒服
人工智能·pytorch·python
chushiyunen1 天前
langchain4j笔记、tools
笔记·python·flask
程序员三藏1 天前
Web自动化测试详解
自动化测试·软件测试·python·selenium·测试工具·职场和发展·测试用例
在放️1 天前
Python 爬虫 · 第三方代理接入与合规使用
开发语言·爬虫·python
KANGBboy1 天前
java知识五(继承)
java·开发语言
c++之路1 天前
Bazel C++ 构建系列文档(三):构建第一个 C++ 项目
开发语言·c++
AI人工智能+电脑小能手1 天前
【大白话说Java面试题 第117题】【并发篇】第17题:线程有几种状态,之间如何转换?
java·开发语言·面试
财经资讯数据_灵砚智能1 天前
基于全球经济类多源新闻的NLP情感分析与数据可视化(夜间-次晨)2026年6月14日
大数据·人工智能·python·ai·信息可视化·自然语言处理·灵砚智能
聚名网1 天前
域名net,com,cn有区别吗?有哪些不同呢?
服务器·开发语言·php
牛油果子哥q1 天前
STL set与map底层精讲,红黑树适配原理、有序去重特性、迭代器遍历、API实战与面试核心考点全解
开发语言·数据结构·c++·面试