提到 Blazor,没准就会有人问:选用 Server 端还是 WebAssembly(客户端)?其实这个不用纠结,老周个人的原则是:Server 端优先。理由很单纯:服务器端虽然消耗服务器上的资源,但加载速度快,而且不用下载组件(几个脚本也不大)。其实嘛,Web 应用都是消耗服务器资源的,不然要服务器干吗呢。

那啥时候选用 Web Assembly 呢?应该在交互比较繁复时。比如,你开发了个游戏,叫《国民 996》,这样的话选用客户端是比较合适。

======================================================================

Du Du, Stop!题外话结束。今天要说的话题是服务器端的 Blazor应用方面的。各位估计都玩过 Blazor 了,在加载组件的 HTML 文档中,通常会在 <head> 元素下指定一个应用程序的基础路径,也就是 Base Path。就像这样:

<head>
<base href="/" />
</head>

然后,<body>里面的脚本导入就会相对于上面指定的路径。

    <script src="_framework/blazor.server.js"></script>

在 99.996% 的场合中,你只需要为应用程序指定“/”作为基础路径就可以了。当浏览器发来请求时,服务器就会从根路径开始匹配 URL 路由,然后定位到目标组件并加载。

但是,在 0.004% 的场合中,这个<base>元素可能要加上一个前缀。比如:/demo。那什么场合呢?Duang,来了:

1)ASP.NET Core(Blazor)应用程序绑定本机地址运行,如著名的 localhost:5000;

2)使用其他服务器组件来反向代理,世界闻名的有 爱爱S、阿Pache,ng拽nx之类。

3)IIS、nginx等上面配置了路径前缀。

以 nginx 为例,假设有这样的配置:

    server {
listen 80;
…… location / {
root html;
index index.html index.htm;
}
location
/blazapp/ {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Connection "Upgrade";
}

如果访问根路径 / ,那么指向 index.html 等文件;若访问 /blazapp 前缀打头的路径才指向我的 Blazor 应用。 proxy_xxx 配置的转发规则会把这个路径前缀也转发给 ASP.NET Core 应用进程,所以,这时候,咱们用来加载 blazor 组件的HTML文档就要这样写 <base> 了。

<head>
<base href="/blazapp" />
</head>

看,这个 Base Path 就是这么用的。

注意 blazor 组件的代码是不需要改动的,比如这个叫 home 的组件。

@page "/home"

<h3>豆腐小镇欢迎您</h3>

@page 指令后面的URL不需要添加前缀。

但,Startup 类里面的 Configure 方法里面的代码就要做点手脚了。

1)调用 UseForwardedHeaders 方法。这个与 blazor 关系不大,使用反向代理的话都应该调用,以让应用程序读取转发的头;

2)调用 UsePathBase 方法,设置的路径前缀要和前面 nginx 中配置的一致。这一句是重点,它的作用是把传入应用程序的URL中的前缀去掉。

例子:

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseForwardedHeaders();
app.UsePathBase("/blazapp"); if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
} app.UseStaticFiles(); //这句别忘了
app.UseRouting(); app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/Host");
});
}

这时候,从浏览器中访问 http://localhost/blazapp/home,组件就显示出来了。

当从浏览器发出请求 localhost/blazapp/home 时,nginx 会把路径 /blazapp/home 转发给 ASP.NET Core 应用程序。

ASP.NET Core 应用程序收到消息后,由于调用了 app.UsePathBase("/blazapp"),自动把 /blazapp 这一段砍掉了,于是,传给 Routing 的 URL 又恢复到 /home,所以,我们写的 blazor 组件是不用去改路径规则的。

Web Assembly 应用也能使用这个 Base Path 设置,不过用处不是很大,除非你一个服务器应用承载多个 webasm 应用。同时下载多个 webasm 应用也用得不多。如果确实要这样做,那么你的 Host 项目就要引用多个 webasm 项目,假设叫 app1、app2。这种方案你必须为每个 web asm 的项目文件(.csproj)加上 StaticWebAssetBasePath 节点。

