系列文章 基於 abp vNext 和 .NET Core 開發博客項目 - 使用 abp cli 搭建項目 基於 abp vNext 和 .NET Core 開發博客項目 - 給項目瘦身，讓它跑起來 基於 abp vNext 和 .NET Core 開發博客項目 - 完善與美化，Swagger登場 ...
系列文章
- 基於 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 實戰系列（四）
上一篇完成了分類標簽友鏈的列表查詢頁面數據綁定，還剩下一個文章詳情頁的數據沒有綁，現在簡單的解決掉。
文章詳情
之前已經添加了四個參數：year、month、day、name，用來組成我們最終的URL，繼續添加一個參數用來接收API返回的數據。
[Parameter]
public int year { get; set; }
[Parameter]
public int month { get; set; }
[Parameter]
public int day { get; set; }
[Parameter]
public string name { get; set; }
/// <summary>
/// URL
/// </summary>
private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{month}")}/{(day >= 10 ? day.ToString() : $"0{day}")}/{name}/";
/// <summary>
/// 文章詳情數據
/// </summary>
private ServiceResult<PostDetailDto> post;
然後在初始化方法OnInitializedAsync()中請求數據。
/// <summary>
/// 初始化
/// </summary>
protected override async Task OnInitializedAsync()
{
// 獲取數據
post = await Http.GetFromJsonAsync<ServiceResult<PostDetailDto>>($"/blog/post?url={url}");
}
現在拿到了post數據，然後在HTML中綁定即可。
@if (post == null)
{
<Loading />
}
else
{
@if (post.Success)
{
var _post = post.Result;
<article class="post-wrap">
<header class="post-header">
<h1 class="post-title">@_post.Title</h1>
<div class="post-meta">
Author: <a itemprop="author" rel="author" href="javascript:;">@_post.Author</a>
<span class="post-time">
Date: <a href="javascript:;">@_post.CreationTime</a>
</span>
<span class="post-category">
Category:<a href="/category/@_post.Category.DisplayName/">@_post.Category.CategoryName</a>
</span>
</div>
</header>
<div class="post-content" id="content">
@((MarkupString)_post.Html)
</div>
<section class="post-copyright">
<p class="copyright-item">
<span>Author:</span>
<span>@_post.Author</span>
</p>
<p class="copyright-item">
<span>Permalink:</span>
<span><a href="/post@_post.Url">https://meowv.com/post@_post.Url</a></span>
</p>
<p class="copyright-item">
<span>License:</span>
<span>本文采用<a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"> 知識共用 署名-非商業性使用-禁止演繹(CC BY-NC-ND)國際許可協議 </a>進行許可</span>
</p>
</section>
<section class="post-tags">
<div>
<span>Tag(s):</span>
<span class="tag">
@if (_post.Tags.Any())
{
@foreach (var tag in _post.Tags)
{
<a href="/tag/@tag.DisplayName/"># @tag.TagName</a>
}
}
</span>
</div>
<div>
<a @onclick="async () => await Common.BaskAsync()">back</a>
<span>· </span>
<a href="/">home</a>
</div>
</section>
<section class="post-nav">
@if (_post.Previous != null)
{
<a class="prev"
rel="prev"
@onclick="@(async () => await Common.NavigateTo($"/post{_post.Previous.Url}, true))"
href="/post@_post.Previous.Url">@_post.Previous.Title</a>
}
@if (_post.Next != null)
{
<a class="next"
rel="next"
@onclick="@(async () => await Common.NavigateTo($"/post{_post.Next.Url}", true))"
href="/post@_post.Next.Url">
@_post.Next.Title
</a>
}
</section>
</article>
}
else
{
<ErrorTip />
}
}
其中有幾個地方需要註意一下：
我們從post對象中取到的文章內容HTML，直接顯示是不行了，需要將其解析為HTML標簽，需要用到MarkupString。
然後頁面上有一個後退按鈕，這裡我在Common.cs中寫了一個方法來實現。
/// <summary>
/// 後退
/// </summary>
/// <returns></returns>
public async Task BaskAsync()
{
await InvokeAsync("window.history.back");
}
還有就是上一篇和下一篇的問題，將具體的URL傳遞給NavigateTo()方法，然後跳轉過去即可。
在Common.cs中將之前文章創建RenderPage()方法修改成NavigateTo()。這個命名更好一點。
/// <summary>
/// 跳轉指定URL
/// </summary>
/// <param name="uri"></param>
/// <param name="forceLoad">true，繞過路由刷新頁面</param>
/// <returns></returns>
public async Task NavigateTo(string url, bool forceLoad = false)
{
_navigationManager.NavigateTo(url, forceLoad);
await Task.CompletedTask;
}
現在數據算是綁定完了，但是遇到了一個大問題，就是詳情頁面的樣式問題，因為用到了Markdown，所以之前是載入了許多JS文件來處理的。那麼現在肯定行不通了，所以關於詳情頁的樣式問題暫時擱淺，讓我尋找一下好多解決方式。
現在顯示是沒有問題了，就是不太好看，還有關於添加文章的功能，不知道有什麼好的 Markdown 編輯器可以推薦我使用。
到這裡Blazor的前端展示頁面已經全部弄完了，接下來開始寫後臺相關的頁面。
後臺首頁
關於後臺管理的所有頁面都放在Admin文件夾下，在Pages文件夾下新建Admin文件夾，然後先添加兩個組件頁面：Admin.razor、Auth.razor。
Admin.razor為後臺管理的首頁入口，我們在裡面直接添加幾個預知的鏈接並設置其路由。
@page "/admin"
<div class="post-wrap">
<h2 class="post-title">- 博客內容管理 -</h2>
<ul>
<li>
<a href="/admin/post"><h3>
