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

系列文章基於 abp vNext 和 .NET Core 開發博客項目 - 使用 abp cli 搭建項目基於 abp vNext 和 .NET Core 開發博客項目 - 給項目瘦身，讓它跑起來基於 abp vNext 和 .NET Core 開發博客項目 - 完善與美化，Swagger登場 ...

系列文章

上一篇完成了後臺分類模塊的所有功能，本篇繼續將標簽模塊和友情鏈接模塊的增刪改查完成。

標簽管理

實現方式和之前的分類管理是一樣的，在Admin文件夾下麵添加Tags.razor組件，設置路由@page "/admin/tags"。

同樣的內容也需要放在AdminLayout組件下麵，添加幾個參數：彈窗狀態bool Open、新增或更新時標簽欄位string tagName, displayName、更新時的標簽Idint id、API返回的標簽列表接收參數ServiceResult<IEnumerable<QueryTagForAdminDto>> tags。

/// <summary>
/// 預設隱藏Box
/// </summary>
private bool Open { get; set; } = false;

/// <summary>
/// 新增或者更新時候的標簽欄位值
/// </summary>
private string tagName, displayName;

/// <summary>
/// 更新標簽的Id值
/// </summary>
private int id;

/// <summary>
/// API返回的標簽列表數據
/// </summary>
private ServiceResult<IEnumerable<QueryTagForAdminDto>> tags;

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

在初始化方法OnInitializedAsync()中獲取數據。

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

    tags = await FetchData();
}

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

註意需要設置請求頭，進行授權訪問，然後頁面上綁定數據。

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