系列文章
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 給專案瘦身，讓它跑起來
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 完善與美化，Swagger登場
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 資料訪問和程式碼優先
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 統一規範API，包裝返回模型
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 再說Swagger，分組、描述、小綠鎖
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub，用JWT保護你的API
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 異常處理和日誌記錄
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 使用Redis快取資料
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 整合Hangfire實現定時任務處理
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 用AutoMapper搞定物件對映
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（一）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（二）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（三）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（一）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（二）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（三）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（四）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（五）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（一）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（二）
- 基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（三）
上一篇完成了部落格的分頁查詢文章列表頁面的資料繫結和分頁功能，本篇將繼續完成剩下的幾個頁面。
在開始主題之前重新解決上一篇的最後一個問題，當點選了頭部元件的/posts連結時直接強制重新整理了頁面，經過檢視文件和實踐有了更好的解決方案。
先將頭部元件Header.razor中的NavLink恢復成<NavLink class="menu-item" href="posts">Posts</NavLink>，不需要點選事件了。
然後在Posts.razor中新增生命週期函式OnParametersSetAsync()，在初始化完成後執行。
/// <summary>
/// 初始化完成後執行
/// </summary>
/// <returns></returns>
protected override async Task OnParametersSetAsync()
{
if (!page.HasValue)
{
page = 1;
await RenderPage(page);
}
}
判斷當前page引數是否有值，有值的話說明請求肯定是來自於翻頁，當page沒有值的時候就說明是頭部的選單點進來的。那麼此時給page賦值為1，呼叫API載入資料即可。
分類列表
Categories.razor是分類列表頁面，上篇文章已經實現了從API獲取資料的方法，所以這裡就很簡單了，指定接受型別，然後在生命週期初始化OnInitializedAsync()中去獲取資料。
@code{
/// <summary>
/// categories
/// </summary>
private ServiceResult<IEnumerable<QueryCategoryDto>> categories;
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// 獲取資料
categories = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryCategoryDto>>>($"/blog/categories");
}
}
當獲取到資料的時候進行繫結，沒有資料的時候還是顯示載入中的元件<Loading />讓他轉圈圈。
@if (categories == null)
{
<Loading />
}
else
{
<div class="container">
<div class="post-wrap categories">
<h2 class="post-title">- Categories -</h2>
<div class="categories-card">
@if (categories.Success && categories.Result.Any())
{
@foreach (var item in categories.Result)
{
<div class="card-item">
<div class="categories">
<a href="/category/@item.DisplayName/">
<h3>
<i class="iconfont iconcode" style="padding-right:3px"></i>
@item.CategoryName
</h3>
<small>(@item.Count)</small>
</a>
</div>
</div>
}
}
else
{
<ErrorTip />
}
</div>
</div>
</div>
}
直接迴圈返回的資料列表categories.Result，繫結資料就好，當獲取失敗或者沒有返回資料的時候顯示錯誤提示元件<ErrorTip />
標籤列表
Categories.razor是標籤列表頁面，和分類列表HTML結構差不多一樣的，除了返回型別和介面地址不一樣，將上面程式碼複製過來改改即可。
@code{
/// <summary>
/// tags
/// </summary>
private ServiceResult<IEnumerable<QueryTagDto>> tags;
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// 獲取資料
tags = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryTagDto>>>($"/blog/tags");
}
}
@if (tags == null)
{
<Loading />
}
else
{
<div class="container">
<div class="post-wrap tags">
<h2 class="post-title">- Tags -</h2>
<div class="tag-cloud-tags">
@if (tags.Success && tags.Result.Any())
{
@foreach (var item in tags.Result)
{
<a href="/tag/@item.DisplayName/">@item.TagName<small>(@item.Count)</small></a>
}
}
else
{
<ErrorTip />
}
</div>
</div>
</div>
}
友鏈列表
FriendLinks.razor是友情連結列表頁面，實現方式和上面兩個套路一模一樣。
@code {
/// <summary>
/// friendlinks
/// </summary>
private ServiceResult<IEnumerable<FriendLinkDto>> friendlinks;
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// 獲取資料
friendlinks = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<FriendLinkDto>>>($"/blog/friendlinks");
}
}
@if (friendlinks == null)
{
<Loading />
}
else
{
<div class="container">
<div class="post-wrap categories">
<h2 class="post-title">- FriendLinks -</h2>
<div class="categories-card">
@if (friendlinks.Success && friendlinks.Result.Any())
{
@foreach (var item in friendlinks.Result)
{
<div class="card-item">
<div class="categories">
<a target="_blank" href="@item.LinkUrl">
<h3>@item.Title</h3>
</a>
</div>
</div>
}
}
else
{
<ErrorTip />
}
</div>
</div>
</div>
}
文章列表(分類)
Posts.Category.razor是根據分類查詢文章列表頁面，他接受一個引數name，我們要根據name去API查詢資料然後繫結頁面即可。
這裡的引數name實際上就是從標籤列表傳遞過來的DisplayName的值，它是一個比較友好的名稱，我們還要通過這個值去查詢真正的分類名稱進行展示，所以這裡需要呼叫兩個API，這點在設計API的時候沒有考慮好，我們其實可以將這兩個API合併變成一個，後續再進行優化吧，這裡就請求兩次。
新增兩個接收引數：分類名稱和返回的文章列表資料。
/// <summary>
/// 分類名稱
/// </summary>
private string categoryName;
/// <summary>
/// 文章列表資料
/// </summary>
private ServiceResult<IEnumerable<QueryPostDto>> posts;
然後在OnInitializedAsync()初始化方法中呼叫API獲取資料，賦值給變數。
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// TODO:獲取資料,可以在API中合併這兩個請求。
var category = await Http.GetFromJsonAsync<ServiceResult<string>>($"/blog/category?name={name}");
posts = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryPostDto>>>($"/blog/posts/category?name={name}");
if (category.Success)
{
categoryName = category.Result;
}
}
有了資料，直接在頁面上進行迴圈繫結。
@if (posts == null)
{
<Loading />
}
else
{
<div class="container">
<div class="post-wrap tags">
@if (categoryName != null)
{
<h2 class="post-title">- Category · @categoryName -</h2>
}
</div>
<div class="post-wrap archive">
@if (posts.Success && posts.Result.Any())
{
@foreach (var item in posts.Result)
{
<h3>@item.Year</h3>
@foreach (var post in item.Posts)
{
<article class="archive-item">
<NavLink href="@("/post"+post.Url)">@post.Title</NavLink>
<span class="archive-item-date">@post.CreationTime</span>
</article>
}
}
}
else
{
<ErrorTip />
}
</div>
</div>
}
文章列表(標籤)
Posts.Tag.razor是根據標籤查詢文章列表，這個和分類查詢文章列表實現方式一樣，直接上程式碼。
@code {
/// <summary>
/// 標籤名稱引數
/// </summary>
[Parameter]
public string name { get; set; }
/// <summary>
/// 標籤名稱
/// </summary>
private string tagName;
/// <summary>
/// 文章列表資料
/// </summary>
private ServiceResult<IEnumerable<QueryPostDto>> posts;
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// TODO:獲取資料,可以在API中合併這兩個請求。
var tag = await Http.GetFromJsonAsync<ServiceResult<string>>($"/blog/tag?name={name}");
posts = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryPostDto>>>($"/blog/posts/tag?name={name}");
if (tag.Success)
{
tagName = tag.Result;
}
}
}
@if (posts == null)
{
<Loading />
}
else
{
<div class="container">
<div class="post-wrap tags">
@if (tagName != null)
{
<h2 class="post-title">- Tag · @tagName -</h2>
}
</div>
<div class="post-wrap archive">
@if (posts.Success && posts.Result.Any())
{
@foreach (var item in posts.Result)
{
<h3>@item.Year</h3>
@foreach (var post in item.Posts)
{
<article class="archive-item">
<NavLink href="@("/post"+post.Url)">@post.Title</NavLink>
<span class="archive-item-date">@post.CreationTime</span>
</article>
}
}
}
else
{
<ErrorTip />
}
</div>
</div>
}
以上完成了以上幾個頁面的資料繫結，頁面之間的跳轉已經關聯起來了，然後還剩下文章詳情頁，大家可以先自己動手完成它，今天就到這裡，未完待續...