前言

先說一下我對 StarBlog 這個(gè)系列的文章的規(guī)劃吧，在 StarBlog 的 1.x 版本，我會同步更新兩個(gè)系列的文章

• 博客前臺+接口開發(fā)筆記 （即當(dāng)前已發(fā)布的這一系列文章）
• 博客Vue后臺開發(fā)筆記 （后續(xù)開始持續(xù)發(fā)布）

最近很久沒有更新 StarBlog 系列的文章，事實(shí)上我之前已經(jīng)把【博客Vue后臺開發(fā)筆記】基本完成了，但我想把 StarBlog 1.x版本的功能完善之后，把【前臺+接口開發(fā)筆記】這系列完成之后，再開始更新【vue后臺開發(fā)筆記】

所以最近一段時(shí)間對本項(xiàng)目的后端、前端代碼做了很多修改，包括性能優(yōu)化、UI調(diào)整、功能完善等，本文做一個(gè)簡單的記錄。（當(dāng)然優(yōu)化和改進(jìn)是無止境的，歡迎各位同學(xué)提交 issues 和 pr！）

前臺UI調(diào)整

本次更新我對前臺和后臺的UI都做了一些調(diào)整，對用戶來說，UI調(diào)整是感知程度最強(qiáng)的，所以放在第一個(gè)介紹。

文章列表

文章列表界面的調(diào)整包括右上角的文章排序選項(xiàng)和重新設(shè)計(jì)的文章列表。

舊的文章列表直接使用 Bootstrap4 樣式的 Card，card-header 里放置文章的分類名稱，然后 card-body 里是文章標(biāo)題和梗概，丑是丑了點(diǎn)，但更主要的問題是沒有文章發(fā)布時(shí)間等額外信息，查看起來不太直觀。舊版UI如下圖：

新的文章列表如圖，右上角增加了文章排序，可以根據(jù)標(biāo)題、發(fā)表時(shí)間、更新時(shí)間進(jìn)行正序/倒序的排序。

文章列表里的元素也做了重新設(shè)計(jì)，加入了封面圖、發(fā)表時(shí)間、閱讀量等信息元素，細(xì)節(jié)方面，每個(gè)文章卡片我加入了一點(diǎn)點(diǎn)陰影效果，文章梗概的文字使用了小號字體與 text-muted 樣式，更好地與標(biāo)題區(qū)分開來。

導(dǎo)航欄

在前面的文章列表UI里，可以看到頂部的導(dǎo)航欄也換了，這個(gè)修改沒法說比舊版更好，只能說為了自適應(yīng)移動設(shè)備做出了一些妥協(xié)。原本的導(dǎo)航欄還有圖標(biāo)，有更豐富的視覺效果，但是對移動端的兼容比較有限，各個(gè)導(dǎo)航菜單沒法隱藏到側(cè)邊欄里，會平鋪占用大量空間；新版的就是普通的Bootstrap風(fēng)格導(dǎo)航欄，平平無奇，但可以自適應(yīng)得比較好。

自適應(yīng)模式下的舊版導(dǎo)航欄

自適應(yīng)模式下的新版導(dǎo)航欄

后臺UI調(diào)整

管理后臺是審美的重災(zāi)區(qū)

目前使用的這套管理后臺，是基于我之前的一個(gè) SpringCloud 項(xiàng)目的管理后臺修改而來

因?yàn)闅v史問題，有一些比較奇怪和難看的樣式，在這次更新中，我一并修改了

相比之前，現(xiàn)在的后臺UI順眼多了??

原本是這樣的

現(xiàn)在是這樣的

單純看主界面還不是很明顯

這次主要調(diào)整了背景顏色和簡化各個(gè)界面的布局，可以看到導(dǎo)航欄也精簡了很多按鈕，只剩下一個(gè)用戶按鈕了。

全新的文章編輯界面

本次我重新設(shè)計(jì)了文章編輯界面

頂部增加了 breadcrumb

如果處在編輯模式，標(biāo)題右側(cè)模仿博客園的設(shè)計(jì)，新增了文章的鏈接，可以點(diǎn)擊直接跳轉(zhuǎn)到文章頁面

底部是文章信息與各種設(shè)置

新增的 slug 功能可以縮短文章的鏈接地址，這個(gè)功能比較小，所以之前沒有單獨(dú)寫一篇文章介紹。設(shè)置了 slug 之后，可以通過 starblog.com/p/slug 來訪問文章。

下方的文章選項(xiàng)，可以設(shè)置文章的發(fā)表狀態(tài)、標(biāo)記、簡介等，沒什么特別需要介紹的。

文章分類支持多層級選擇

文章管理

先看舊版的，難看的背景，莫名其妙的邊距，總結(jié)就是難看

新版界面，頁面干凈很多，然后文章的篩選功能也增強(qiáng)了，現(xiàn)在除了搜索和分類篩選，還可以根據(jù)發(fā)表狀態(tài)、文章標(biāo)記來篩選文章。

其他頁面也一樣，是類似的修改思路，我就不一一貼圖片和介紹了。

上傳文章

原本整個(gè)UI都在左邊，各個(gè)控件的寬度也沒有一致，現(xiàn)在都改成居中了，控件樣式也做了統(tǒng)一。

這里的文章分類選擇同樣支持多層級結(jié)構(gòu)選擇。

動畫

大部分頁面之前都沒有什么動畫，加載數(shù)據(jù)的時(shí)候是空白的，加載完成就直接呈現(xiàn)了，很生硬。

現(xiàn)在我給它們都加入了加載動畫，感覺舒服多了；還有一個(gè)是UI細(xì)節(jié)繼續(xù)調(diào)整。

