首頁 > 軟體

《進擊吧！Blazor！》第一章 4.資料互動

2021-02-05 23:30:07

《進擊吧！Blazor！》是本人與張善友老師合作的Blazor零基礎入門系列視訊，此係列能讓一個從未接觸過Blazor的程式設計師掌握開發Blazor應用的能力。
視訊地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
演示程式碼：https://github.com/TimChen44/Blazor-ToDo
本系列文章是基於《進擊吧！Blazor！》直播內容編寫，升級.Net5，改進問題，講解更全面。

作者：陳超超
Ant Design Blazor 專案貢獻者，擁有十多年從業經驗，長期基於.Net技術棧進行架構與開發產品的工作，現就職於正泰集團。
郵箱：timchen@live.com
歡迎各位讀者有任何問題聯絡我，我們共同進步。

上一次課程我們完成了ToDo應用的介面製作，這次我們要將使用者端的資料寫入資料庫，並從資料庫中讀物我們需要的資料。

資料互動過程

我們先看一下從使用者端到資料庫的流程

Blazor

Blazor使用者端就是我們上節課做的ToDo程式。

HttpClient

HttpClient就是我們完成網路通訊用的元件，對於這類元件我們希望在一個應用中只構造一次，這樣避免重複分配資源，因此我們在Program.cs中進行註冊。

public class Program
{
    public static async Task Main(string[] args)
    {
        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    }
}

BaseAddress為基地址，這樣我們使用時，Url只需要傳入相對地址即可，此處預設為當前主機的地址。
DefaultRequestHeaders 預設HTTP請求頭引數
Timeout 連線超時引數

  • 依賴關係注入

上面通過服務注入的方式實現了HttpClient全域性共用（單例），那麼如何使用服務？這裡我們就需要引入一下「依賴關係注入 (DI)」的概念。

DI是一種技術，基本原理是把有依賴關係的類放到容器中，解析出這些類的範例，就是依賴注入。應用可通過將內建服務注入元件來使用這些服務。 應用還可定義和註冊自定義服務，並通過 DI 使其在整個應用中可用。

該技術在 Blazor 應用中常用於以下兩個方面：

服務生存期決定了服務何時建立，何時銷燬，有三種模式：

Scoped：Blazor WebAssembly 應用當前沒有 DI 範圍的概念。 已註冊 Scoped 的服務的行為與 Singleton 服務類似。 但是，Blazor Server 託管模型支援 Scoped 生存期。 在 Blazor Server 應用中，Scoped服務註冊的範圍為「連線」。 因此，即使當前意圖是在瀏覽器中執行使用者端，對於範圍應限定為當前使用者的服務來說，首選使用 Scoped 服務。

Singleton：DI 建立服務的單個範例。 需要 Singleton 服務的所有元件都會接收同一服務的範例。

Transient：每當元件從服務容器獲取 Transient 服務的範例時，它都會接收該服務的新範例。

這裡的 HttpClient 使用了 AddScoped 方法，那麼就是當前範圍內使用同一個範例，因為專案是Blazor WebAssembly模式，所以相當於單例服務。

ASP.Net Core

我用ASP.Net Core專案給Blazor應用提供WebAPI介面

官方檔案：https://docs.microsoft.com/zh-cn/aspnet/core

專案結構如下

  • launchSettings.json

這裡設定了我們偵錯的方式，埠等，相對於普通的Web專案多了inspectUri屬性，具有以下作用：

  1. 使 IDE 能夠檢測到該應用為 Blazor WebAssembly 應用。
  2. 指示指令碼偵錯基礎結構通過 Blazor 的偵錯代理連線到瀏覽器。
  3. 已啟動的瀏覽器 (browserInspectUri) 上 WebSocket 協定 (wsProtocol)、主機 (url.hostname)、埠 (url.port) 和檢查器 URI 的預留位置值由框架提供。
{
//省略其他設定
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
//省略其他設定
}
  • Controllers

控制器（Controller）放在這裡，站點的路由表是通過遍歷專案中帶有ApiControllerAttribute（基礎類別ControllerAttribute）的類，然後尋找裡面的方法實現，他和Blazor的路由表建立方法上有點相似。

    [ApiController]
    [Route("api/[controller]/[action]")]
    public class TaskController : ControllerBase

