S03L05 - 在网页上显示数据，Spring Boot

html

使用 Spring Boot 在网页上显示数据：全面指南
目录

Spring Boot 简介及数据展示 - 第3页
设置 Service 层 - 第5页
创建 Home Controller - 第7页
使用 Thymeleaf 开发视图 - 第10页
优化 Controller 代码 - 第14页
运行和测试应用 - 第17页
总结 - 第20页


Spring Boot 简介及数据展示
概述
Spring Boot 通过简化设置和配置过程，彻底改变了开发人员构建 Java 应用程序的方式。Web 开发中的一个常见任务是将数据库中的数据展示在网页上。本指南深入探讨了使用 Spring Boot 实现这一目标的分步过程，重点介绍了最佳实践和高效的编码技巧。
重要性和目的
动态展示数据提升了用户体验和互动性。无论是博客、电子商务网站，还是任何数据驱动的应用程序，能够无缝获取和呈现数据都是至关重要的。Spring Boot 与 Thymeleaf 结合，提供了一个强大的框架，以最小的样板代码实现这一目标。
优缺点


优点
缺点


利用 Spring Boot 的自动配置实现快速开发
由于功能繁多，对初学者来说可能有些令人困惑


与 Thymeleaf 无缝集成以进行模板设计
需要理解 MVC 架构


使用 Spring Data JPA 高效处理数据
在较大的应用程序中，调试问题可能比较复杂


何时何地使用
这种方法非常适合需要动态数据渲染的 Web 应用程序，如博客、仪表盘和内容管理系统。当您需要一个强大的后端与一个干净且易于维护的前端时，这是最好的选择。

设置 Service 层

详细说明
Service 层作为 Controller 和 Repository 之间的中介。它封装了业务逻辑，确保 Controller 保持简洁，专注于处理 HTTP 请求。
关键概念和术语

Service Layer：管理业务逻辑和数据处理。
Repository：与数据库接口以执行 CRUD 操作。
Dependency Injection：Spring 自动注入依赖的机制。

实现 Service 层




		
		
			
			
Java
			
			
package org.studyeasy.SpringStarter.services;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.studyeasy.SpringStarter.models.Post;
import org.studyeasy.SpringStarter.repositories.PostRepository;

import java.util.List;

@Service
public class PostService {

    @Autowired
    private PostRepository postRepository;

    // Retrieves all posts from the repository
    public List<Post> getAllPosts() {
        return postRepository.findAll();
    }
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
				
						 
package org.studyeasy.SpringStarter.services;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.studyeasy.SpringStarter.models.Post;
import org.studyeasy.SpringStarter.repositories.PostRepository;
 
import java.util.List;
 
@Service
public class PostService {
 
    @Autowired
    private PostRepository postRepository;
 
    // Retrieves all posts from the repository
    public List<Post> getAllPosts() {
        return postRepository.findAll();
    }
}
 
					
				
			
		


代码说明

@Service：表明该类提供业务服务。
@Autowired：自动注入 PostRepository 依赖。
getAllPosts()：从数据库中获取所有 post 条目。

输出说明
当调用 getAllPosts() 时，它会检索数据库中存储的所有帖子列表，准备在网页上显示。

创建 Home Controller
详细说明
Controller 处理 HTTP 请求并与 Service 层交互以获取数据。然后，它将这些数据添加到模型中，使其对视图可访问。
关键概念和术语

Controller：管理传入的 HTTP 请求并返回适当的响应。
Model：保存显示在视图中的数据。
@Controller：表明该类作为 Web Controller。

实现 Home Controller




		
		
			
			
Java
			
			
package org.studyeasy.SpringStarter.Controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.studyeasy.SpringStarter.services.PostService;

@Controller
public class HomeController {

    @Autowired
    private PostService postService;

    @GetMapping("/")
    public String home(Model model) {
        // Fetch all posts from the service layer
        model.addAttribute("posts", postService.getAllPosts());
        return "home";
    }
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
				
						 
package org.studyeasy.SpringStarter.Controller;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.studyeasy.SpringStarter.services.PostService;
 
@Controller
public class HomeController {
 
    @Autowired
    private PostService postService;
 
