练习 - 在 Azure 应用配置实例中实现配置设置

10 分钟

应用程序的新要求现在规定允许使用特性标志来控制产品的折扣。本练习演示如何进行这一点。

将配置设置添加到 Azure 应用配置实例。
添加代码以使用新设置来折扣产品价格。
生成并测试应用。

将配置设置添加到应用配置存储区

在 Azure 应用配置中，现在创建新的键值对来存储销售折扣百分比。完成以下步骤：

在另一个浏览器选项卡中，使用与 Azure CLI 相同的帐户和目录登录到 Azure 门户。
使用搜索框查找并打开前缀为 eshop-app-features“应用配置”资源。
在 “操作” 部分中，选择 “配置浏览器”。
在顶部菜单中，依次选择“ + 创建 ”和“ 键值”。
在 “密钥 ”文本框中，输入 eShopLite__Store__DiscountPercent。
在 “值 ”文本框中，输入 0.8。
选择 “应用”。

添加代码以使用新配置设置

需要更新产品页才能使用新的配置设置。完成以下步骤：

在 Visual Studio Code 中，打开 Store/Components/Pages/Products.razor 文件。
在 @code 部分中，添加以下变量来存储功能标志的状态：
```
private decimal discountPercentage;  
```

在 OnInitializedAsync 方法中，添加以下代码以检索配置设置的值：

if (saleOn) {
  discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
}

该方法现在应类似于以下代码：

protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();

    if (saleOn) {
      discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
    }
}

上述代码使用 Configuration 对象检索配置设置的值。该值以十进制形式存储在变量中 discountPercentage 。

显示折扣价格

需要更新产品页面才能显示折扣价格。完成以下步骤：

用以下代码替换<td>@product.Price</td>：
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
上述代码检查是否启用了季节性销售。如果启用了季节性销售，则会划掉显示的原始价格，并将折扣价格显示在其下方。如果未启用季节性销售，将显示原始价格。

生成应用

确保已保存所有更改，并且位于 dotnet-feature-flags 目录中。在终端中运行以下命令：
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
使用 docker 运行应用：
```
docker compose up
```

测试价格折扣功能

若要验证功能标志在代码空间中按预期工作，请完成以下步骤：

切换到“ 端口 ”选项卡，然后在前端端口的本地地址右侧，选择地球图标。浏览器将在主页上打开一个新选项卡。
选择 “产品”。

如果在本地使用 Visual Studio Code，请打开 http://localhost:32000/products。

若要测试功能标志是否控制季节性销售，请完成以下步骤：

在 Azure 门户中，导航到前缀为 eshop-app-features“Azure 应用配置”资源。
在“操作”部分中，选择“功能管理器”。
选择已启用 SeasonalDiscount 的切换开关以关闭此功能。
在浏览器中，返回到应用程序。
选择主页，然后选择“ 产品 ”页。

缓存最多可能需要 30 秒才能清除。如果仍显示销售横幅，请等待几秒钟，然后再次刷新页面。