📌  相关文章
📜  java数据表源码tymeLeaf——Java(1)

📅  最后修改于: 2023-12-03 14:43:01.365000             🧑  作者: Mango

Java数据表源码TymeLeaf

TymeLeaf是一款Java模板引擎，可用于构建Web应用程序。它支持MVC架构并且是一个强大的视图技术。应用程序开发人员可以使用TymeLeaf来处理HTML/XML视图。

TymeLeaf的特性
  • 可以使用HTML标记作为模板，并添加自定义标记
  • 支持Spring框架
  • 可以使用EL表达式（表达式语言）
  • 可以使用自定义标签库和函数库
  • 提供标准化方式来重复使用页面布局和片段
  • 避免XSS攻击
  • 可以使用JS和CSS
示例代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Employee Management</title>
<link rel="stylesheet" href="../css/style.css" />
</head>
<body>
<h1>Employee Management</h1>
<table>
<tr>
<th>Employee ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr th:each="employee : ${employees}">
<td th:text="${employee.id}" />
<td th:text="${employee.firstName}" />
<td th:text="${employee.lastName}" />
<td th:text="${employee.email}" />
<td th:text="${employee.phone}" />
</tr>
</table>
<a href="/employees/new">Add New</a>
</body>
</html>
  • 该示例代码展示了如何使用TymeLeaf显示员工名单
  • 使用thymeleaf命名空间
  • 使用th:each属性循环迭代当前页面的employees
  • 可以看到th:text属性用于绑定模型属性
  • 页面有一个添加新员工的链接，点击之后会跳转到新员工页面
使用TymeLeaf需要配置的文件
  • DispatcherServlet
  • WebMvcConfigurerAdapter
  • pom.xml文件添加如下dependency
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  • thymeleaf页面布局
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="../css/style.css" />
<title>Insert title here</title>
</head>
<body>
<header th:fragment="header">
<h1>Header Title</h1>
<nav>
<ul>
<li><a th:href="@{/home}">Home</a></li>
<li><a th:href="@{/about}">About</a></li>
<li><a th:href="@{/contact}">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
<footer th:fragment="footer">
<p>This is the footer.</p>
</footer>
  • thymeleaf片段
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="../css/style.css" />
<title>Insert title here</title>
</head>
<body>
<div th:include="layout :: header"></div>
<h1>Hello World!</h1>
<div th:include="layout :: footer"></div>
</body>
</html>