基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)
转载于:https://github.com/Meowv/Blog
上一篇完成了博客文章详情页面的数据展示和基于JWT方式的简单身份验证,本篇继续推进,完成后台分类管理的所有增删改查等功能。
分类管理
图片
在 Admin 文件夹下新建Razor组件,Categories.razor,设置路由,@page “/admin/categories”。将具体的展示内容放在组件AdminLayout中。
@page “/admin/categories”
在这里我会将所有分类展示出来,新增、更新、删除都会放在一个页面上去完成。
先将列表查出来,添加API的返回参数,private ServiceResult<IEnumerable> categories;,然后再初始化中去获取数据。
//QueryCategoryForAdminDto.cs
namespace Meowv.Blog.BlazorApp.Response.Blog
{
public class QueryCategoryForAdminDto : QueryCategoryDto
{
///
/// 主键
///
public int Id { get; set; }
}
}
///
/// API返回的分类列表数据
///
private ServiceResult<IEnumerable> categories;
///
/// 初始化
///
///
protected override async Task OnInitializedAsync()
{
var token = await Common.GetStorageAsync(“token”);
Http.DefaultRequestHeaders.Add(“Authorization”, $“Bearer {token}”);
categories = await FetchData();
}
///
/// 获取数据
///
///
private async Task<ServiceResult<IEnumerable>> FetchData()
{
return await Http.GetFromJsonAsync<ServiceResult<IEnumerable>>("/blog/admin/categories");
}
初始化的时候,需要将我们存在localStorage中的token读取出来,因为我们后台的API都需要添加 Authorization Header 请求头才能成功返回数据。
在Blazor添加请求头也是比较方便的,直接Http.DefaultRequestHeaders.Add(…)即可,要注意的是 token值前面需要加 Bearer,跟了一个空格不可以省略。
获取数据单独提成了一个方法FetchData(),因为会频繁用到,现在在页面上将数据绑定进行展示。
@if (categories == null)
{
}
else
{
- Categories -
@if (categories.Success && categories.Result.Any())
{
@foreach (var item in categories.Result)
{
<NavLink title=“❌删除” @οnclick="@(async () => await DeleteAsync(item.Id))">❌
<NavLink title=“
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)相关推荐
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(九)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(九) 转载于:https://github.com/Meowv/Blog 终于要接近尾声了,上一篇基本上将文 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八) 转载于:https://github.com/Meowv/Blog 上一篇完成了标签模块和友情链接模块 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七) 转载于:https://github.com/Meowv/Blog 上一篇完成了后台分类模块的所有功能 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五) 转载于:https://github.com/Meowv/Blog 上一篇完成了分类标签友链的列表查询 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的分页查询文章列表 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的主题切换,菜单和 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二) 转载于:https://github.com/Meowv/Blog 上一篇搭建了 Blazor 项目并 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(一)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于dreamweaver软件设计和开发一网站_基于 abp vNext 和 .NET Core 开发博客项目 Blazor 实战系列(一)...
系列文章 使用 abp cli 搭建项目 给项目瘦身,让它跑起来 完善与美化,Swagger登场 数据访问和代码优先 自定义仓储之增删改查 统一规范API,包装返回模型 再说Swagger,分组.描述 ...
最新文章
- 【CodeForces - 144D】Missile Silos(单源最短路,枚举中间边,枚举情况可能性)
- Sqlite3中replace语句用法详解
- vant 上传附件后回显_Vue + VantUI Uploader 上传组件, 实现上传功能, 但 手机实时上传照片只回显, 上传不上去 。...
- 监视和调整Linux网络协议栈:接收数据
- flask的请求与响应
- CentOS 6.5 64位 安装zabbix-2.2.0
- 分享一个导出数据到 Excel 的类库
- 智能告警——企业IT系统神经中枢
- C4D模型工具—提取样条
- VS2019 安装 ReportViewer报表控件及设计器
- html2canvas.js的api,html2canvas实现js截图
- Android 字符串求值工具(科学计算)
- list去重和list倒叙
- 匈牙利命名法鼻祖---查尔斯·西蒙尼
- 小程序 身份认证服务器,如何实现微信小程序与.net core应用服务端的无状态身份验证...
- 无情的事实--人类曾经被彻底毁灭过
- #2. 小明的成绩单
- 从一线码农到阿里技术合伙人 P11的少林扫地僧多隆,人家牛逼是种习惯
- Word 2016 撰写论文(4): 批量修改MathType公式字体大小
- (一)shell中常用的基础命令