基于 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 实战系列（五）
  26. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（六）
  27. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（七）
  28. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（八）
  29. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）
  30. 基于 abp vNext 和 .NET Core 开发博客项目 - 终结篇之发布项目

上一篇完成了后台分类模块的所有功能，本篇继续将标签模块和友情链接模块的增删改查完成。

标签管理

实现方式和之前的分类管理是一样的，在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">- Tags -</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="
赞 (0)

相关推荐