《SpringBoot项目开发》课件-项目四-任务二 SpringBoot整合Thymeleaf

项目四学生成绩管理系统的教师管理任务二

SpringBoot整合Thymeleaf

SpringBoot项目开发目录CONTENTS1Thymeleaf简介2Thymeleaf标准表达式4任务实现3ThymeleafTh属性

本任务旨在通过掌握Thymeleaf基础语法，实现动态Web页面的渲染。创建控制器，处理HTTP请求并传递数据到视图。最终达到在SpringBoot项目中成功集成Thymeleaf的目的。任务描述01Thymeleaf简介Thymeleaf简介与传统的JSP模板引擎相比，Thymeleaf支持静态HTML预览，而JSP需要运行在服务器上才能预览。与FreeMarker相比，Thymeleaf的学习曲线较低，社区活跃度更高。Thymeleaf与其他模板引擎的对比Thymeleaf支持HTML原型，其模板文件后缀为“.html”，可以直接被浏览器打开，展示静态页面效果，方便前端人员进行页面设计。在服务启动后，Thymeleaf能够动态地替换掉静态内容，使页面动态显示数据，实现前后端的良好协作。Thymeleaf特点Thymeleaf是一款适用于Web开发的Java模板引擎，它的核心作用是实现“后端数据”与“前端HTML页面”的动态绑定，让后端传递的业务数据能直接渲染到HTML页面中，生成最终供用户浏览的动态页面。Thymeleaf简介创建Thymeleaf模板Thymeleaf模板文件默认存放在src/main/resources/templates目录下。要在html中

声明Thymeleaf命名空间，确保属性生效

<htmllang="en"xmlns:th="">模板文件存放位置1.文件扩展名为.html（HTML模板为最常用类型）2.文件名需直接体现模板的业务用途（如“用户列表页”对应user-list.html）3.风格统一：全项目统一采用“小写字母+连字符（-）”的命名风格（即kebab-case），禁止混合使用驼峰式或下划线。模板文件命名规范实现“后端数据→前端页面”的动态渲染。其核心依赖Thymeleaf的表达式语法与th:前缀属性，在服务器端解析模板时，会将表达式替换为真实数据，最终生成静态HTML返回给浏览器。模板文件编写02Thymeleaf标准表达式Thymeleaf标准表达式1.变量表达式

使用格式：${...}，使用变量表达式可以访问容器上下文中的变量。<pth:text="${username}"></p>后端通过model.addAttribute("username","张三")传递用户名，前端通过th:text="${username}"将“张三”动态绑定到页面元素中，浏览器最终看到的是”张三”而非表达式本身。变量表达式中除了可以直接访问变量，还可以访问变量的属性和方法。<pth:text="${user.username}">这是user对象中的name属性值</p><pth:text="${user.getAge()}">这是user对象中的getAge()方法</p>Thymeleaf标准表达式2.选择/星号表达式

使用格式：*{...}，选择表达式和变量表达式使用效果一样，主要区别是：选择表达式计算所选对象而不是整个上下文。<divth:object="${user}"><pth:text="*{username}"></p></div>选择表达式可以和标签th:object一起使用，完成对象属性的简写，表示直接获取object对象中的属性。表示先取到用户对象user，再获取用户名属性。Thymeleaf标准表达式3.消息表达式

使用格式：#{...}，用于模板页面国际化资源的动态替换和展示<h1th:text="#{greeting}">DefaultGreeting</h1><pth:text="#{welcome}">DefaultWelcomeMessage</p><!--语言切换链接--><ahref="#"th:href="@{/home(lang='en')}">English</a><ahref="#"th:href="@{/home(lang='zh')}">中文</a>perties（默认）messages_zh_CN.properties（中文）greeting=Hello!welcome=Welcometoourwebsite.button.submit=Submitgreeting=你好！welcome=欢迎访问我们的网站。button.submit=提交Thymeleaf标准表达式4.链接表达式

使用格式：@{...}，用于构建动态的URL。一般和th:href、th:src等标签结合使用。支持绝对路径、相对路径和动态参数。<!--绝对路径--><ath:href="@{/home}">首页</a><!--带域名的绝对路径--><ath:href="@{/products}">外部链接</a><!--相对路径（相对于当前页面）--><ath:href="@{../about}">关于我们</a><!--方式1：直接拼接参数--><ath:href="@{/users?page=1&size=10}">用户列表</a><!--方式2：使用变量动态生成参数--><ath:href="@{/products(id=${product.id},name=${})}">查看产品:${}</a>03Thymeleaf常用th属性Thymeleaf常用th属性1.基本渲染属性属性作用示例th:text渲染文本内容<spanth:text="${message}">默认文本</span>→输出${message}的值th:utext渲染文本内容（不转义HTML）解析HTML标签<divth:utext="${htmlContent}">HTML内容</div>→解析HTML标签th:value设置表单元素的值<inputth:value="${}"type="text">th:placeholder设置输入框占位文本<inputth:placeholder="#{}"type="text">Thymeleaf常用th属性2.属性操作属性属性作用示例th:href设置链接URL<ath:href="@{/user/{id}(id=${user.id})}">用户详情</a>th:src设置资源路径（图片、JS、CSS等）<imgth:src="@{/images/${product.image}}">th:attr动态设置HTML属性<divth:attr="data-id=${user.id},class=${isAdmin?'admin':'user'}">th:class动态设置CSS类<divth:class="${success?'alert-success':'alert-error'}">提示</div>th:style动态设置样式<pth:style="'color:'+${isImportant?'red':'black'}">文本</p>Thymeleaf常用th属性3.流程控制属性属性作用示例th:if条件渲染（为true时显示）<divth:if="${user.loggedIn}">欢迎，${}</div>th:unless条件渲染（为false时显示）<divth:unless="${user.admin}">普通用户界面</div>th:switch多条件判断html<divth:switch="${user.role}"><pth:case="'admin'">管理员</p></div>th:each循环渲染集合html<ul><lith:each="product:${products}"th:text="${}"></li></ul>Thymeleaf常用th属性4.流程控制属性属性作用示例th:action设置表单提交路径<formth:action="@{/user/save}"method="post">th:field绑定表单字段（与Spring表单配合）<inputth:field="*{name}"type="text">→自动绑定属性th:object定义表单绑定对象<formth:object="${userForm}">th:checked动态设置复选框/单选框选中状态<inputtype="checkbox"th:checked="${user.rememberMe}">04任务实现SpringBoot整合Thymeleaf①

在pom.xml文件中添加SpringWeb和Thymeleaf依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>②

在配置文件中配置Thymeleafspring:thymeleaf:enabled:true#启用模板引擎（默认true）prefix:classpath:/templates/#模板路径前缀suffix:.html#模板文件后缀mode:HTML#模板模式（推荐HTML5）encoding:UTF-8#编码格式cache:false#开发环境关闭缓存（生产环境可设为true）servlet:content-type:text/html#响应内容类型devtools:restart:enabled:true#开启热部署（配合DevTools）SpringBoot整合Thymeleaf③

在com.example.yourproject包下创建model文件夹，并创建User实体类。

importlombok.Data;@Data@AllArgsConstructor@NoArgsConstructorpublicclassUser{privateintid;privateStringname;privateintage;}SpringBoot整合Thymeleaf④

在resources/templates下创建user-list.html(核心代码如下)SpringBoot整合Thymeleaf<body><h1>用户列表</h1><table><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody><trth:each="user:${users}"><tdth:text="${user.id}"></td><tdth:text="${}"></td><tdth:text="${user.age}"></td></tr></tbody></table></