這些動畫體現(xiàn)在一切需要網(wǎng)絡(luò)交互的界面上，比如文章列表、保存文章、上傳文章這些界面，實(shí)現(xiàn)也很簡單，ElementUI的大部分組件都可以通過添加 loading 屬性來實(shí)現(xiàn)加載動畫。

性能優(yōu)化

性能瓶頸大部分在數(shù)據(jù)庫IO上，還有一些是在內(nèi)存管理方面，主要是和博客提供的圖片功能有關(guān)。

分頁

數(shù)據(jù)庫這塊的優(yōu)化感知最強(qiáng)的是修改分頁的實(shí)現(xiàn)，之前我是直接使用了 X.PagedList 組件來實(shí)現(xiàn)分頁，但之前的寫法有點(diǎn)問題，先把全部數(shù)據(jù)加載出來之后再分頁，數(shù)據(jù)量大的時(shí)候性能就非常差了，現(xiàn)在全部改成了數(shù)據(jù)庫分頁。

目前使用的 ORM 是 FreeSQL ，可以通過 ISelect.Page 方法實(shí)現(xiàn)分頁，生成出來的 SQL 應(yīng)該是帶類似 offset 和 limit 的，這是在數(shù)據(jù)庫層面實(shí)現(xiàn)的分頁，比讀取全部數(shù)據(jù)再分頁的性能會好很多。

PS：如果數(shù)據(jù)量更大的話，這種方式也不靈了，但目前這不在本項(xiàng)目的考慮范圍內(nèi)。

X.PagedList 這個(gè)組件依然可以繼續(xù)使用，只不過只用它的元數(shù)據(jù)就行，一個(gè)典型的代碼塊如下

IPagedList<Post> pagedList = new StaticPagedList<Post>(
    await querySet.Page(param.Page, param.PageSize).Include(a => a.Category).ToListAsync(),
    param.Page, param.PageSize, Convert.ToInt32(await querySet.CountAsync())
);

使用的時(shí)候分別讀取其中的數(shù)據(jù)和分頁元數(shù)據(jù)

return new ApiResponsePaged<Post> {
    Message = "Get posts list",
    Data = pagedList.ToList(),
    Pagination = pagedList.ToPaginationMetadata()
};

修改的代碼量不大，遷移成本很小。

圖片庫

本項(xiàng)目提供了隨機(jī)圖片接口，經(jīng)過實(shí)測這個(gè)功能會占用比較多的內(nèi)存，這可能是和這個(gè)功能的設(shè)計(jì)有關(guān)，因?yàn)樾枰鶕?jù)傳入的參數(shù)來調(diào)整、裁剪圖片到合適的尺寸再返回，這個(gè)過程是在內(nèi)存中實(shí)現(xiàn)的。

我看到 ImageSharp 的中間件里提供了一種思路，通過在本地緩存圖片，以后再遇到相同參數(shù)的圖片時(shí)就直接從文件系統(tǒng)讀取返回，這可以節(jié)省一些內(nèi)存，不過又帶來了新的問題，會占用一些磁盤空間，特別是圖片庫很大的情況下，所以我目前還沒有用這種思路來改造這個(gè)功能。

PS：內(nèi)存都白菜價(jià)了，不會有人的服務(wù)器還沒128G內(nèi)存吧？??

業(yè)務(wù)邏輯

• 保存和添加文章時(shí)檢查slug是否可用

// 新建時(shí)
if (!string.IsNullOrWhiteSpace(dto.Slug) && !await _postService.CheckSlugAvailable(dto.Slug)) {
    return ApiResponse.BadRequest("指定的 slug 已經(jīng)被其他文章使用！");
}

// 更新時(shí)
if (!string.IsNullOrWhiteSpace(dto.Slug)) {
    if (dto.Slug!= post.Slug && !await _postService.CheckSlugAvailable(dto.Slug)) {
        return ApiResponse.BadRequest("指定的 slug 已經(jīng)被其他文章使用！");
    }
}

• 文章列表接口終于完善了，可以根據(jù)是否管理員來篩選不同狀態(tài)的文章。（評論列表同樣）

// 已登錄則設(shè)置為管理員模式
// todo 后續(xù)改成根據(jù)角色確定管理員
var adminMode = User.Identity?.IsAuthenticated ?? false;
var pagedList = await _postService.GetPagedList(param, adminMode);

• 修改文章的時(shí)候可以同時(shí)修改文章標(biāo)記和草稿狀態(tài)，這個(gè)太簡單就不附上代碼了

bugfix

這沒啥好說的，詳見 github commits

不知不覺竟然已經(jīng)有了 475 個(gè) commits 了！真是太勤奮了（有刷commit的嫌疑）

小結(jié)

OK，就是這些啦，這估計(jì)也是2023年 StarBlog 項(xiàng)目的最后一次功能更新，接著我會繼續(xù)更新文章，爭取在今年里把【博客前臺+接口開發(fā)筆記】系列完結(jié)掉！~~（然后我就可以來做新項(xiàng)目了_）~

PS：當(dāng)然 StarBlog 也會持續(xù)更新的，目前已有初步的 2.x 版本開發(fā)計(jì)劃，我打算對架構(gòu)進(jìn)行一些調(diào)整以更好增加其他新功能，同時(shí)使用 Blazor 和 Next.js 來重寫兩套管理后臺，練手的同時(shí)看看 Blazor 和前端開發(fā)的各自優(yōu)劣。

在這里給大家拜個(gè)早年！敬請期待后續(xù)的新項(xiàng)目??

總結(jié)

以上是生活随笔為你收集整理的StarBlog - 2023年底更新内容一览的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。