基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（四）-有解無憂

系列文章

基于 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 實戰系列（三）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（四）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（五）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（六）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（七）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（八）
基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（九）
基于 abp vNext 和 .NET Core 開發博客專案 - 終結篇之發布專案

上一篇完成了博客的分頁查詢文章串列頁面的資料系結和分頁功能，本篇將繼續完成剩下的幾個頁面，

在開始主題之前重新解決上一篇的最后一個問題，當點擊了頭部組件的/posts鏈接時直接強制重繪了頁面，經過查看檔案和實踐有了更好的解決方案，

先將頭部組件Header.razor中的NavLink恢復成<NavLink class="menu-item" href=https://www.cnblogs.com/meowv/p/"posts">Posts，不需要點擊事件了，

然后在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">-&nbsp;Categories&nbsp;-</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=https://www.cnblogs.com/meowv/p/"/category/@item.DisplayName/">
                                    
                                        
                                        @item.CategoryName
                                    
                                    (@item.Count)

基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（四）

系列文章

分類串列

@item.CategoryName

標簽串列

友鏈串列

@item.Title

文章串列(分類)

文章串列(標簽)