基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(八)
阿新 • • 發佈:2020-06-17
## 系列文章
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)**
25. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(五)](https://www.cnblogs.com/meowv/p/13096000.html)**
26. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(六)](https://www.cnblogs.com/meowv/p/13124303.html)**
27. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(七)](https://www.cnblogs.com/meowv/p/13124533.html)**
---
上一篇完成了標籤模組和友情連結模組的所有功能,本篇來繼續完成部落格最後的模組,文章的管理。
## 文章列表 & 刪除
![1](https://img2020.cnblogs.com/blog/891843/202006/891843-20200614200844738-638855159.png)
先將分頁查詢的列表給整出來,這塊和首頁的分頁列表是類似的,就是多了個Id欄位。
先新增兩條路由規則。
```csharp
@page "/admin/posts"
@page "/admin/posts/{page:int}"
```
新建返回資料預設`QueryPostForAdminDto.cs`。
```csharp
//QueryPostForAdminDto.cs
using System.Collections.Generic;
namespace Meowv.Blog.BlazorApp.Response.Blog
{
public class QueryPostForAdminDto
{
///
/// 年份
///
public int Year { get; set; }
///
/// Posts
///
public IEnumerable Posts { get; set; }
}
}
//PostBriefForAdminDto.cs
namespace Meowv.Blog.BlazorApp.Response.Blog
{
public class PostBriefForAdminDto : PostBriefDto
{
///
/// 主鍵
///
public int Id { get; set; }
}
}
```
然後新增所需的引數:當前頁碼、限制條數、總頁碼、文章列表返回資料模型。
```csharp
///
/// 當前頁碼
///
[Parameter]
public int? page { get; set; }
///
/// 限制條數
///
private int Limit = 15;
///
/// 總頁碼
///
private int TotalPage;
///
/// 文章列表資料
///
private ServiceResult> posts;
```
然後在初始化函式`OnInitializedAsync()`中呼叫API獲取文章資料.
```csharp
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
var token = await Common.GetStorageAsync("token");
Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {token}");
// 設定預設值
page = page.HasValue ? page : 1;
await RenderPage(page);
}
///
/// 點選頁碼重新渲染資料
///
///
///
private async Task RenderPage(int? page)
{
// 獲取資料
posts = await Http.GetFromJsonAsync>>($"/blog/admin/posts?page={page}&limit={Limit}");
// 計算總頁碼
TotalPage = (int)Math.Ceiling((posts.Result.Total / (double)Limit));
}
```
在初始化中判斷page引數,如果沒有值給他設定一個預設值1。`RenderPage(int? page)`方法是呼叫API返回資料,並計算出總頁碼值。
最後在頁面上進行資料繫結。
```html
@if (posts == null)
{
}
else
{