如何使用 Meilisearch 为您的 Strapi 应用程序添加相关搜索
通过这篇（几乎）无需代码的教程，使用 MeiliSearch 搜索您的 Strapi 集合
本指南适用于 Strapi v3。如果您正在使用 Strapi v4，请查看此文章
随着网络的发展，越来越多的工具可用于为我们处理复杂的工作。当您只需点击几下即可生成 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://:1337/admin
创建帐户后，您应该会重定向到 Strapi 的管理仪表板。我们将在其中配置后端 API。
我们的下一步是创建新的集合类型——在这种情况下，它将是餐厅集合。完成Strapi 快速入门指南的步骤 3 以继续。
管理仪表板登录页面
完成Strapi 快速入门指南的步骤 3 后，一个名为 Restaurants 的新集合应该出现在 Collection Types 下。如果我们点击它，我们可以看到仍然没有餐厅。让我们添加一些！
Restaurants 集合登录页面
点击仪表板右上角的 + Add New Restaurants。现在我们一个接一个地添加三家餐厅
- 名称：
The Butter Biscotte。描述：全是黄油，没有健康。 - 名称：
The Slimy Snail描述：美食由大蒜和黄油制成。 - 名称：
The Smell of Blue描述：蓝纹奶酪没有过期，这是你吃它的方式。加一点黄油和很多快乐。
在餐厅集合中创建条目。
对于每家餐厅，您都需要按下 save，然后按下 publish。添加三家餐厅后，您应该会得到以下页面
Restaurants 主页，展示了我们添加的餐厅
我们的 Strapi 后端现在已启动并运行！Strapi 自动为我们的 Restaurants 集合创建 REST API。查看 Strapi 的文档以获取所有可用的API 端点。
接下来，是时候将 Meilisearch 引入其中了。
启动 Meilisearch
TL;DR：下载、安装并启动 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 不适合您，请考虑尝试许多其他下载和安装 Meilisearch 的方法之一。
# 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://:1337/admin/。在浏览器中访问它，您应该会看到一个管理员登录页面；输入与之前相同的凭据。
连接后，您应该会在屏幕左侧看到一个新的 Plugin：Meilisearch！让我们点击它。
到达 Meilisearch 插件页面，我们可以看到信息分为两个部分
- Meilisearch 凭据
- Strapi 集合
Strapi 管理仪表板的 Meilisearch 插件页面
首先，我们需要添加 Meilisearch 实例的凭据，以便 Strapi 知道将数据发送到何处。
您可能还记得上一步中，Meilisearch 默认运行在 https://:7700。将其添加到 Meilisearch Host 字段中，然后点击 Add 将您的 Meilisearch 实例连接到 Strapi。
将凭据添加到 Meilisearch。
请注意，我们留空
Meilisearch Api Key，因为我们启动 Meilisearch 时没有主密钥。
太棒了！现在是时候将您的 Strapi 集合添加到 Meilisearch 了。
尝试点击 restaurant 旁边的复选框，然后观察 Meilisearch 立即开始处理您的数据。因为我们只有三个文档，所以索引时间几乎不存在。
将餐厅添加到 Meilisearch
我们现在可以回到 Meilisearch 主机地址：https://:7700。刷新后，您应该会发现页面不再像以前那样空了。
Meilisearch 演示页面
我们做到了！尝试输入“butter”并查看结果。
前端界面
使用 instant-meilisearch，您可以立即在 React、Vue 或 Angular 中实现前端搜索界面。
这是一个交互式代码沙盒（在 React 中），您可以在其中感受不同组件。您不会破坏任何东西，所以请随意玩耍！
结论
我希望本文能愉快地介绍新的Meilisearch Strapi 插件。然而，这仅仅是个开始！
如果您有任何问题，请在 Discord 上加入我们。如果您喜欢 Meilisearch，在 GitHub 上加星对我们意义重大。有关更多信息，请参阅我们的
Meilisearch 使用二值量化将嵌入索引速度提高7倍
通过在向量存储 Arroy 中实现二值量化，显著减少了大型嵌入的磁盘空间使用和索引时间，同时保持了搜索相关性和效率。
