前言
上一章節我們引入BootstrapBlazor UI組件完成了EasySQLite後臺界面的基本架子的搭建，本章節的主要內容是Blazor班級管理頁面編寫和接口對接。
七天.NET 8 操作 SQLite 入門到實戰詳細教程
- 第一天 SQLite 簡介
- 第二天 在 Windows 上配置 SQLite 環境
- 第三天 SQLite 快速入門
- 第四天 EasySQLite 前後端項目框架搭建
- 第五天引入 SQLite-net ORM 並封裝常用方法
- 第六天後端班級管理相關接口完善和Swagger自定義配置
- 第七天BootstrapBlazor UI組件庫引入（1）
EasySQLite 項目源碼地址
Blazor簡介和快速入門
不熟悉Blazor的同學可以先看這篇文章大概瞭解一下。
前端Table頁面和接口對接代碼
主要是常見Table的數據展示、數據添加、數據刪除、數據修改等操作。
@page "/SchoolClass"
@using Entity
@using WebUI.Common
@inject HttpClient _httpClient;
<Table TItem="SchoolClass"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
OnQueryAsync="@OnQueryAsync"
OnDeleteAsync="@OnDeleteAsync"
IsStriped="true"
IsBordered="true"
ShowSearch="true"
IsPagination="true"
ShowSearchText="true">
<TableColumns>
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ClassName" PlaceHolder="請輸入班級名稱" />
<TableColumn @bind-Field="@context.ClassID" IsVisibleWhenAdd="false" IsVisibleWhenEdit="false" />
<TableColumn @bind-Field="@context.CreateTime" IsVisibleWhenAdd="false" IsVisibleWhenEdit="false" />
</TableColumns>
<SearchTemplate>
<GroupBox Title="搜索條件">
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.ClassName" PlaceHolder="請輸入班級名稱" maxlength="50" ShowLabel="true" DisplayText="姓名" />
</div>
</div>
</GroupBox>
</SearchTemplate>
</Table>
@code {
/// <summary>
/// 數據查詢
/// </summary>
/// <param name="options">options</param>
/// <returns></returns>
private async Task<QueryData<SchoolClass>> OnQueryAsync(QueryPageOptions options)
{
var getClass = new List<SchoolClass>();
var getResults = await _httpClient.GetFromJsonAsync<ApiResponse<List<SchoolClass>>>("api/SchoolClass/GetClass").ConfigureAwait(false);
if (getResults.Success)
{
// 數據模糊過濾篩選
if (!string.IsNullOrWhiteSpace(options.SearchText))
{
getClass = getResults.Data.Where(x => x.ClassName.Contains(options.SearchText)).ToList();
}
else
{
getClass = getResults.Data.ToList();
}
}
//假分頁
return await Task.FromResult(new QueryData<SchoolClass>()
{
Items = getClass.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList(),
TotalCount = getClass.Count()
});
}
/// <summary>
/// 模擬數據增加和修改操作
/// </summary>
/// <param name="studentInfo">studentInfo</param>
/// <param name="changedType">changedType</param>
/// <returns></returns>
public async Task<bool> OnSaveAsync(SchoolClass studentInfo, ItemChangedType changedType)
{
if (changedType.ToString() == "Update")
{
var addResult = await _httpClient.PutAsJsonAsync($"api/SchoolClass/UpdateClass/{studentInfo.ClassID}", studentInfo).ConfigureAwait(false);
if (UtilityBusiness.CheckResponse(addResult))
{
return await Task.FromResult(true);
}
else
{
return await Task.FromResult(false);
}
}
else if (changedType.ToString() == "Add")
{
var addResult = await _httpClient.PostAsJsonAsync("api/SchoolClass/CreateClass", studentInfo).ConfigureAwait(false);
if (UtilityBusiness.CheckResponse(addResult))
{
return await Task.FromResult(true);
}
else
{
return await Task.FromResult(false);
}
}
return await Task.FromResult(true);
}
/// <summary>
/// 數據刪除
/// </summary>
/// <param name="items">items</param>
/// <returns></returns>
private async Task<bool> OnDeleteAsync(IEnumerable<SchoolClass> items)
{
var deleteSuccessNum = 0;
var schoolClassList = items.ToList();
foreach (var item in schoolClassList)
{
var delResult = await _httpClient.DeleteAsync($"api/SchoolClass/DeleteClass/{item.ClassID}").ConfigureAwait(false);
if (UtilityBusiness.CheckResponse(delResult))
{
deleteSuccessNum++;
}
}
if (deleteSuccessNum > 0)
{
return await Task.FromResult(true);
}
else
{
return await Task.FromResult(false);
}
}
}
後端API接口
using Entity;
using Microsoft.AspNetCore.Mvc;
using Utility;
namespace WebApi.Controllers
{
/// <summary>
/// 學校班級管理
/// </summary>
[ApiController]
[Route("api/[controller]/[action]")]
public class SchoolClassController : ControllerBase
{
private readonly SQLiteAsyncHelper<SchoolClass> _schoolClassHelper;
/// <summary>
/// 依賴注入
/// </summary>
/// <param name="schoolClassHelper">schoolClassHelper</param>
public SchoolClassController(SQLiteAsyncHelper<SchoolClass> schoolClassHelper)
{
_schoolClassHelper = schoolClassHelper;
}
/// <summary>
/// 班級創建
/// </summary>
/// <param name="schoolClass">創建班級信息</param>
/// <returns></returns>
[HttpPost]
public async Task<ApiResponse<int>> CreateClass([FromBody] SchoolClass schoolClass)
{
try
{
var querySchoolClass = await _schoolClassHelper.QuerySingleAsync(c => c.ClassName == schoolClass.ClassName).ConfigureAwait(false);
if (querySchoolClass != null)
{
return new ApiResponse<int>
{
Success = false,
Message = $"創建班級失敗，班級{schoolClass.ClassName}已存在"
};
}
schoolClass.CreateTime = DateTime.Now;
int insertNumbers = await _schoolClassHelper.InsertAsync(schoolClass);
if (insertNumbers > 0)
{
return new ApiResponse<int>
{
Success = true,
Message = "創建班級成功"
};
}
else
{
return new ApiResponse<int>
{
Success = false,
Message = "創建班級失敗"
};
}
}
catch (Exception ex)
{
return new ApiResponse<int>
{
Success = false,
Message = ex.Message
};
}
}
/// <summary>
/// 獲取所有班級信息
/// </summary>
[HttpGet]
public async Task<ApiResponse<List<SchoolClass>>> GetClass()
{
try
{
var classes = await _schoolClassHelper.QueryAllAsync().ConfigureAwait(false);
return new ApiResponse<List<SchoolClass>>
{
Success = true,
Data = classes
};
}
catch (Exception ex)
{
return new ApiResponse<List<SchoolClass>>
{
Success = false,
Message = ex.Message
};
}
}
/// <summary>
/// 根據班級ID獲取班級信息
/// </summary>
/// <param name="classId">班級ID</param>
/// <returns></returns>
[HttpGet("{classId}")]
public async Task<ApiResponse<SchoolClass>> GetClass(int classId)
{
try
{
var schoolClass = await _schoolClassHelper.QuerySingleAsync(c => c.ClassID == classId).ConfigureAwait(false);
if (schoolClass != null)
{
return new ApiResponse<SchoolClass>
{
Success = true,
Data = schoolClass
};
}
else
{
return new ApiResponse<SchoolClass>
{
Success = false,
Message = "班級不存在"
};
}
}
catch (Exception ex)
{
return new ApiResponse<SchoolClass>
{
Success = false,
Message = ex.Message
};
}
}
/// <summary>
/// 更新班級信息
/// </summary>
/// <param name="classId">班級ID</param>
/// <param name="updatedClass">更新的班級信息</param>
/// <returns></returns>
[HttpPut("{classId}")]
public async Task<ApiResponse<int>> UpdateClass(int classId, [FromBody] SchoolClass updatedClass)
{
try
{
var existingClass = await _schoolClassHelper.QuerySingleAsync(c => c.ClassID == classId).ConfigureAwait(false);
if (existingClass != null)
{
existingClass.ClassName = updatedClass.ClassName;
var updateResult = await _schoolClassHelper.UpdateAsync(existingClass).ConfigureAwait(false);
if (updateResult > 0)
{
return new ApiResponse<int>
{
Success = true,
Message = "班級信息更新成功"
};
}
else
{
return new ApiResponse<int>
{
Success = false,
Message = "班級信息更新失敗"
};
}
}
else
{
return new ApiResponse<int>
{
Success = false,
Message = "班級不存在"
};
}
}
catch (Exception ex)
{
return new ApiResponse<int>
{
Success = false,
Message = ex.Message
};
}
}
/// <summary>
/// 班級刪除
/// </summary>
/// <param name="classId">班級ID</param>
/// <returns></returns>
[HttpDelete("{classId}")]
public async Task<ApiResponse<int>> DeleteClass(int classId)
{
try
{
var deleteResult = await _schoolClassHelper.DeleteAsync(classId).ConfigureAwait(false);
if (deleteResult > 0)
{
return new ApiResponse<int>
{
Success = true,
Message = "班級刪除成功"
};
}
else
{
return new ApiResponse<int>
{
Success = true,
Message = "班級刪除失敗"
};
}
}
catch (Exception ex)
{
return new ApiResponse<int>
{
Success = false,
Message = ex.Message
};
}
}
}
}
接口對接所遇問題及其解決方案
跨源請求 (CORS)問題
在API服務端啓用跨源請求 (CORS)：
調用 UseCors 擴展方法並指定 PolicyCorsName CORS 策略。UseCors 添加 CORS 中間件。對 UseCors 的調用必須放在 UseRouting 之後，但在 UseAuthorization 之前。
Program.cs添加如下代碼（注意中間件順序）
var builder = WebApplication.CreateBuilder(args);
var PolicyCorsName = "EasySQLitePolicy";
builder.Services.AddCors(option =>
{
option.AddPolicy(PolicyCorsName, builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});
var app = builder.Build();
app.UseCors(PolicyCorsName);
app.UseAuthorization();
app.MapControllers();
app.Run();
System.Text.Json 反序列化時間異常問題
異常：
Microsoft.AspNetCore.Components.Web.ErrorBoundary[0]
System.Text.Json.JsonException: The JSON value could not be converted to System.DateTime. Path: $.Data[0].CreateTime | LineNumber: 0 | BytePositionInLine: 113.
---> System.FormatException: The JSON value is not in a supported DateTime format.
at System.Text.Json.ThrowHelper.ThrowFormatException(DataType dataType)
at System.Text.Json.Utf8JsonReader.GetDateTime()
at System.Text.Json.Serialization.Converters.DateTimeConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
異常原因：
System.Text.Json 時間是認標準的. yyyy-MM-ddTHH:mm:ss 中間得有個T
解決方案：
註釋掉服務端對時間日期類型默認格式化處理！
DotNetGuide技術社區交流羣
- DotNetGuide技術社區是一個面向.NET開發者的開源技術社區，旨在爲開發者們提供全面的C#/.NET/.NET Core相關學習資料、技術分享和諮詢、項目框架推薦、求職和招聘資訊、以及解決問題的平臺。
- 在DotNetGuide技術社區中，開發者們可以分享自己的技術文章、項目經驗、學習心得、遇到的疑難技術問題以及解決方案，並且還有機會結識志同道合的開發者。
- 我們致力於構建一個積極向上、和諧友善的.NET技術交流平臺。無論您是初學者還是有豐富經驗的開發者，我們都希望能爲您提供更多的價值和成長機會。
參考文章
- 在 ASP.NET Core 中啓用跨源請求 (CORS)：https://learn.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-8.0