基于 abp vnext 和 .net core 开发博客项目 -凯发k8官方网

基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（三）

转载于：https://github.com/meowv/blog

上一篇完成了博客的主题切换，菜单和二维码的显示与隐藏功能，本篇继续完成分页查询文章列表的数据展示。

添加页面

现在点击页面上的链接，都会提示错误消息，因为没有找到对应的路由地址。先在pages下创建五个文件夹：posts、categories、tags、apps、friendlinks。

然后在对应的文件夹下添加razor组件。

posts文件夹：文章列表页面posts.razor、根据分类查询文章列表页面posts.category.razor、根据标签查询文章列表页面posts.tag.razor、文章详情页post.razor

categories文件夹：分类列表页面categories.razor

tags文件夹：标签列表页面tags.razor

apps文件夹：apps.razor准备将凯发k8官方网的友情链接入口放在里面

friendlinks文件夹：凯发k8官方网的友情链接列表页面friendlinks.razor

先分别创建上面这些razor组件，差不多除了后台curd的页面就这些了，现在来逐个突破。

不管三七二十一，先把所有页面的路由给确定了，指定页面路由使用 @page 指令，官方文档说不支持可选参数，但是可以支持多个路由规则。

默认先什么都不显示，可以将之前的加载中圈圈写成一个组件，供每个页面使用。

在shared文件夹添加组件loading.razor。

//posts.razor @page "/posts/" @page "/posts/page/{page:int}" @page "/posts/{page:int}"

@code {
///
/// 当前页码
///
[parameter]
public int? page { get; set; }
}
这里我加了三条，可以匹配没有page参数，带page参数的，/posts/page/{page:int}这个大家可以不用加，我是用来兼容目前线上的博客路由的。总的来说可以匹配到：/posts、/posts/1、/posts/page/1这样的路由。

//posts.category.razor
@page “/category/{name}”

@code {
///
/// 分类名称参数
///
[parameter]
public string name { get; set; }
}
根据分类名称查询文章列表页面，name当作分类名称参数，可以匹配到类似于：/category/aaa、/category/bbb这样的路由。

//posts.tag.razor
@page “/tag/{name}”

@code {
///
/// 标签名称参数
///
[parameter]
public string name { get; set; }
}
这个根据标签名称查询文章列表页面和上面差不多一样，可以匹配到：/tag/aaa、/tag/bbb这样的路由。

//post.razor
@page “/post/{year:int}/{month:int}/{day:int}/{name}”

@code {
[parameter]
public int year { get; set; }

[parameter] public int month { get; set; }[parameter] public int day { get; set; }[parameter] public string name { get; set; }

}
文章详情页面的路由有点点复杂，以/post/开头，加上年月日和当前文章的语义化名称组成。分别添加了四个参数年月日和名称，用来接收url的规则，使用int来设置路由的约束，最终可以匹配到路由：/post/2020/06/09/aaa、/post/2020/06/9/bbb这样的。

//categories.razor
@page “/categories”

//tags.razor
@page “/tags”

//friendlinks.razor
@page “/friendlinks”

分类、标签、凯发k8官方网的友情链接都是固定的路由，像上面这样就不多说了，然后还剩一个apps.razor。

//apps.razor
@page “/apps”

- apps -

• 吐个槽_留言板

• 凯发k8官方网的友情链接

在里面添加了一个凯发k8官方网的友情链接的入口，和一个 腾讯兔小巢 ( https://support.qq.com/products/75616 ) 的链接，欢迎大家吐槽留言噢。

图片

现在可以运行一下看看，点击所有的链接都不会提示错误，只要路由匹配正确就会出现加载中的圈圈了。

文章列表

在做文章列表的数据绑定的时候遇到了大坑，有前端开发经验的都知道，javascript弱类型语言中接收json数据随便玩，但是在blazor中我试了下动态接受传递过来的json数据，一直报错压根运行不起来。所以在请求api接收数据的时候需要指定接收对象，那就好办了我就直接引用api中的.application.contracts就行了啊，但是紧接着坑又来了，目标框架对不上，引用之后也运行不起来，这里应该是之前没有设计好。

于是，我就想了一个折中的办法吧，将api中的返回对象可以用到的dto先手动拷贝一份到blazor项目中，后续可以考虑将公共的返回模型做成nuget包，方便使用。

那么，最终就是在blazor中添加一个response文件夹，用来放接收对象，里面的内容看图：

图片

有点傻，先这样解决，后面在做进一步的优化吧。将我们复制进来的东东，在_imports.razor中添加引用。

//_imports.razor
@using system.net.http
@using system.net.http.json
@using microsoft.aspnetcore.components.forms
@using microsoft.aspnetcore.components.routing
@using microsoft.aspnetcore.components.web
@using microsoft.aspnetcore.components.webassembly.http
@using meowv.blog.blazorapp.shared
@using response.base
@using response.blog

@inject httpclient http
@inject commons.common common
@inject httpclient http：注入httpclient，用它来请求api数据。

现在有了接收对象，接下来就好办了，来实现分页查询文章列表吧。

先添加三个私有变量，限制条数，就是一次加载文章的数量，总页码用来计算分页，还有就是api的返回数据的接收类型参数。

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

///
/// 总页码
///
private int totalpage;

///
/// 文章列表数据
///
private serviceresult posts;
然后当页面初始化的时候，去加载数据，渲染页面，因为page参数可能存在为空的情况，所以要考虑进去，当为空的时候给他一个默认值1。

///
/// 初始化
///
protected override async task oninitializedasync()
{
// 设置默认值
page = page.hasvalue ? page : 1;

await renderpage(page);

}

///
/// 点击页码重新渲染数据
///
///
///
private async task renderpage(int? page)
{
// 获取数据
posts = await http.getfromjsonasync>($"/blog/posts?page={page}&limit={limit}");

// 计算总页码 totalpage = (int)math.ceiling((posts.result.total / (double)limit));

}
在初始化方法中设置默认值，调用renderpage(…)获取到api返回来的数据，并根据返回数据计算出页码，这样就可以绑定数据了。

@if (posts == null)
{

}
else
{

@if (posts.success && posts.result.item.any())
{
@foreach (var item in posts.result.item)
{

@item.year

@foreach (var post in item.posts)
{

@post.title
@post.creationtime

总结

以上是凯发k8官方网为你收集整理的基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（三）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。