    @GetMapping("/")
    public String home(Model model) {
        // Fetch all posts from the service layer
        model.addAttribute("posts", postService.getAllPosts());
        return "home";
    }
}
 
					
				
			
		


代码说明

@GetMapping("/")：将根 URL 映射到 home 方法。
model.addAttribute("posts", postService.getAllPosts())：将帖子列表添加到模型中，键为 "posts"。
return "home"：指向 home.html 模板。

输出说明
访问根 URL 会触发 home 方法，该方法获取所有帖子并将其传递给 home.html 视图以进行渲染。

使用 Thymeleaf 开发视图
详细说明
Thymeleaf 是一个用于 Web 和独立环境的服务器端 Java 模板引擎。它与 Spring Boot 无缝集成，允许在 HTML 模板中动态渲染数据。
关键概念和术语

Thymeleaf：现代的服务器端 Java 模板引擎。
模板：通过 Thymeleaf 属性增强的 HTML 文件，用于动态内容。
Fragments：可重用的 HTML 模板部分。

实现 home.html 模板




		
		
			
			
Java
			
			
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"></head>
<body>
    <div th:replace="fragments/header :: header"></div>
    <div class="container">
        <div th:each="post : ${posts}" class="post">
            <h3 th:text="${post.title}">Post Title</h3>
            <p th:text="${post.body}">Post Body</p>
            <hr/>
        </div>
    </div>
    <div th:replace="fragments/footer :: footer"></div>
</body>
</html>

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"></head>
<body>
    <div th:replace="fragments/header :: header"></div>
    <div class="container">
        <div th:each="post : ${posts}" class="post">
            <h3 th:text="${post.title}">Post Title</h3>
            <p th:text="${post.body}">Post Body</p>
            <hr/>
        </div>
    </div>
    <div th:replace="fragments/footer :: footer"></div>
</body>
</html>
 
					
				
			
		


代码说明

th:replace：包含诸如 head、header 和 footer 等片段，以确保页面一致性。
th:each="post : ${posts}"：遍历 Controller 传递的帖子列表。
th:text="${post.title}"：动态插入帖子标题。
th:text="${post.body}"：动态插入帖子内容。

输出说明
模板遍历每个帖子，并在 HTML 结构内显示其标题和内容， resulting in a neatly formatted list of posts on the webpage.

优化 Controller 代码
详细说明
优化 Controller 代码可以提升可读性和可维护性。小的调整可以在不牺牲功能性的前提下，使代码更加简洁。
关键概念和术语

Model Optimization：简化数据传递到视图的方式。
Code Readability：编写易于理解和维护的代码。

优化 HomeController




		
		
			
			
Java
			
			
@GetMapping("/")
public String home(Model model) {
    // Directly add posts to the model
    model.addAttribute("posts", postService.getAllPosts());
    return "home";
}

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
@GetMapping("/")
public String home(Model model) {
    // Directly add posts to the model
    model.addAttribute("posts", postService.getAllPosts());
    return "home";
}
 
					
				
			
		


代码说明
无需为帖子创建单独的变量，该方法直接将其添加到模型中，从而减少代码行数并提升可读性。
优化的好处

Improved Readability：更少的代码使流程更易理解。
Maintainability：简化的方法更易于调试和扩展。
Performance：虽然在小型应用中影响不大，但优化的代码可以提升大型系统的性能。


运行和测试应用
详细说明
测试确保应用按预期工作。运行 Spring Boot 应用程序应在主页上无错误地显示帖子。
关键概念和术语

Spring Boot Application：一个独立的、生产级的基于 Spring 的应用程序。
Console Logs：显示运行时信息和潜在错误。
Browser Refresh：更新网页以查看最新数据。

运行应用的步骤

启动 Spring Boot 服务：使用命令行或 IDE 运行 SpringStarterApplication.java。
监控 Console Logs：确保没有错误，并且应用成功启动。
刷新网页：在浏览器中导航到 http://localhost:8080/。

预期输出

Console Logs：显示成功启动且无错误的信息。
Webpage：显示帖子列表，包括标题和内容，使用分隔线清晰区分。

故障排除提示

服务未启动：检查 pom.xml 中是否缺少依赖或配置错误。
数据未显示：确保数据库正确填充数据，并且 Repository 正常工作。
样式问题：验证 CSS 文件是否正确链接和加载。


总结
本指南提供了使用 Spring Boot 和 Thymeleaf 在网页上显示数据的全面教程。通过设置强大的 Service 层、创建高效的 Controller 和开发动态视图，您可以构建可扩展和可维护的 Web 应用程序。强调代码优化和彻底测试确保您的应用不仅运行顺畅，而且易于管理和未来扩展。
主要收获：

Spring Boot 简化了开发：其自动配置和嵌入式服务器加快了开发过程。
Thymeleaf 提升了模板设计：与 Spring Boot 无缝集成，使其成为动态内容渲染的强大工具。
Service 层至关重要：它将业务逻辑与 Controllers 解耦，促进了更清洁的代码。
优化很重要：即使是小的改进也能显著提升代码库的可读性和可维护性。
测试确保了可靠性：定期测试和监控可以预防问题并提升用户体验。

附加资源：

Spring Boot 官方文档
Thymeleaf 文档
Spring Data JPA 参考

注意：本文由 AI 生成。
优点	缺点
利用 Spring Boot 的自动配置实现快速开发	由于功能繁多，对初学者来说可能有些令人困惑
与 Thymeleaf 无缝集成以进行模板设计	需要理解 MVC 架构
使用 Spring Data JPA 高效处理数据	在较大的应用程序中，调试问题可能比较复杂