基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(五)
阿新 • • 發佈:2020-06-13
## 系列文章
1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)**
2. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 給專案瘦身,讓它跑起來](https://www.cnblogs.com/meowv/p/12896898.html)**
3. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 完善與美化,Swagger登場](https://www.cnblogs.com/meowv/p/12909558.html)**
4. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 資料訪問和程式碼優先](https://www.cnblogs.com/meowv/p/12913676.html)**
5. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查](https://www.cnblogs.com/meowv/p/12916613.html)**
6. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 統一規範API,包裝返回模型](https://www.cnblogs.com/meowv/p/12924409.html)**
7. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 再說Swagger,分組、描述、小綠鎖](https://www.cnblogs.com/meowv/p/12924859.html)**
8. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub,用JWT保護你的API](https://www.cnblogs.com/meowv/p/12935693.html)**
9. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 異常處理和日誌記錄](https://www.cnblogs.com/meowv/p/12943699.html)**
10. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用Redis快取資料](https://www.cnblogs.com/meowv/p/12956696.html)**
11. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 整合Hangfire實現定時任務處理](https://www.cnblogs.com/meowv/p/12961014.html)**
12. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 用AutoMapper搞定物件對映](https://www.cnblogs.com/meowv/p/12966092.html)**
13. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(一)](https://www.cnblogs.com/meowv/p/12971041.html)**
14. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(二)](https://www.cnblogs.com/meowv/p/12974439.html)**
15. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(三)](https://www.cnblogs.com/meowv/p/12980301.html)**
16. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(一)](https://www.cnblogs.com/meowv/p/12987623.html)**
17. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(二)](https://www.cnblogs.com/meowv/p/12994914.html)**
18. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(三)](https://www.cnblogs.com/meowv/p/13039883.html)**
19. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(四)](https://www.cnblogs.com/meowv/p/13043084.html)**
20. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(五)](https://www.cnblogs.com/meowv/p/13046603.html)**
21. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(一)](https://www.cnblogs.com/meowv/p/13061975.html)**
22. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(二)](https://www.cnblogs.com/meowv/p/13065295.html)**
23. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(三)](https://www.cnblogs.com/meowv/p/13081035.html)**
24. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(四)](https://www.cnblogs.com/meowv/p/13088303.html)**
---
上一篇完成了分類標籤友鏈的列表查詢頁面資料繫結,還剩下一個文章詳情頁的資料沒有綁,現在簡單的解決掉。
## 文章詳情
之前已經添加了四個引數:year、month、day、name,用來組成我們最終的URL,繼續新增一個引數用來接收API返回的資料。
```csharp
[Parameter]
public int year { get; set; }
[Parameter]
public int month { get; set; }
[Parameter]
public int day { get; set; }
[Parameter]
public string name { get; set; }
///
/// URL
///
private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{month}")}/{(day >= 10 ? day.ToString() : $"0{day}")}/{name}/";
///
/// 文章詳情資料
///
private ServiceResult post;
```
然後在初始化方法`OnInitializedAsync()`中請求資料。
```csharp
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// 獲取資料
post = await Http.GetFromJsonAsync>($"/blog/post?url={url}");
}
```
現在拿到了post資料,然後在HTML中繫結即可。
```html
@if (post == null)
{
}
else
{
@if (post.Success)
{
var _post = post.Result;
@((MarkupString)_post.Html)
}
else
{
}
}
```
其中有幾個地方需要注意一下:
我們從post物件中取到的文章內容HTML,直接顯示是不行了,需要將其解析為HTML標籤,需要用到`MarkupString`。
然後頁面上有一個後退按鈕,這裡我在`Common.cs`中寫了一個方法來實現。
```csharp
///
/// 後退
///
///
public async Task BaskAsync()
{
await InvokeAsync("window.history.back");
}
```
還有就是上一篇和下一篇的問題,將具體的URL傳遞給`NavigateTo()`方法,然後跳轉過去即可。
在`Common.cs`中將之前文章建立`RenderPage()`方法修改成`NavigateTo()`。這個命名更好一點。
```csharp
///
/// 跳轉指定URL
///
///
/// true,繞過路由重新整理頁面
///
public async Task NavigateTo(string url, bool forceLoad = false)
{
_navigationManager.NavigateTo(url, forceLoad);
await Task.CompletedTask;
}
```
現在資料算是繫結完了,但是遇到了一個大問題,就是詳情頁面的樣式問題,因為用到了Markdown,所以之前是載入了許多JS檔案來處理的。那麼現在肯定行不通了,所以關於詳情頁的樣式問題暫時擱淺,讓我尋找一下好多解決方式。
現在顯示是沒有問題了,就是不太好看,還有關於新增文章的功能,不知道有什麼好的 Markdown 編輯器可以推薦我使用。
![1](https://img2020.cnblogs.com/blog/891843/202006/891843-20200611205625058-211827502.png)
到這裡Blazor的前端展示頁面已經全部弄完了,接下來開始寫後臺相關的頁面。
## 後臺首頁
關於後臺管理的所有頁面都放在Admin資料夾下,在Pages資料夾下新建Admin資料夾,然後先新增兩個元件頁面:`Admin.razor`、`Auth.razor`。
`Admin.razor`為後臺管理的首頁入口,我們在裡面直接新增幾個預知的連結並設定其路由。
```html
@page "/admin"
@_post.Title
Author: @_post.Author Date: @_post.CreationTime Category:@_post.Category.CategoryNameAuthor: @_post.Author
Permalink: https://meowv.com/post@_post.Url
License: 本文采用 知識共享 署名-非商業性使用-禁止演繹(CC BY-NC-ND)國際許可協議 進行許可