Erlo

Blazor框架为前端打开的.NET世界大门

时间:2021-01-14   阅读:16次   来源:开源中国
页面报错
点赞

最近在研究Blazor框架,做了些Demo,感觉到了它强大之处,真的不弱于任何JS框架。

首先C#的语言特性,相比JS不知高出多少,而JS要大一点的项目,必然少不了webpack之类的工具,看着都头痛,实在不想接触。说实话,webpack之类的工具应该是JS语言自身的缺点才产生这样的工具,其他的任何一个语言,需要这种打包工具吗?

用Blazor框架,必须用webassembly才有意义,而Blazor Server是依赖 SignalR与服务端进行通信,逻辑脚本还是运行于服务端,并更新DOM。通过webassembly,Blazor可以把整个.NET都带到了浏览器上。

先看一个实例,图片上传前处理,不借助后端,直接在浏览器上处理,实例通过nuget引用了SixLabors.ImageSharp图像处理工具,.NET版本为5.0,如果是3.0则没有<InputFile>组件,通过这个组件我们可以处理本地文件。

@page "/UseFile"
@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Processing
<label class="ant-btn ant-btn-default"><InputFile style="display:none;" OnChange="FileChange"></InputFile>打开图片</label>
<div>
    @if (ImageLoaded)
    {
        <img src="@ImgDataUrl" />
    }
    <br /> @Message
</div>
@code {
    private bool ImageLoaded { get; set; }
    public string Message { get; set; }
    public string ImgDataUrl { get; set; }
    public async Task FileChange(InputFileChangeEventArgs evn)
    {
        try
        {
            //加载图片内容
            var sFile = evn.File.OpenReadStream(1024 * 1024 * 5); //5M限制
            var msInput = new System.IO.MemoryStream();
            await sFile.CopyToAsync(msInput);

            var img = SixLabors.ImageSharp.Image.Load(msInput.ToArray());
            img.Mutate((p) => { p.Resize(200, 200); }); //调整大小
            var fmt = SixLabors.ImageSharp.Formats.Jpeg.JpegFormat.Instance;
            ImgDataUrl = img.ToBase64String(fmt); //data:application/octet-stream;base64, ....
            ImageLoaded = true;
            Message = "图片已处理";
            StateHasChanged();
        }
        catch (Exception err)
        {
            this.Message = err.Message;
        }
    }
}

运行结果:

现在我们真的完全的,仅在浏览器上处理了图像,不发送任何请求到后端。我们看到,实现这一过程,我们需要从nuget上引入SixLabors.ImageSharp并使用它就行了。nuget上还有多少东西可以用,不用我说了吧。

第二个例子,Excel导出,同样在nuget上引用Epplus:

@page "/exportdata"
<h3>导出Excel</h3>
请输入内容:<AntDesign.Input @bind-Value="@Content" style="width:200px;"></AntDesign.Input>
<AntDesign.Button OnClick="ExportToExcel">导出Excel</AntDesign.Button>
<br/>
@if (CanDownload)
{
    <a download="导出结果.xlsx" href="@DataUrl">下载结果</a>
}
@code {
    public string Content { get; set; }

    private bool CanDownload { get; set; } = false;
    private string DataUrl { get; set; }

    public void ExportToExcel()
    {
        using (var pk = new OfficeOpenXml.ExcelPackage())
        {
            var sheet = pk.Workbook.Worksheets.Add("Data");
            sheet.SetValue("A1", Content);
            var msOutput = new System.IO.MemoryStream();
            pk.SaveAs(msOutput);
            DataUrl = "data:application/octet-stream;base64," + Convert.ToBase64String(msOutput.ToArray());
            CanDownload = true;
            StateHasChanged();
        }
    }
}

运行结果:

这是标准的.xlsx文件,可不是csv之类的简单内容输出,完全在浏览器上运行,没有发出任何后端请求。同样,只需在nuget上引入一个东西,然后使用就行了。这些东西通常来说,我们都只能在服务器上运行的,但通过Webassembly和blazor,我们把它们直接搬到浏览器里来了。非常令人兴奋的事情。不可否认,让JS来做这些事情当然也行,但远不如.NET来得舒服。

Blazor真的为前端打开了一个.NET世界的大门。只是,现在还只是刚开始,很多人还没有意识到.NET能给我们带来的东西。加上前端JS的生态目前已经非常丰富,加上很多人对.NET技术一直带着歧视的眼光,Blazor要进入前端站稳脚跟,还要走很长的路。我相信,Blazor要火起来的话,就没JS什么事了。

提交留言

评论留言

还没有评论留言,赶紧来抢楼吧~~

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2021-01-16 08:13:09Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部

    给这篇文章打个标签吧~

    棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认