Blazor Web App 重製：炫酷的賽博朋克風格網站
Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license.
If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1096
項目背景與技術選型
本次網站開發基於 Blazor Web App，使用的框架為 .NET 8.0，並採用 Blazor Server 與 Blazor Client 的混合模式。
由於是初次開發，這次的實現主要以 Blazor Server 為主，以確保網站的穩定性與開發效率。
整體風格採用 賽博朋克 + Hacknet，目標是最大化展示內容、強調炫酷視覺效果，同時確保網站 手機端友好。
後台管理功能
這次的後台管理模組包含了以下幾個關鍵部分：
1. 博客管理
- 文章的 CRUD（創建、讀取、更新、刪除）。
- 內容編輯器採用 CKEditor4，支持圖片上傳與粘貼。
- 設置 瀏覽數增長防刷機制。
2. 分類管理
- 博客分類的增刪改查。
- 可設定不同分類的展示方式。
3. Sidebar 內容管理
- 允許管理側邊欄內容，如熱門文章、最新文章、推薦內容等。
4. Download（下載）管理
- 允許管理下載資源的上傳、刪除與查看。
- 僅 Admin 角色 的帳戶可以管理下載內容。
- 完全關閉賬戶註冊渠道，確保管理權限不外洩。
- 超級管理員可授權、解除授權或刪除用戶。
5. 圖片管理
新增了 4 種圖片管理模式，以提高博客內容與圖片文件的一致性：
-
按圖片檢索博客：
- 透過圖片來查找其所屬的博客文章。
-
按博客顯示圖片：
- 依據博客內含圖片的情況，顯示各篇博客所使用的圖片。
-
按缺失圖片（By Missing）：
- 自動檢測博客內容中引用但實際缺失的圖片，便於修復。
-
按未使用圖片（By Not Used）：
- 檢測圖片文件夾內，沒有在博客內容中被使用的圖片。
此外，所有模式均支持：
- 修改文件名（變更文件名時，博客內容內的
<img>標籤會自動更新）。 - 刪除圖片（刪除時，同時移除博客內容內的相關引用）。
- 查看圖片（點擊後彈出模態框，查看原始大小）。
- 下載圖片（可一鍵打包下載所有圖片）。
- 上傳圖片（支持選擇路徑上傳與粘貼板直接上傳）。
前端特性與技術挑戰
1. IP 投影地球展示
- 透過全球單例模式 實時展示用戶 IP 與地理位置。
- 讓網站更具互動感與視覺震撼力。
2. 動態監測伺服器資源
- 內存與 CPU 使用率的即時監測與展示。
- 讓管理員能夠時刻掌握伺服器負載情況。
3. 防刷瀏覽數機制
- 一般做法是透過
localStorage記錄瀏覽次數，但這樣容易被清除。 - 本次實作了服務端記錄機制，存儲
IP + 時間 + 博客ID鍵值對。 - 限制同一 IP 在 5 分鐘內無法重複計算同一篇博客的瀏覽數。
開發歷程與成果
本次項目從 2025 年 1 月 7 日 開始立項，到 2025 年 3 月 16 日 完成，總計 119 次 Commits。
主要成就如下：
- 成功打造出炫酷的賽博朋克風格網站。
- 達成 Blazor Server + Blazor Client 的穩定運行。
- 開發了強大的 後台管理系統，確保高效運營。
- 新增圖片管理系統，大幅提升圖片管理的便捷性。
- 完成 下載管理模組，並完善權限管控。
- IP 定位、動態監測、訪問防刷機制 的實現，使網站更具技術感。
這次開發不僅讓我深入理解 Blazor Web App，也讓我在前端與後端整合方面獲得了寶貴的經驗。
未來將繼續優化與擴展，敬請期待！
This article was last edited at 2025-04-14 04:34:02