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

相关推荐
FYKJ_20103 分钟前
springboot刑事案件管理系统03047-计算机课程设计、毕业设计
vue.js·spring boot·python·mysql·typescript·spark·django
Python图像识别1 小时前
18-【2027毕设】YOLO11烟雾检测识别系统 - Python完整源码+PyQt5界面+训练模型+数据集
python·深度学习·yolo·毕业设计·毕设
FYKJ_20101 小时前
springboot助农产品销售商城05829-计算机课程设计、毕业设计
java·spring boot·python·mysql·spark·django
Yunovian1 小时前
AI时代,针对模型与应用,浅谈一下各编程语言
开发语言·c++·人工智能·python·ai·rust·ai编程
weixin_457760001 小时前
基于 YOLO11m-Pose 的动物姿态估计系统:从 Animal-Pose 标注到 Python 桌面部署
人工智能·python·深度学习
Ticnix2 小时前
RAG 烂大街?烂大街的只是那条流水线——真正的分水岭在这五处
后端·python·agent
Wx-bishekaifayuan2 小时前
springboot社区扶贫救助管理系统13300-计算机课程设计、毕业设计
spring boot·后端·python·django·课程设计·express·旅游
周杰伦fans2 小时前
构建真正智能的CAD AI绘图代理
开发语言·人工智能·c#
小小张说故事3 小时前
LightGBM 入门指南:更快的梯度提升树,Python 实战
后端·python·机器学习
Ticnix3 小时前
RAG 检索不准,九成的锅不在向量——不同文件,就该有不同的入库方案
后端·python·agent