thymeleaf集成导航
时间: 2025-01-03 16:43:02 浏览: 6
### 如何在Spring Boot项目中使用Thymeleaf实现页面导航
#### 使用控制器处理请求并返回视图名称
为了使页面能够响应用户的操作,需要定义相应的控制器来接收HTTP请求,并指定要渲染的模板文件名。例如:
```java
@Controller
public class NavController {
@GetMapping("/home")
public String home() {
return "home";
}
@GetMapping("/about")
public String about() {
return "about";
}
}
```
上述代码展示了两个简单的GET映射方法,分别对应不同的URL路径[^4]。
#### 创建HTML模板文件
接下来,在`src/main/resources/templates/`目录下创建对应的`.html`文件作为前端展示部分。假设有一个名为`navigation.html`的基础布局文件用于放置公共元素以及链接指向其他页面:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Navigation Example</title>
<link rel="stylesheet" href="/css/style.css"/>
</head>
<body>
<nav>
<ul>
<li><a th:href="@{/home}">Home</a></li>
<li><a th:href="@{/about}">About Us</a></li>
<!-- 更多菜单项 -->
</ul>
</nav>
<div layout:fragment="content"></div>
<script src="/js/app.js"></script>
</body>
</html>
```
这里的关键在于使用了`th:href="@{...}"`属性来进行相对地址解析,确保即使部署环境发生变化也能正确跳转至目标位置[^1]。
#### 定义具体页面的内容片段
对于每一个具体的业务逻辑页面(比如首页、关于我们页),可以在各自的HTML文档里继承自上面提到的基础布局,并填充特定区域内的实际内容。以`home.html`为例:
```html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="~{navigation}">
<head>
<title>Home Page</title>
</head>
<body>
<section layout:fragment="content">
<h1>Welcome to Our Website!</h1>
<p>This is the homepage content...</p>
</section>
</body>
</html>
```
这样就完成了基本的页面间切换功能设置。当访问者点击导航栏上的不同选项时,浏览器会向服务器发起新的请求,而服务端则依据路由规则匹配相应处理器函数并将最终形成的网页反馈给客户端显示出来[^3]。
阅读全文