【SpringBoot搭建個人博客】- 前端頁面展示（一）

博客地址：https://onestar.newstar.net.cn/

首先感謝B站視屏：小而美的個人博客（直接搜就能找到），博主在視屏的基礎上增加修改了些許功能，開發了兩套，一套使用jps爲持久層，一套使用Mybatis爲持久層，由於使用jpa開發的有視屏講解，很詳細，這裏主要講解使用Mybatis爲持久層開發的，會出一系列博客進行講解，前端我會單獨拿出來直接用，不會進行講解，主要是後端的開發，從框架搭建到所有功能實現以及線上部署，都會有詳細的講解，歡迎持續關注本站。話不多說，先來看看前端頁面設計。

一、首頁

1.主頁頁面

首頁主要是一些文字描述和個人信息，如果你的顯示屏分辨率比較高或者頁面縮放的比較小的話，可以看到下面有最新推薦專欄

2.博文列表

博文列表主要有博文標題、博文簡介、作者、時間、訪問量、評論數、博文分類和博文首圖

3.首頁底部

底部就是比較常規的一些功能，顯示了博主的微信二維碼，最新文章和博客運行時間

二、博文詳情

1.博文標題及信息

展示了文章首圖、標題、等信息

2.文末評論

文末有文章轉載的信息和評論區域，評論具有蓋樓功能，分爲普通用戶和管理員

二、分類頁面

顯示分類名稱，點擊可以顯示不同的分類文章

三、時間軸

採用兩邊分開的階梯狀按照時間順序來展示

四、音樂盒

音樂盒是使用了一個開源的插件，自己進行了修改，主要功能有顯示歌曲、歌詞、播放、暫停、上一曲、下一曲、音量調節、播放順序調節、同步歌詞等功能

五、留言板

功能和博文評論是一樣的

六、友人帳（友鏈）

添加友鏈要求和顯示友鏈

七、照片牆

採用了一個開源的插件，自己進行了修改，可以根據屏幕分辨率的不同來顯示，放大縮小圖片基本不形變

點擊一張圖片顯示如下，有一些圖片的基本信息，可以左右切換圖片

八、關於我

靜態頁面，一些博主的信息

九、後臺管理

1. 文章管理

可以對文章進行增加、編輯修改、刪除，還可以搜索文章

新增文章，使用Markdown語法

2. 分類管理

可以對分類進行增加、編輯修改、刪除

3. 友鏈管理

可以對友鏈進行增加、編輯修改、刪除

4. 相冊管理

可以對照片進行增加、編輯修改、刪除

想要查看更多信息，可以直接訪問我的博客：https://onestar.newstar.net.cn/

下一篇將講述數據庫的設計

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