Blazor 初探
Blazor 初探
目錄
一、新建項目
二、ASP.NET Core Blazor 項目結構
三、結合代碼講解
四、改造
五、配置文件的使用
六、發布到 Linux（CentOS）
題外話，期間遇到個問題
反向代理
七、地址
獨立觀察員 2021 年 4 月 11 日
?
上個月發了篇文章《Blazor 中如何下載文件到瀏覽器》，介紹了調用《下載中轉加速器 VPSDownloader.NET（.NET Core 程序部署到 Linux 系統）》中提到的 VPS 文件中轉下載服務后，如何將下載的文件以?Blazor?的方式傳出到瀏覽器的方法。那么這篇文章就回過頭來，介紹一下本項目（VPSDownloader.NET）使用?Blazor?的過程。
?
一、新建項目
在 VisualStudio 中選擇 “Blazor 應用” 項目模板：
?
填寫項目名稱：
?
選擇 Blazor Server 應用：
?
二、ASP.NET Core Blazor 項目結構
微軟官方文檔：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/project-structure?view=aspnetcore-5.0#blazor-server?
?
項目結構圖示一：
?
項目結構圖示二：
?
Startup.cs 分析：
?
三、結合代碼講解
首先是 Pages 文件夾中的 _Host.cshtml，這個是應用的根頁面，也就是整個網站的完整骨架，@page "/" 指定了路由，表明不帶任何路徑來訪問就是到這個頁面。
?
可以看到它有著完整的 html 結構，非 html 常規標簽的那些一般都是 Razor 組件，其中 body 后緊跟的一行的那個組件就是其它具體頁面將會填充的位置：
?
當然，也不是直接填充過來，而是通過一個 App 組件，分為找到頁面和未找到頁面的情況，找到的頁面默認使用 MainLayout 布局模板：
?
MainLayout.razor 通過使用?@inherits LayoutComponentBase 這個繼承聲明來表明自己布局模板的身份：
?
可以看到整體布局包括側邊菜單欄和右側主內容區，主內容區中又分為放關于按鈕的頂欄以及實際內容區：
?
側邊菜單欄由 NavMenu 組件渲染，菜單項中的導航鏈接是 NavLink 組件：
?
網頁寬度較小時，菜單欄可收縮，控制收縮和展開的邏輯是使用 C# 代碼，寫在 @code {} 塊中，如上圖，效果如下圖：
?
四、改造
首先我們的主頁不需要關于欄，有些邊距也要去掉，所以拷貝 MainLayout 布局模板并改名為 NoPaddingLayout.razor：
?
site.css 中添加一些 CSS 類：
?
然后主頁 Index.razor 通過?@layout NoPaddingLayout 來使用這個布局頁：
?
@inject 就是注入，可參考開頭提到的文章。剩下的就是拷貝之前前端頁面然后修改的，簡要解釋：
?
@xxx 就是綁定值，適用于標簽；@bind="yyy" 就是雙向綁定，適用于輸入框；@οnclick="zzz" 表明點擊時調用 zzz () 方法。
這樣頁面邏輯就不需要使用 JS、Vue 這些的了，直接用 C# 就能完成，是不是很方便呀。
?
首頁效果：
?
五、配置文件的使用
配置文件是 appsettings.json，可以添加自己的配置項，修改監聽地址就是直接加上 urls 配置項，其它地方都不需要修改（不過自動打開瀏覽器功能好像會失效）：
?
在代碼中使用配置項（這里是 IsUseConfigUrl）：
// 引用和注入； @using Microsoft.Extensions.Configuration @inject IConfiguration Configuration// 使用示例； bool.TryParse(Configuration[$"{nameof(IsUseConfigUrl)}"], out bool isUseConfigUrl); IsUseConfigUrl = isUseConfigUrl;?
六、發布到 Linux（CentOS）
項目上右鍵 -- 發布，打開發布頁面，配置目標框架 net5.0，目標運行時 linux-x64 等，點擊發布，發布到本地文件夾：
?
之后就是拷貝到 Linux 機器上，運行相關腳本，腳本在項目中有提供（使用方法以及 Linux 中 .NET 的 運行環境安裝等可參考開頭提到的文章）：
?
題外話，期間遇到個問題
現象一：使用配置文件設置 urls 時，直接運行是正常的，使用 Linux 服務方式啟動則不能正確讀取配置，會使用默認的 localhost:5000。
現象二：直接代碼里寫死 urls，使用服務方式運行，功能是正常的，但是樣式、圖片等都展示不出來：
?
這兩個現象結合起來思考，前者相當于讀取不到目錄下的配置文件，后者相當于讀取不到目錄下的靜態文件，那么很容易想到是程序的運行環境（路徑）不對，于是使用以下方式解決，也就是在啟動腳本（Start.sh）中先 cd 到相應的目錄再運行即可：
?
其實以前我也是習慣這樣寫兩行的，這次不知道為什么抽風了偷懶寫成一行這種，還以為是一樣的呢，害我排查了半天，吸取教訓！
?
反向代理
由于啟動的服務是帶端口的，不方便記憶，也不美觀，于是通過寶塔面板添加個反向代理網站：
?
七、地址
項目地址：https://gitee.com/dlgcy/VPSDownloader.NET/tree/Blog20210411
發行版地址：https://gitee.com/dlgcy/VPSDownloader.NET/releases/Blog20210411
下載器地址：http://vps.dlgcy.com/
總結
- 上一篇： C# 搭建自己的NuGet服务器，上传自
- 下一篇： Asp Net Core 5 REST