门户建设网站方案,企业内部网站建设方案,高端品牌男鞋有哪些,广东广电网络东莞分公司系列文章使用 abp cli 搭建项目给项目瘦身#xff0c;让它跑起来完善与美化#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API#xff0c;包装返回模型再说Swagger#xff0c;分组、描述、小绿锁接入GitHub#xff0c;用JWT保护你的API异常处理和… 系列文章使用 abp cli 搭建项目给项目瘦身让它跑起来完善与美化Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API包装返回模型再说Swagger分组、描述、小绿锁接入GitHub用JWT保护你的API异常处理和日志记录使用Redis缓存数据集成Hangfire实现定时任务处理用AutoMapper搞定对象映射定时任务最佳实战一定时任务最佳实战二定时任务最佳实战三博客接口实战篇一博客接口实战篇二博客接口实战篇三博客接口实战篇四博客接口实战篇五Blazor实战系列一Blazor实战系列二上一篇完成了博客的主题切换菜单和二维码的显示与隐藏功能本篇继续完成分页查询文章列表的数据展示。添加页面现在点击页面上的链接都会提示错误消息因为没有找到对应的路由地址。先在Pages下创建五个文件夹Posts、Categories、Tags、Apps、FriendLinks。然后在对应的文件夹下添加Razor组件。Posts文件夹文章列表页面Posts.razor、根据分类查询文章列表页面Posts.Category.razor、根据标签查询文章列表页面Posts.Tag.razor、文章详情页Post.razorCategories文件夹分类列表页面Categories.razorTags文件夹标签列表页面Tags.razorApps文件夹Apps.razor准备将友情链接入口放在里面FriendLinks文件夹友情链接列表页面FriendLinks.razor先分别创建上面这些Razor组件差不多除了后台CURD的页面就这些了现在来逐个突破。不管三七二十一先把所有页面的路由给确定了指定页面路由使用 page 指令官方文档说不支持可选参数但是可以支持多个路由规则。默认先什么都不显示可以将之前的加载中圈圈写成一个组件供每个页面使用。在Shared文件夹添加组件Loading.razor。!--Loading.razor--
div classloader/div
//Posts.razor
page /posts/
page /posts/page/{page:int}
page /posts/{page:int}Loading /code {/// summary/// 当前页码/// /summary[Parameter]public int? page { get; set; }
}
这里我加了三条可以匹配没有page参数带page参数的/posts/page/{page:int}这个大家可以不用加我是用来兼容目前线上的博客路由的。总的来说可以匹配到/posts、/posts/1、/posts/page/1这样的路由。//Posts.Category.razor
page /category/{name}Loading /code {/// summary/// 分类名称参数/// /summary[Parameter]public string name { get; set; }
}
根据分类名称查询文章列表页面name当作分类名称参数可以匹配到类似于/category/aaa、/category/bbb这样的路由。//Posts.Tag.razor
page /tag/{name}Loading /code {/// summary/// 标签名称参数/// /summary[Parameter]public string name { get; set; }
}
这个根据标签名称查询文章列表页面和上面差不多一样可以匹配到/tag/aaa、/tag/bbb这样的路由。//Post.razor
page /post/{year:int}/{month:int}/{day:int}/{name}Loading /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 /categoriesLoading ///Tags.razor
page /tagsLoading ///FriendLinks.razor
page /friendlinksLoading /
分类、标签、友情链接都是固定的路由像上面这样就不多说了然后还剩一个Apps.razor。//Apps.razor
page /appsdiv classcontainerdiv classpost-wraph2 classpost-title-nbsp;Appsnbsp;-/h2ullia target_blank hrefhttps://support.qq.com/products/75616h3吐个槽_留言板/h3/a/liliNavLink href/friendlinksh3友情链接/h3/NavLink/li/ul/div
/div
在里面添加了一个友情链接的入口和一个 腾讯兔小巢 ( 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.Bloginject HttpClient Http
inject Commons.Common Common
inject HttpClient Http注入HttpClient用它来请求API数据。现在有了接收对象接下来就好办了来实现分页查询文章列表吧。先添加三个私有变量限制条数就是一次加载文章的数量总页码用来计算分页还有就是API的返回数据的接收类型参数。/// summary
/// 限制条数
/// /summary
private int Limit 15;/// summary
/// 总页码
/// /summary
private int TotalPage;/// summary
/// 文章列表数据
/// /summary
private ServiceResultPagedListQueryPostDto posts;
然后当页面初始化的时候去加载数据渲染页面因为page参数可能存在为空的情况所以要考虑进去当为空的时候给他一个默认值1。/// summary
/// 初始化
/// /summary
protected override async Task OnInitializedAsync()
{// 设置默认值page page.HasValue ? page : 1;await RenderPage(page);
}/// summary
/// 点击页码重新渲染数据
/// /summary
/// param namepage/param
/// returns/returns
private async Task RenderPage(int? page)
{// 获取数据posts await Http.GetFromJsonAsyncServiceResultPagedListQueryPostDto($/blog/posts?page{page}limit{Limit});// 计算总页码TotalPage (int)Math.Ceiling((posts.Result.Total / (double)Limit));
}
在初始化方法中设置默认值调用RenderPage(...)获取到API返回来的数据并根据返回数据计算出页码这样就可以绑定数据了。if (posts null)
{Loading /
}
else
{div classpost-wrap archiveif (posts.Success posts.Result.Item.Any()){foreach (var item in posts.Result.Item){h3item.Year/h3foreach (var post in item.Posts){article classarchive-itemNavLink href(/post post.Url)post.Title/NavLinkspan classarchive-item-datepost.CreationTime/span/article}}nav classpaginationfor (int i 1; i TotalPage; i){var _page i;if (page _page){span classpage-number current_page/span}else{a classpage-number onclick(() RenderPage(_page)) href/posts/_page_page/a}}/nav}else{ErrorTip /}/div
}
在加载数据的时候肯定是需要一个等待时间的因为不可抗拒的原因数据还没加载出来的时候可以让它先转一会圈圈当posts不为空的时候再去绑定数据。在绑定数据for循环页码的时候我又遇到了一个坑????这里不能直接去使用变量i必须新建一个变量去接受它不然我传递给RenderPage(...)的参数就会是错的始终会取到最后一次循环的i值。当判断数据出错或者没有数据的时候在把错误提示ErrorTip /扔出来显示。做到这里可以去运行看看了肯定会报错因为还有一个重要的东西没有改就是我们接口的BaseAddress在Program.cs中默认是当前Blazor项目的运行地址。我们需要先将API项目运行起来拿到地址配置在Program.cs中因为现在还是本地开发有多种办法可以解决可以将.HttpApi.Hosting设为启动项目直接运行起来也可以使用命令直接dotnet run。我这里为了方便直接发布在IIS中后续只要电脑打开就可以访问了你甚至选择其它任何你能想到的方式。关于如何发布这里先不做展开有机会的话写一篇将.net core开发的项目发布到 Windows、Linux、Docker 的教程吧。所以我的Program.cs中配置如下//Program.cs
using Meowv.Blog.BlazorApp.Commons;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;namespace Meowv.Blog.BlazorApp
{public class Program{public static async Task Main(string[] args){var builder WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.AddApp(app);var baseAddress https://localhost;if (builder.HostEnvironment.IsProduction())baseAddress https://api.meowv.com;builder.Services.AddTransient(sp new HttpClient{BaseAddress new Uri(baseAddress)});builder.Services.AddSingleton(typeof(Common));await builder.Build().RunAsync();}}
}
baseAddress默认为本地开发地址使用builder.HostEnvironment.IsProduction()判断是否为线上正式生产环境改变baseAddress地址。现在可以看到已经可以正常获取数据并且翻页也是OK的然后又出现了一个新的问题????。解决BUG细心的可以发现当我点击头部组件的Postsa 标签菜单时候页面没有发生变化只是路由改变了。思来想去我决定使用NavigationManager这个URI和导航状态帮助程序来解决当点击头部的Postsa 标签菜单直接刷新页面得了。在Common.cs中使用构造函数注入NavigationManager然后添加一个跳转指定URL的方法。/// summary
/// 跳转指定URL
/// /summary
/// param nameuri/param
/// param nameforceLoadtrue绕过路由刷新页面/param
/// returns/returns
public async Task RenderPage(string url, bool forceLoad true)
{_navigationManager.NavigateTo(url, forceLoad);await Task.CompletedTask;
}
当forceLoad true的时候将会绕过路由直接强制刷新页面如果forceLoad false则不会刷新页面。紧接着在Header.razor中修改代码添加点击事件。*NavLink classmenu-item hrefpostsPosts/NavLink*NavLink classmenu-item hrefposts onclick(async () await Common.RenderPage(posts))Posts/NavLink
总算是搞定完成了分页查询文章列表的数据绑定今天就到这里吧未完待续...开源地址https://github.com/Meowv/Blog/tree/blog_tutorial
