【SpringBoot搭建个人博客】- 其他页面显示（十二）

柔情只为你懂 2021-09-21 08:44 350阅读 0赞

> 博客地址[：ONESTARの客栈][ONESTAR]
> 
> 源码领取方式一：
> 
>  *  扫一扫文末二维码，关注公众号【编程日刊】，后台回复【博客】，即可领取源码
> 
> 源码领取方式二：
> 
>  *  前端页面源码地址：[https://github.com/oneStarLR/myblog-page][https_github.com_oneStarLR_myblog-page]
>  *  以jpa为持久层源码地址：[https://github.com/oneStarLR/myblog-jpa][https_github.com_oneStarLR_myblog-jpa]
>  *  以mybatis为持久层源码地址：[https://github.com/oneStarLR/myblog-mybaits][https_github.com_oneStarLR_myblog-mybaits]
> 
> 欢迎给star以鼓励(^\_−)☆

--------------------

由于剩下的页面显示比较简单，本文将把剩下的前端页面显示都讲述一下，分别有：分类页面显示、时间轴页面显示、音乐盒页面显示、友人帐页面显示、照片墙页面显示、关于我页面显示由于留言功能和评论功能基本一样，之前也写过一篇有关评论的博客[（SpringBoot和Mybatis实现评论楼中楼功能（一张表搞定））][SpringBoot_Mybatis]，所以这里就不讲留言功能的开发了，还有不懂的伙伴可以问我，也可以加群讨论。

### 一、分类页面显示 ###

当博客开发到这里了，很多功能都是相通的，后端管理基本上就是增删改查、前端显示基本上就是返回model，只是处理起来会有些细微的差别，分类页面显示也是一样，根据页面功能来看，需要查询出所有分类和该分类下文章数目。

1. 持久层接口

这里需要两个接口，一个查询分类和该分类下博客数目（getAllTypeAndBlog）、一个是查询博客文章列表（getByTypeId），查询分类和该分类下博客数目是和分类相关的，就放在分类的Dao里面，查询博客文章列表是和博客相关的，就放在博客的Dao里面。

*  在TypeDao接口中添加：

//查询所有分类
    List<Type> getAllTypeAndBlog();

*  在BlogDao接口中添加：

//根据TypeId查询博客列表，显示在分类页面
    List<FirstPageBlog> getByTypeId(Long typeId);

2. mapper

跟持久层接口对应，博客和分类是多对一的关系，一篇博客对应一个分类，一个分类可以对应多篇博客，因此要用Mybatis的多表查询

*  TypeDao

<resultMap id="type" type="com.star.entity.Type">
        <id property="id" column="tid"/>
        <result property="name" column="name"/>
        <collection property="blogs" ofType="com.star.entity.Blog">
            <id property="id" column="bid"/>
            <result property="title" column="title"/>
            <result property="typeId" column="type_id"/>
        </collection>
    </resultMap>
    
    <select id="getAllTypeAndBlog" resultMap="type">
        select t.id tid, t.name, b.id bid, b.title,b.type_id
        from myblog.t_type t,myblog.t_blog b
        where t.id = b.type_id
    </select>

*  BlogDao

<select id="getByTypeId" resultMap="firstPageBlog">
        select b.id,b.title,b.first_picture, b.views, b.comment_count, b.update_time, b.description,t.name ,u.nickname, u.avatar
        from myblog.t_blog b, myblog.t_type t,myblog.t_user u
        where b.type_id = t.id and u.id = b.user_id and b.type_id = #{typeId} order by b.update_time desc
    </select>

3. 业务层

*  TypeService接口

//查询所有分类
    List<Type>getAllTypeAndBlog();

*  TypeServiceImpl接口实现

@Transactional
    @Override
    public List<Type> getAllTypeAndBlog() {
        return typeDao.getAllTypeAndBlog();
    }

*  BlogService接口

//根据TypeId查询博客列表，显示在分类页面
    List<FirstPageBlog> getByTypeId(Long typeId);

*  BlogServiceImpl接口实现

//分类页面查询
    @Override
    public List<FirstPageBlog> getByTypeId(Long typeId) {
        return blogDao.getByTypeId(typeId);
    }

4. 控制器

在controller包下创建TypeShowController类：

package com.star.controller;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.star.entity.Type;
    import com.star.queryvo.FirstPageBlog;
    import com.star.service.BlogService;
    import com.star.service.TypeService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import java.util.List;
    
    /**
     * @Description: 分类页面控制器
     * @Date: Created in 10:03 2020/6/24
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class TypeShowController {
    
        @Autowired
        private TypeService typeService;
    
        @Autowired
        private BlogService blogService;
    
        //    分页查询分类
        @GetMapping("/types/{id}")
        public String types(@RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum, @PathVariable Long id, Model model) {
            List<Type> types = typeService.getAllTypeAndBlog();
    
            //id为-1表示从首页导航栏点击进入分类页面
            if (id == -1) {
                id = types.get(0).getId();
            }
            model.addAttribute("types", types);
            List<FirstPageBlog> blogs = blogService.getByTypeId(id);
    
            PageHelper.startPage(pageNum, 10000);
            PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(blogs);
            model.addAttribute("pageInfo", pageInfo);
            model.addAttribute("activeTypeId", id);
            return "types";
        }
    
    }

讲解：

> \{id\}：当id为-1时，表示从首页导航栏进入分类页面，默认第一个分类显示颜色
> 
> getAllTypeAndBlog：查询分类名称和博客信息，前端统计出该分类下博客数量
> 
> getByTypeId：查询博客列表

5. 前后端交互

*  分类统计

*  分类列表

<div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${pageInfo.list}">
      <div class="ui middle aligned mobile reversed stackable grid" >
        <div class="eleven wide column">
          <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-title-font" th:text="${blog.title}">大圣，此去欲何?</a></h3>
          <p class="m-text" th:text="|${blog.description}......|">戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回” 其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
          <div class="ui grid">
            <div class="eleven wide column">
              <div class="ui mini horizontal link list">
                <div class="item">
                  <img src="../static/images/me.jpg" th:src="@{${blog.avatar}}"  alt="" class="ui avatar image">
                  <div class="content"><a href="#" th:href="@{/about}" target="_blank" class="header" th:text="${blog.nickname}" >oneStar</a></div>
                </div>
                <div class="item">
                  <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
                </div>
                <div class="item">
                  <i class="eye icon"></i> <span th:text="${blog.views}">2222</span>
                </div>
                <div class="item">
                  <i class="comment outline icon"></i> <span th:text="${blog.commentCount}">2222</span>
                </div>
              </div>
            </div>
            <div class="right aligned five wide column">
              <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.typeName}">好文</a>
            </div>
          </div>
        </div>
        <div class="five wide column">
          <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
            <img src="../static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
          </a>
        </div>
      </div>
    </div>

*  分页显示

6. 运行访问

运行项目，访问 [http://localhost:8080/][http_localhost_8080] ，点击导航栏的分类，可以看到分类信息和分类博客列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

### 二、时间轴页面显示 ###

时间轴页面显示只要显示博客标题和时间，因此可以直接共用BlogDao中的持久层接口getAllBlog，只需要编写控制层代码即可，在controller包下创建ArchiveShowController类：

package com.star.controller;
    
    import com.star.queryvo.BlogQuery;
    import com.star.service.BlogService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    import java.util.List;
    
    /**
     * @Description: 时间轴页面显示控制器
     * @Date: Created in 17:40 2020/6/27
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class ArchiveShowController {
    
        @Autowired
        private BlogService blogService;
    
        @GetMapping("/archives")
        public String archive(Model model){
            List<BlogQuery> blogs = blogService.getAllBlog();
            model.addAttribute("blogs", blogs);
            return "archives";
        }
    
    }

*  前后端交互

*  运行访问 运行项目，访问 [http://localhost:8080/][http_localhost_8080] ，点击导航栏的时间轴，可以看到阶梯状左右分布、按照时间顺序排布的文章列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1][]

### 三、音乐盒页面显示 ###

音乐盒是一个静态页面，直接在控制器中返回页面就可以了

package com.star.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    
    /**
     * @Description: 音乐盒页面显示控制器
     * @Date: Created in 20:59 2020/6/27
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class MusicShowController {
    
        @GetMapping("/music")
        public String about() {
            return "music";
        }
    
    }

### 四、友人帐页面显示 ###

友人帐前端页面显示直接调用持久层的listFriendLink接口，只需编写控制层代码就可以了，在controller包下创建FriendsShowController类：

package com.star.controller;
    
    import com.star.service.FriendLinkService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    /**
     * @Description: 友链显示控制器
     * @Date: Created in 21:12 2020/6/27
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class FriendsShowController {
    
        @Autowired
        private FriendLinkService friendLinkService;
    
        @GetMapping("/friends")
        public String friends(Model model) {
            model.addAttribute("friendlinks",friendLinkService.listFriendLink());
            return "friends";
        }
    
    }

*  前后端交互

<div class="m-margin-tb-tiny four wide column" th:each="friendlink : ${friendlinks}">
        <a href="#" class="class_outer" th:href="@{${friendlink.blogaddress}}" target="_blank">
            <div align="center">
                <div class="friends-link">
                    <img src="../static/images/me.jpg" th:src="@{${friendlink.pictureaddress}}"  alt="" class="friends-link-image">
                    <div class="m-margin-top">
                     <h4 class="m-font-size-text-friends m-margin-tb-tiny" th:text="${friendlink.blogname}">ONESTAR</h4>
                    </div>
                </div>
            </div>
        </a>
    </div>

*  运行访问

运行项目，访问 [http://localhost:8080/][http_localhost_8080] ，点击导航栏的友人帐，可以查看友链信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 2][]

### 五、照片墙页面显示 ###

照片墙页面显示直接调用持久层的listPicture接口，只需编写控制层代码就可以了，在controller包下创建PictureShowController类：

package com.star.controller;
    
    import com.star.service.PictureService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    /**
     * @Description: 照片墙页面显示控制器
     * @Date: Created in 22:08 2020/6/27
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class PictureShowController {
    
        @Autowired
        private PictureService pictureService;
    
        @GetMapping("/picture")
        public String friends(Model model) {
            model.addAttribute("pictures",pictureService.listPicture());
            return "picture";
        }
    
    }

*  前后端交互

<article class="thumb" th:each="picture : ${pictures}">
        <div class="ma5-gallery">
            <div class="rthumbnail">
                <a href="../static/images/backimg1.jpg" th:href="@{${picture.pictureaddress}}">
                    <img class="picture-zmki_px" src="../static/images/backimg1.jpg" th:src="@{${picture.pictureaddress}}">
                </a>
                <div class="m-picture-text" th:text="${picture.picturename}">起风了</div>
                <div  class="rcaption">
                    <div style="font-size: large;" th:text="${picture.picturename}">起风了</div>
                    <div style="font-size: 16px" class="m-margin-top" th:text="${picture.picturetime}">2020-02-02  深圳</div>
                    <p style="font-size: 16px" th:text="${picture.picturedescription}">我曾难自拔于世界之大，也沉迷于其中梦话</p>
                </div>
            </div>
        </div>
    </article>

*  运行访问

运行项目，访问 [http://localhost:8080/][http_localhost_8080] ，点击导航栏的照片墙，点击照片，可以查看照片信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 4][]

### 六、关于我页面显示 ###

关于我页面显示是一个静态页面，直接在控制器中返回页面就可以了

package com.star.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    
    /**
     * @Description: 关于我界面显示控制器
     * @Date: Created in 23:26 2020/6/27
     * @Author: ONESTAR
     * @QQ群: 530311074
     * @URL: https://onestar.newstar.net.cn/
     */
    @Controller
    public class AboutShowController {
    
        @GetMapping("/about")
        public String about() {
            return "about";
        }
    
    }

*  运行访问

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 5][]

至此，整个博客开发完成，包括后台管理和前端页面显示，下一篇将讲述部署相关内容

【点关注，不迷路，欢迎持续关注本站】

--------------------

![image][]

[ONESTAR]: https://onestar.newstar.net.cn/
[https_github.com_oneStarLR_myblog-page]: https://github.com/oneStarLR/myblog-page
[https_github.com_oneStarLR_myblog-jpa]: https://github.com/oneStarLR/myblog-jpa
[https_github.com_oneStarLR_myblog-mybaits]: https://github.com/oneStarLR/myblog-mybaits
[SpringBoot_Mybatis]: https://onestar.newstar.net.cn/blog/35
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/3490c696dd89410ab950229136e63c69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1]: /images/20210920/230eeb75b5f646dcbca4c576f5154e60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 2]: /images/20210920/b5fb296737e7413b8c711f29a2581ae1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 3]: /images/20210920/1732ddb86aef4915b1cf2f3130aeba14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 4]: /images/20210920/a6ebab00a70a4f96bdec369ff7b2ff4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 5]: /images/20210920/ff7784ce44dc4785ad43bcae6e88afad.png
[image]: /images/20210920/3f26a4218cfe4e658520880bfe18447a.png