例如,app1 应用的项目文件加上:

    <StaticWebAssetBasePath>/path01</StaticWebAssetBasePath>

app2 应用的项目文件里加上:

    <StaticWebAssetBasePath>/path02</StaticWebAssetBasePath>

如果不这样做,是无法编译的,因为 Webassembly 应用默认的路径前缀是“/”,如果你的 Host 程序引用了 N 个 Web Assembly 应用,那么就等于用一个“/”指向多个项目,这就冲突了,所以要在项目文件中加上 StaticWebAssetBasePath 配置,以解决此问题。StaticWebAssetBasePath 指定的是逻辑路径,并不要求真的存在这个目录(为了解决冲突用),你的项目文件可以放在名为 sb01、sb02 的目录下。

【ASP.NET Core】Blazor 服务器端的 Base Path的更多相关文章

  1. 学习ASP.NET Core Blazor编程系列九——服务器端校验

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  2. 学习ASP.NET Core Blazor编程系列十——路由(中)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  3. ASP.NET Core Blazor 初探之 Blazor Server

    上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...

  4. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  5. 022年9月12日 学习ASP.NET Core Blazor编程系列三——实体

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  6. 学习ASP.NET Core Blazor编程系列十——路由(上)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  7. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

  8. [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本

    前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...

  9. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

随机推荐

  1. 痞子衡嵌入式:了解i.MXRT1060系列ROM中串行NOR Flash启动初始化流程优化点

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1060系列ROM中串行NOR Flash启动初始化流程优化点. 前段时间痞子衡写了一篇 <深入i.MXRT1050系 ...

  2. 团队作业6(B)-事后诸葛亮分析

    白给团队e-shop项目Postmortem结果 (整理:政B) 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚? 答:主要是为商户和消费者提供一个网上交易商品的平台,定义明确. 2.我们 ...

  3. C#实例化对象的三种方式及性能对比

    前言 做项目过程中有个需求要实例化两万个对象并添加到List中,这个过程大概需要1min才能加载完(传参较多),于是开启了代码优化之旅,再此记录. 首先想到的是可能实例化比较耗时,于是开始对每种实例化 ...

  4. OI学习过程记录

    这帖子本来是教练为了给低年级学生分享经验而让我写的学习经历,不过等我退役之后可能就变成回忆录了. 初三 WC 前:上了正睿的线上课程,练了一些模拟赛,同时也正在学文化课. 然后,莫名奇妙1膜考了全校前 ...

  5. 短视频去水印v1.0(还支持74个平台)

    软件介绍: 一款很好用的短视频去水印软件,支持74个平台无水印解析,还支持批量视频解析只需要输入账号主页链接就可以了哦,快来下载试试吧!   软件版本:1.0   支持系统:安卓   软件大小:22. ...

  6. NSMutableArray 的实现原理

    一.普通C语言的数组实现: 是开辟一段连续的内存空间,缺点:在插入下标为0的元素,会移动其他所有元素.添加,插入,删除同理.           当数组非常大时,这样很快会成为问题.     二.OC ...

  7. git 上传 + 分支

    Git   上传 创建本地文件夹,更改为项目仓库(test) (1) 新建文件夹   test (2) 打开文件夹   git init 把项目添加到仓库内(test) (1) 复制项目到文件夹内 ( ...

  8. angular 8 表单带文件上传接口

    <div id="homework"> <form (ngSubmit)="doSubmit()" enctype="multipa ...

  9. Getting unknown property: common\models\Teacher::auth_Key

    找了一个半小时,不知道为什么会缺少这个属性,数据库里面的字段明明都是有的. 然后随后找到了原因,是因为key中的k大写了,所以无法识别这个属性.把自己坑到了,以此为戒,以后多注意细节问题

  10. Helm 带你飞

    文章目录 目录 文章目录 在没使用 Helm之前,向 K8S部署应用,我们要依次部署 deployment. svc 等,步骤较繁琐.况且随着很多项目微服务化,复杂的应用在容器中部署以及管理显得较为复 ...