index页面详解
index页面主要是游客浏览的地方。它的核心的分成多个版块进行浏览。
目前我初步设定了5个版块。
分别是计算机学校，通信学院，建筑系，数学系，物理系。
第6个版块是包含全部学院的信息。
实现的思路是：每一个版块都有一个boardId,点击不同的版块，我将根据boardId去查询这个版块里的所有帖子，并分页显示（之所以要分页显示是因为当帖子数量太多时，全部显示加载会非常慢）。
<div class="col-sm-4 portfolio-item">
<a href="/look/1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>我是一个风骚的程序员</p>
</div>
</div>
<img src="index/img/portfolio/cabin.png" class="img-responsive" alt="" />
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="/look/2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>我是一个通信大佬</p>
</div>
</div>
<img src="index/img/portfolio/cake.png" class="img-responsive" alt="" />
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="/look/3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>我是一个有风格的建筑师</p>
</div>
</div>
<img src="index/img/portfolio/circus.png" class="img-responsive" alt="" />
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="/look/4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>我是一个数学系的小伙伴</p>
</div>
</div>
<img src="index/img/portfolio/game.png" class="img-responsive" alt="" />
</a>
</div>
观察可知，不同的版块会去响应不同的"/look/id"，这里有6个不同的id，是不是我的后端需要写6个函数来接收呢？
这里又要介绍一种后端接收的技巧-----使用占位符，来获取id。
先上代码：
@RequestMapping("look/{id}")
//这里的id加上了{}，表示这是一个占位符，前端可以传不同的数值进来
public ModelAndView justLook(HttpServletRequest request, @PathVariable("id") int id,
@RequestParam(value = "page", defaultValue = "0") Integer page,
@RequestParam(value = "size", defaultValue = "15") Integer size) {
//观察可以发现，我用@PathVariable("id") int id实现了接收传来的id值。@RequestParam(value = "page", defaultValue = "0")是关于分页的，关于分页的这里不讲，会有专门的专题来讲解。
User user = getSessionUser(request);
page += 1;
int userId;
if (user == null) {
userId = 0;
} else {
userId = user.getUserId();
}
Page<Topic> topics = topicServiceImp.getTopicsByBoardId(page, size, id);
List<Topic> topics1 = new ArrayList<>();
for (Topic topic : topics) {
topic.setUser(userServiceImp.getUserById(topic.getUserId()));
topic.setUrl("/userReadDetail/"+topic.getTopicId());
setIsPraise(topic,user);
topics1.add(topic);
}
ModelAndView mv = new ModelAndView();
mv.setViewName("look");//设置返回的页面是look.html
mv.addObject("collects", topics1);//将页面需要的参数传给前端页面
mv.addObject("userId", userId);
mv.addObject("type", "look");
mv.addObject("functio", userServiceImp);
mv.addObject("size", topics1.size());
mv.addObject("what", id);
return mv;
}