中国工程建设管理协会网站,建站公司 深圳,网站域名设计,阿里网站建设方案书目录
一、什么是 Thymeleaf 模板引擎
二、Thymeleaf 模板引擎的 Maven 坐标
三、配置 Thymeleaf
四、访问页面
五、访问静态资源
六、Thymeleaf 使用示例
七、Thymeleaf 常用属性 前言 在现代 Web 开发中#xff0c;模板引擎被广泛用于将动态内容渲染到静态页面中。Thy…目录
一、什么是 Thymeleaf 模板引擎
二、Thymeleaf 模板引擎的 Maven 坐标
三、配置 Thymeleaf
四、访问页面
五、访问静态资源
六、Thymeleaf 使用示例
七、Thymeleaf 常用属性 前言 在现代 Web 开发中模板引擎被广泛用于将动态内容渲染到静态页面中。Thymeleaf 是一种流行的模板引擎特别适用于 Spring Boot 项目。它能够在服务器端渲染 HTML 页面同时支持与业务逻辑分离的开发模式提高了开发效率。
一、什么是 Thymeleaf 模板引擎 模板引擎主要用于解决前端显示和后端业务数据的分离。通过模板引擎可以将动态数据填充到静态页面中如 HTML 或 XML 格式从而实现视图与数据的分离。这样不仅提升了开发效率还使得代码更易于重用保持了良好的设计模式。 二、Thymeleaf 模板引擎的 Maven 坐标
在 Spring Boot 项目中使用 Thymeleaf我们需要在 pom.xml 文件中添加以下 Maven 依赖
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId
/dependencydependencygroupIdnet.sourceforge.nekohtml/groupIdartifactIdnekohtml/artifactIdversion1.9.22/version
/dependency三、配置 Thymeleaf
在 application.yml 或 application.properties 文件中我们可以进行一些常见的配置来定制 Thymeleaf 的行为
spring:thymeleaf:cache: false # 关闭页面缓存便于开发时查看更改encoding: UTF-8 # 设置模板编码prefix: classpath:/templates/ # 模板文件所在的目录suffix: .html # 模板文件后缀mode: HTML5 # 设置模板模式为 HTML5四、访问页面 在 Spring Boot 中我们通过 Controller 层来映射请求和返回视图。以下是一个基本的 Controller 示例
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;Controller
public class IndexController {RequestMapping(/)public String index(){return index; // 返回模板名称Thymeleaf 会根据配置寻找 templates/index.html}
}五、访问静态资源 在 Spring Boot 中我们可以通过配置来访问静态资源如 CSS、JS 文件、图片等。以下是如何在 application.yml 文件中配置静态资源的访问路径
spring:mvc:static-path-pattern: /static/**在 HTML 页面中引用静态资源时可以使用相对路径
link relstylesheet href../static/css/mystyle.css/此外当访问页面时可能会遇到缺少图标如 favicon.ico的问题报以下错误 在页面头部加入以下代码来解决
link relshortcut icon href../resources/favicon.ico th:href{/static/favicon.ico}/六、Thymeleaf 使用示例
在 Java 控制器中我们可以通过 Model 或 ModelMap 向 Thymeleaf 模板传递数据。以下是一个基本的示例展示了如何向模板传递一个字符串并显示在 HTML 页面中
Controller 层
RequestMapping(/hello)
public String hello(Model model){model.addAttribute(msg, Hello);return hello; // 返回模板名称 hello.html
}HTML 模板hello.html
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
bodyh1Hello/h1div th:text${msg}/div !-- 显示 Hello --
/body
/html七、Thymeleaf 常用属性
Thymeleaf 提供了许多属性来简化 HTML 内容的渲染以下是一些常用的属性和示例
1. th:text 和 th:utext
th:text设置元素的文本内容并会自动转义 HTML 标签。th:utext设置元素的文本内容但不转义 HTML 标签。
示例
RequestMapping(thymeleaf)
public String thymeleaf(ModelMap map){map.put(thText, th:text设置文本内容 b加粗/b);map.put(thUText, th:utext 设置文本内容 b加粗/b);map.put(thValue, thValue 设置当前元素的value值);return thymeleaf;
}HTML 模板thymeleaf.html
p th:text${thText}/p !-- 输出 th:text设置文本内容 b加粗/b --
p th:utext${thUText}/p !-- 输出 th:utext 设置文本内容 b加粗/bb加粗/b会被渲染为加粗文本 --
input typetext th:value${thValue} !-- 设置输入框的默认值 --2. th:each循环
th:each 用于遍历集合并动态渲染每一项。
示例
RequestMapping(/thymeleaf)
public String listUser(Model model) {ListPerson userList new ArrayList();for (int i 0; i 10; i) {userList.add(new Person(i, 张三 i, 20 i, 男));}model.addAttribute(users, userList);return thymeleaf;
}HTML 模板thymeleaf.html
divulli th:eachuser : ${users}span th:text${user.id}/span-span th:text${user.name}/span-span th:text${user.age}/span-span th:text${user.sex}/span/li/ul
/div3. th:if条件判断
th:if 用于根据条件渲染元素。
示例
RequestMapping(/thymeleaf)
public String listUser(Model model) {model.addAttribute(size, 3);return thymeleaf;
}HTML 模板thymeleaf.html
div th:if${size} eq 3div你好/div
/divThymeleaf 还支持多种条件判断如 eq等于、gt大于、lt小于等运算符。
总结 通过本文我们了解到 Thymeleaf 的基本使用方法和常用功能包括如何集成到 Spring Boot 项目中如何在模板中渲染动态数据以及如何使用 Thymeleaf 提供的多种标签进行页面渲染。Thymeleaf 提供了一种简洁且强大的方式来处理前端页面渲染尤其适合与 Spring Boot 框架结合使用。
希望本文章对你深入理解 Thymeleaf 模板引擎有所帮助。欢迎随时交流
