本教程将向您展示如何将 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)。如果您在此部分需要帮助,可以查阅安装部分

使用 Strapi 创建后端

设置项目

创建一个名为 my-app 的目录,您将在其中添加应用程序的后端和前端部分。在 my-app 中使用 Strapi 生成后端 API
npx create-strapi-app@latest back --quickstart
此命令会在名为 back 的新目录中创建一个 Strapi 应用程序并打开管理仪表板。创建帐户以访问它。
Strapi sign up form
创建帐户后,您应该会重定向到 Strapi 的管理仪表板。您将在此处配置后端 API。

构建和管理您的内容

下一步是创建新的集合类型。集合就像您内容的蓝图——在这种情况下,它将是餐厅的集合。您将创建另一个名为“类别”的集合,以便稍后组织您的餐厅。
Strapi dashboard with side menu 'Content-Type Builder' option circled
要继续操作,请完成 Strapi 快速入门指南中的“B 部分:使用内容类型构建器构建数据结构”和“D 部分:使用内容管理器将内容添加到 Strapi Cloud 项目”中的步骤 2 到 5。这些包括
  • 创建集合类型
  • 创建新条目
  • 设置角色和权限
  • 发布内容

扩展您的数据库

完成 Strapi 快速入门指南的这些步骤后,两个名为 Restaurant 和 Category 的新集合应该会出现在 内容管理器 > 集合类型 下。如果您点击 Restaurant,您可以看到只有一个。通过点击仪表板右上角的 + 创建新条目 按钮添加更多。
Strapi dashboard: Content manager side menu, arrow indicating the location of the Restaurant Collection Type
逐一添加以下三家餐厅。对于每家餐厅,您需要按 保存,然后按 发布
  • 名称:The Butter Biscotte
  • 描述:关于黄油的一切,与健康无关。
接下来,在页面右下角添加 法式美食 类别。
Strapi dashboard: create an entry form, arrow indicating the location of the categorie's location in the right side menu
  • 名称:The Slimy Snail
  • 描述:美食由大蒜和黄油制成。
  • 类别:法式美食
  • 名称:The Smell of Blue
  • 描述:蓝纹奶酪没有过期,这是您吃它的方式。加一点黄油和很多快乐。
  • 类别:法式美食
您的 Strapi 后端现在已启动并运行。Strapi 会自动为您的餐厅集合创建 REST API。有关所有可用的 API 端点,请查阅 Strapi 的文档。 现在,是时候连接 Strapi 和 Meilisearch 并开始搜索了。

连接 Strapi 和 Meilisearch

要将 Meilisearch 插件添加到 Strapi,您需要首先退出 Strapi 应用程序。转到运行 Strapi 的终端窗口,按 Ctrl+C 终止进程。 接下来,在 back 目录中安装插件。
npm install strapi-plugin-meilisearch
安装后,您必须在以开发模式再次启动 Strapi 应用程序之前重新构建它,因为这会使配置更容易。
npm run build
npm run develop
此时,您的 Strapi 应用程序应该再次在默认地址运行:https://:1337/admin。在浏览器中打开它。您应该会看到一个管理员登录页面。输入您用于创建帐户的凭据。 连接后,您应该会在屏幕左侧看到新的 meilisearch 插件。
Strapi dashboard with plugins side menu: arrow pointing at the 'meilisearch' option
meilisearch 插件页面的“设置”选项卡中添加您的 Meilisearch 凭据。
Strapi dashboard with Meilisearch plugin selected: arrow pointing to the location of the settings tab
现在是时候将您的 Strapi 集合添加到 Meilisearch 了。在 meilisearch 插件页面上的 集合 选项卡中,您应该会看到 餐厅类别 内容类型。 通过点击 餐厅 旁边的复选框,内容类型会自动在 Meilisearch 中建立索引。
GIF showing the mouse clicking on 'restaurant' in the Meilisearch collections tab
当您在 集合 选项卡中点击 餐厅 的复选框时,会出现“已关联”字样。这意味着每当您在餐厅内容类型中添加、更新或删除条目时,Meilisearch 都会自动更新。 索引完成后,您的餐厅就会在 Meilisearch 中。访问搜索预览,通过搜索“butter”来确认一切正常运行。
GIF showing the word 'butter' being typed in the search bar and search results appearing instantly
您的 Strapi 条目会原样发送到 Meilisearch。您可以在将数据发送到 Meilisearch 之前对其进行修改,例如通过删除某个字段。有关所有自定义选项,请查看 strapi-plugin-meilisearch 页面

接下来

本教程向您展示了如何将 Strapi 集合添加到 Meilisearch。 在大多数实际场景中,您通常会构建一个自定义搜索界面并使用 Meilisearch 的 API 获取结果。要了解如何快速构建自己的前端界面,请查看前端集成页面指南。
© . This site is unofficial and not affiliated with Meilisearch.