基于 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 开发博客项目 - 终结篇之发布项目

---

上一篇完成了分类标签友链的列表查询页面数据绑定，还剩下一个文章详情页的数据没有绑，现在简单的解决掉。

文章详情

之前已经添加了四个参数：year、month、day、name，用来组成我们最终的URL，继续添加一个参数用来接收API返回的数据。

[Parameter]
public int year {
    get; set; }

[Parameter]
public int month {
    get; set; }

[Parameter]
public int day {
    get; set; }

[Parameter]
public string name {
    get; set; }

/// <summary>
/// URL
/// </summary>
private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{
   month}")}/{(day >= 10 ? day.ToString() : $"0{
   day}")}/{name}/";

/// <summary>
/// 文章详情数据
/// </summary>
private ServiceResult<PostDetailDto> post;

然后在初始化方法OnInitializedAsync()中请求数据。

/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
   
    // 获取数据
    post = await Http.GetFromJsonAsync<ServiceResult<PostDetailDto>>($"/blog/post?url={url}");
}

现在拿到了post数据，然后在HTML中绑定即可。

@if (post == null)
{
    <Loading />
}
else
{
    @if (post.Success)
    {
        var _post = post.Result;

        <article class="post-wrap">
            <header class="post-header">
                <h1 class="post-title">@_post.Title</h1>
                <div class="post-meta">
                    Author: <a itemprop="author" rel="author" href="javascript:;">@_post.Author</a>
                    <span class="post-time">
                        Date: <a href="javascript:;">@_post.CreationTime</a>
                    </span>
                    <span class