使用 Blazor 和 Elasticsearch 构建搜索应用

从向量搜索到强大的 REST API，Elasticsearch 为开发人员提供了最全面的搜索工具包。探索 GitHub 上的示例笔记本，尝试新事物。您也可以立即开始免费试用或在本地运行 Elasticsearch。

在本文中，您将学习如何利用 C# 技能使用 Blazor 和 Elasticsearch 构建搜索应用程序。我们将使用Elasticsearch .NET客户端运行全文、语义和混合搜索查询。

注意如果您熟悉旧版本的 Elasticsearch C# 客户端NEST，请阅读这篇关于 NEST 客户端弃用和新功能的博文。NEST 是上一代的 .NET 客户端，后来被 Elastic.Clients.Elasticsearch package

• 什么是 Blazor？
• 什么是 ESRE？
• 配置 ELSER
• 索引数据
• 建筑应用

什么是 Blazor？

Blazor是微软开发的基于 HTML、CSS 和 C# 的开放源代码网络框架，允许开发人员构建可在客户端或服务器上运行的网络应用程序。Blazor 还允许您制作可重复使用的组件，以更快地构建应用程序；它使开发人员能够在同一个文件中构建 HTML 视图和 C# 操作，这有助于保持代码的可读性和简洁性。此外，有了Blazor Hybrid，您还可以通过.NET代码构建本地移动应用程序，访问本地平台功能。

Blazor 的部分功能使其成为一个非常适合工作的框架：

• 服务器端和客户端渲染选项
• 可重复使用的用户界面组件
• 利用 SignalR 实时更新
• 内置状态管理
• 内置路由系统
• 强大的类型和编译时检查

为什么选择 Blazor？

与其他框架和库相比，Blazor 具有以下优势：它允许开发人员在客户端和服务器代码中使用 C#，提供强大的类型和编译时检查功能，从而提高了可靠性。它与 .NET 生态系统无缝集成，实现了 .NET 库和工具的重用，并提供强大的调试支持。

什么是 ESRE？

Elasticsearch Relevance Engine™ (ESRE)是一套在强大的 Elasticsearch 搜索引擎基础上使用机器学习和人工智能构建搜索应用程序的工具。

要了解有关 ESRE 的更多信息，请点击此处阅读我们的博文。

配置 ELSER

为了充分利用 Elastic 的ESRE功能，我们将使用ELSER作为模型提供者。

请注意，要使用 Elasticsearch 的 ELSER 模型，您必须拥有白金级或企业级许可证，并至少拥有一个 4GB 大小的专用机器学习 (ML) 节点。 点击此处 了解更多信息 。

首先创建推理端点：

如果您是第一次使用 ELSER，在后台加载模型时可能会遇到 502 Bad Gateway 错误。您可以在 Kibana 的Machine Learning > Trained Models 中查看模型的状态。部署完成后，就可以进行下一步。

索引数据

您可以在这里下载数据集，然后使用 Kibana 导入数据。为此，请访问主页并点击"Upload data" 。然后，上传文件并点击Import 。最后，进入Advanced 标签，粘贴以下映射：

