系列文章

  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方式的简单身份验证，本篇继续推进，完成后台分类管理的所有增删改查等功能。

分类管理

0

在 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="
版权声明：本文为meowv原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/meowv/p/13124303.html