基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来
基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化,Swagger登场
基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查
基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API,包装返回模型
基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger,分组、描述、小绿锁
基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub,用JWT保护你的API
基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据
基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(一)
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(二)
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(三)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(一)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(二)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(三)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(一)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)
上一篇完成了后台分类模块的所有功能,本篇继续将标签模块和友情链接模块的增删改查完成。
标签管理实现方式和之前的分类管理是一样的,在Admin文件夹下面添加Tags.razor组件,设置路由@page "/admin/tags"。
同样的内容也需要放在AdminLayout组件下面,添加几个参数:弹窗状态bool Open、新增或更新时标签字段string tagName, displayName、更新时的标签Idint id、API返回的标签列表接收参数ServiceResult<IEnumerable<QueryTagForAdminDto>> tags。
/// <summary> /// 默认隐藏Box /// </summary> private bool Open { get; set; } = false; /// <summary> /// 新增或者更新时候的标签字段值 /// </summary> private string tagName, displayName; /// <summary> /// 更新标签的Id值 /// </summary> private int id; /// <summary> /// API返回的标签列表数据 /// </summary> private ServiceResult<IEnumerable<QueryTagForAdminDto>> tags; //QueryTagForAdminDto.cs namespace Meowv.Blog.BlazorApp.Response.Blog { public class QueryTagForAdminDto : QueryTagDto { /// <summary> /// 主键 /// </summary> public int Id { get; set; } } }在初始化方法OnInitializedAsync()中获取数据。
/// <summary> /// 初始化 /// </summary> /// <returns></returns> protected override async Task OnInitializedAsync() { var token = await Common.GetStorageAsync("token"); Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {token}"); tags = await FetchData(); } /// <summary> /// 获取数据 /// </summary> /// <returns></returns> private async Task<ServiceResult<IEnumerable<QueryTagForAdminDto>>> FetchData() { return await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryTagForAdminDto>>>("/blog/admin/tags"); }注意需要设置请求头,进行授权访问,然后页面上绑定数据。
<AdminLayout> @if (tags == null) { <Loading /> } else { <div> <h2>- Tags -</h2> @if (tags.Success && tags.Result.Any()) { <div> @foreach (var item in tags.Result) { <div> <div> <NavLink title="❌删除" @onclick="@(async () => await DeleteAsync(item.Id))">❌</NavLink> <NavLink title="