如何使用 Meilisearch 为您的 Strapi 应用添加相关搜索功能
通过本教程（几乎）无需代码，即可使用 MeiliSearch 搜索您的 Strapi 集合
本指南适用于 Strapi v3。如果您正在使用 Strapi v4，请查看这篇文章
随着 Web 的发展，越来越多的工具可用于处理复杂的任务。当您只需点击几下即可生成一个 CRUD API 时，为什么还要从头开始创建一个呢？当存在简单有效的解决方案时，为什么还要在困难的搜索操作和查询中挣扎呢？
也许我们会被新技术吓倒，或者担心在无法实现目标的工具上投入时间。或者，更有可能的是，我们甚至可能不知道存在一个简单的解决方案。
Meilisearch 实践
本教程将以尽可能少的步骤向您展示如何使用 Strapi 和 Meilisearch 创建一个基于搜索的 Web 应用程序。首先，让我们熟悉一下我们的工具！
工具介绍
Strapi
Strapi 是一个无头 CMS。它提供了一种快速创建后端的方法，我们可以在其中添加和存储数据。然后，数据可以通过 REST API 获得，而无需编写任何代码或配置我们的数据库。
Meilisearch
Meilisearch 是一个快速、开源的搜索引擎，易于使用和部署。Meilisearch 的目标是以非常少的步骤并且无需任何配置，开箱即用地创建相关的搜索体验。
要求
要能够按照本教程进行操作，您需要以下内容
- 一个打开的终端或命令提示符
- Node.js >= 10.16 且 <= 14：这使得在浏览器外部运行 JS 成为可能
- 您可以使用命令
node --version检查活动版本 - 如果您的 Node 版本超出此范围，我们建议您安装 nvm 并使用它来访问 Node 14
- 您可以使用命令
- NPM 和 NPX >= 6.x（与 Node.js 一起安装）：软件包管理器，可帮助您访问和使用 JS 库
步骤
为我们的应用创建一个目录
我们不希望我们的应用到处都是！让我们创建一个目录，在其中添加我们应用程序的每个部分。
mkdir my-app cd my-app
如果您没有使用基于 UNIX 的操作系统，请按照本指南创建一个目录。
使用 Strapi 创建后端
在本节中，我们将使用 Strapi 创建并运行后端。
我们的第一步是生成一个 Strapi 应用程序。转到您打开的终端窗口并运行以下命令
npx [email protected] back --quickstart
使用 npx，我们运行特定版本的软件包，而无需全局安装它。请注意，本指南可能不适用于不同的版本。
此命令会在一个名为 back 的新目录中创建一个 Strapi 应用，并打开管理仪表板。创建一个帐户或登录以获取访问权限。
如果您随时丢失此页面，只需在浏览器中转到 https://127.0.0.1:1337/admin
创建帐户后，您应该会被重定向到 Strapi 的管理仪表板。我们将在其中配置我们的后端 API。
我们的下一步是创建一个新的集合类型——在本例中，它将是一个餐馆集合。完成Strapi 快速入门指南的第 3 步以继续。
管理仪表板登录页面
完成Strapi 快速入门指南的第 3 步后，在 集合类型 下方应该出现一个名为 Restaurants 的新集合。如果我们点击它，我们可以看到仍然没有餐馆。让我们添加一些！
Restaurants 集合登录页面
点击仪表板右上角的 + 添加新餐馆。现在让我们一个接一个地添加三家餐馆
- 名称：
The Butter Biscotte。描述：一切都与黄油有关，与健康无关。 - 名称：
The Slimy Snail描述：美食由大蒜和黄油制成。 - 名称：
The Smell of Blue描述：蓝纹奶酪并没有过期，而是你吃它的方式。加一点黄油，加上很多幸福。
在餐馆集合中创建一个条目。
对于每个餐馆，您都需要按 保存，然后按 发布。添加完三家餐馆后，您应该会得到以下页面
Restaurants 的主页展示了我们添加的餐馆
我们的 Strapi 后端现在已启动并运行！Strapi 会自动为我们的 Restaurants 集合创建一个 REST API。查看 Strapi 的文档，了解所有可用的 API 端点。
接下来，是时候将 Meilisearch 加入进来了。
启动并开始 Meilisearch
太长不看： 下载、安装并启动 Meilisearch。
想避免本地安装？使用我们的 Meilisearch 云免费 14 天试用版或我们在 DigitalOcean 上的单击安装，并继续下一节。
如果您走到这一步，您应该已经有一个打开的终端窗口正在运行 Strapi。如果没有，或者您不小心关闭了它，请按照本指南，导航到我们创建的目录 .../my-app/back，并运行命令 npm run develop 以重新启动 Strapi。
让我们花点时间打开第二个终端窗口并移动到 my-app 目录。此窗口将用于运行 Meilisearch。
在 my-app 内部，创建一个名为 meilisearch-binary 的新目录。
mkdir meilisearch-binary cd meilisearch-binary
创建并移动到我们将运行 Meilisearch 的目录
执行以下命令，以下载当前目录中的 Meilisearch。如果 cURL 对您不起作用，请考虑尝试其他许多下载和安装方法之一。
# Install Meilisearch curl -L https://install.meilisearch.com | sh
下载并安装 Meilisearch
我们现在在我们的目录中有了 meilisearch 二进制文件。让我们运行它！
# Launch Meilisearch ./meilisearch
启动 Meilisearch
您应该会看到一大段文本（包括一些 ASCII 艺术），确认 Meilisearch 已启动并运行。
正在运行 Meilisearch
找到标题为 Server listening on 的行。这让我们知道 Meilisearch 在哪里提供服务。找到它后，请在浏览器中打开此地址。
您应该会到达一个没有太多内容可看的网页。
带有空索引的 Meilisearch Web 界面
这是 Meilisearch Web 界面。在我们向 Meilisearch 实例添加一些数据之前，它将保持为空。
你说数据？巧了，我们的 Strapi 应用中已经有一些数据了！现在是时候将两者连接起来，开始使用 Meilisearch 搜索我们的数据了。
连接 Strapi 和 Meilisearch
为了将 Meilisearch 插件添加到 Strapi，我们需要先退出 Strapi 应用。请转到运行 Strapi 的终端窗口（确保不是运行 Meilisearch 的那个！），按下 control + c 来终止进程。
完成后，请移动到 back 目录中并安装该插件。
cd back npm install strapi-plugin-meilisearch
安装完成后，我们需要重建 Strapi 应用，然后再在开发模式下重新启动它，这样配置会更方便。
npm run build npm run develop
此时，我们的 Strapi 应用应该再次在默认地址：https://127.0.0.1:1337/admin/ 上运行。在浏览器中访问它，你应该会看到一个管理员登录页面；输入和之前相同的凭据。
连接后，你应该会在屏幕左侧看到一个新的 Plugin（插件）：Meilisearch！让我们点击它。
进入 Meilisearch 插件页面后，我们可以看到信息分为两个部分
- Meilisearch 凭据
- Strapi 集合
Strapi 管理面板的 Meilisearch 插件页面
首先，我们需要添加 Meilisearch 实例的凭据，以便 Strapi 知道将数据发送到哪里。
你可能还记得上一步中，Meilisearch 默认在 https://127.0.0.1:7700 上运行。将其添加到 Meilisearch Host（Meilisearch 主机）字段中，然后点击 Add（添加）将你的 Meilisearch 实例连接到 Strapi。
添加 Meilisearch 凭据。
请注意，我们保留
Meilisearch Api Key（Meilisearch API 密钥）为空，因为我们在启动 Meilisearch 时没有使用主密钥。
太棒了！现在是将你的 Strapi 集合添加到 Meilisearch 的时候了。
尝试点击 restaurant（餐厅）旁边的复选框，观察 Meilisearch 如何立即开始处理你的数据。因为我们只有三个文档，所以索引时间几乎不存在。
将餐厅添加到 Meilisearch
我们现在可以返回到我们的 Meilisearch 主机地址：https://127.0.0.1:7700。刷新后，你应该会发现该页面不再像以前那样空了。
Meilisearch 的演示页面
我们成功了！尝试输入 "butter"（黄油）并查看结果。
前端界面
使用 instant-meilisearch，你可以立即在 React、Vue 或 Angular 中实现前端搜索界面。
这是一个交互式的 代码沙盒（使用 React），你可以在这里感受一下不同的组件。你不会破坏任何东西，所以请随意尝试！
结论
我希望这篇文章能让你愉快地了解新的 Strapi 的 Meilisearch 插件。但这仅仅是个开始！
如果你有任何问题，请加入我们的 Discord。如果你喜欢 Meilisearch，在 GitHub 上点亮一颗星对我们意义重大。有关更多信息，请参阅我们的
使用 Blazity 构建你的 Next.js Shopify 店面
学习如何使用 Next.js 和 Blazity 商业入门套件构建 Shopify 店面。
