S02L03 - 向网页添加片段、页眉、页脚

html

使用Thymeleaf在Spring Boot中提取页眉和页脚：全面指南
目录

介绍 ............................................. 3
理解片段的重要性 ............................................. 5
设置您的Spring Boot项目 ............................................. 7
创建片段文件 ............................................. 10

4.1 头部片段
4.2 页眉片段
4.3 页脚片段


将片段集成到您的网页中 ............................................. 14
使用脚本增强您的页脚 ............................................. 18
运行和测试您的应用程序 ............................................. 22
结论 ............................................. 26
附加资源 ............................................. 28



介绍
在Web开发领域，在多个页面中保持一致的布局对于用户体验和高效开发至关重要。重复的代码，特别是页眉和页脚，可能导致文件臃肿和维护工作增加。本电子书深入探讨了使用Spring Boot和Thymeleaf从典型Web页面中提取页眉和页脚的过程，优化您的应用程序结构，以实现更好的可维护性和可扩展性。
为什么要提取页眉和页脚？

一致性: 确保所有网页的外观和感觉统一。
效率: 通过避免重复的代码片段来减少冗余。
可维护性: 简化更新；片段中的更改反映在所有页面上。
性能: 更小的文件大小提升加载时间和整体性能。

什么时候使用片段
当您有跨多个页面重复出现的UI组件（例如导航栏、页脚或侧边栏）时，片段是理想的选择。它们在大型应用程序中特别有用，因为一致的UI元素是必不可少的。


理解片段的重要性
Thymeleaf中的片段允许开发人员模块化其HTML模板的部分内容。通过将常见部分如页眉和页脚提取到独立的片段文件中，您可以显著提升网页的结构和可读性。
使用片段的好处


好处
描述


可重用性
允许相同的代码在应用程序的不同部分中重复使用。


可维护性
通过修改单一的片段文件，便于进行更容易的更新和错误修复。


可读性
通过将复杂的页面拆分为可管理的部分，增强代码的可读性。


可扩展性
通过单独管理UI组件简化应用程序的扩展。


关键概念和术语

Thymeleaf: 一个现代的服务器端Java模板引擎，适用于Web和独立环境。
Fragment: 一个可重用的模板部分，可以在多个页面中包含。
Spring Boot: 一个简化启动和开发新Spring应用程序的框架。



设置您的Spring Boot项目
在深入创建片段之前，请确保您的Spring Boot项目已正确设置并集成了Thymeleaf。
先决条件

Java Development Kit (JDK): 确保安装了JDK 8或更高版本。
Maven: 用于项目管理和依赖管理。
IDE: IntelliJ IDEA、Eclipse或任何首选的Java IDE。
Spring Boot: 熟悉Spring Boot基础知识。

创建一个新的Spring Boot项目

初始化项目: 使用 Spring Initializr 生成一个包含必要依赖项的新Spring Boot项目。
添加Thymeleaf依赖: 确保在您的 pom.xml 中包含了 spring-boot-starter-thymeleaf。





		
		
			
			
Java
			
			&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
&lt;/dependency&gt;
			
				
					
				
					1
2
3
4
				
						&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
&lt;/dependency&gt;
					
				
			
		



项目结构: 熟悉以下关键目录：





		
		
			
			
Java
			
			src/main/java
└── com/example/demo
    ├── DemoApplication.java
    └── controller
        └── HomeController.java
src/main/resources
├── templates
│   ├── about.html
│   ├── book.html
│   ├── home.html
│   └── fragments
│       ├── header.html
│       ├── footer.html
│       └── head.html
└── static
    ├── css
    ├── js
    └── images
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						src/main/java
└── com/example/demo
    ├── DemoApplication.java
    └── controller
        └── HomeController.java
src/main/resources
├── templates
│   ├── about.html
│   ├── book.html
│   ├── home.html
│   └── fragments
│       ├── header.html
│       ├── footer.html
│       └── head.html
└── static
    ├── css
    ├── js
    └── images
					
				
			
		




创建片段文件
片段有助于隔离网页中重复的部分。我们将创建三个主要片段：head.html、header.html和footer.html。
4.1 头部片段
head.html片段包含HTML的<head>部分，包括元标签、标题和CSS链接。




		
		
			
			
Java
			
			&lt;!-- head.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org"&gt;
&lt;head th:fragment="head"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title th:text="${title}"&gt;My Spring Boot Application&lt;/title&gt;
    &lt;link rel="stylesheet" th:href="@{/css/bootstrap.css}"&gt;
    &lt;link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"&gt;
    &lt;link rel="stylesheet" th:href="@{/css/style.css}"&gt;
&lt;/head&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						&lt;!-- head.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org"&gt;
&lt;head th:fragment="head"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title th:text="${title}"&gt;My Spring Boot Application&lt;/title&gt;
    &lt;link rel="stylesheet" th:href="@{/css/bootstrap.css}"&gt;
    &lt;link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"&gt;
    &lt;link rel="stylesheet" th:href="@{/css/style.css}"&gt;
&lt;/head&gt;
					
				
			
		


