开发人员向我们介绍如何使用Blazor开发框架创建Web应用程序，然后在Firebase上托管该应用程序。
介绍
在本文中，我们将学习如何在Firebase上部署Blazor应用程序。我们将使用Blazor创建一个客户端应用程序并将其托管在Firebase上。此应用程序不具有任何服务器端代码或Web API逻辑。我们将使用Visual Studio 2017来构建和发布应用程序。
先决条件
您需要安装以下先决条件才能创建Blazor应用程序。
- 从此处安装.NET Core 2.1或更高版本的SDK 。
- 从此处安装最新版本的Visual Studio 2017 。
- 从此处安装ASP.NET Core Blazor语言服务扩展。
创建Blazor应用程序
我们将为此演示创建一个基本的计算器应用程序。由于这是一个基本的计算器，它将需要两个操作数，并支持四个算术函数 - 加法，减法，乘法和除法。
打开Visual Studio并选择File >> New >> Project。选择项目后，将打开“新建项目”对话框。从左侧面板中选择Visual C＃菜单中的.NET Core。然后，ASP.NET Core Web Application从可用的项目类型中进行选择。将项目名称设置为SampleCalculator，然后按确定。
单击“确定”后，将打开一个新对话框，要求您选择项目模板。您将在模板窗口的左上角看到两个下拉菜单。从这些下拉列表中选择“.NET Core”和“ASP.NET Core 2.1”。然后，选择“Blazor”模板并按OK。
这将创建您的Blazor应用程序。我们现在将创建我们的计算器组件。
创建计算器组件
对于此应用程序，我们将使用单页组件结构。逻辑和UI将在同一个文件中。
要创建我们的组件，请右键单击该 SampleCalculator/Pages文件夹，然后选择添加>>新项。将打开“添加新项”对话框，要求您从提供的项列表中选择所需的项模板。从左侧面板中选择ASP.NET Core，然后从模板面板中选择Razor View。将文件名设置为Calculator.cshtml，然后单击“添加”。
请参阅以下屏幕截图：
打开Calculator.cshtml文件并将以下代码放入其中：
@page "/calculator"
<h1>Basic Calculator Using Blazor</h1>
<hr />
<div>
<div class="row">
<div class="col-sm-3">
<label class="control-label">First Number</label>
</div>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3">
<label class="control-label">Second Number</label>
</div>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3">
<label class="control-label">Result</label>
</div>
<div class="col-sm-4">
<input readonly class="form-control" bind="@finalResult" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-3">
<button onclick="@AddNumbers" class="btn btn-primary">
Add
(+)
</button>
</div>
<div class="col-md-3">
<button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (?)</button>
</div>
<div class="col-md-3">
<button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>
</div>
<div class="col-md-3">
<button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>
</div>
</div>
</div>
@functions {
double operand1 { get; set; }
double operand2 { get; set; }
string finalResult { get; set; }
void AddNumbers()
{
finalResult = (operand1 + operand2).ToString();
}
void SubtractNumbers()
{
finalResult = (operand1 - operand2).ToString();
}
void MultiplyNumbers()
{
finalResult = (operand1 * operand2).ToString();
}
void DivideNumbers()
{
if (operand2 != 0)
{
finalResult = (operand1 / operand2).ToString();
}
else
{
finalResult = "Cannot Divide by Zero";
}
}
}
在代码的HTML部分，我们定义了两个文本框来读取用户的操作数输入，以及一个文本框来显示算术运算的结果。我们还定义了四个按钮，每个按钮用于每个算术运算。onclick 一旦对两个操作数执行了相应的操作，按钮的 事件将调用将提供输出的方法。
在本 @functions 节中，我们定义了两个属性来绑定到用户输入值，另一个属性用于显示计算结果。为了处理我们的算术运算，我们定义了四个方法，它们将对操作数执行所需的操作，然后设置它的值 finalResult 然后将绑定到UI上的Result字段。
在Shared/NavMenu.cshtml文件中添加此组件的导航链接。按F5运行应用程序，您可以看到如下图所示的输出屏幕：
此应用程序仍处于开发环境中。在Firebase上托管之前，我们需要发布它。
发布Blazor应用程序
右键单击该项目，然后单击“发布”。请参考下图：
您将看到类似于以下屏幕截图的屏幕。从左侧菜单中选择“文件夹”，然后提供文件夹路径。您可以提供要发布应用程序的任何文件夹路径。
点击“发布”。Visual Studio将开始发布您的应用程序。如果没有构建错误，那么您的应用程序将成功发布到您选择的文件夹。
发布成功后，我们将继续在Firebase上托管此应用程序。
在Firebase上添加项目
在Firebase上托管任何应用程序的第一步是在Firebase控制台上添加新项目。
导航到并使用您的Google帐户登录。单击Add Project链接。弹出窗口将打开，如下图所示。提供项目名称，然后单击Create project底部的 按钮。
请注意这里的项目ID。Firebase项目ID是全球唯一的。您可以在创建新项目时编辑项目ID。创建项目后，您无法更改项目ID。在初始化我们的应用程序时，我们将在下一节中使用此项目ID。
使用Firebase进行部署
打开已发布Blazor应用程序的文件夹。在这里，您可以看到文件夹“SampleCalculator”和web.config文件。在“SampleCalculator”中，我们将有另一个名为“dist”的文件夹。我们将发布此“dist”文件夹中的内容。
在“SampleCalculator”文件夹中打开命令提示符/ PowerShell窗口。现在按照下面提到的步骤操作：
第1步：使用Firebase登录
执行以下命令firebase login它将打开一个浏览器窗口并要求您登录Firebase。使用您的Google帐户登录。成功登录后，导航回CLI。
第2步：初始化您的应用程序。
执行以下命令：firebase init此命令将初始化一个firebase项目。您将被问到一组问题。回答如下：
- 你准备好了吗？ - 按Y.
- 您要为此文件夹设置哪些Firebase CLI功能？ - 选择主机
- 为此目录选择默认的Firebase项目 - 如果您在上一部分中添加的项目出现在列表中，请选择它，否则选择“不设置默认项目”。
- 你想用什么作为你的公共目录？ - dist
- 配置为单页应用程序（将所有URL重写为/index.html）？ - Y.
- 文件dist / index.html已经存在。覆盖？ - N.
您将收到“Firebase初始化完成！”消息。
第3步：添加默认项目。
如果您已在步骤2中选择了默认项目，则可以跳过此步骤。
如果您尚未选择默认项目，则需要在此处手动添加。运行以下命令：
firebase use --add yourProjectId
在这种情况下，它将是：
firebase use --add blazorcalc
您将获得一条成功消息，如下所示：“现在使用项目blazorcalc。”
第4步：在Firebase上部署。
最后，运行以下命令在Firebase上部署您的应用程序。
firebase deploy
此命令将在Firebase上部署Blazor应用程序，成功后，它将为您提供托管URL。
上面提到的所有步骤都显示在下面的GIF中：
执行演示
打开托管URL。您可以在浏览器中看到该应用程序，如下图所示：
文章扩展
我们可以按照相同的步骤在Firebase上托管Angular应用程序。
运行以下命令以构建用于托管的Angular应用程序。
ng build --prod
它将在应用程序的根文件夹中创建“dist”文件夹。获得“dist”文件夹后，请按照上述相同步骤操作。
结论
我们学习了如何使用Blazor创建示例计算器应用程序。我们还学习了如何将此应用程序部署到Firebase。