最近手癢,正好陽性在家,就打算把代碼再撿起來看看,學習下這些年來都有什麼新東西出現。就看到了微軟出的.Net 7 Blazor相關的內容。 走了一遍微軟官方的教程,發現用處不大,(可能是年紀已高,也可能是斷代太久),所以給這段時間立個小目標,從頭開始學習一下這個Blazor。 有關Blazor Se ...
最近手癢,正好陽性在家,就打算把代碼再撿起來看看,學習下這些年來都有什麼新東西出現。就看到了微軟出的.Net 7 Blazor相關的內容。
走了一遍微軟官方的教程,發現用處不大,(可能是年紀已高,也可能是斷代太久),所以給這段時間立個小目標,從頭開始學習一下這個Blazor。
有關Blazor Server 和Web WebAssembly 的區別已經有大把的人在說,就不再贅述(其實對於新手來說,選定一個研究就是了,沒必要糾結)。
準備工作
- 根據自己的操作系統,從官網下載最新版本的 Visual Studio (我的是Mac Arm64 17.4 版本);
- 在Visual Studio安裝程式中,將 Web相關的組件都夠選上(因為我已安裝好,不想卸載重裝,就不羅列具體哪些組件了)
- 等待安裝程式完成更新後,即可。
創建項目
- 打開安裝好的Visual Studio,選擇「新建」
- 依次選擇「Web控制台 -- 應用」-->「ASP.NET Core -- Blazor Server應用空 (C#」,點擊繼續
- 目標框架「.Net 7」,取消勾選「高級:配置HTTPS」,點擊繼續
- 輸入項目名稱(這裡我使用“BlazorServerDemo”),選擇位置文件夾(這裡我使用預設),點擊創建
- Visual Studio 會自動打開項目視窗,點擊上方「調試 -- 開始調試」,此時彈出瀏覽器視窗,並顯示 “Hello World”字樣
- 創建項目完成
項目結構
預設自動創建的項目結構:
- Pages 視圖文件,Razor組件
- _Host.cshtml 實現為 Razor 頁面的應用的根頁面,指定根
App
組件 (App.razor
) 的呈現位置。 - Index.razor Razor組件
- _Host.cshtml 實現為 Razor 頁面的應用的根頁面,指定根
- Properties
- launchSettings.json
- wwwroot 靜態文件
- CSS
- site.css
- CSS
- _Imports.razor 包括要包含在應用組件 (
.razor
) 中的常見 Razor 指令,如用於命名空間的 @using 指令。 - App.razor 應用的根組件,用於使用 Router 組件來設置客戶端路由。 appsettings.json 基本應用參數
- appsettings.Development.json
- MainLayout.razor UI 佈局
- Program.cs 應用的入口點,用於設置 ASP.NET Core 主機 並包含應用的啟動邏輯,其中包括服務註冊和請求處理管道配置
自定義創建的其他目錄:
- Data 嚮應用的組件提供示例數據。
- Shared 包含共用組件和樣式表
總結思考
- .razor 文件是Razor組件文件,內涵描述組件的所有內容(HTML以及對應的邏輯代碼)
- Blazor 相對於其他Web框架而言,比較友好的是可以直接使用C#寫頁面邏輯
- 與當前很多應用較廣泛的前端框架(JS語言)類似的組件編寫風格
- 空白模板相對更適合作為Blazor項目的起點,而不是Blazor Server模板
本文來自博客園,作者:Margin22,轉載請註明原文鏈接:https://www.cnblogs.com/skyler/p/17005644.html
.Net Core QQ群:26555711