spring boot如何访问前端页面这个问题怎么解决？

原创

mob649e81540090 2023-07-07 14:15:59 ©著作权

文章标签 前端页面模板引擎 xml 文章分类 spring boot 后端开发

©著作权归作者所有：来自51CTO博客作者mob649e81540090的原创作品，请联系作者获取转载授权，否则将追究法律责任

Spring Boot如何访问前端页面

在Spring Boot中，我们可以通过使用Thymeleaf模板引擎来渲染前端页面。Thymeleaf是一种用于服务器端渲染的模板引擎，它可以将数据和模板结合起来，生成最终的HTML页面。

为了演示如何访问前端页面，我们将创建一个简单的Spring Boot应用程序，该应用程序将显示一个简单的用户列表页面。

步骤1：创建Spring Boot项目

首先，我们需要创建一个新的Spring Boot项目。可以使用Spring Initializr（ IDEA或Eclipse）创建一个新的Spring Boot项目。

步骤2：添加依赖

在pom.xml文件中，我们需要添加以下依赖项以支持Thymeleaf模板引擎：

<dependencies>
    ...
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    ...
</dependencies>

步骤3：创建用户Controller

我们需要创建一个用于处理用户相关请求的Controller类。在这个示例中，我们将创建一个名为UserController的类，并添加一个用于显示用户列表页面的请求处理方法。

@Controller
public class UserController {

    @GetMapping("/users")
    public String getUsers(Model model) {
        // 获取用户列表数据
        List<User> users = userRepository.findAll();

        // 将用户列表数据添加到模型中
        model.addAttribute("users", users);

        // 返回用户列表页面
        return "users";
    }
}

在这个例子中，@Controller注解用于标记这个类是一个控制器。@GetMapping("/users")注解用于指定处理/users路径的GET请求的方法。

步骤4：创建用户列表页面

我们需要创建一个名为users.html的Thymeleaf模板文件，用于显示用户列表。

<!DOCTYPE html>
<html xmlns:th="
<head>
    <meta charset="UTF-8">
    <title>User List</title>
</head>
<body>
    User List
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user : ${users}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.email}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这个示例中，我们使用Thymeleaf的模板表达式来动态填充表格中的用户数据。