2. 程式人生 > 實用技巧 >【SpringBoot搭建個人部落格】- 其他頁面顯示（十二）

【SpringBoot搭建個人部落格】- 其他頁面顯示（十二）

阿新 • • 發佈：2020-06-28

部落格地址：ONESTARの客棧

原始碼領取方式一：

  • 掃一掃文末二維碼，關注公眾號【程式設計日刊】，後臺回覆【部落格】，即可領取原始碼

原始碼領取方式二：

歡迎給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搭建個人部落格】- 其他頁面顯示（十二）

部落格地址：ONESTARの客棧 原始碼領取方式一： 掃一掃文末二維碼，關注公眾號【程式設計日刊】，後臺回覆【部落格】，即可領取原始碼

【SpringBoot搭建個人部落格】- 線上部署（十三）

部落格地址：ONESTARの客棧 原始碼領取方式一： 掃一掃文末二維碼，關注公眾號【程式設計日刊】，後臺回覆【部落格】，即可領取原始碼

【從零搭建個人部落格】之SpringBoot實現郵箱發驗證碼

一.前言 在思考部落格規劃時，我覺得應該有使用者註冊登入功能，從而可以評論留言部落格文章，也能點贊私信博主，有自己的後臺。那麼就需要驗證真實性，保障使用者隱私，且忘記密碼時可以重置密碼，此時就需要傳送驗

轉載 | 阿里雲+wordpress搭建個人部落格網站【小白專用的圖文教程】

【宣告】 文章原始出處→_→ 生命壹號：http://www.cnblogs.com/smyhvae/ 文章來源：http://www.cnblogs.com/smyhvae/p/4965163.html

Django搭建個人部落格：將專案部署到伺服器

我們的部落格雖然還有很多不完善的地方，但是沒關係，越早把它部署到網際網路上，才能越早發現線上特有的問題。現在也提倡漸進式開發，讓產品在迭代中快速成長。

Django搭建個人部落格：期末總結

本教程共寫作了一年多（龜速更新..），也算告一段落了。如果還有讀者特別想看、但是教程又沒涉及的內容，博主會繼續更新，不過時間就不能保證了。業餘精力有限，如果不能保證文章的質量，那我情願不寫。

Django搭建個人部落格：自定義模板過濾器和標籤

現在我們已經很熟悉Django的MTV模式了。模板（template）負責如何去展示資料，而檢視（view）負責篩選出正確的資料。因此通常來說邏輯都是放到檢視中的，但模板也需要一些和表示相關的邏輯：比如迴圈展示（如{% for

Django搭建個人部落格：基於 LocalStorage 的點贊功能

假設你的部落格已經順利部署到了線上。你寫了很多好文章，和粉絲們互動並感受成就感。

Windows下搭建個人部落格(Apache+MySQL+PHP+WordPress)

購買雲伺服器和域名 可以在阿里雲上購買雲伺服器ECS，阿里雲針對學生有個雲翼計劃的優惠，每個月9塊錢，配置如下：CPU 1核、記憶體1G、頻寬15G流量包(只統計出網流量)，硬碟40G，對於搭建個人網站或部落格來說，

windows平臺利用hexo框架與github搭建個人部落格

總體搭建步驟 1.安裝Node.js 2.註冊GitHub賬號及安裝git 3.安裝hexo 4.hexo初始化及GitHub建立個人倉庫

使用github+hexo搭建個人部落格

使用github+hexo搭建個人部落格 本次部署的環境資訊（本次使用的是阿里雲ecs伺服器）

基於 GitBook 搭建個人部落格

目錄 為什麼這篇博文 會被 無情 移除首頁 ？？？？ 基於 GitBook 搭建個人部落格

【flask + vue 前後端分離部落格】設計 User 使用者（三）

本章基於 token 認證，新增 建立使用者、獲取單個/所有使用者、修改使用者、刪除使用者 等 API 介面，測試工具 HTTPie/Postman。

Hugo+Github 搭建個人部落格（Windows環境下）

文章目錄 Hugo+Github 搭建個人部落格（Windows環境下）1.前言2.Differences2.1 https vs SSH2.2 新建的github的倉庫名必須為 使用者名稱+github.io2.3 將檔案上傳到GitHub前應先pull2.4 上傳到GitHub後部

從0到1搭建個人部落格-Django(三)

你好，我是goldsunC 讓我們一起進步吧！ 從0到1搭建個人部落格-Django(三) 在以下連結快速回顧系列文章內容

從0開始用Hexo框架搭建個人部落格（無坑版）

堅持原創輸出，點選藍字關注我吧 作者：清菡 部落格：Oschina、雲+社群、知乎等各大平臺都有。

使用hexo搭建個人部落格(一) 搭建部落格

準備環境： node.js git 安裝步驟 安裝hexo-cli $ npm install -g hexo-cli 建立一個新的資料夾來作為部落格的目錄

從零到一快速搭建個人部落格網站（域名備案 + https免費證書）（一）

環境介紹 資源 說明 centos v7.2 docker 快速部署專案環境 nginx 反向代理，同時配置https證書

從零到一快速搭建個人部落格網站（域名自動跳轉www，二級域名使用）（二）

前言 本篇文章是對上篇文章從零到一快速搭建個人部落格網站（域名備案 + https免費證書）（一）的完善，比如域名自動跳轉www、二級域名使用等。

利用Hexo+gitee搭建個人部落格

1 前言 本文將介紹利用Hexo+gitee搭建個人部落格。 原理是將markdown檔案生成靜態頁面,釋出到gitee上,利用git page服務提供靜態頁面訪問。