将 Blazor WASM 作为 Blazor 服务器端运行

Question

问题

Blazor WASM 在开发方面没有缺点的情况下，本可以轻松胜过 Blazor 服务器端。目前，Blazor WASM 不支持功能齐全的调试体验，并且启动速度非常慢。这比使用 Blazor 服务器端更能减慢开发速度。虽然老实说，我个人认为调试体验比启动缓慢更能减慢开发速度。

建议的解决方案

注意：我在其中包含了“建议”一词，因为我不确定此解决方案可能导致的不利因素，因此请随时在下面评论我的答案。

解决方案是简单地创建一个额外的 Blazor 服务器端项目，然后将 Blazor WASM 项目引用到 Blazor 服务器端项目。之后，对 Blazor 服务器端的 Startup 和 _Host.cshtml 添加一些调整，以正确使用 Blazor WASM razor 文件和 wwwroot 文件。有关此解决方案的分步说明，请参阅下面我提出的答案。

简单来说，此解决方案只是添加和配置 Blazor 服务器端项目而不进行任何更改和任何重要的代码重复 Blazor WASM 项目。

Answer 1

我会建议另一种方式。从服务器项目中引用 WASM 项目还有其他缺点，但我个人认为这是一个架构上不优雅的解决方案。

Blazor Server 和 WASM 在一些关键领域有所不同：

1. 身份验证：Blazor 服务器允许您在运行时自定义对特定区域的访问。在 WASM 中，授权一次完成，应用代码完整发送。
2. 数据库可访问：Blazor 服务器允许直接访问 EF 核心实体（因为代码仅在服务器上执行）。在 blazor 中，实际上不可能直接访问任何数据库。也非常不鼓励这样做，因为您将向客户端发送连接字符串。因此，您需要编写一个单独的 Web API 来访问数据。 3.设置文件：你可以在服务器端blazor中拥有尽可能多的设置文件。默认情况下，客户端 blazor 仅加载 appsettings.json。需要一种特殊的机制来包含多个 .json 文件。

因此，对于大多数应用程序（当然还有那些需要数据库访问权限的应用程序），您将无法在 WASM 和服务器端之间共享 100% 的代码库。

你应该这样做：

1. 对于上面提到的几点，（auth，但主要是 db 访问），创建一个数据访问服务依赖项（比如 IDataAccessLayer）。 一种实现将直接访问数据库（用于服务器端） 另一个实现将通过 HttpClient（用于 blazor WASM）访问数据库。

2. 现在，将您的整个应用放入 RCL。称之为“BlazorAppRCL”。这个RCL显然没有Startup.cs和Program.cs

3. 为服务器和客户端特定的数据库访问实现创建一个项目

4. 现在，您有以下一组项目：

对于服务器端： BlazorServer（只有设置 + Program.cs + Startup.cs）。指的是IDataAccessLayer的RCL+Server具体实现

对于托管的 WASM： BlazorWebAPI ：对于数据库访问，它具有访问数据库的 API BlazorClientDAL：IDataAccessLayer 的 WASM 特定实现 BlazorWASM：Blazor WASM 项目 这三个都指您的 BlazorAppRCL。

关键是使用控制模式的DI/反转来解决WASM和Server之间的分歧。 这样，您可以同时拥有 WASM 实例和服务器实例，而代码差异最小。请注意，WASM WebAPI 可以简单地使用服务器端 blazor 的实现 od IDataAccessLayer。因此，除了 API 相关的开销之外，不需要额外的编码。

Answer 2

注意：在此示例中，我使用的是 Visual Studio 2019 16.7.2，模板的版本目前为 3.1.8强>

1. 创建一个 Blazor WASM 项目。 ASP.NET Core Hosted 或 Standalone 选项都可以正常工作，但稍后将讨论它们的不同配置。其余选项不会有任何影响。在此示例中，我将使用 ASP.NET Core Hosted 稍后解释有关拥有 API 控制器的信息。之后还要创建 Blazor 服务器端项目。

---

1. 此时，您的项目结构应该类似于下面的第一个屏幕截图。

   删除 Blazor 服务器端项目中突出显示的项目，如下面的第二个屏幕截图所示。

---

1. 将 Blazor WASM 项目引用到 Blazor 服务器端项目。

   • ASP.NET Core 托管 - 引用 BlazorWasm.Client 和 BlazorWasm.Server 项目。
   • 独立 - 按原样引用单个 Blazor WASM 项目。

---

4. 转到 Blazor 服务器端项目的 Startup 类。在 ConfigureServices() 中，删除 WeatherForecastService 和 BlazorServer.Data 命名空间，然后为 HttpClient 添加服务，以供 Blazor WASM 项目中的 razor 文件使用。

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   注意在生产中，我不建议创建HttpClient 的实例。请改用IHttpClientFactory。访问这篇文章Use IHttpClientFactory to implement resilient HTTP requests。

   对于 ASP.NET Core WASM 项目

   在Configure() 中，映射控制器的端点。这将使用 X.Server/BlazorWasm.Server 项目中的控制器。

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

5. 转到 Blazor 服务器端项目的 /Pages 文件夹中的 _Host.cshtml。将 css/site.css 的引用更改为 css/app.css，因为 Blazor WASM 项目的主 css 文件的文件名不同。

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

6. 最后，更改component 标记的type 属性中的App，并参考Blazor WASM 项目中的App razor 类文件。在此示例中，App 类位于 BlazorWasm.Client 项目中：

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

就是这样！当您运行 Blazor 服务器端项目时，它应该在没有“正在加载...”文本的情况下加载。

• 未对 Blazor WASM 项目进行任何更改，也未进行大量代码重复。
• 唯一需要更改的是引用和launchSettings.json & appsettings.json。
• 至于Startup 中用于 Blazor Server-Side 的配置，您可以在 Blazor WASM 项目中创建扩展方法并在 Blazor Server-Side 项目中使用它们。

注意：老实说，我认为这是理想的（？）仅用于开发期间的调试，因为 WASM razor 文件不会充分利用真正的 Blazor 服务器端的功能，因为它仍会使用HTTP 请求。

---

希望下面的反馈！ :DD