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

Categories.razor是标签列表页面，和分类列表HTML结构差不多一样的，除了返回类型和接口地址不一样，将上面代码复制过来改改即可。

@code{ /// <summary> /// tags /// </summary> private ServiceResult<IEnumerable<QueryTagDto>> tags; /// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // 获取数据 tags = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryTagDto>>>($"/blog/tags"); } } @if (tags == null) { <Loading /> } else { <div> <div> <h2>-&nbsp;Tags&nbsp;-</h2> <div> @if (tags.Success && tags.Result.Any()) { @foreach (var item in tags.Result) { <a href="http://www.likecs.com/tag/@item.DisplayName/">@item.TagName<small>(@item.Count)</small></a> } } else { <ErrorTip /> } </div> </div> </div> }

友链列表

FriendLinks.razor是友情链接列表页面，实现方式和上面两个套路一模一样。

@code { /// <summary> /// friendlinks /// </summary> private ServiceResult<IEnumerable<FriendLinkDto>> friendlinks; /// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // 获取数据 friendlinks = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<FriendLinkDto>>>($"/blog/friendlinks"); } } @if (friendlinks == null) { <Loading /> } else { <div> <div> <h2>-&nbsp;FriendLinks&nbsp;-</h2> <div> @if (friendlinks.Success && friendlinks.Result.Any()) { @foreach (var item in friendlinks.Result) { <div> <div> <a target="_blank" href="http://www.likecs.com/@item.LinkUrl"> <h3>@item.Title</h3> </a> </div> </div> } } else { <ErrorTip /> } </div> </div> </div> }

文章列表(分类)

Posts.Category.razor是根据分类查询文章列表页面，他接受一个参数name，我们要根据name去API查询数据然后绑定页面即可。

这里的参数name实际上就是从标签列表传递过来的DisplayName的值，它是一个比较友好的名称，我们还要通过这个值去查询真正的分类名称进行展示，所以这里需要调用两个API，这点在设计API的时候没有考虑好，我们其实可以将这两个API合并变成一个，后续再进行优化吧，这里就请求两次。

添加两个接收参数：分类名称和返回的文章列表数据。

/// <summary> /// 分类名称 /// </summary> private string categoryName; /// <summary> /// 文章列表数据 /// </summary> private ServiceResult<IEnumerable<QueryPostDto>> posts;

然后在OnInitializedAsync()初始化方法中调用API获取数据，赋值给变量。

/// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // TODO:获取数据,可以在API中合并这两个请求。 var category = await Http.GetFromJsonAsync<ServiceResult<string>>($"/blog/category?name={name}"); posts = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryPostDto>>>($"/blog/posts/category?name={name}"); if (category.Success) { categoryName = category.Result; } }

有了数据，直接在页面上进行循环绑定。

@if (posts == null) { <Loading /> } else { <div> <div> @if (categoryName != null) { <h2>-&nbsp;Category&nbsp;·&nbsp;@categoryName&nbsp;-</h2> } </div> <div> @if (posts.Success && posts.Result.Any()) { @foreach (var item in posts.Result) { <h3>@item.Year</h3> @foreach (var post in item.Posts) { <article> <NavLink href="http://www.likecs.com/@("/post"+post.Url)">@post.Title</NavLink> <span>@post.CreationTime</span> </article> } } } else { <ErrorTip /> } </div> </div> }

文章列表(标签)

Posts.Tag.razor是根据标签查询文章列表，这个和分类查询文章列表实现方式一样，直接上代码。

@code { /// <summary> /// 标签名称参数 /// </summary> [Parameter] public string name { get; set; } /// <summary> /// 标签名称 /// </summary> private string tagName; /// <summary> /// 文章列表数据 /// </summary> private ServiceResult<IEnumerable<QueryPostDto>> posts; /// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // TODO:获取数据,可以在API中合并这两个请求。 var tag = await Http.GetFromJsonAsync<ServiceResult<string>>($"/blog/tag?name={name}"); posts = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryPostDto>>>($"/blog/posts/tag?name={name}"); if (tag.Success) { tagName = tag.Result; } } } @if (posts == null) { <Loading /> } else { <div> <div> @if (tagName != null) { <h2>-&nbsp;Tag&nbsp;·&nbsp;@tagName&nbsp;-</h2> } </div> <div> @if (posts.Success && posts.Result.Any()) { @foreach (var item in posts.Result) { <h3>@item.Year</h3> @foreach (var post in item.Posts) { <article> <NavLink href="http://www.likecs.com/@("/post"+post.Url)">@post.Title</NavLink> <span>@post.CreationTime</span> </article> } } } else { <ErrorTip /> } </div> </div> }