4.2 页眉片段
header.html片段包括导航栏和任何其他页眉元素。




		
		
			
			
Java
			
			&lt;!-- header.html --&gt;
&lt;header th:fragment="header"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Home&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
            &lt;ul class="navbar-nav"&gt;
                &lt;li class="nav-item active"&gt;
                    &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#"&gt;Book Online&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
&lt;/header&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						&lt;!-- header.html --&gt;
&lt;header th:fragment="header"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Home&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
            &lt;ul class="navbar-nav"&gt;
                &lt;li class="nav-item active"&gt;
                    &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#"&gt;Book Online&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
&lt;/header&gt;
					
				
			
		


4.3 页脚片段
footer.html片段包含页脚部分，包括联系信息和脚本。




		
		
			
			
Java
			
			&lt;!-- footer.html --&gt;
&lt;footer th:fragment="footer"&gt;
    &lt;div class="footer-content"&gt;
        &lt;p&gt;联系我们 | 模板名称 | 营业时间&lt;/p&gt;
        &lt;a href="https://www.linkedin.com"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="https://www.twitter.com"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;p&gt;由ThemeWagon分发&lt;/p&gt;
    &lt;/div&gt;
    &lt;script th:src="@{/js/jquery-3.4.1.min.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/bootstrap.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/custom.js}"&gt;&lt;/script&gt;
&lt;/footer&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						&lt;!-- footer.html --&gt;
&lt;footer th:fragment="footer"&gt;
    &lt;div class="footer-content"&gt;
        &lt;p&gt;联系我们 | 模板名称 | 营业时间&lt;/p&gt;
        &lt;a href="https://www.linkedin.com"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="https://www.twitter.com"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;p&gt;由ThemeWagon分发&lt;/p&gt;
    &lt;/div&gt;
    &lt;script th:src="@{/js/jquery-3.4.1.min.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/bootstrap.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/custom.js}"&gt;&lt;/script&gt;
&lt;/footer&gt;
					
				
			
		




将片段集成到您的网页中
有了片段后，下一步是使用Thymeleaf的片段包含功能将它们集成到您的HTML页面中。
修改 about.html




		
		
			
			
Java
			
			&lt;!-- about.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/head :: head"&gt;
&lt;body&gt;
    &lt;div th:replace="fragments/header :: header"&gt;&lt;/div&gt;
    
    &lt;div class="container"&gt;
        &lt;h1&gt;关于我们&lt;/h1&gt;
        &lt;p&gt;欢迎使用我们的应用程序。这是关于页面。&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div th:replace="fragments/footer :: footer"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						&lt;!-- about.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/head :: head"&gt;
&lt;body&gt;
    &lt;div th:replace="fragments/header :: header"&gt;&lt;/div&gt;
    
    &lt;div class="container"&gt;
        &lt;h1&gt;关于我们&lt;/h1&gt;
        &lt;p&gt;欢迎使用我们的应用程序。这是关于页面。&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div th:replace="fragments/footer :: footer"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
					
				
			
		


修改 home.html 和 book.html
同样，更新您的 home.html 和 book.html 以包含这些片段：




		
		
			
			
Java
			
			&lt;!-- home.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/head :: head"&gt;
&lt;body&gt;
    &lt;div th:replace="fragments/header :: header"&gt;&lt;/div&gt;
    
    &lt;div class="container"&gt;
        &lt;h1&gt;首页&lt;/h1&gt;
        &lt;p&gt;欢迎来到首页。&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div th:replace="fragments/footer :: footer"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						&lt;!-- home.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/head :: head"&gt;
&lt;body&gt;
    &lt;div th:replace="fragments/header :: header"&gt;&lt;/div&gt;
    
    &lt;div class="container"&gt;
        &lt;h1&gt;首页&lt;/h1&gt;
        &lt;p&gt;欢迎来到首页。&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div th:replace="fragments/footer :: footer"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
					
				
			
		




使用脚本增强您的页脚
将脚本集成到页脚可以改善页面加载时间和整体性能。以下是如何有效组织您的脚本的方法。
将脚本移动到页脚

提取脚本: 从各个页面中剪切所有 <script> 标签。
粘贴到 footer.html: 将脚本放置在关闭的 </footer> 标签之前。





		
		
			
			
Java
			
			&lt;!-- footer.html --&gt;
&lt;footer th:fragment="footer"&gt;
    &lt;!-- 页脚内容 --&gt;
    
    &lt;!-- 脚本 --&gt;
    &lt;script th:src="@{/js/jquery-3.4.1.min.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/bootstrap.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/custom.js}"&gt;&lt;/script&gt;
&lt;/footer&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						&lt;!-- footer.html --&gt;
&lt;footer th:fragment="footer"&gt;
    &lt;!-- 页脚内容 --&gt;
    
    &lt;!-- 脚本 --&gt;
    &lt;script th:src="@{/js/jquery-3.4.1.min.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/bootstrap.js}"&gt;&lt;/script&gt;
    &lt;script th:src="@{/js/custom.js}"&gt;&lt;/script&gt;
&lt;/footer&gt;
					
				
			
		



