最终选型 Blazor.Server:又快又稳!

书接上文,昨天我们快速的走了一遍wasm的开发流程(我的『MVP.Blazor』快速创建与部署),总体来说还是很不错的,无论是从技术上,还是从开发上,重点是用C#来开启前端时代,可以开发SPA单页面应用,这个本身就是很奇妙的一件事,因为我有一定的VUE.JS基础,所以入手Blazor.Wasm的话,还是特别快的,可以说是很对脾气的,无论是双向绑定、组件开发、页面模板、生命周期、父子通讯等等等等上,都很契合。

所以说:只要你会ASP.NETCore和Vue(当然其他的也可以)技术,入门Blazor也就一两天的事儿。不过在最后一步——托管和部署的时候,出现了一个小问题,当然,也不是问题,是我没有考虑到的,下边说一下这个小问题。

1、为什么要选择Blazor.Server?

上边我已经说过了,Blazor.Wasm开发起来还是很舒服的,而且也是SPA单页面应用程序,这里先说下两者的区别:

Blazor 技术又分两种:

  • Blazor WebAssembly

  • Blazor Server

Blazor WebAssembly 是真正的SPA,页面的渲染在前端实现,可以实现真正的前后端分离设计。而Blazor.Server可以认为是前者的服务端渲染版本,它使用SignalR实现了客户端的实时通讯,它的计算跟渲染都在服务端处理。

你可以看明白了吧,其实wasm就像是vue那种单页面程序,而Blazor.Server更像是基于前者的一种服务端渲染(注意:和MVC不是一回事),第一次刷新是HTTP请求,平时点击是SignalR处理。

虽然看似wasm有友好,但是部署的时候出现了一个问题,就是它是可以直接在浏览器中执行,就是WebAssembly在浏览器里实现了一个.NET Runtime,所以每次刷新的时候,都会加载全部的资源程序集文件dll:

所以时间会特别慢,尽管做了一些处理:比如官方推荐的PWA技术(可以在客户端缓存部分dll),也做了竞速,然后还有压缩,当然,还有人说可以使用CDN,额,好像开发一个SPA程序做了这么多步骤,显然不是很美味,可能我道行不够吧。

最后,纠结了纠结,还是选择了Blazor.Server,同时也看到上篇文章中,有小伙伴留言,更加速了我转型Server的劲头:

貌似目前blazor wasm的项目加载都非常慢,我还是优先选择blazor server,微软吹在2c4g的服务器上部署blazor server能承载十几万个session,学过Angular用blazor server特别有亲切感,service,component,DI,理念都很一致

是不是看着很心动,那果断用起来,其实我主要是想解决这个刷新很慢的问题。

好啦,正式开始将项目从wasm迁移到blazor.server中。

2、代码迁移

因为昨天已经说过了wasm的创建过程,而且代码也都写好了,特别是.razor页面,几乎都不用做处理,直接copy就行,那我就说说注意点。

1、创建server项目

还是昨天的那个页面,只不过是第一个选项了:

创建完成后,可以看到默认的项目结构,和ASP.NETCore的web项目很像:

简单解释一下:

1、wwwroot:静态资源文件;

2、Data:数据文件(M),定义Model和Service,可以从数据库里获取数据;

3、Pages:视图(V)和逻辑(VM),和wasm一样;

4、Shared:共享组件;

5、_Imports.rzor:命名空间导入;

6、App.razor:项目文件;

7、appsettings.json:配置文件;

8、Program.cs:程序总运行入口;

9、Startup.cs:启动类,做注入和中间件配置;

是不是感觉和ASP.NETCore项目很像,本来就是,看Framworks框架就知道了,反正只要是你玩儿过netcore,昨天对wasm也有一定的了解的话,对项目结构还是比较熟络的,接下来就是开发了。

2、默认示例解析

这次官方给的还是三个例子:事件绑定计数器、数据获取、首页加载。

除了这三个外,有一个需要注意的是,之前我们使用wasm的时候,是一个SPA,需要提供一个index.html文件,作为整个项目的项目承载页面,现在我们使用了server服务端渲染后,就不需要了,转而使用了一个_Host.cshtml的页面,从后缀名可以看出来,其实也和html很像的一个cshtml页面,而不是.razor。

