java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > springboot  thymeleaf 语法

springboot 中 thymeleaf 常用的语法完整实例

作者:人生万事须自为,跬步江山即寥廓。

在 Spring Boot 项目中,Thymeleaf 是一个常用的模板引擎,它提供了丰富的语法来动态渲染 HTML 页面,下面给大家介绍springboot 中 thymeleaf 常用的语法完整实例,感兴趣的朋友一起看看吧

在 Spring Boot 项目中,Thymeleaf 是一个常用的模板引擎,它提供了丰富的语法来动态渲染 HTML 页面。以下是一些常用的 Thymeleaf 语法,以及一个完整的 Spring Boot + Thymeleaf 示例。

Thymeleaf 常用语法

表达式

<!-- 获取变量值 -->
<p th:text="${message}">默认消息</p>
<!-- 获取对象的属性 -->
<p th:text="${user.name}">默认用户名</p>

选择

<!-- 判断 -->
<p th:if="${user.active}">用户激活</p>
<!-- 选择 -->
<div th:switch="${user.role}">
    <p th:case="'admin'">管理员</p>
    <p th:case="'user'">普通用户</p>
</div>

链接

<!-- 跳转到指定 URL -->
<a th:href="@{/profile}" rel="external nofollow" >查看资料</a>
<!-- 带参数的 URL -->
<a th:href="@{/profile(id=${user.id})}" rel="external nofollow"  rel="external nofollow" >查看资料</a>

属性

<!-- 替换属性 -->
<div th:attr="id=${user.id}, class=${user.active ? 'active' : 'inactive'}">用户信息</div>

片段

<!-- 引入片段 -->
<div th:insert="~{commons :: header}">页面头部</div>
<!-- 替换片段 -->
<div th:replace="~{commons :: header}">页面头部</div>

内容

<!-- 插入内容 -->
<div th:insert="~{commons :: content">
    <!-- 页面内容 -->
</div>
<!-- 替换内容 -->
<div th:replace="~{commons :: content">
    <!-- 页面内容 -->
</div>

完整代码

以下是一个完整的 Spring Boot + Thymeleaf 示例,包括一个简单的控制器和一个 Thymeleaf 模板文件。

pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- 其他依赖 -->
</dependencies>

application.properties

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false

ThymeleafController.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ThymeleafController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "欢迎来到 Spring Boot + Thymeleaf 示例!");
        return "index";
    }
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Boot + Thymeleaf 示例</title>
</head>
<body>
    <h1 th:text="${message}">默认消息</h1>
</body>
</html>

application.properties

properties

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false

index.html (继续)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Boot + Thymeleaf 示例</title>
</head>
<body>
    <h1 th:text="${message}">默认消息</h1>
    <p th:if="${user.active}">用户已激活</p>
    <p th:unless="${user.active}">用户未激活</p>
    <div th:switch="${user.role}">
        <p th:case="'admin'">管理员</p>
        <p th:case="'user'">普通用户</p>
        <p th:case="*">未知角色</p>
    </div>
    <a th:href="@{/profile(id=${user.id})}" rel="external nofollow"  rel="external nofollow" >查看资料</a>
    <div th:insert="~{commons :: header}">页面头部</div>
    <div th:replace="~{commons :: content}">页面内容</div>
</body>
</html>

Commons.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>公共片段</title>
</head>
<body>
    <div th:fragment="header">页面头部</div>
    <div th:fragment="content">页面内容</div>
</body>
</html>

总结

Thymeleaf 提供了丰富的语法来动态渲染 HTML 页面,包括表达式、选择、链接、属性、片段和内容等。通过这些语法,你可以轻松地在 Spring Boot 应用中实现数据驱动的页面渲染。在实际开发中,你可以根据项目需求灵活运用这些语法,以创建功能丰富且易于维护的 Web 应用。

以上内容涵盖了 Thymeleaf 的基本语法和示例代码,希望这能帮助你了解如何在 Spring Boot 项目中使用 Thymeleaf。

到此这篇关于springboot 中 thymeleaf 常用的语法的文章就介绍到这了,更多相关springboot thymeleaf 语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文