基于 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 開發博客專案 - 終結篇之發布專案

上一篇完成了博客文章詳情頁面的資料展示和基于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="??編輯" @onclick="@(() => ShowBox(item))">??</NavLink>
                            <NavLink target="_blank" href=https://www.cnblogs.com/meowv/p/"@($"/category/{item.DisplayName}")">
                                @item.CategoryName
                                (@item.Count)

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

系列文章

分類管理

@item.CategoryName

??~ 新增分類 ~??

洗掉分類

新增/更新分類

@item.CategoryName

??~ 新增分類 ~??

彈窗組件

關于樣式

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

系列文章

分類管理

@item.CategoryName

??~~~ 新增分類 ~~~??

洗掉分類

新增/更新分類

@item.CategoryName

??~~~ 新增分類 ~~~??

彈窗組件

關于樣式

??~ 新增分類 ~??

??~ 新增分類 ~??