springboot博客（五）（前端）

首页优化

1. 博客图片居中

   <div class="ui middle aligned mobile reversed stackable grid">
   

---

首页展示

效果图

功能分析

1. 可以分页查看所有的博客
2. 可以快速查看博客数最多的6个分类
3. 可以快速查看标记博客最多的10个标签
4. 可以快速查看最新的推荐博客

步骤

首页数据获取（传参）

1. 编写controller

   1. 将blog、types、tags、recommendBlogs对象传入model

      1. blog（博客）

         1. service定义一个方法，只通过pageable查询

         public Page<Blog> listBlog(Pageable pageable) {
             return blogRepository.findAll(pageable);
         }
         

      2. types（热门分类）

         types和tags比较特殊，需要满足以下条件

         按照指定数量获取，并且根据所包含的blog集合的size来排序

         1. service定义一个方法，参数为指定的数量，并规定其排序的方式

            public List<Type> listTypeTop(Integer size) {
                Sort sort = new Sort(Sort.Direction.DESC,"blogs.size");//按照blogs.size降序排序
                Pageable pageable = new PageRequest(0,size,sort);//从头查询，查Size个，按照sort方式排序
                return typeRepository.findTop(pageable);
            }
            

         2. dao层定义方法

            @Query("select t from Type t")
            List<Type> findTop(Pageable pageable);
            

      3. tags同上（热门标签）

      4. recommendBlogs（推荐博客）

         //只有dao有一些差别
         @Query("select b from Blog b where b.recommend = true")
         List<Blog> findTop(Pageable pageable);
         

   2. 编写controller

      @GetMapping("/")
      public String indexController(@PageableDefault(size = 5,sort = {"id"},direction = Sort.Direction.DESC) Pageable pageable,
                                    Model model){
          model.addAttribute("blog",blogService.listBlog(pageable));
          model.addAttribute("types",typeService.listTypeTop(6));
          model.addAttribute("tags",tagService.listTagTop(10));
          model.addAttribute("recommendBlogs",blogService.listRecommendBlogTop(10));
          return "index";
      }
      

渲染页面

1. 博客总数目

   共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}"> 14 </h2> 篇
   

   遇到的坑：page找不到

   page是controller传过来page对象的key值model.addAttribute("page",blogService.listBlog(pageable));

2. 博客（循环）

   1. 标题：增加链接，开启一个新标签页访问
   2. 描述
   3. 头像
   4. 作者昵称
   5. 更新日期
   6. 浏览次数
   7. 分类名称
   8. 首图：增加链接
   9. 注释掉其他的静态博客

   ```html

   标题

   描述...

   

   贾 民