我们将创建一个能够运行语义和全文查询的索引。语义文本字段类型将负责数据分块和嵌入。请注意，我们是将 索引longDescription 为semantic_text ， 如果要将一个字段 索引 为semantic_text 和 text` ， 可以使用 copy_to 。

使用 Blazor& Elasticsearch 构建应用程序

API 密钥

我们需要做的第一件事是创建一个 API 密钥，以验证对 Elasticsearch 的请求。API 密钥应为只读，只允许查询books-blazor 索引。

你会看到类似这样的内容：

保存encoded 响应字段的值，以备不时之需。如果您在Elastic Cloud 上运行，还需要您的 Cloud ID。(您可以在此处找到）。

创建 Blazor 项目

首先安装 Blazor，并按照官方说明创建一个示例项目。

创建项目后，文件夹结构和文件应如下所示：

模板应用程序包括Bootstrap v5.1.0用于造型。

安装Elasticsearch .NET客户端，完成项目设置：

完成这一步后，您的页面应该是这样的：

文件夹结构

现在，我们将按如下方式整理文件夹：

文件解释：

• Components/Pages/Search.razor：包含搜索栏、搜索结果和过滤器的主页面。
• Components/Pages/Search.razor.css：页面样式。
• Components/Elasticsearch/SearchBar.razor：搜索栏组件。
• Components/Elasticsearch/Results.razor：结果组件。
• Components/Elasticsearch/Facet.razor: 过滤器组件。
• Components/Svg/GlassIcon.razor: 搜索图标。
• Components/_Imports.razor：这将导入所有组件。
• Models/Book.cs：这将存储图书字段模式。
• Models/Response.cs：这将存储响应模式，包括搜索结果、面和总点击数。
• Services/ElasticsearchService.cs：Elasticsearch 服务。它将处理与 Elasticsearch 的连接和查询。

初始配置

我们先来清理一下。

删除文件：

• Components/Pages/Counter.razor
• Components/Pages/Weather.razor
• Components/Pages/Home.razor
• Components/Layout/NavMenu.razor
• Components/Layout/NavMenu.razor.css

检查/Components/_Imports.razor 文件。您应该有以下进口：

将 Elastic 集成到项目中

现在，让我们导入 Elasticsearch 组件：

我们将从/Components/Layout/MainLayout.razor 文件中删除默认侧边栏，以便为应用程序提供更多空间：

现在让我们输入用户机密的 Elasticsearch 凭据：

使用这种方法，.Net 8 可将敏感数据存储在项目文件夹之外的单独位置，并可通过IConfiguration 界面进行访问。任何使用相同用户秘密的 .Net 项目都可以使用这些变量。

然后，让我们修改Program.cs 文件以读取机密并挂载 Elasticsearch 客户端：

首先，导入必要的库：

• BlazorApp.Services：包含 Elasticsearch 服务。
• Elastic.Clients.Elasticsearch：导入 Elasticsearch 客户端 .Net 8 库。
• Elastic.Transport：导入 Elasticsearch 传输库，它允许我们使用 ApiKey 类来验证请求。

其次，在var app = builder.Build() 行之前插入以下代码：

这段代码将从用户机密中读取 Elasticsearch 凭据，并创建一个 Elasticsearch 客户端实例。

在初始化 ElasticSearch 客户端后，添加以下一行以注册 Elasticsearch 服务：

下一步将在/Services/ElasticsearchService.cs 文件中建立搜索逻辑：

首先，导入必要的库和模型：

其次，添加类ElasticsearchService 、构造函数和变量：

配置搜索

现在，让我们构建搜索逻辑：

• BuildFilters 将使用用户选择的面为搜索查询建立过滤器。
• BuildHybridQuery 将建立一个结合全文和语义搜索的混合搜索查询。

接下来，添加搜索方法：

• SearchBooksAsync该功能将使用混合查询执行搜索，并返回结果，其中包括用于构建切面的聚合。
• FormatFacets：将聚合响应格式化为字典。
• ConvertFacetDictionary：将面字典转换为更易读的格式。

下一步是创建模型，这些模型将代表 Elasticsearch 查询hits 中返回的数据，这些数据将作为结果打印在搜索页面中。

我们首先创建文件/Models/Book.cs 并添加以下内容：

然后，在/Models/Response.cs 文件中设置弹性响应，并添加以下内容：

配置基本用户界面

接下来，添加 SearchBar 组件。在文件/Components/Elasticsearch/SearchBar.razor 中添加以下内容：

该组件包含一个搜索栏和一个执行搜索的按钮。

Blazor 允许在同一文件中使用 C# 代码动态生成 HTML，具有极大的灵活性。

之后，我们将在/Components/Elasticsearch/Results.razor 文件中构建显示搜索结果的结果组件：

最后，我们需要创建面来过滤搜索结果。

注：筛选器允许用户根据特定属性或类别（如产品类型、价格范围或品牌）缩小搜索结果的范围。这些筛选器通常以复选框的形式显示为可点击的选项，帮助用户缩小搜索范围，更轻松地找到相关结果。在 Elasticsearch 的上下文中，面是通过 聚合创建的。

我们在文件/Components/Elasticsearch/Facet.razor 中输入以下代码来设置切面：

该组件从terms 中读取author 、categories 和status 字段的聚合，然后生成一个过滤器列表，发送回 Elasticsearch。

现在，让我们把所有东西放在一起。

在/Components/Pages/Search.razor 文件中：

我们的页面正在运行！

如您所见，该页面功能齐全，但缺乏风格。让我们添加一些 CSS，使其看起来更有条理，反应更灵敏。

让我们开始更换布局样式。在Components/Layout/MainLayout.razor.css 文件中：

在Components/Pages/Search.razor.css 文件中添加搜索页面的样式：

我们的页面开始变得更好看了：

让我们来做最后的润色：

创建以下文件

• Components/Elasticsearch/Facet.razor.css
• Components/Elasticsearch/Results.razor.css

并为Facet.razor.css 添加样式：

供Results.razor.css ：

最终结果

要运行应用程序，可以使用以下命令：

dotnet watch

你做到了现在，您可以使用搜索栏在 Elasticsearch 索引中搜索图书，并按作者、类别和状态过滤结果。

进行全文和语义搜索

默认情况下，我们的应用程序将使用 全文 和 语义搜索 执行 混合 搜索 。您可以通过创建两个独立的方法来改变搜索逻辑，一个用于全文搜索，另一个用于语义搜索，然后根据用户的输入选择一种方法来创建查询。

在/Services/ElasticsearchService.cs 文件中的ElasticsearchService 类中添加以下方法：

这两种方法的工作原理与BuildHybridQuery 方法类似，但它们只进行全文或语义搜索。

您可以修改SearchBooksAsync 方法，使用选定的搜索方法：

您可在此处找到完整的申请表

结论

Blazor 是一个有效的框架，可让您使用 C# 构建网络应用程序。Elasticsearch 是一个功能强大的搜索引擎，可让您构建搜索应用程序。将两者结合起来，您就可以轻松构建强大的搜索应用程序，利用 ESRE 的强大功能在短时间内创建语义搜索体验。

常见问题