Blazor Server项目解读

一、构建项目Blazor Server程序

效果图:

 

 

 打开VS2019,选择“创建新项目”

 

然后,选择“Blazor Server 应用”:

 

点击“下一步”:

 

填写“项目名称”,选择项目保存在的文件夹位置,点击“下一步”:

 

目标框架选择最新的“.Net 5.0”,身份验证选择“无”,点击“创建”:

 

 

这样,第一个Blazor server程序就创建好了,点击工具栏中的运行IIS Express,看看效果:

 

是不是很简单?如果您有云服务器,就可以发布上去了,您就拥有了开发一个网站的能力。

 

二、Blazor Server程序的特点

Blazor Server程序的页面渲染是在服务端,通过SignalR反应到客户端,客户端浏览器无需下载大量的运行环境dll,只下载wwwroot下的有关内容,这样页面反应迅速,但前提是要求网络连接要相对稳定,不能断网。客户端的每次操作,如点击,选择等都会通过网络与服务器进行交互。对于客户端浏览器的处理速度也没有多大关系,性能差一点也可以忍受。Blazor Server服务器要保存每个连接客户端的状态信息,对于服务器内存要求较高。

 

三、Blazor Server 程序的目录结构

  1. wwwroot放了网站的静态资源如css、js、image文件;
  2. Data文件夹存放数据、服务及其他相关类,当然可以放到其他目录;
  3. Page是应用程序的razor页面,当然可以放到其他目录;
  4. Shared文件夹存放公共的razor页面,当然可以放到其他目录;
  5. _import.razor是应用程序引用的命名空间,也不是所有的命名空间都必须要写到里面;
  6. _Host.cshtml是主页加载页面,相当于网站的默认主页index.html;
  7. App.razor是应用程序的启动路由页面,里面规定了默认Layout;
  8. appsetting.json是应用程序的默认配置文件;
  9. program.cs是程序的入口,目的是创建IHostBuilder并启动它;
  10. startup.cs非常重要,里面配置了应用程序的服务类,及需要的功能及中间件,应用程序的核心功能都要通过里面进行配置。

 

1、Startup.cs

 

public void ConfigureServices(IServiceCollection services)

里面配置应用程序需要的服务。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

里面设置应用程序需要的功能、中间件处理管道。

 

2、App.razor

 

App.razor定义了程序的全局路由,当客户端请求路由正确时,则会执行<Found></Found>节点,DefaultLayout="@typeof(MainLayout)"则规定了默认布局模板。当客户端请求路由不正确时,则会执行<NotFound></NotFound>节点在页面输出错误信息“Sorry, there's nothing at this address.”

 

3、_Host.cshtml

 

此文件相当于一般网站的index.html文件,默认加载的页面,里面有razor组件需要装载的位置:

<component type="typeof(App)" render-mode="ServerPrerendered" />

装载App.razor里面的默认Layout:MainLayout.razor,MainLayout.razor又加载了路由为“/”的razor页面,默认是Index.razor页面。

_Host.cshtml页面还可以注入一些代码,来获取一些请求参数,后面我会详细介绍。

 

4、MainLayout.razor

默认建立的MainLayout.razor页面如下:

 

里面的<NavMenu>是一个导航菜单组件,@Body标记是导航页面要加载的位置。从上面运行的效果看,页面左侧是NavMenu导航菜单,右侧上部是一个About连接,下部为页面加载的区域。点击左侧菜单后加载的页面都加载到@Body标记的位置。

 

5、Blazor Server程序的发布

Blazor应用程序需要发布后才能脱离开发环境运行,在vs开发环境中,右键我们建立的FirstBlazorServer项目,点击“发布…”:

 

 

我们点击“文件夹”,下一步,确定您要发布的文件夹位置:

 

 

浏览您要发布的文件夹,点击“完成”:

 

 

发布前,我们要更改几个选项,配置:Release,目标框架:net5.0,部署模式:独立,目标运行时:win-x64,更改好后,点击“发布”按钮。

发布完成后,系统会生成一堆文件,把这一堆文件复制到你的网站上即可运行,是不是很简单?

别忘了您可能需要修改里面的配置文件:appsettings.json,因为此文件有程序运行的一些参数,如:系统运行参数,数据库连接参数等,后面课程会详细介绍。

posted @ 2024-02-20 14:44  搬砖滴  阅读(180)  评论(0编辑  收藏  举报