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
npx create-strapi-app@latest back --quickstart
此命令会在一个名为 back
的新目录中创建一个 Strapi 应用程序并打开管理控制面板。创建一个帐户来访问它。
创建帐户后,你应被重定向到 Strapi 的管理控制面板。你可以在这里配置你的后端 API。
构建并管理内容
下一步是创建一个新收集类型。收集就像内容的蓝图——在这个案例中,它将是餐馆的收集。稍后你将创建一个名为“类别”的另一收集来组织你的餐馆。
要继续操作,请完成 Strapi 快速入门指南中“B 部分:使用内容类型生成器构建数据结构”以及“D 部分:使用内容管理器将内容添加到你的 Strapi Cloud 项目”中的步骤 2 至 5。这些步骤包括
- 创建收集类型
- 创建新条目
- 设置角色和权限
- 发布内容
扩展数据库
完成 Strapi 快速入门指南中的这些步骤后,应在内容管理器 > 收集类型
下显示名为“餐馆”和“类别”的两个新收集。如果你点击“餐馆”,可以看到仅有一个餐馆。通过点击控制面板右上角的 + 创建新条目
按钮进行更多添加。
逐个添加以下三家餐馆。对于每家餐馆,你需要按 保存
然后按 发布
。
- 名称:
The Butter Biscotte
- 描述:
全都关于黄油,不涉及健康。
接下来,在页面右下角添加 法国菜
类别。
-
名称:
The Slimy Snail
-
描述:
美食由大蒜和黄油制成。
-
类别:
法国菜
-
名称:
The Smell of Blue
-
说明:
布鲁干酪并未变质,这是食用方式。搭配少许黄油和满满的快乐食用即可。
-
类别:
法国菜
您的 Strapi 后端现已启动并运行。Strapi 为您的餐厅集合自动创建了一个 REST API。查看 Strapi 文档了解所有可用的 API 端点。
现在是时候将 Strapi 与 Meilisearch 连接起来并开始搜索了。
连接 Strapi 和 Meilisearch
若要将 Meilisearch 插件添加到 Strapi,首先需要退出 Strapi 应用。转到运行 Strapi 的终端窗口,然后按 Ctrl+C
杀死进程。
接下来,在 back
目录中安装插件。
npm install strapi-plugin-meilisearch
安装后,您必须在开发模式下重新启动 Strapi 应用,以便配置更轻松。
npm run build
npm run develop
此时,您的 Strapi 应用应再次在默认地址上运行:http://localhost:1337/admin/。在浏览器中将其打开。您应该会看到一个管理员登录页面。输入用于创建您的帐户的凭据。
连接后,您应该在屏幕左侧看到新的 meilisearch
插件。
在 meilisearch
插件页面的“设置”标签中添加您的 Meilisearch 凭据。
现在是时候将您的 Strapi 集合添加到 Meilisearch 了。在 meilisearch
插件页面的 集合
标签中,您应该可以看到 餐馆
和 类别
内容类型。
点击 餐馆
旁边的复选框,该内容类型将自动在 Meilisearch 中建立索引。
在 集合
标签中点击 餐馆
复选框时,会出现“已连接”字样。这意味着每次在您的餐馆内容类型中添加、更新或删除条目时,Meilisearch 都会自动更新。
索引完成后,您的餐馆将位于 Meilisearch 中。访问 搜索预览 搜索“黄油”以确认一切工作正常。
您的 Strapi 输入按原样发送到 Meilisearch。您可以在发送到 Meilisearch 之前修改数据,例如删除某个字段。在 strapi-plugin-meilisearch 页面 查看所有自定义选项。
下一步
本教程演示了如何将 Strapi 集合添加到 Meilisearch。
在大多数实际情况下,您通常会构建自定义搜索界面并使用 Meilisearch 的 API 获取结果。要了解如何快速构建您自己的前端界面,请查看 前端集成页面 指南。