系列文章
- 基于 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 實戰系列（六）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（七）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（八）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（九）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 終結篇之發布專案
上一篇完成了后臺分類模塊的所有功能，本篇繼續將標簽模塊和友情鏈接模塊的增刪改查完成，
標簽管理
實作方式和之前的分類管理是一樣的，在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 class="post-wrap tags">
<h2 class="post-title">- Tags -</h2>
@if (tags.Success && tags.Result.Any())
{
<div class="categories-card">
@foreach (var item in tags.Result)
{
<div class="card-item">
<div class="categories">
<NavLink title="?洗掉" @onclick="@(async () => await DeleteAsync(item.Id))">?</NavLink>
<NavLink title="??編輯" @onclick="@(() => ShowBox(item))">??</NavLink>
<NavLink target="_blank" href=https://www.cnblogs.com/meowv/p/"@($"/tag/{item.DisplayName}")">
@item.TagName
(@item.Count)
