文章目錄
這裏直接使用課程給出的前端頁面，並做了一點小的改變，後期在優化過程中可以不斷的美化升級。
詳細的設計流程可以仔細觀看《Spring Boot開發小而美的個人博客》課程的相關部分。
1. 管理後臺
管理後臺主要是供博主使用，因此頁面設計也較爲簡單，主要分爲以下幾類：
- 登錄頁
- 歡迎頁
- 博客類別頁
- 博客標籤頁
- 類別/標籤新增頁
- 博客編輯頁
1.1 登錄頁
登錄頁用戶接收用戶輸入的用戶名和密碼進行校驗，判斷該用戶是否在數據庫中存在來允許是否可以登錄。爲了前端校驗的需要，這裏還不允許輸入空白信息進行登錄，當輸入框空白時，登錄會給出提示信息。
1.2 歡迎頁
歡迎頁主要是根據登錄的用戶不同，給出不同的歡迎信息，這裏初步只是放置了一張圖片。後期會放入博客的統計信息分析的結果，逐步進行優化。
1.3 博客管理頁
博客管理頁主要分爲兩大部分：
- 搜索框：可以根據標題和分類的複合信息在數據庫中進行模糊查詢
- 博客列表：這裏的列表主要給出了博客相關的描述信息，例如所屬的類別、是否推薦博客、狀態是發佈還是草稿、更新時間，以及關於博客的相關操作，如編輯、刪除和新增
1.4 分類管理頁
分類管理頁主要是管理已有的類別信息，可以編輯或刪除已有的類別，也可以根據需要新增其他的類，但是後端邏輯不允許有相同的類別存在。由於這裏使用了分頁查詢在展示結果，因此當類別數超過了閾值後，就會有上一頁和下一頁的按鈕存在，便於換頁查看。
1.5 標籤管理頁
標籤管理頁和類別管理頁幾乎相同，這裏不再贅述。
1.6 分類/標籤新增頁
輸入具體的類別或標籤提交即可將其添加到相應的列表中。
1.6 博客編輯頁
博客編輯頁允許博主使用Markdown編輯器進行創作，此外還可以選擇博文是原創、翻譯還是轉載，以及添加博客的描述信息，便於在詳情頁展示。同時還設置了四個單選框，用於設置是否進行推薦、是否顯示轉載聲明、是否打開讚賞按鈕和是否允許評論。另外，如果選擇保存，那麼博客的狀態就是草稿；如果選擇發佈，那麼博客的狀態就是發佈。
2. 前端展示
前端展示部分主要是用於展示博客列表、博客詳情、博客信息和博主信息等，主要分爲如下幾個部分：
- 博客首頁
- 分類統計頁
- 標籤統計頁
- 歸檔列表頁
- 博主信息頁
- 博客詳情頁
2.1 博客首頁
博客首頁分爲三大部分：
- 導航欄：導航欄中有分類、標籤、歸檔和關於我，以及全局的搜索欄
- 中間內容：左面是博客列表，右面包含分類列表、標籤列表和推薦列表
- 底部：底部包含五部分內容：
- 聯繫方式：GitHub、CSDN和Email
- 友情鏈接
- 博客統計信息
- 博客介紹
- 版權聲明
其中導航欄和底部是所有頁面公用的。
2.2 博客分類頁
上面是已有的類別，以及每個類別下文章的數目，下面是每個類別下具體的文章列表。
2.3 博客標籤頁
上面是已有的標籤，以及每個標籤下文章的數目，下面是每個標籤下具體的文章列表。
2.4 博客歸檔頁
博客歸檔頁是按照年份進行具體歸檔，其中具體年份又是按照更新時間正序排列。
2.5 關於我
關於我主要是放置博主的一些介紹性的文字，包括個人介紹、技術棧、愛好等等。
2.6 博客詳情頁
博客詳情頁主要包含正文部分、讚賞區、轉載聲明和評論區，其中讚賞、轉載聲明和評論是否開啓在博客發佈時設置。另外，評論區分爲兩級評論模式，而且博主回覆和訪客評論是否區別顯示的。