Route定義了路由格式，上例中[controller]/[action]意為使用Controller和action的名稱作為路由地址，這樣寫可以省去每個action上標記路由名字的麻煩。

  • Pages

存放頁面檔案的位置，因為我們的計畫頁面全部使用Blazor構建，所以用不到此資料夾，因此這裡就不做介紹了。

  • appsettings.json

站點的組態檔，我們的專案就用到了資料庫連結字串設定

  • Program.cs

應用的Main函數在這裡，這裡完成了Host的建立與啟動

  • Startup.cs

啟動類，專案啟動時的服務註冊，設定等工作都在此處完成
ConfigureServices使用此方法將服務新增到容器。
Configure使用此方法來設定HTTP請求管道。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//省略其他程式碼
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });
}

app.UseBlazorFrameworkFiles();設定應用程式提供Blazor WebAssembly框架檔案，預設根路徑為/，也可以自定義路徑字首
endpoints.MapControllers();新增控制器（Controller）的路由。
endpoints.MapFallbackToFile("index.html");新增預設路由地址是index.html。

EF Code

所有的資料我們需要儲存入資料庫，這裡我選擇使用EF Core作為我們的資料存取技術

官方檔案：https://docs.microsoft.com/zh-cn/ef/

EF Core部分特點

  • Entity Framework (EF) Core 是輕量化、可延伸、開源和跨平臺版的資料存取技術。
  • EF Core可用作物件關係對映程式 (O/RM)，能讓我們用物件來處理資料庫，使用Linq進行查詢，這樣我們就可以不用編寫大量SQL程式碼了。
  • EF Core 支援多個資料庫引擎，比如MySQL、SQLite等。

他支援採用Code Firs或者Database First兩種模式

  • Code Firs用程式碼編寫物件關係，然後通過它建立資料庫。
  • Database First可以提供現有資料庫，反向生成物件對映 。

Database

資料庫我選擇SQL Server，使用全套微軟技術棧工具鏈使用體驗比較好，當然我們也可以選擇其他資料庫。

SQL Server產品家族中有一個SQL Server LocalDB的東西，它是SQL Server的一個超級精簡版本，安裝包只有幾十MB（安裝好後200+MB），它包含了資料庫的基礎功能，但是不支援聯網，只能本機連線，對於個人開發資源佔用少，強烈推薦，VS安裝Web開發元件會預設安裝此資料庫。

連線時伺服器名稱預設是(localdb)MSSQLLocalDB，也可以使用C:Program FilesMicrosoft SQL Server130ToolsBinnSqlLocalDB.exe進行設定資料庫範例

我們可以使用VS的SQL Server物件資源管理器來檢視我們的資料庫，不過我這裡強烈推薦使用SQL Server Management Studio (SSMS) 的「資料庫關係圖」功能來維護資料庫，視覺化編輯表，主外來鍵關係等，儲存即更新資料庫，這對於資料庫優先的模式下開發非常友好，效率極高。

下圖是我們ToDo應用使用的表結構。

程式碼實戰

上面介紹了資料互動的流程概念，接下來我們改造上回製作的ToDo專案。

引入和設定EF Code

我們先建立一個ToDo.Entity專案用於儲存ORM對映以及EF的Context。

注意：目前VS 16.8.4版本建立類庫會預設使用.net core 3.1，需要手動修改成.net 5

使用EF Core Power Tools工具建立程式碼

因為我們上面已經把資料庫設計完成了，所以我們採用Database First模式建立EF相關的程式碼。

此處推薦一個從資料庫到EF實體的程式碼生成擴充套件EF Core Power Tools

擴充套件下載地址：https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools

選擇要連線的資料庫。

選擇要新增的資料庫物件。

設定Context的名稱和名稱空間等，下圖是我常用設定。

EF Core Power Tools生成的程式碼檔案如下

appsettings.json中新增連結字串

開啟ToDo.Serverappsettings.json新增資料庫連線字串

  "ConnectionStrings": {
    "DefaultConnection": "Data Source=(localdb)MSSQLLocalDB;Initial Catalog=ToDo;Integrated Security=True"
  },

使用EF Core Power Tools生成的TodoContext.cs檔案中就有預設的連線字串，開發時想偷懶可以直接從這裡複製


相關文章

IT145.com E-mail:sddin#qq.com