index页面详解

我不是女神ヾ 2022-03-16 03:38 184阅读 0赞

###  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;
        }

[代码链接][Link 1]  
[项目演示][Link 2]

[Link 1]: https://github.com/yangdongchao/springboot
[Link 2]: http://www.ydc98.club:443/