本节内容为 Blazor 的基本文件
简介
Blazor 是一个使用. NET 技术用于代替 JavaScript/typescript 的前端 web 框架. 在前端开发中使用. NET 语言进行书写逻辑有利于我们的性能, 可靠性和安全性. 并且对于使用. NET 开发人员而言, 全栈的成本更低.
截止文章发布时,.NET Core 已经发布了 3.1 版本, Blazor 已经正式发布了 Server-Side 的框架, 基于 WebAssembly 的 Client-Side 已经进入测试, 预计 2020 年发布. Blazor 实现了 .NET Standard2.0 .
Blazor 你可以简单的理解为使用 C# 写 Angular 框架, Blazor 是基于组件化开发的一款框架, Blazor 的组件和页面通常使用 Razor 标记页的形式进行编码, 因此我们也成为 Razor 组件(.razor), 借助 Razor 引擎, 我们可以将 html 文件和 C# 语法进行切换. 不过对于 Blazor 而言, 它的设计思路和传统 MVC 是完全不同的, 即使他们都使用 Razor 进行页面的开发, Blazor 更倾向于客户端 UI 和逻辑的构成.
Blazor 的运行模式
我们知道, Blazor 目前有两种运行方式, 他们有着很本质的区别, 如下文
Server-Side
Server-Side 也被称为 Blazor 服务器, 它是完全运行于服务器上面, 也就是说客户端的浏览器只是一个空壳页面, 它不包含任何的逻辑和除了首页 (通常会被称为'_Host') 以外的任何页面, 该种模式完全托管于服务器, UI 的修改已经前端所发生的一切事件都需要传往服务器进行计算. 传输的过程使用的是 SignalR 的方式.
使用这种方式意味着对于服务器的带宽以及性能要求会极其之高, 但是对于一些需要使用到 SignalR 的应用以及一些访问量不大的地方使用 SignalR 也许会有不小的用途.
一次点击事件在 websockets 中的传输
并且在无操作的情况下, 网页仍需要定期发送心跳包确认服务器状态, 若服务器无响应, 则整个网页停止服务
ClientSide
Client-Side 是 SPA(Single Page Application)应用, 基于一种叫 WebAssembly 的技术, WebAssembly(wasm)是一个开发的 Web 标准, 它是一种很底层的类似于字节码的东西, WebAssembly 可以通过 JavaScript 访问浏览器的完整功能. 在我们. NET 运行在浏览器之前, Blazor 会提前向浏览器发送一个可以运行在 WebAssembly 上的迷你版本的 mono, 我们知道. NET 中的语言是可以运行在 mono 之上的, 因此我们就等于变相的实现了在浏览器中运行. NET. 并且所有代码都是在 JavaScript 沙盒中运行, 也防御了许多不安全操作.
对于客户端模式, Blazor 是将整个项目程序集和运行时 (mono) 一同发送到了浏览器, 通过 WebAssembly 对 JavaScript 互操作处理 DOM 节点和相关 API 的调用.
两种方式对比
事实上两种方式都有其优缺点, ServerSide 在访问量并不是那么大的时候, 或者说你的服务器足够好的时候, 可以很轻松的完成需要的任务, 并且在网络聊天这种需要保持长期的网络连接的时候, ServerSide 显然是首选, 对于一些博客, 或者一些普通的以页面展示为目的的网站, ClientSide 显然要比 ServerSide 好一些, 但是 ClientSide 有一个致命的缺点, 也就是你的代码质量必须高, 代码需要精简. 因为你的程序集的大小会影响你的加载速度, 因此我们应当尽可能缩小程序集.
ServerSide 项目文件解析
在微软提供的模板上面, 大体上还是和我们的 ASP.NET Core 是接近的. 在依赖注入中, 因为我们利用了 Razor 来实现 C# 和 HTML 的混合编码以及我们使用的是 ServerSide 的 Blazor, 注入代码如下:
- public void ConfigureServices(IServiceCollection services)
- {
- services.AddRazorPages();
- services.AddServerSideBlazor();
- }
中间件如下
- App.UseEndpoints(endpoints =>
- {
- // 匹配我们的 signalR 的连接
- endpoints.MapBlazorHub();
- // 会自动的去 pages / 下寻找
- endpoints.MapFallbackToPage("/_Host");
- });
'_Host.cshtml'中
- <App>
- <component type="typeof(App)" render-mode="ServerPrerendered" />
- </App>
这种方式会自动的去寻找 App 组件作为根组件, 并且还有另一种方式
- <App>
- @(await HTML.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
- </App>
这种方式可以无缝将你的 MVC 或者其他模式下的 ASP.NET Core 应用迁移到 Blazor, 这种方式是设置预渲染, 使用 HTML.RenderComponentAsync() HTML 帮助器预呈现应用程序内容.
而对于其他文件的布局是和我们经典的 MVC 模式一样的.
ClientSide 项目文件解析
对于 ClientSide, 就类似我们使用 ASP.NET Core 进行 SPA 应用开发的格式, 对于 Client 的页面需要单独的一个项目去村, 内部和普通的 mvc 或者 serverside 的写法类似, 但是需要将中间件的服务修改以及我们的 WebHost 进行修改
- // 替换为 IBlazorApplicationBuilder
- public void Configure(IBlazorApplicationBuilder App)
- {
- // 添加根组件
- App.AddComponent<App>("app");
- }
- // 更换 webhost
- public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
- BlazorWebAssemblyHost.CreateDefaultBuilder()
- .UseBlazorStartup<Startup>();
随后你需要添加一个 Server 项目用于启动我们的服务, 只需要在依赖注入中添加以下配置, 中间件中激活我们的 Blazor 即可.
- services.AddResponseCompression(options =>
- {
- options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
- {
- MediaTypeNames.Application.Octet,
- WasmMediaTypeNames.Application.Wasm,
- });
- });
- // 中间件
- App.UseBlazor<Client.Startup>();
如果我的文章帮助了您, 请您在 GitHub.NETCoreGuide 项目帮我点一个 star, 在博客园中点一个关注和推荐.
GitHub https://github.com/StevenEco/.NetCoreGuide
BiliBili 主页 https://space.bilibili.com/33311288
WarrenRyan'sBlog https://blog.tity.xyz/
博客园
来源: https://www.cnblogs.com/WarrenRyan/p/11995553.html