首頁>技術>

1、 開發第一個Blazor Server程式

2、 Blazor Server程式的特點

3、 Blazor Server程式的目錄結構

4、 Blazor Server程式的釋出

Blazor 是一個使用 .NET 生成互動式客戶端 Web UI 的框架:

· 使用 C# 代替 JavaScript 來建立豐富的互動式 UI。

· 共享使用 .NET 編寫的伺服器端和客戶端應用邏輯。

· 將 UI 呈現為 HTML 和 CSS,以支援眾多瀏覽器,其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發可提供以下優勢:

· 使用 C# 代替 JavaScript 來編寫程式碼。

· 利用現有的 .NET 庫生態系統。

· 在伺服器和客戶端之間共享應用邏輯。

· 受益於 .NET 的效能、可靠性和安全性。

· 始終高效支援 Windows、Linux 和 macOS 上的 Visual Studio。

· 以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成。

開發第一個Blazor Server程式,效果如下:

準備工作:

1. Visual Studio 2019

2. .NET 5.0

開啟VS2019,選擇“建立新專案”:

然後,選擇“Blazor Server 應用”:

是不是很簡單?如果您有云伺服器,就可以釋出上去了,您就擁有了開發一個網站的能力。

Blazor Server程式的特點:

Blazor Server程式的頁面渲染是在服務端,透過SignalR反應到客戶端,客戶端瀏覽器無需下載大量的執行環境dll,只下載wwwroot下的有關內容,這樣頁面反應迅速,但前提是要求網路連線要相對穩定,不能斷網。

對於客戶端瀏覽器的處理速度也沒有多大關係,效能差一點也可以忍受。

Blazor Server伺服器要儲存每個連線客戶端的狀態資訊,對於伺服器記憶體要求較高。

Blazor Server 程式的目錄結構:

1. wwwroot放了網站的靜態資源如css、js、image檔案;

2. Data資料夾存放資料、服務及其他相關類,當然可以放到其他目錄;

3. Page是應用程式的razor頁面,當然可以放到其他目錄;

4. Shared資料夾存放公共的razor頁面,當然可以放到其他目錄;

5. _import.razor是應用程式引用的名稱空間,也不是所有的名稱空間都必須要寫到裡面;

6. _Host.cshtml是主頁載入頁面,相當於網站的預設主頁index.html;

7. App.razor是應用程式的啟動路由頁面,裡面規定了預設Layout;

8. appsetting.json是應用程式的預設配置檔案;

9. program.cs是程式的入口,目的是建立IHostBuilder並啟動它;

10. startup.cs非常重要,裡面配置了應用程式的服務類,及需要的功能及中介軟體,應用程式的核心功能都要透過裡面進行配置。

Startup.cs:

public void ConfigureServices(IServiceCollection services)

裡面配置應用程式需要的服務。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

裡面設定應用程式需要的功能、中介軟體處理管道。

App.razor:

App.razor定義了程式的全域性路由,當客戶端請求路由正確時,則會執行<Found></Found>節點,DefaultLayout="@typeof(MainLayout)"則規定了預設佈局模板。當客戶端請求路由不正確時,則會執行<NotFound></NotFound>節點在頁面輸出錯誤資訊“Sorry, there's nothing at this address.”

_Host.cshtml

此檔案相當於一般網站的index.html檔案,預設載入的頁面,裡面有razor元件需要裝載的位置:

<component type="typeof(App)" render-mode="ServerPrerendered" />

裝載App.razor裡面的預設Layout:MainLayout.razor,MainLayout.razor又載入了路由為“/”的razor頁面,預設是Index.razor頁面。

_Host.cshtml頁面還可以注入一些程式碼,來獲取一些請求引數,後面我會詳細介紹。

MainLayout.razor

預設建立的MainLayout.razor頁面如下:

Blazor Server程式的釋出:

釋出完成後,系統會生成一堆檔案,把這一堆檔案複製到你的網站上即可執行,是不是很簡單?

別忘了您可能需要修改裡面的配置檔案:appsettings.json,因為此檔案有程式執行的一些引數,如:系統執行引數,資料庫連線引數等,後面課程會詳細介紹。

27
最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 最新Redis高可用總結:Redis主從複製、哨兵叢集、腦裂