使用 WASM 和服务器端创建相同的 Blazor 应用程序

Question

我想创建一个支持托管 WASM 和服务器端的 blazor 应用程序（实际上是两个应用程序）。它们不需要是动态切换的单个应用程序。实际上，我更喜欢两个独立的应用程序，例如 wasm.myapp.com 和 server.myapp.com。用户可以根据自己的网络环境选择自己喜欢的风格。同样根据业务需求，我可以针对不同的场景（例如浏览器限制）选择一种风格而不是另一种风格。

无论如何，是否可以创建两个共享相同组件的应用程序？一个应用程序是引用另一个应用程序的 shell（反之亦然），还是引用第三个项目的两个 shell 应用程序？基本上，目标是创建一组由两个应用程序共享的 UI 组件/页面。

你如何设置它？

感谢您的任何提示。

Answer 1

您需要将代码拆分为一组库项目和端点 Web 项目。对此问题提供全面的答案超出了 StackOverflow 答案的范围。我将在此处展示基础知识，并使用一些项目屏幕截图来显示项目结构和内容，并在底部的 GitHub 存储库中提供详细代码的链接。

图书馆

Blazor.App包含所有共享代码。我将其分为三个项目来应用清洁设计原则，因此我有：

• Blazor.Core - 标准库项目
• Blazor.Data - 标准库项目 - 对Core的依赖
• Blazor.UI - Razor 库项目 - 对Core 的依赖

Blazor服务器

Blazor.Server.Web项目是运行 Blazor 服务器应用程序的端点项目。对核心、数据和UI 的依赖。

Blazor WASM

• Blazor.WASM是一个 Blazor WebAssembly 项目，用于构建 WASM 代码库 - 对核心、数据和UI 的依赖。

• Blazor.WASM.Web是一个 AspNetCore Web 服务器，用于托管 WASM 应用程序的 API 和服务点 - 依赖于核心、数据和控制器。

• Blazor.Controllers包含控制器 - 对Core和Data 的依赖。

这两个应用程序之间的主要区别在于数据管道。接口用于定义数据代理以提供抽象。服务器项目使用服务器数据代理。WASM 服务器 API 控制器使用服务器数据代理，而 WASM 应用程序使用 API 数据代理。不同的项目将相关的数据代理加载为IDataBroker服务。

以下是不同项目的一组屏幕截图：

控制器

核

数据

用户界面

服务器网络

WASM

WASM.Web

回购链接 - https://github.com/ShaunCurtis/Blazr.Demo