确保正确加载: 通过将脚本放在页脚中，允许主要内容先加载，增强用户体验。

将脚本放在页脚的好处

改善加载时间: 脚本不会阻塞页面的渲染。
更好的用户体验: 用户可以在脚本加载时开始与页面互动。
优化性能: 减少了感知的加载时间。



运行和测试您的应用程序
在设置片段并将其集成到您的网页后，测试和运行您的应用程序以确保一切顺利工作至关重要。
运行应用程序的步骤

构建项目: 使用Maven清理并构建您的项目。





		
		
			
			
Java
			
			mvn clean install
			
				
					
				
					1
				
						mvn clean install
					
				
			
		



运行应用程序: 执行Spring Boot应用程序。





		
		
			
			
Java
			
			mvn spring-boot:run
			
				
					
				
					1
				
						mvn spring-boot:run
					
				
			
		



访问应用程序: 在浏览器中导航到 http://localhost:8080/about 或任何其他映射的URL。

排除常见问题

服务器离线: 确保应用程序正在无错误运行。
缺少样式或脚本: 验证您的片段文件中的路径是否正确。
内容未对齐: 检查所有片段包含是否正确放置在您的HTML文件中。

测试片段集成

一致性检查: 在不同页面之间导航，确保页眉和页脚保持一致。
响应式设计: 调整浏览器窗口大小以验证响应性。
脚本功能: 测试导航切换等交互元素，确保脚本正确加载。



结论
在Spring Boot应用程序中使用Thymeleaf片段提取页眉和页脚是一种最佳实践，带来了众多好处，包括增强的可维护性、减少冗余和提升性能。通过模块化您的HTML模板，您不仅简化了开发过程，还为构建可扩展和高效的Web应用程序铺平了道路。
关键要点

模块化: 将HTML拆分为可重用的片段简化了开发。
效率: 减少代码冗余，使更新变得简单。
性能: 优化脚本位置提升加载时间和用户体验。
可维护性: 集中的片段确保一致性和易于维护。

实施片段是构建健壮且可维护的Spring Boot和Thymeleaf Web应用程序的战略性举措。
SEO关键词: Spring Boot fragments, Thymeleaf header footer, web page templating, Spring Boot Thymeleaf tutorial, reusable HTML components, Spring Boot web development, Thymeleaf fragments guide, optimize Spring Boot application, maintaining consistent layout, modular web design.


附加资源

Spring Boot文档
Thymeleaf官方网站
Spring Boot和Thymeleaf集成指南
Bootstrap文档
Font Awesome图标
了解Thymeleaf片段


附录: 示例代码片段
HomeController.java




		
		
			
			
Java
			
			&lt;code&gt;package org.studyeasy.SpringStarter.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("title", "Home Page");
        return "home";
    }

    @GetMapping("/about")
    public String about(Model model) {
        model.addAttribute("title", "About Us");
        return "about";
    }

    @GetMapping("/book")
    public String book(Model model) {
        model.addAttribute("title", "Book Online");
        return "book";
    }
}
&lt;/code&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						&lt;code&gt;package org.studyeasy.SpringStarter.Controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class HomeController {
 
    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("title", "Home Page");
        return "home";
    }
 
    @GetMapping("/about")
    public String about(Model model) {
        model.addAttribute("title", "About Us");
        return "about";
    }
 
    @GetMapping("/book")
    public String book(Model model) {
        model.addAttribute("title", "Book Online");
        return "book";
    }
}
&lt;/code&gt;
					
				
			
		


示例输出解释
当您运行应用程序并导航到 /about 时，about.html 页面将显示集成的页眉和页脚。导航栏在所有页面上保持一致，任何对 header.html 或 footer.html 片段的更改将自动反映在所有使用它们的页面上。

通过遵循本指南，您可以有效地管理Spring Boot应用程序中的常见UI组件，确保开发过程流畅以及一致的用户体验。
注意：本文由AI生成。
S02L03 – 向网页添加片段、页眉、页脚

使用Thymeleaf在Spring Boot中提取页眉和页脚：全面指南

目录

介绍

为什么要提取页眉和页脚？

什么时候使用片段

理解片段的重要性

使用片段的好处

关键概念和术语

设置您的Spring Boot项目

先决条件

创建一个新的Spring Boot项目

创建片段文件

4.1 头部片段

4.2 页眉片段

4.3 页脚片段

将片段集成到您的网页中

修改 `about.html`

修改 `home.html` 和 `book.html`

使用脚本增强您的页脚

将脚本移动到页脚

将脚本放在页脚的好处

运行和测试您的应用程序

运行应用程序的步骤

排除常见问题

测试片段集成

结论

关键要点

附加资源

附录: 示例代码片段

HomeController.java

示例输出解释

好处	描述
可重用性	允许相同的代码在应用程序的不同部分中重复使用。
可维护性	通过修改单一的片段文件，便于进行更容易的更新和错误修复。
可读性	通过将复杂的页面拆分为可管理的部分，增强代码的可读性。
可扩展性	通过单独管理UI组件简化应用程序的扩展。