那下边简单说下获取数据FetchData:

之前我们使用wasm的时候,因为是前后端分离,所以使用的是HttpClient来远程获取资源服务器的资源数据,但是现在我们使用了服务端以后,可以自己写业务逻辑了:

比如增删改查,持久化等等逻辑:

正如示例的,定义了一个WeatherForecastService.cs服务,然后注入到页面

@inject WeatherForecastService ForecastService

接着就可以直接使用了:

@code {private WeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts = await ForecastService.GetForecastAsync(DateTime.Now);}
}

但是我今天不打算用这个逻辑,因为我还是想要使用Blog.Core的数据,所以,还是打算使用HttpClient来获取远程数据,而不是自写逻辑。

那下边就开始迁移:

3、代码COPY

为了让大家能看到两个项目,所以我直接在之前的解决方案中,创建一个新项目:

Blog.MVP.Blazor.SSR

将wwwroot资源文件,Common公共类,Models模型,Pages页面,Shared组件等全部拷贝到新项目:

4、修改Data获取方式

因为默认的server采用的是service的方式,我们要使用httpclient的方式,所以需要简单做下修改:

添加nuget包

<PackageReference Include="System.Net.Http.Json" Version="3.2.0" />

命名空间引入_import

@using System.Net.Http.Json

服务注册到容器startup.cs

services.AddSingleton<HttpClient>();

用绝对路径发起api请求

 await Http.GetFromJsonAsync<MessageModel<PageModel<BlogArticle>>>
("http://apk.neters.club/api/Blog?page=1&bcategory=MVP_azure_2020&intPageSize=20");

因为现在是服务端的请求,所以不用配置跨域。

5、调试

之前wasm调试的时候,我们通过console.write(),会把结果打印到浏览器的控制台,

但是现在我们可以直接输出到程序的控制台dos窗口。

两个都很方便。

好啦,到这里我们就迁移完成了,接下来我们就托管部署下吧。

3、新的托管与部署

还记得昨天我们是怎么部署的么?

因为wasm是SPA,所以我们发布后,直接wwwroot部署到nginx,作为一个静态站点即可,就像是部署build后的vue那样。

代码发布

但是Blazor.Server不一样了,毕竟是SSR渲染。我们把项目进行发布,可以看到发布后的文件和之前的ASP.NETCore真的一样,还有.exe可执行文件:

那既然都这么熟悉了,就不用我多说了吧,Linux+PM2+Nginx跨平台流程走起!

Linux部署

我直接写了要给.sh文件,这样在服务器里部署,不用FTP,浪费带宽

git pull;
rm -rf .PublishFiles;
dotnet build;
cd Blog.MVP.Blazor.SSR
dotnet publish -o /home/Blog.MVP.Blazor/Blog.MVP.Blazor.SSR/bin/Debug/netcoreapp3.1/publish;
cp -r /home/Blog.MVP.Blazor/Blog.MVP.Blazor.SSR/bin/Debug/netcoreapp3.1/publish /home/Blog.MVP.Blazor/.PublishFiles;
echo "Successfully!!!! ^ please see the file .PublishFiles";

然后检查无误后,通过pm2守护进程

pm2 start "dotnet Blog.MVP.Blazor.SSR.dll" --name mvp.dll

最后nginx代理

 server {listen 80;server_name mvp.neters.club;rewrite ^(.*)$ https://$host$1 permanent;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root html;index index.html index.htm;}}server {listen 443 ssl;server_name mvp.neters.club; ssl_certificate /etc/nginx/conf.d/1_mvp.neters.club_bundle.crt;ssl_certificate_key /etc/nginx/conf.d/2_mvp.neters.club.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {proxy_pass http://localhost:5050;index index.php index.html index.htm;proxy_set_header   Upgrade $http_upgrade;proxy_set_header   Connection keep-alive;proxy_set_header   Host $host;proxy_cache_bypass $http_upgrade;proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header   X-Forwarded-Proto $scheme;}
}

检查nginx是否正常

nginx -t

重启nginx服务

nginx -s reload

搞定,可以在线查看效果。

5、总结

