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

相关推荐
千里码aicood几秒前
flask-基于注意力机制的异常流量检测与自动防御系统
后端·python·flask
维克兜率天1 分钟前
4.3.2.1 日常监控:上线只是开始
服务器·数据库·python·区块链·php·量化
李迟3 分钟前
Golang实践录:工程框架实践:搭建工程模板
开发语言·后端·golang
纪伊路上盛名在3 分钟前
Kabsch算法的Julia实现
开发语言·算法·julia·序列分析·蛋白质·rmsd
玖玥拾8 分钟前
Lua 基础语法(三) 元表 metatable、元方法、模拟面向对象
开发语言·unity·lua
the局外人9 分钟前
学习 FastAPI 的 Day 2:用异步 ORM 完成增删改查
后端·python·fastapi
智搜广告11 分钟前
GEO优化公司怎么选?智搜广告从三个维度帮你判断
大数据·人工智能·python·elasticsearch·microsoft·geo
维天说13 分钟前
Agent会听人话,反而更难管
java·开发语言·人工智能
wanglei20070821 分钟前
软件架构设计中,各个组件之间的通信方式有哪些?
python
会飞的拖把28 分钟前
Python 面向对象编程详解:从类与对象到动态属性方法
开发语言·python