Strapi v4 指南

本教程将向您展示如何将 Meilisearch 与 Strapi 集成，以创建一个基于搜索的 Web 应用程序。首先，您将使用 Strapi 的快速入门指南创建一个餐厅集合，然后使用 Meilisearch 搜索此集合。

• Node.js：活动的 LTS 或维护 LTS 版本，当前 Node.js >=18.0.0 <=20.x.x
• npm >=6.0.0（与 Node.js 一起安装）
• 一个正在运行的 Meilisearch 实例（v >= 1.x）。如果您需要此部分的帮助，可以查阅安装部分。

创建一个名为 my-app 的目录，您将在其中添加应用程序的后端和前端部分。在 my-app 内部使用 Strapi 生成一个后端 API

npx create-strapi-app@latest back --quickstart

此命令在名为 back 的新目录中创建一个 Strapi 应用程序，并打开管理仪表板。创建一个帐户来访问它。

创建帐户后，您应该被重定向到 Strapi 的管理仪表板。您将在其中配置您的后端 API。

下一步是创建一个新的集合类型。集合就像您内容的蓝图——在本例中，它将是一个餐厅集合。您稍后将创建另一个名为“类别”的集合来组织您的餐厅。

要继续操作，请完成 Strapi 快速入门指南中的“B 部分：使用内容类型构建器构建您的数据结构”和“D 部分：使用内容管理器向您的 Strapi Cloud 项目添加内容”中的步骤 2 到 5。这些将包括

• 创建集合类型
• 创建新条目
• 设置角色和权限
• 发布内容

完成 Strapi 快速入门指南的这些步骤后，两个名为 Restaurant 和 Category 的新集合应该已出现在 内容管理器 > 集合类型 下。如果您单击 Restaurant，您会看到只有一个。通过单击仪表板右上角的 + 创建新条目 按钮来添加更多。

逐个添加以下三家餐厅。对于每家餐厅，您都需要按 保存，然后按 发布。

• 名称：The Butter Biscotte
• 描述：一切关于黄油，没有关于健康。

接下来，在页面右下角添加 French food 类别。

• 名称：The Slimy Snail

• 描述：美食由大蒜和黄油制成。

• 类别：French food

• 名称：The Smell of Blue

• 描述：蓝纹奶酪没有过期，它是你吃它的方式。带一点黄油和很多快乐。

• 类别：French food

您的 Strapi 后端现在已启动并运行。Strapi 会自动为您的餐厅集合创建 REST API。查看 Strapi 的文档以获取所有可用的API 端点。

现在，是时候连接 Strapi 和 Meilisearch 并开始搜索了。

要将 Meilisearch 插件添加到 Strapi，您需要先退出 Strapi 应用程序。转到运行 Strapi 的终端窗口，然后按 Ctrl+C 以终止该进程。

接下来，在 back 目录中安装该插件。

npm install strapi-plugin-meilisearch

安装后，您必须重建 Strapi 应用程序，然后再以开发模式再次启动它，因为它使配置更容易。

npm run build
npm run develop

此时，您的 Strapi 应用程序应该再次在默认地址上运行：https://127.0.0.1:1337/admin/。在您的浏览器中打开它。您应该看到一个管理员登录页面。输入您用于创建帐户的凭据。

连接后，您应该在屏幕左侧看到新的 meilisearch 插件。

在 meilisearch 插件页面的“设置”选项卡中添加您的 Meilisearch 凭据。

现在是时候将您的 Strapi 集合添加到 Meilisearch 了。在 meilisearch 插件页面的“集合”选项卡中，您应该看到 restaurant 和 category 内容类型。

通过单击 restaurant 旁边的复选框，该内容类型会自动在 Meilisearch 中索引。

当您单击“集合”选项卡中的 restaurant 复选框时，会出现“Hooked”字样。这意味着每次您在餐厅内容类型中添加、更新或删除条目时，Meilisearch 都会自动更新。

索引完成后，您的餐厅信息就在 Meilisearch 中了。访问 搜索预览，通过搜索“butter”来确认一切正常。

您的 Strapi 条目按原样发送到 Meilisearch。您可以在将其发送到 Meilisearch 之前修改数据，例如删除字段。请查看 strapi-plugin-meilisearch 页面上的所有自定义选项。

本教程向您展示了如何将您的 Strapi 集合添加到 Meilisearch。

在大多数实际场景中，您通常会构建一个自定义搜索界面，并使用 Meilisearch 的 API 获取结果。要了解如何快速构建您自己的前端界面，请查看 前端集成页面指南。