1. 程式人生 > >基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(六)

基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(六)

## 系列文章 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)** --- 上一篇完成了部落格文章詳情頁面的資料展示和基於JWT方式的簡單身份驗證,本篇繼續推進,完成後臺分類管理的所有增刪改查等功能。 ## 分類管理 ![0](https://img2020.cnblogs.com/blog/891843/202006/891843-20200614120830057-679897613.png) 在 Admin 資料夾下新建Razor元件,`Categories.razor`,設定路由,`@page "/admin/categories"`。將具體的展示內容放在元件`AdminLayout`中。 ``` @page "/admin/categories" ``` 在這裡我會將所有分類展示出來,新增、更新、刪除都會放在一個頁面上去完成。 先將列表查出來,新增API的返回引數,`private ServiceResult> categories;`,然後再初始化中去獲取資料。 ```csharp //QueryCategoryForAdminDto.cs namespace Meowv.Blog.BlazorApp.Response.Blog { public class QueryCategoryForAdminDto : QueryCategoryDto { /// /// 主鍵 /// public int Id { get; set; } } } ``` ```csharp /// /// API返回的分類列表資料 ///
private ServiceResult> categories; /// /// 初始化 /// /// protected override async Task OnInitializedAsync() { var token = await Common.GetStorageAsync("token"); Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {token}"); categories = await FetchData(); } /// /// 獲取資料 /// /// private async Task>> FetchData() { return await Http.GetFromJsonAsync>>("/blog/admin/categories"); } ``` 初始化的時候,需要將我們存在`localStorage`中的token讀取出來,因為我們後臺的API都需要新增 `Authorization` Header 請求頭才能成功返回資料。 在Blazor新增請求頭也是比較方便的,直接`Http.DefaultRequestHeaders.Add(...)`即可,要注意的是 token值前面需要加 `Bearer `,跟了一個空格不可以省略。 獲取資料單獨提成了一個方法`FetchData()`,因為會頻繁用到,現在在頁面上將資料繫結進行展示。 ```html @if (categories == null) {
} else {

- Categories -

@if (categories.Success && categories.Result.Any()) { @foreach (var item in categories.Result) {

相關推薦

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - Blazor 實戰系列

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案

基於 abp vNext .NET Core 開發部落專案 - 使用 abp cli 搭建專案

首先,預設咱們已經有了.net core 3.1的開發環境,如果你沒有,快去下載... https://dotnet.microsoft.com/download 由於專案是基於abp vNext開發的,所以開發之前建議去擼一遍abp官方文件,https://docs.abp.io/en/abp/lates

基於 abp vNext .NET Core 開發部落專案 - 給專案瘦身,讓它跑起來

上一篇文章(https://www.cnblogs.com/meowv/p/12896177.html)已經成功建立了部落格專案,但是abp預設給我們引用了許多專案中用不到的元件。 本篇文章將給專案進行瘦身,刪掉對我們來說暫時用不到的元件。講解各個模組之間的關係,寫一個Hello World,讓其成功執行起

基於 abp vNext .NET Core 開發部落專案 - 完善與美化,Swagger登場

上一篇文章(https://www.cnblogs.com/meowv/p/12896898.html)已經成功將部落格專案跑起來了,那麼本篇主要是將之前遺留的問題解決,現在的程式碼看起來可能還是比較混亂,有大量與之無關的程式碼存在裡面,對於強迫症患者來說真的是零容忍。 在程式設計師界,總有一批強迫症患者,

基於 abp vNext .NET Core 開發部落專案 - 資料訪問程式碼優先

上一篇文章(https://www.cnblogs.com/meowv/p/12909558.html)完善了專案中的程式碼,接入了Swagger。本篇主要使用Entity Framework Core完成對資料庫的訪問,以及使用Code-First的方式進行資料遷移,自動建立表結構。 ## 資料訪問 在

基於 abp vNext .NET Core 開發部落專案 - 自定義倉儲之增刪改查

上一篇文章(https://www.cnblogs.com/meowv/p/12913676.html)我們用Code-First的方式建立了部落格所需的實體類,生成了資料庫表,完成了對EF Core的封裝。 本篇說一下自定義倉儲的實現方式,其實在abp框架中已經預設給我們實現了預設的通用(泛型)倉儲,`I

基於 abp vNext .NET Core 開發部落專案 - 統一規範API,包裝返回模型

上一篇文章(https://www.cnblogs.com/meowv/p/12916613.html)使用自定義倉儲完成了簡單的增刪改查案例,有心的同學可以看出,我們的返回引數一塌糊塗,顯得很不友好。 在實際開發過程中,每個公司可能不盡相同,但都大同小異,我們的返回資料都是包裹在一個公共的模型下面的,而不

基於 abp vNext .NET Core 開發部落專案 - 再說Swagger,分組、描述、小綠鎖

在開始本篇正文之前,解決一個 @瘋瘋過 指出的錯誤,再次感謝指正。 ![0](https://img2020.cnblogs.com/blog/891843/202005/891843-20200521140310243-1483710674.png) 步驟如下: * 刪掉`.Domain.Shared

基於 abp vNext .NET Core 開發部落專案 - 接入GitHub,用JWT保護你的API

上一篇文章(https://www.cnblogs.com/meowv/p/12924859.html)再次把Swagger的使用進行了講解,完成了對Swagger的分組、描述和開啟小綠鎖以進行身份的認證授權,那麼本篇就來說說身份認證授權。 開始之前先搞清楚幾個概念,請注意認證與授權是不同的意思,簡單理解:

基於 abp vNext .NET Core 開發部落專案 - 異常處理日誌記錄

在開始之前,我們實現一個之前的遺留問題,這個問題是有人在GitHub Issues(https://github.com/Meowv/Blog/issues/8)上提出來的,就是當我們對Swagger進行分組,實現`IDocumentFilter`介面添加了文件描述資訊後,切換分組時會顯示不屬於當前分組的Ta

基於 abp vNext .NET Core 開發部落專案 - 使用Redis快取資料

上一篇文章(https://www.cnblogs.com/meowv/p/12943699.html)完成了專案的全域性異常處理和日誌記錄。 在日誌記錄中使用的靜態方法有人指出寫法不是很優雅,遂優化一下上一篇中日誌記錄的方法,具體操作如下: 在`.ToolKits`層中新建擴充套件方法`Log4NetE

基於 abp vNext .NET Core 開發部落專案 - 整合Hangfire實現定時任務處理

上一篇文章(https://www.cnblogs.com/meowv/p/12956696.html)成功使用了Redis快取資料,大大提高部落格的響應效能。 接下來,將完成一個任務排程中心,關於定時任務有多種處理方式,如果你的需求比較簡單,比如就是單純的過多少時間迴圈執行某個操作,可以直接使用.net