一、实现效果
- 在效果图中，重点是点击进入“个人中心”之后，有两个分页，点击不同分页，显示不同内容
二、实现功能
1. 创建个人中心，UserCenter.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/community.css">
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<!--导航栏-->
<div th:insert="~{navication :: nav}"></div>
<div class="container-fluid main profile">
<div class="row">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<h2><span th:text="${sectionName}"></span></h2>
<hr>
<ul th:each="yourtie:${yourTie}" class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="picture/title.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 th:text="${yourtie.getTitle()}" class="media-heading">Media heading</h4>
<span th:text="${yourtie.getContent()}"></span><br>
<span class="test-desc">
发布人:<span th:text="${yourtie.getUsername()}"></span>
| 发布时间：<span th:text="${yourtie.getDate()}"></span>
</span>
</div>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12" style="margin-top: 15px">
<div class="list-group section">
<a href="/userCenter/tie" th:class="${section == 'tie'}? 'active list-group-item':'list-group-item'">我的发帖</a>
<a href="/userCenter/message" th:class="${section == 'message'}? 'active list-group-item':'list-group-item'">
最新回复
<span class="badge">14</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
- 子页面相互切换，重点这里
<a href="/userCenter/tie" th:class="${section == 'tie'}? 'active list-group-item':'list-group-item'">我的发帖</a>
<a href="/userCenter/message" th:class="${section == 'message'}? 'active list-group-item':'list-group-item'">最新回复</a>
使用条件运算符，如果命中，就显示active list-group-item样式，也就是最右边的按钮编程蓝色
2. 个人中心控制器：UserCenterController
-
新的注解参数：@GetMapping("/userCenter/{action}") 用于实现单个页面的分页功能
-
@PathVariable是spring3.0的一个新功能：接收请求路径中占位符的值
-
个人中心控制器设计思路：
- 通过session判断用户是否登录，未登录返回主页
- 进入“我的帖子”页面，返回参数“tie”，用“action”承接，用于判断当前子页面
- 进入“最新回复”，返回参数“message”，同上
- 进入“我的帖子”页面，从cookie中取出value，作为条件查询数据库的User表，找到对应的用户名，把用户名作为条件，查询数据库的Tie表，返回唯一用户名的数据，也就是当前登录用户发的帖子
package com.example.homework.Controller;
@Controller
public class UserCenterController {
@Autowired
private TieMapper tieMapper;
@GetMapping("/userCenter")
public String to_UserCenter(){
return "/userCenter/tie";
}
@GetMapping("/userCenter/{action}")
public String profile(
@PathVariable("action") String action,
Model model,
HttpServletRequest request
){
User user = (User) request.getSession().getAttribute("user");
if(user == null){
return "redirect:/";
}
User username = null;
if("tie".equals(action)){
Cookie[] cookies = request.getCookies();
for (Cookie cookie : cookies) {
if (cookie.getName().equals("token")){
String token = cookie.getValue();
username = tieMapper.findByToken(token);
break;
}
}
List<Tie> yourTie = tieMapper.showOneTie(username.getUsername());
model.addAttribute("section","tie");
model.addAttribute("sectionName","我的发帖");
model.addAttribute("yourTie",yourTie);
}else if("message".equals(action)){
model.addAttribute("section","message");
model.addAttribute("sectionName","最新回复");
}
return "userCenter";
}
}
完工！
