Strapi v4 指南
了解如何将 Meilisearch 与 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)。如果您在这部分需要帮助,可以查阅安装部分。
使用 Strapi 创建后端
设置项目
创建一个名为 my-app
的目录,您将在其中添加应用程序的后端和前端部分。在 my-app
内部使用 Strapi 生成后端 API
此命令会在一个名为 back
的新目录中创建一个 Strapi 应用程序,并打开管理仪表板。创建一个账户以访问它。
创建账户后,您应该会被重定向到 Strapi 的管理仪表板。您将在这里配置您的后端 API。
构建和管理您的内容
下一步是创建一个新的集合类型。集合就像您内容的一个蓝图——在这种情况下,它将是一个餐厅集合。您将创建另一个名为“Category”的集合,以便稍后组织您的餐厅。
要继续操作,请按照 Strapi 快速入门指南的“B 部分:使用内容类型构建器构建您的数据结构”以及“D 部分:使用内容管理器向您的 Strapi Cloud 项目添加内容”中的第 2 至 5 步。这些步骤包括:
- 创建集合类型
- 创建新条目
- 设置角色和权限
- 发布内容
扩展您的数据库
完成 Strapi 快速入门指南中的这些步骤后,两个名为 Restaurant 和 Category 的新集合应该出现在 Content Manager > Collection Types
下。如果您点击 Restaurant
,您会看到只有一个。通过点击仪表板右上角的 + Create new entry
按钮添加更多条目。
逐一添加以下三家餐厅。对于每家餐厅,您都需要按 Save
然后 Publish
。
- 名称:
The Butter Biscotte
- 描述:
一切都与黄油有关,与健康无关。
接下来,在页面右下角添加 French food
类别。
-
名称:
The Slimy Snail
-
描述:
美食由大蒜和黄油组成。
-
类别:
French food
-
名称:
The Smell of Blue
-
描述:
蓝纹奶酪没有过期,这是你食用它的方式。加一点黄油,会带来很多快乐。
-
类别:
French food
您的 Strapi 后端现在已启动并运行。Strapi 会自动为您的餐厅集合创建 REST API。请查阅 Strapi 的文档以获取所有可用的 API 端点。
现在,是时候连接 Strapi 和 Meilisearch 并开始搜索了。
连接 Strapi 和 Meilisearch
要将 Meilisearch 插件添加到 Strapi,您需要先退出 Strapi 应用程序。转到运行 Strapi 的终端窗口并按下 Ctrl+C
终止进程。
接下来,在 back
目录中安装插件。
安装后,您必须在以开发模式重新启动 Strapi 应用程序之前重建它,因为这样可以简化配置。
此时,您的 Strapi 应用程序应该再次在默认地址 http://localhost: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 获取结果。要了解如何快速构建自己的前端界面,请查阅前端集成页面指南。