Blazor 初探
dotNET跨平台 今天
以下文章来源于独立观察员博客 ，作者独立观察员DLGCY
独立观察员博客独立观察员·博客 http://dlgcy.com/ 的微信订阅号。
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" 就是双向绑定，适用于输入框；@onclick="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/
分享此内容的人还喜欢