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

系列文章

  1. 使用 abp cli 搭建项目

  2. 给项目瘦身,让它跑起来

  3. 完善与美化,Swagger登场

  4. 数据访问和代码优先

  5. 自定义仓储之增删改查

  6. 统一规范API,包装返回模型

  7. 再说Swagger,分组、描述、小绿锁

  8. 接入GitHub,用JWT保护你的API

  9. 异常处理和日志记录

  10. 使用Redis缓存数据

  11. 集成Hangfire实现定时任务处理

  12. 用AutoMapper搞定对象映射

  13. 定时任务最佳实战(一)

  14. 定时任务最佳实战(二)

  15. 定时任务最佳实战(三)

  16. 博客接口实战篇(一)

  17. 博客接口实战篇(二)

  18. 博客接口实战篇(三)

  19. 博客接口实战篇(四)

  20. 博客接口实战篇(五)

  21. Blazor实战系列(一)

  22. Blazor实战系列(二)

  23. Blazor实战系列(三)


上一篇完成了博客的分页查询文章列表页面的数据绑定和分页功能,本篇将继续完成剩下的几个页面。

在开始主题之前重新解决上一篇的最后一个问题,当点击了头部组件的/posts链接时直接强制刷新了页面,经过查看文档和实践有了更好的解决方案。

先将头部组件Header.razor中的NavLink恢复成<NavLink class="menu-item" href="posts">Posts</NavLink>,不需要点击事件了。

然后在Posts.razor中添加生命周期函数OnParametersSetAsync(),在初始化完成后执行。

/// <summary>
/// 初始化完成后执行
/// </summary>
/// <returns></returns>
protected override async Task OnParametersSetAsync()
{if (!page.HasValue){page = 1;await RenderPage(page);}
}

判断当前page参数是否有值,有值的话说明请求肯定是来自于翻页,当page没有值的时候就说明是头部的菜单点进来的。那么此时给page赋值为1,调用API加载数据即可。

分类列表

Categories.razor是分类列表页面,上篇文章已经实现了从API获取数据的方法,所以这里就很简单了,指定接受类型,然后在生命周期初始化OnInitializedAsync()中去获取数据。

@code{/// <summary>/// categories/// </summary>private ServiceResult<IEnumerable<QueryCategoryDto>> categories;/// <summary>/// 初始化/// </summary>protected override async Task OnInitializedAsync(){// 获取数据categories = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryCategoryDto>>>($"/blog/categories");}
}

当获取到数据的时候进行绑定,没有数据的时候还是显示加载中的组件<Loading />让他转圈圈。

@if (categories == null)
{<Loading />
}
else
{<div class="container"><div class="post-wrap categories"><h2 class="post-title">-&nbsp;Categories&nbsp;-</h2><div class="categories-card">@if (categories.Success && categories.Result.Any()){@foreach (var item in categories.Result){<div class="card-item"><div class="categories"><a href="/category/@item.DisplayName/"><h3><i class="iconfont iconcode" style="padding-right:3px"></i>@item.CategoryName</h3><small>(@item.Count)</small></a></div></div>}}else{<ErrorTip />}</div></div></div>
}

直接循环返回的数据列表categories.Result,绑定数据就好,当获取失败或者没有返回数据的时候显示错误提示组件<ErrorTip />

