开发第一个Blazor Server程序 开发第一个java程序

1、 开发第一个Blazor Server程序

2、 Blazor Server程序的特点

3、 Blazor Server程序的目录结构

4、 Blazor Server程序的发布

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

· 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。

· 共享使用 .NET 编写的服务器端和客户端应用逻辑。

· 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

· 使用 C# 代替 JavaScript 来编写代码。

· 利用现有的 .NET 库生态系统。

· 在服务器和客户端之间共享应用逻辑。

· 受益于 .NET 的性能、可靠性和安全性。

· 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

· 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

开发第一个Blazor Server程序，效果如下：

准备工作：

1. Visual Studio 2019

2. .NET 5.0

打开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非常重要，里面配置了应用程序的服务类，及需要的功能及中间件，应用程序的核心功能都要通过里面进行配置。

Startup.cs：

public void ConfigureServices(IServiceCollection services)

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

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

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

App.razor：

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

_Host.cshtml

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

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

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

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

MainLayout.razor

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

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

Blazor Server程序的发布：

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

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

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

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

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

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