https://mvp.neters.club/

通过查看重新发布的项目,可以看到速度已经基本能接受了。

总体来说,Blazor.Server简直就是Blazor.Wasm和ASP.NetCore的结合体,当然,说白了就是服务端渲染。

我更喜欢的,还是它的组件开发,

双向绑定、组件开发、组件继承、页面模板、生命周期、父子通讯
很有前端开发那味,当然还有很多其他的亮点知识,等待一起发掘。

打完收工。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[JavaWeb-HTML]HTML标签(大部分常用标签介绍)

标签学习&#xff1a; 1. 文件标签&#xff1a;构成html最基本的标签* html:html文档的根标签* head&#xff1a;头标签。用于指定html文档的一些属性。引入外部的资源* title&#xff1a;标题标签。* body&#xff1a;体标签* <!DOCTYPE html>&#xff1a;html5中定义该…

博客系统知多少:揭秘那些不为人知的学问(三)

点击上方关注“汪宇杰博客”上篇《博客系统知多少&#xff1a;揭秘那些不为人知的学问&#xff08;二&#xff09;》介绍了博客的基本功能设计要点&#xff0c;本篇介绍博客的协议或标准。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众&#xff1f;4. 博客基本功能设计要…

后悔贪心+P2949 [USACO09OPEN]Work Scheduling G

题意&#xff1a; 给你N个任务&#xff0c;每个任务 iii 都有截止日期DiD_{i}Di​和报酬PiP_{i}Pi​&#xff0c;每完成一个工作需要耗费1的单位时间,你需要使所得报酬最大并输出。 题目描述 Farmer John has so very many jobs to do! In order to run the farm efficientl…

[JavaWeb-HTML]HTML标签_表单标签

HTML标签&#xff1a;表单标签 * 表单&#xff1a;* 概念&#xff1a;用于采集用户输入的数据的。用于和服务器进行交互。* form&#xff1a;用于定义表单的。可以定义一个范围&#xff0c;范围代表采集用户数据的范围* 属性&#xff1a;* action&#xff1a;指定提交数据的UR…

Sql Server之旅——第十三站 深入的探讨锁机制

上一篇我只是做了一个堆表让大家初步的认识到锁的痉挛状态&#xff0c;但是在现实世界上并没有这么简单的事情&#xff0c;起码我的表不会没有索引对吧&#xff0c;还有就是我的表一定会有很多的连接过来&#xff0c;10:1的读写&#xff0c;很多码农可能都会遇到类似神乎其神的…

[JavaWeb-CSS]CSS扩展选择器

扩展选择器&#xff1a; 1. 选择所有元素&#xff1a;* 语法&#xff1a; *{}2. 并集选择器&#xff1a;* 选择器1,选择器2{}3.后代选择器祖先元素和后代元素&#xff08;相对的概念&#xff09;后代元素&#xff1a;被包含在祖先元素中的元素。祖先元素&#xff1a;包含后代元…

后端程序员转行前端,强烈推荐这6个前端UI框架,第二款小程序UI框架颜值最高!...

昨天有个同事问我有没有可以直接上手的前端UI框架。那今天就给大家推荐6个简单、视觉体验好的前端框架没吃过猪肉&#xff0c;肯定见过猪跑&#xff01;Jquery Mobiledemo地址&#xff1a;https://demos.jquerymobile.com/1.1.0/教程地址:https://www.codesocang.com/jquerymob…

二分+最大化最小值 River Hopscotch POJ - 3258

题意&#xff1a; 起始有两个石头&#xff0c;位置是000和nnn,在这中间有n个石头&#xff0c;问如何拿走m块石头后&#xff0c;使得他们之间的最小间隔的最大值。 题目&#xff1a; Every year the cows hold an event featuring a peculiar version of hopscotch that invo…

[JavaWeb-JavaScript]JavaScript概念与功能

JavaScript&#xff1a; * 概念&#xff1a; 一门客户端脚本语言* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎* 脚本语言&#xff1a;不需要编译&#xff0c;直接就可以被浏览器解析执行了* 功能&#xff1a;* 可以来增强用户和html页面的交互过程&#x…

