基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（六）

系列文章

1. 基於 abp vNext 和 .NET Core 開發博客項目 - 使用 abp cli 搭建項目
2. 基於 abp vNext 和 .NET Core 開發博客項目 - 給項目瘦身，讓它跑起來
3. 基於 abp vNext 和 .NET Core 開發博客項目 - 完善與美化，Swagger登場
4. 基於 abp vNext 和 .NET Core 開發博客項目 - 數據訪問和代碼優先
5. 基於 abp vNext 和 .NET Core 開發博客項目 - 自定義倉儲之增刪改查
6. 基於 abp vNext 和 .NET Core 開發博客項目 - 統一規範API，包裝返回模型
7. 基於 abp vNext 和 .NET Core 開發博客項目 - 再說Swagger，分組、描述、小綠鎖
8. 基於 abp vNext 和 .NET Core 開發博客項目 - 接入GitHub，用JWT保護你的API
9. 基於 abp vNext 和 .NET Core 開發博客項目 - 異常處理和日誌記錄
10. 基於 abp vNext 和 .NET Core 開發博客項目 - 使用Redis緩存數據
11. 基於 abp vNext 和 .NET Core 開發博客項目 - 集成Hangfire實現定時任務處理
12. 基於 abp vNext 和 .NET Core 開發博客項目 - 用AutoMapper搞定對象映射
13. 基於 abp vNext 和 .NET Core 開發博客項目 - 定時任務最佳實戰（一）
14. 基於 abp vNext 和 .NET Core 開發博客項目 - 定時任務最佳實戰（二）
15. 基於 abp vNext 和 .NET Core 開發博客項目 - 定時任務最佳實戰（三）
16. 基於 abp vNext 和 .NET Core 開發博客項目 - 博客介面實戰篇（一）
17. 基於 abp vNext 和 .NET Core 開發博客項目 - 博客介面實戰篇（二）
18. 基於 abp vNext 和 .NET Core 開發博客項目 - 博客介面實戰篇（三）
19. 基於 abp vNext 和 .NET Core 開發博客項目 - 博客介面實戰篇（四）
20. 基於 abp vNext 和 .NET Core 開發博客項目 - 博客介面實戰篇（五）
21. 基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（一）
22. 基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（二）
23. 基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（三）
24. 基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（四）
25. 基於 abp vNext 和 .NET Core 開發博客項目 - Blazor 實戰系列（五）

上一篇完成了博客文章詳情頁面的數據展示和基於JWT方式的簡單身份驗證，本篇繼續推進，完成後臺分類管理的所有增刪改查等功能。

分類管理

在 Admin 文件夾下新建Razor組件，Categories.razor，設置路由，@page "/admin/categories"。將具體的展示內容放在組件AdminLayout中。

@page "/admin/categories"

<AdminLayout>
      <Loading />
</AdminLayout>

在這裡我會將所有分類展示出來，新增、更新、刪除都會放在一個頁面上去完成。

先將列表查出來，添加API的返回參數，private ServiceResult<IEnumerable<QueryCategoryForAdminDto>> categories;，然後再初始化中去獲取數據。

//QueryCategoryForAdminDto.cs
namespace Meowv.Blog.BlazorApp.Response.Blog
{
    public class QueryCategoryForAdminDto : QueryCategoryDto
    {
        /// <summary>
        /// 主鍵
        /// </summary>
        public int Id { get; set; }
    }
}

/// <summary>
/// API返回的分類列表數據
/// </summary>
private ServiceResult<IEnumerable<QueryCategoryForAdminDto>> categories;

/// <summary>
/// 初始化
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
    var token = await Common.GetStorageAsync("token");
    Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {token}");

    categories = await FetchData();
}

/// <summary>
/// 獲取數據
/// </summary>
/// <returns></returns>
private async Task<ServiceResult<IEnumerable<QueryCategoryForAdminDto>>> FetchData()
{
    return await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryCategoryForAdminDto>>>("/blog/admin/categories");
}

初始化的時候，需要將我們存在localStorage中的token讀取出來，因為我們後臺的API都需要添加 Authorization Header 請求頭才能成功返回數據。

在Blazor添加請求頭也是比較方便的，直接Http.DefaultRequestHeaders.Add(...)即可，要註意的是 token值前面需要加 Bearer ，跟了一個空格不可以省略。

獲取數據單獨提成了一個方法FetchData()，因為會頻繁用到，現在在頁面上將數據綁定進行展示。

@if (categories == null)
{
    <Loading />
}
else
{
    <div class="post-wrap categories">
        <h2 class="post-title">-&nbsp;Categories&nbsp;-</h2>
        @if (categories.Success && categories.Result.Any())
        {
            <div class="categories-card">
                @foreach (var item in categories.Result)
                {
                    <div class="card-item">
                        <div class="categories">
                            <NavLink title="❌刪除" @onclick="@(async () => await DeleteAsync(item.Id))">❌</NavLink>
                            <NavLink title="