【SpringBoot搭建個人博客】- 其他頁面顯示（十二）

博客地址：ONESTARの客棧

源碼領取方式一：

掃一掃文末二維碼，關注公衆號【編程日刊】，後臺回覆【博客】，即可領取源碼

源碼領取方式二：

前端頁面源碼地址：https://github.com/oneStarLR/myblog-page

以jpa爲持久層源碼地址：https://github.com/oneStarLR/myblog-jpa

以mybatis爲持久層源碼地址：https://github.com/oneStarLR/myblog-mybaits

歡迎給star以鼓勵(^_−)☆

由於剩下的頁面顯示比較簡單，本文將把剩下的前端頁面顯示都講述一下，分別有：分類頁面顯示、時間軸頁面顯示、音樂盒頁面顯示、友人帳頁面顯示、照片牆頁面顯示、關於我頁面顯示由於留言功能和評論功能基本一樣，之前也寫過一篇有關評論的博客（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

<!--根據TypeId查詢博客列表，顯示在分類頁面-->
<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 labeled button m-margin-tb-tiny" th:each="type : ${types}">
  <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="ui basic  button" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${type.name}">好文</a>
  <div class="ui basic  left pointing label" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${#arrays.length(type.blogs)}">22</div>
</div>

分類列表

<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>

分頁顯示

<div class="ui bottom attached segment m-opacity stackable grid">
  <div class="three wide column" align="center">
    <a class="item" th:href="@{/types(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一頁</a>
  </div>

  <div class="ten wide column" align="center">
    <p> <span th:text="${pageInfo.pageNum}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
  </div>

  <div class="three wide column" align="center">
    <a class="item" th:href="@{/types(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一頁</a>
  </div>
</div>

6. 運行訪問

運行項目，訪問 http://localhost:8080/ ，點擊導航欄的分類，可以看到分類信息和分類博客列表

二、時間軸頁面顯示

時間軸頁面顯示只要顯示博客標題和時間，因此可以直接共用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";
    }

}

前後端交互

<li class="" th:each="blog : ${blogs}">
  <div>
    <time th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2020/01/01</time>
    <div class="scientist" >
        <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
          <h3 class="state" style="text-align:center;font-size: 16px;color: #000;" th:text="${blog.title}">文章標題</h3>
        </a>
    </div>
  </div>
</li>

運行訪問運行項目，訪問 http://localhost:8080/ ，點擊導航欄的時間軸，可以看到階梯狀左右分佈、按照時間順序排布的文章列表

三、音樂盒頁面顯示

音樂盒是一個靜態頁面，直接在控制器中返回頁面就可以了

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/ ，點擊導航欄的友人帳，可以查看友鏈信息：

五、照片牆頁面顯示

照片牆頁面顯示直接調用持久層的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 &nbsp;深圳</div>
                <p style="font-size: 16px" th:text="${picture.picturedescription}">我曾難自拔於世界之大，也沉迷於其中夢話</p>
            </div>
        </div>
    </div>
</article>

運行訪問

運行項目，訪問 http://localhost:8080/ ，點擊導航欄的照片牆，點擊照片，可以查看照片信息：

六、關於我頁面顯示

關於我頁面顯示是一個靜態頁面，直接在控制器中返回頁面就可以了

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

}

運行訪問

至此，整個博客開發完成，包括後臺管理和前端頁面顯示，下一篇將講述部署相關內容

【點關注，不迷路，歡迎持續關注本站】

【SpringBoot搭建個人博客】- 其他頁面顯示（十二）

一、分類頁面顯示

二、時間軸頁面顯示

三、音樂盒頁面顯示

四、友人帳頁面顯示

五、照片牆頁面顯示

六、關於我頁面顯示

【SpringBoot搭建個人博客】- 其他頁面顯示（十二）

【SpringBoot搭建個人博客】- 博客詳情頁面顯示（十一）

【SpringBoot搭建個人博客】- 博客首頁顯示（十）

SSM框架實現用戶查詢、註冊、登錄——IDEA整合Spring、Spring MVC、Mybatis 框架

Java入門學習路線目錄索引（持續更新中）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結