.NET Core Blazor 1-Blazor项目文件分析
.net core blazor 1-blazor项目文件分析
本节内容为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
而对于其他文件的布局是和我们经典的mvc模式一样的。 对于clientside,就类似我们使用asp.net core进行spa应用开发的格式,对于client的页面需要单独的一个项目去村,内部和普通的mvc或者serverside的写法类似,但是需要将中间件的服务修改以及我们的webhost进行修改 随后你需要添加一个server项目用于启动我们的服务,只需要在依赖注入中添加以下配置,中间件中激活我们的blazor即可。 如果我的文章帮助了您,请您在github.netcoreguide项目帮我点一个star,在博客园中点一个关注和推荐。clientside项目文件解析
// 替换为iblazorapplicationbuilder
public void configure(iblazorapplicationbuilder app)
{
//添加根组件
app.addcomponent<app>("app");
}
// 更换webhost
public static iwebassemblyhostbuilder createhostbuilder(string[] args) =>
blazorwebassemblyhost.createdefaultbuilder()
.useblazorstartup<startup>();
services.addresponsecompression(options =>
{
options.mimetypes = responsecompressiondefaults.mimetypes.concat(new[]
{
mediatypenames.application.octet,
wasmmediatypenames.application.wasm,
});
});
// 中间件
app.useblazor<client.startup>();
上一篇: 二十年前王小波曾这样预言今天的VR
下一篇: 集体“上云”混战:金山云联手惠普
推荐阅读
-
【.NET Core项目实战-统一认证平台】第一章 功能及架构分析
-
.NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入
-
解决NET Core发布iis项目覆盖原有的项目时"另一个程序正在使用此文件,进程无法访问"
-
ASP.NET Core Web 项目文件
-
(四)Net Core项目启动文件Startup
-
asp.net core系列 63 领域模型架构 eShopOnWeb项目分析 上
-
探索Asp net core3中的 项目文件、Program.cs和通用host(译)
-
asp.net core系列 62 CQRS架构下Equinox开源项目分析
-
asp.net core项目中如何使用html文件
-
5.ASP.NET Core 项目文件