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:object 与 th: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:fragment 与 th:replace

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

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

    1


    2

    我的网站标题


    3
    4

  • 在主页面引用:

    1
    2

相关推荐
进击的明明5 小时前
当AI开始“边想边干”:深入聊聊ReAct,以及如何用Python手搓一个简单Agent
python·面试·agent
全栈弄潮儿6 小时前
Python实战第8期:函数
后端·python·编程语言
卷无止境7 小时前
暗流与破局:AI时代的代码安全审查工具全景指南
后端·python
卷无止境10 小时前
一人公司的全栈选型指南:让 AI Agent 写得快,也让生意跑得稳
后端·python
WJ.Polar11 小时前
Java封装、继承、多态
java·开发语言
摇滚侠11 小时前
Java 中如何表示负数,有符号和无符号的区别,补码的计算规则,char byte short int long 的范围
java·开发语言
滴啦嘟啦哒12 小时前
【具身笔记】【π0.5 微调与仿真】五、在MuJoCo中实现可视化仿真
笔记·python·vla·具身
weixin_3077791312 小时前
C++代码实现MATLAB中的fitrtree函数功能
开发语言·c++·算法·matlab
全栈练习生12 小时前
AI安全与红队测试
python·ai
爱读书的小胖12 小时前
Codewars:Rot13(C)解题分析
c语言·开发语言