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