基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（八）

转载于：https://github.com/Meowv/Blog

上一篇完成了标签模块和友情链接模块的所有功能，本篇来继续完成博客最后的模块，文章的管理。

文章列表&删除

图片

先将分页查询的列表给整出来，这块和首页的分页列表是类似的，就是多了个Id字段。

添加两条路由规则。

@page “/admin/posts”
@page “/admin/posts/{page:int}”
新建返回数据默认QueryPostForAdminDto.cs。

//QueryPostForAdminDto.cs
using System.Collections.Generic;

namespace Meowv.Blog.BlazorApp.Response.Blog
{
public class QueryPostForAdminDto
{
///
/// 年份
///
public int Year { get; set; }

    /// <summary>/// Posts/// </summary>public IEnumerable<PostBriefForAdminDto> Posts { get; set; }
}

}

//PostBriefForAdminDto.cs
namespace Meowv.Blog.BlazorApp.Response.Blog
{
public class PostBriefForAdminDto : PostBriefDto
{
///
/// 主键
///
public int Id { get; set; }
}
}
然后添加所需的参数：当前页码、限制条数、总页码、文章列表返回数据模型。

///
/// 当前页码
///
[Parameter]
public int? page { get; set; }

///
/// 限制条数
///
private int Limit = 15;

///
/// 总页码
///
private int TotalPage;

///
/// 文章列表数据
///
private ServiceResult<PagedList> posts;
然后在初始化函数OnInitializedAsync()中调用API获取文章数据.

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

// 设置默认值
page = page.HasValue ? page : 1;await RenderPage(page);

}

///
/// 点击页码重新渲染数据
///
///
///
private async Task RenderPage(int? page)
{
// 获取数据
posts = await Http.GetFromJsonAsync<ServiceResult<PagedList>>($"/blog/admin/posts?page={page}&limit={Limit}");

// 计算总页码
TotalPage = (int)Math.Ceiling((posts.Result.Total / (double)Limit));

}
在初始化中判断page参数，如果没有值给他设置一个默认值1。RenderPage(int? page)方法是调用API返回数据，并计算出总页码值。

最后在页面上进行数据绑定。

@if (posts == null) { } else {