基于 abp vnext 和 .net core 开发博客项目 -凯发k8官方网
基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（四）
转载于：https://github.com/meowv/blog
上一篇完成了博客的分页查询文章列表页面的数据绑定和分页功能，本篇将继续完成剩下的几个页面。
在开始主题之前重新解决上一篇的最后一个问题，当点击了头部组件的/posts链接时直接强制刷新了页面，经过查看文档和实践有了更好的凯发k8官方网的解决方案。
先将头部组件header.razor中的navlink恢复成posts，不需要点击事件了。
然后在posts.razor中添加生命周期函数onparameterssetasync()，在初始化完成后执行。
///
/// 初始化完成后执行
///
///
protected override async task onparameterssetasync()
{
if (!page.hasvalue)
{
page = 1;
await renderpage(page);
}
}
判断当前page参数是否有值，有值的话说明请求肯定是来自于翻页，当page没有值的时候就说明是头部的菜单点进来的。那么此时给page赋值为1，调用api加载数据即可。
分类列表
categories.razor是分类列表页面，上篇文章已经实现了从api获取数据的方法，所以这里就很简单了，指定接受类型，然后在生命周期初始化oninitializedasync()中去获取数据。
@code{
///
/// categories
///
private serviceresult
}
当获取到数据的时候进行绑定，没有数据的时候还是显示加载中的组件让他转圈圈。
@if (categories == null)
{
}
else
{
- categories -
@if (categories.success && categories.result.any())
{
@foreach (var item in categories.result)
{
@item.categoryname
(@item.count)
}
}
else
{
}
}
直接循环返回的数据列表categories.result，绑定数据就好，当获取失败或者没有返回数据的时候显示错误提示组件
图片
标签列表
categories.razor是标签列表页面，和分类列表html结构差不多一样的，除了返回类型和接口地址不一样，将上面代码复制过来改改即可。
@code{
///
/// tags
///
private serviceresult
}
@if (tags == null)
{
}
else
{
- tags -
@if (tags.success && tags.result.any())
{
@foreach (var item in tags.result)
{
@item.tagname(@item.count)
}
}
else
{
}
}
图片
友链列表
friendlinks.razor是凯发k8官方网的友情链接列表页面，实现方式和上面两个套路一模一样。
@code {
///
/// friendlinks
///
private serviceresult
}
@if (friendlinks == null)
{
}
else
{
- friendlinks -
@if (friendlinks.success && friendlinks.result.any())
{
@foreach (var item in friendlinks.result)
{
@item.title
}
}
else
{
}
}
图片
文章列表(分类)
posts.category.razor是根据分类查询文章列表页面，他接受一个参数name，我们要根据name去api查询数据然后绑定页面即可。
这里的参数name实际上就是从标签列表传递过来的displayname的值，它是一个比较友好的名称，我们还要通过这个值去查询真正的分类名称进行展示，所以这里需要调用两个api，这点在设计api的时候没有考虑好，我们其实可以将这两个api合并变成一个，后续再进行优化吧，这里就请求两次。
添加两个接收参数：分类名称和返回的文章列表数据。
///
/// 分类名称
///
private string categoryname;
///
/// 文章列表数据
///
private serviceresult
然后在oninitializedasync()初始化方法中调用api获取数据，赋值给变量。
///
/// 初始化
///
protected override async task oninitializedasync()
{
// todo:获取数据,可以在api中合并这两个请求。
var category = await http.getfromjsonasync
}
有了数据，直接在页面上进行循环绑定。
@if (posts == null)
{
}
else
{
@if (categoryname != null)
{
- category · @categoryname -
}
@if (posts.success && posts.result.any())
{
@foreach (var item in posts.result)
{
@item.year
@foreach (var post in item.posts)
{
@post.creationtime
总结
以上是凯发k8官方网为你收集整理的基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（四）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 基于 abp vnext 和 .net
- 下一篇： 基于 abp vnext 和 .net