当前位置：首页 > news >正文

SpringBoot-切换用户列表并显示用户信息

news 来源：原创 2025/5/9 14:05:17

1、userlist页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>案例用户列表页面</title><link th:href="@{/css/commons.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<!--头部-->
<div th:replace="~{commons::top}"></div>
<div class="middle"><!--侧边栏--><div th:replace="~{commons::sidlebar}"></div><div class="main">用户列表页面</div>
</div>
<!--脚部-->
<div th:replace="~{commons::footer}"></div>
</body>
</html>

2、在侧边栏导航切换页面同时切换高亮

调用公共代码片段的时候，我们可以给它传入一个参数值，以键值对的形式传进去

<div th:replace="~{commons::sidlebar(isActive='main.html')}"></div>
公共代码片段里可以接收到这个参数，动态设置class值：
<a href="#" th:class="${isActive=='main.html'?'active':''}" th:href="@{/main.html}">main主页面</a>
userlist页面以此类推！
<div th:replace="~{commons::sidlebar(isActive='userlist.html')}"></div>
<a href="#" th:class="${isActive=='userlist.html'?'active':''}" th:href="@{/userlist.html}">用户列表</a>

3、显示用户列表信息

@GetMapping("/userlist.html")
public String userlist(Model model){List<User> users = userService.getAll();model.addAttribute("users",users);return "userlist";
}

视图

<div class="main"><table style="width: 1000px;" border="1" cellspacing="0" cellpadding="0"><tr><td>用户id</td><td>用户名</td><td>用户密码</td><td>用户注册时间</td><td>用户住址</td><td>操作</td></tr><tr th:each="user:${users}"><td>[[${user.id}]]</td><td>[[${user.username}]]</td><td>[[${user.pasword}]]</td><td>[[${#dates.format(user.regDate,'yyyy-MM-dd HH:mm:ss')}]]</td>  
这里的日期我不想要哪个毫秒，可以给日期格式化一下<td>[[${user.address.addressInfo}]]</td><td><a th:href="@{/deleteuser.html(id=${user.id})}">删除</a>  
<a th:href="@{/updateuser.html(id=${user.id})}">修改</a></td></tr></table>
</div>