Kubernetes引发“军备赛”,K8s真是企业生存的关键吗

导语与许多其他国家一样&#xff0c;英国对云基础架构的需求空前增长。随着学校&#xff0c;办公室&#xff0c;商店和饭店的关闭以应对疫情&#xff0c;云驱动的应用程序应运而生&#xff0c;解决挑战并提供安慰。随着各个年龄段人群的屏幕时间激增&#xff0c;数据中心正努力…

Markdown编译器插入公式的数学符号及字体颜色、背景

文章目录目录插入公式的数学符号Markdown字体颜色、背景markdown表格设置目录 [TOC](目录)[TOC](目录)[TOC](目录) 可以直接生成目录 插入公式的数学符号 可以直接复制用&#xff0c;可以用插入代码&#xff0c;但前后都需加上一个绝对引用符号&#xff08;$) 符号代码xax_{…

[JavaWeb-JavaScript]JavaScript与html结合方式

与html结合方式 1. 内部JS&#xff1a;* 定义<script>&#xff0c;标签体内容就是js代码2. 外部JS&#xff1a;* 定义<script>&#xff0c;通过src属性引入外部的js文件* 注意&#xff1a;1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行…

【新插件发布】AzureAD运维Excel版插件,增删改查快10倍c以上!

在笔者的BI项目开发中&#xff0c;用到了Azure的AzureSQL和AzureAS分析服务&#xff0c;此两大服务&#xff0c;可和AzureAD帐号体系打通。而AzureAD帐号&#xff0c;在其免费功能基础功能上&#xff0c;是免费使用的&#xff0c;随着项目开发上线进入运维阶段&#xff0c;Azur…

数论相关

目录符号整除/同余理论常见符号数论函数常见符号其他常见符号位运算与、或、异或取反左移和右移复合赋值位运算符关于优先级位运算的应用有关 2 的幂的应用取绝对值取两个数的最大/最小值操作一个数的二进制位模拟集合操作快速幂模意义下大整数乘法快速乘高精度快速幂欧拉降幂求…

[JavaWeb-JavaScript]JavaScript注释数据类型

注释 1. 单行注释&#xff1a;//注释内容2. 多行注释&#xff1a;/*注释内容*/数据类型&#xff1a; 1. 原始数据类型(基本数据类型)&#xff1a;1. number&#xff1a;数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)2. string&#xff1a;字符串。 字符串 "…

博客系统知多少:揭秘那些不为人知的学问(二)

点击上方关注“汪宇杰博客”上篇《博客系统知多少&#xff1a;揭秘那些不为人知的学问&#xff08;一&#xff09;》介绍了博客的历史、我的博客故事及博客的受众来源。本篇精彩继续&#xff0c;介绍博客基本功能设计要点。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众…

二分+01分数规划+最大化平均值 Dropping tests POJ - 2976

题意&#xff1a; 给你若n个分数&#xff0c;分子a[i]a[i]a[i],分母b[i]b[i]b[i],使满足公式100⋅∑i1nai∑i1nbi100\cdot\tfrac{\sum_{i1}^{n} a_{i}}{\sum_{i1}^{n} b_{i}}100⋅∑i1n​bi​∑i1n​ai​​&#xff0c;求任意去掉k个分数后&#xff0c;公式结果最大值。 题目…

[JavaWeb-JavaScript]JavaScript变量

变量 * 变量&#xff1a;一小块存储数据的内存空间* Java语言是强类型语言&#xff0c;而JavaScript是弱类型语言。* 强类型&#xff1a;在开辟变量存储空间时&#xff0c;定义了空间将来存储的数据的数据类型。只能存储固定类型的数据* 弱类型&#xff1a;在开辟变量存储空间时…

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

莫比乌斯反演/容斥 +2020ICPC 江西省大学生程序设计竞赛 A Simple Math Problem

题目描述 输入描述: 输出描述: 示例1 输入 3 输出 5 分析&#xff1a; 1.这个题其实考的是一个莫比乌斯反演题&#xff0c;但是由于我知识储备不够&#xff0c;没有看出来&#xff0c;题目给的范围可以瞎搞一下&#xff0c;所以下面容斥可以过。 2.转换一下就是一道经典的…