基于 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 实战系列(六)相关推荐

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(九) 转载于:https://github.com/Meowv/Blog 终于要接近尾声了,上一篇基本上将文 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八) 转载于:https://github.com/Meowv/Blog 上一篇完成了标签模块和友情链接模块 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七) 转载于:https://github.com/Meowv/Blog 上一篇完成了后台分类模块的所有功能 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五) 转载于:https://github.com/Meowv/Blog 上一篇完成了分类标签友链的列表查询 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的分页查询文章列表 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的主题切换,菜单和 ...

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

    基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二) 转载于:https://github.com/Meowv/Blog 上一篇搭建了 Blazor 项目并 ...

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

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  9. 基于dreamweaver软件设计和开发一网站_基于 abp vNext 和 .NET Core 开发博客项目 Blazor 实战系列(一)...

    系列文章 使用 abp cli 搭建项目 给项目瘦身,让它跑起来 完善与美化,Swagger登场 数据访问和代码优先 自定义仓储之增删改查 统一规范API,包装返回模型 再说Swagger,分组.描述 ...

最新文章

  1. 【CodeForces - 144D】Missile Silos(单源最短路,枚举中间边,枚举情况可能性)
  2. Sqlite3中replace语句用法详解
  3. vant 上传附件后回显_Vue + VantUI Uploader 上传组件, 实现上传功能, 但 手机实时上传照片只回显, 上传不上去 。...
  4. 监视和调整Linux网络协议栈:接收数据
  5. flask的请求与响应
  6. CentOS 6.5 64位 安装zabbix-2.2.0
  7. 分享一个导出数据到 Excel 的类库
  8. 智能告警——企业IT系统神经中枢
  9. C4D模型工具—提取样条
  10. VS2019 安装 ReportViewer报表控件及设计器
  11. html2canvas.js的api,html2canvas实现js截图
  12. Android 字符串求值工具(科学计算)
  13. list去重和list倒叙
  14. 匈牙利命名法鼻祖---查尔斯·西蒙尼
  15. 小程序 身份认证服务器,如何实现微信小程序与.net core应用服务端的无状态身份验证...
  16. 无情的事实--人类曾经被彻底毁灭过
  17. #2. 小明的成绩单
  18. 从一线码农到阿里技术合伙人 P11的少林扫地僧多隆,人家牛逼是种习惯
  19. Word 2016 撰写论文(4): 批量修改MathType公式字体大小
  20. (一)shell中常用的基础命令

热门文章

  1. 重磅推荐《南瓜书》:周志华《机器学习》的代码实现
  2. 搜索推荐炼丹笔记:评论是怎么影响推荐的?
  3. 艾瑞发布2018视频云行业报告,网易云信领跑第一阵营
  4. Extjs grid选中一条记录Ajax访问后台
  5. JEESZ-SSO解决方案
  6. Django 02 url路由配置及渲染方式
  7. 简便方法创建自签名证书
  8. WebTrends Log Analyzer
  9. Asp.Net中的MapPath目录问题
  10. 王者服务器维护宝箱礼包都没领,王者荣耀:S19战令最后一天,还没领取奖励的玩家要注意了...