标签列表

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 class="container"><div class="post-wrap tags"><h2 class="post-title">-&nbsp;Tags&nbsp;-</h2><div class="tag-cloud-tags">@if (tags.Success && tags.Result.Any()){@foreach (var item in tags.Result){<a href="/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 class="container"><div class="post-wrap categories"><h2 class="post-title">-&nbsp;FriendLinks&nbsp;-</h2><div class="categories-card">@if (friendlinks.Success && friendlinks.Result.Any()){@foreach (var item in friendlinks.Result){<div class="card-item"><div class="categories"><a target="_blank" href="@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 class="container"><div class="post-wrap tags">@if (categoryName != null){<h2 class="post-title">-&nbsp;Category&nbsp;·&nbsp;@categoryName&nbsp;-</h2>}</div><div class="post-wrap archive">@if (posts.Success && posts.Result.Any()){@foreach (var item in posts.Result){<h3>@item.Year</h3>@foreach (var post in item.Posts){<article class="archive-item"><NavLink href="@("/post"+post.Url)">@post.Title</NavLink><span class="archive-item-date">@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 class="container"><div class="post-wrap tags">@if (tagName != null){<h2 class="post-title">-&nbsp;Tag&nbsp;·&nbsp;@tagName&nbsp;-</h2>}</div><div class="post-wrap archive">@if (posts.Success && posts.Result.Any()){@foreach (var item in posts.Result){<h3>@item.Year</h3>@foreach (var post in item.Posts){<article class="archive-item"><NavLink href="@("/post"+post.Url)">@post.Title</NavLink><span class="archive-item-date">@post.CreationTime</span></article>}}}else{<ErrorTip />}</div></div>
}

以上完成了以上几个页面的数据绑定,页面之间的跳转已经关联起来了,然后还剩下文章详情页,大家可以先自己动手完成它,今天就到这里,未完待续...

开源地址:https://github.com/Meowv/Blog/tree/blog_tutorial

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

字符串相关

文章目录字符串基础字符串的存储标准库字符串匹配单串匹配多串匹配其他类型的字符串匹配问题字符串哈希Hash 的实现Hash 的分析与改进错误率多次询问子串哈希Hash 的应用字符串匹配允许 k次失配的字符串匹配最长回文子串最长公共子字符串确定字符串中不同子字符串的数量字典树 …

[JavaWeb-Servlet]IDEA与Tomcat的相关配置

IDEA与tomcat的相关配置 1. IDEA会为每一个tomcat部署的项目单独建立一份配置文件* 查看控制台的log&#xff1a;Using CATALINA_BASE: "C:\Users\fqy\.IntelliJIdea2018.1\system\tomcat\_itcast"2. 工作空间项目 和 tomcat部署的web项目* tomcat真正访问…

C#9.0 终于来了,您还学的动吗? 带上VS一起解读吧!

一&#xff1a;背景1. 讲故事好消息&#xff0c;.NET 5.0 终于在2020年6月10日发布了第五个预览版&#xff0c;眼尖的同学一定看到了在这个版本中终于支持了 C# 9.0&#xff0c;此处有掌声&#xff0c;太好了&#xff01;&#xff01;&#xff01;.Net5官方链接可以看到目前的C…

KMP模式串匹配+Compress Words CodeForces - 1200E

题意&#xff1a; 给你若干个字符串&#xff0c;答案串初始为空。第 iii 步将第 iii 个字符串加到答案串的后面&#xff0c;但是尽量地去掉重复部分&#xff08;即去掉一个最长的、是原答案串的后缀、也是第 iii个串的前缀的字符串&#xff09;&#xff0c;求最后得到的字符串…

.NET Core 反射获取所有控制器及方法上特定标签

有个需求&#xff0c;就是在. NET Core中&#xff0c;我们想在项目 启动时&#xff0c;获取LinCmsAuthorizeAttribute这个特性标签所有出现的地方&#xff0c;把他的参数&#xff0c;放入一个集合并缓存起来&#xff0c;以便后面使用此数据用于权限验证。我们通过反射获取所有控…

[JavaWeb-Servlet]Servlet的体系结构

Servlet的体系结构 Servlet -- 接口|GenericServlet -- 抽象类|HttpServlet -- 抽象类* GenericServlet&#xff1a;将Servlet接口中其他的方法做了默认空实现&#xff0c;只将service()方法作为抽象* 将来定义Servlet类时&#xff0c;可以继承GenericServlet&#xff0c;实现…

折半搜索+洛谷 P2962 [USACO09NOV]Lights G

题意&#xff1a; 有 n盏灯&#xff0c;每盏灯与若干盏灯相连&#xff0c;每盏灯上都有一个开关&#xff0c;如果按下一盏灯上的开关&#xff0c;这盏灯以及与之相连的所有灯的开关状态都会改变。一开始所有灯都是关着的&#xff0c;你需要将所有灯打开&#xff0c;求最小的按…

将数据从 SQL Server 导入 Azure Storage Table

点击上方蓝字关注“汪宇杰博客”导语最近有个需求要将数据存储从 SQL Server 数据库切换到 Azure Storage 中的 Table。然而不管是 SSMS 还是 Azure Portal 都没有提供直接的导入功能&#xff0c;是不是又想自己写程序去导数据了&#xff1f;其实不用&#xff01;没有点过数据库…

[JavaWeb-HTTP]HTTP概念

HTTP&#xff1a; * 概念&#xff1a;Hyper Text Transfer Protocol 超文本传输协议* 传输协议&#xff1a;定义了&#xff0c;客户端和服务器端通信时&#xff0c;发送数据的格式* 特点&#xff1a;1. 基于TCP/IP的高级协议2. 默认端口号:803. 基于请求/响应模型的:一次请求对…

Good Number Gym - 102769G 2020年CCPC秦皇岛分站赛

题意&#xff1a; 如果一个数字是Good Number&#xff0c;当且仅当 ⌊xk⌋\left \lfloor\sqrt[k]{x}\right \rfloor⌊kx​⌋(向下取整) 能整除 x 。 现在给出 n,k &#xff0c;求 1 到 n 之中Good Number 的个数。 题目&#xff1a; Alex loves numbers. Alex thinks that…

【完整目录】每天5分钟用C#学习数据结构

【基础知识】| 作者 / Edison Zhou这是恰童鞋骚年的第250篇原创内容不知不觉&#xff0c;每天5分钟学习数据结构就更新完了&#xff0c;本篇将该系列所有文章整理起来作为一个目录&#xff0c;方便你的快速阅读。1线性表线性表是最简单也是在编程当中使用最多的一种数据结构。例…

.NET 5 开发WPF - 美食应用登录UI设计

点击上方“Dotnet9”添加关注哦Demo演示&#xff1a;演示动画你的时间宝贵&#xff0c;不想看啰嗦的文字&#xff0c;可直接拉到文末下载源码&#xff01;1. 新建项目站长开发环境&#xff1a;VS 2019企业版 16.70.NET 5 Preview 5.NET 5 WPF 项目模板和 .NET Core 3.1 WPF 项目…

[JavaWeb-HTTP]HTTP_请求消息_请求头请求体

请求消息数据格式 1. 请求行请求方式 请求url 请求协议/版本GET /login.html HTTP/1.1* 请求方式&#xff1a;* HTTP协议有7中请求方式&#xff0c;常用的有2种* GET&#xff1a;1. 请求参数在请求行中&#xff0c;在url后。2. 请求的url长度有限制的3. 不太安全* POST&#xf…

字典树模板+洛谷P2580 于是他错误的点名开始了

题目&#xff1a; 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人。 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次&#xff0c;然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉&#xff08;详情请见已结束比赛 CON900&#xff09;。 题目描述 这之…

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

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

[JavaWeb-Servlet]概述与快速入门

Servlet&#xff1a; server applet * 概念&#xff1a;运行在服务器端的小程序* Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问到(tomcat识别)的规则。* 将来我们自定义一个类&#xff0c;实现Servlet接口&#xff0c;复写方法。* 快速入门&#xff1a;1. 创建Ja…

01tire+洛谷P4551 最长异或路径

题目&#xff1a; 给定一棵n个点的带权树&#xff0c;结点下标从1开始到N。寻找树中找两个结点&#xff0c;求最长的异或路径。 异或路径指的是指两个结点之间唯一路径上的所有边权的异或。 输入格式 第一行一个整数NN&#xff0c;表示点数。 接下来 n−1 行&#xff0c;给…

C#9.0 终于来了,带你一起解读 nint 和 Pattern matching 两大新特性玩法

一&#xff1a;背景1. 讲故事上一篇C#9.0 终于来了&#xff0c;您还学的动吗&#xff1f; 带上VS一起解读吧&#xff01;跟大家聊到了Target-typed new 和 Lambda discard parameters&#xff0c;看博客园和公号里的阅读量都达到了新高&#xff0c;甚是欣慰&#xff0c;不管大家…

[JavaWeb-Tomcat]web服务器软件_Tomcat介绍

Tomcat&#xff1a;web服务器软件 1. 下载&#xff1a;http://tomcat.apache.org/2. 安装&#xff1a;解压压缩包即可。* 注意&#xff1a;安装目录建议不要有中文和空格3. 卸载&#xff1a;删除目录就行了4. 启动&#xff1a;* bin/startup.bat ,双击运行该文件即可* 访问&…

软件设计模式期末大作业——可乐商城管理系统

文章目录设计模式大作业软 件 设 计 模 式 任 务 书设计要求&#xff1a;学生应完成的工作&#xff1a;1. 应用场景描述2. 设计模式选择3. 实现语言与工具参考文献阅读&#xff1a;工作计划&#xff1a;一、系统目标1. 设计目的2. 需求描述二、 系统模式选择1.需求分析2.选用设…