Strapi v4 指南

    本教程将指导您如何将 Meilisearch 与 Strapi 集成,用于创建基于搜索的 Web 应用。首先,您将使用 Strapi 的快速开始指南创建一个餐厅合辑,然后使用 Meilisearch 搜索此合辑。

    先决条件

    使用 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 快速入门指南中的这些步骤后,应在内容管理器 > 收集类型下显示名为“餐馆”和“类别”的两个新收集。如果你点击“餐馆”,可以看到仅有一个餐馆。通过点击控制面板右上角的 + 创建新条目按钮进行更多添加。

    Strapi dashboard: Content manager side menu, arrow indicating the location of the Restaurant Collection Type

    逐个添加以下三家餐馆。对于每家餐馆,你需要按 保存然后按 发布

    接下来,在页面右下角添加 法国菜类别。

    Strapi dashboard: create an entry form, arrow indicating the location of the categorie's location in the right side menu

    您的 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 插件。

    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 中。访问 搜索预览 搜索“黄油”以确认一切工作正常。

    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 获取结果。要了解如何快速构建您自己的前端界面,请查看 前端集成页面 指南。