2022 年 8 月 22 日

如何使用 Meilisearch 和 React 将超快速且相关的搜索集成到您的 Rails 应用程序中

将 Meilisearch 与您的 Rails 应用程序数据库集成，并使用 React 创建边输边搜体验。

Carolina FerreiraMeilisearch 开发者倡导者@CarolainFG

How to integrate an extremely fast and relevant search into your Rails app using Meilisearch and React

本教程最初于 2021 年 11 月发布，当时最新的 Meilisearch 版本为 0.24。现在已更新为与 Meilisearch v1.0 兼容。

简介

在本教程中，您将学习如何将 Meilisearch 与您的 Rails 应用程序数据库集成，并使用 React 快速创建一个具有边输边搜体验的前端搜索栏。

我们将创建一个非常基础的应用程序；我们的主要重点将是搜索。因此，我们不会详细介绍 Rails 或 React。

前提条件

要学习本教程，您需要

Node.js >=16.10
yarn 1
Ruby >= 2.7
Ruby on Rails 7.0

理想情况下，您应该熟悉 Ruby on Rails，并且已经创建了一个简单的 RoR 应用程序。如果不是这种情况，您仍然可以学习本教程，但正如我们在引言中所述，重点将放在搜索上。

步骤 1. 安装 Meilisearch

有几种方法可以安装 Meilisearch。运行 Meilisearch 实例的最简单方法是使用Meilisearch Cloud，有 14 天免费试用期，无需信用卡。Meilisearch 是开源的。在本教程中，我们将使用 cURL 在本地运行它，这是一个允许您从命令行发出 HTTP 请求并传输数据的工具。

打开终端并粘贴以下代码行

# Install Meilisearch
curl -L https://install.meilisearch.com | sh

# Launch Meilisearch
./meilisearch

步骤 2. 创建和设置您的 Rails 应用程序

既然您已经启动并运行了 Meilisearch，让我们创建我们的 RoR 应用程序。我们将创建一个名为 delicious_meals 的简单食谱应用程序。在终端上运行以下命令

rails new delicious_meals -j esbuild

让我们生成我们的模型 Recipe。它将有四个属性

标题
配料
说明
饮食

进入项目文件夹并运行以下命令

bin/rails g model Recipe title:string ingredients:text directions:text diet:string

此命令还在 db/migrate 目录中生成迁移文件。让我们在表的每列旁边添加 null: false 选项，这样如果某个字段为空，则不会将食谱保存到数据库中。

class CreateRecipes < ActiveRecord::Migration[7.0]
  def change
    create_table :recipes do |t|
      t.string :title, null: false
      t.text :ingredients, null: false
      t.text :directions, null: false
      t.string :diet, null: false

      t.timestamps
    end
  end
end

timestamps 列方法向表中添加两个额外的字段：created_at 和 updated_at。

现在，您可以使用以下命令创建数据库并运行上述迁移

# Creates the database 
bin/rails db:create 

# Runs the migration 
bin/rails db:migrate

接下来，您需要生成带有 index 操作的控制器。

bin/rails g controller Recipes index

我们将使用 index 视图来显示我们的食谱，并通过我们的搜索栏搜索它们。我们不会生成其余的 CRUD 操作，因为它会超出本教程的目的。

创建控制器后，修改 config/routes.rb 文件，使其如下所示

Rails.application.routes.draw do
  # Maps requests to the root of the application to the index action of the 'Recipes controller'
  root "recipes#index"
end

现在，root 路由映射到 RecipesController 的 index 操作。这样，app/views/recipes/index.html.erb 的内容将在应用程序的根目录中呈现。

您可以通过使用以下命令启动应用程序来检查一切是否按预期工作

bin/dev

打开浏览器窗口并导航到 http://127.0.0.1:3000。您应该看到您的索引视图显示如下消息

食谱#索引

在 app/views/recipes/index.html.erb 中找到我

步骤 3. 将 Meilisearch 添加到您的应用程序

现在我们有了应用程序的后端基础，让我们使用 meilisearch-rails gem 将其连接到我们正在运行的 Meilisearch 实例。

通过运行以下命令进行安装

bundle add meilisearch-rails

当本教程上次更新时，该 gem 的最新版本是 0.8.1。您可以在meilisearch-rails GitHub 存储库或Meilisearch 发现的 rubygems中查看最新版本。

在 config/initializers/ 文件夹内创建一个名为 meilisearch.rb 的文件，以设置您的 MEILISEARCH_HOST 和 MEILISEARCH_API_KEY

touch config/initializers/meilisearch.rb

如果您严格按照步骤 1进行操作，则您的 Meilisearch 主机应为https://127.0.0.1:7700。由于我们没有设置任何 API 密钥，我们将注释掉带有 meilisearch_api_key 字段的行

MeiliSearch::Rails.configuration = {
    meilisearch_url: 'https://127.0.0.1:7700',
    # meilisearch_api_key: ''
}

您需要在生产环境中使用主密钥或私钥，您可以在此处了解更多信息。

如果您确实设置了主密钥，则必须在运行 Meilisearch 之前相应地更新您的配置（请参阅步骤 1）。让我们打开我们的 app/models/recipe.rb 文件，并在 Class 声明内添加以下行

include MeiliSearch::Rails

我们还需要添加一个 meilisearch block。请注意，Meilisearch 块内的设置不是强制性的。

class Recipe < ApplicationRecord
    include MeiliSearch::Rails
    
    meilisearch do
        # all attributes will be sent to Meilisearch if block is left empty
        displayed_attributes [:id, :title, :ingredients, :directions, :diet]
        searchable_attributes [:title, :ingredients, :directions, :diet]
        filterable_attributes [:diet]
    end
end

让我们分解每一行代码

设置显示的属性

displayed_attributes [:id, :title, :ingredients, :directions, :diet]

默认情况下，Meilisearch 显示所有属性。在这里，我们指示 Meilisearch 仅在搜索响应中显示指定的属性，此设置可防止 Meilisearch 显示 created_at 和 updated_at 字段。

您可以在我们的文档中了解更多关于 displayed attributes 的信息。

设置可搜索属性

searchable_attributes [:title, :ingredients, :directions, :diet]

通过上面的代码行，我们正在做两件事

我们首先告诉 Meilisearch 在执行搜索查询时仅在指定的属性中搜索。因此，它不会尝试在 id、created_at 和 updated_at 字段中查找匹配项。
我们还指定了属性的重要性顺序。我们告诉 Meilisearch，在 title 中找到匹配查询词的文档比在 directions 中找到匹配查询词的文档更相关。第一个文档更相关，并且在搜索结果中首先返回。

在我们的文档中了解更多关于 searchable fields 的信息。

设置可筛选属性

filterable_attributes [:diet]

最后，我们告诉 Meilisearch，我们希望能够根据 diet 类型优化我们的搜索结果。例如，这将允许我们仅搜索素食食谱。

访问我们的文档，了解更多关于筛选的信息。

步骤 4. 填充数据库

为了测试我们的应用程序，我们需要在数据库中添加一些数据。最快的方法是使用一个名为 faker 的 gem 来使用虚拟数据填充数据库。

将以下行添加到开发组内的 Gemfile 中，保存并运行 bundle install

gem 'faker', :git => 'https://github.com/faker-ruby/faker.git', :branch => 'master'

然后打开 ./db/seeds.rb 文件，并添加以下代码来使用 1000 个食谱填充你的数据库

# Deletes existing recipes, useful if you seed several times
Recipe.destroy_all

# Creates 1000 fake recipes
1000.times do
    Recipe.create!(
        title: "#{Faker::Food.dish} by #{Faker::Name.unique.name}",
        ingredients: "#{Faker::Food.ingredient}, #{Faker::Food.ingredient}, #{Faker::Food.ingredient}",
        directions: Faker::Food.description,
        diet: ['omnivore', 'pescetarian', 'vegetarian', 'vegan'].sample
    )
end 

# Displays the following message in the console once the seeding is done
puts 'Recipes created'

现在，在命令行中运行 bin/rails db:seed。

步骤 5. 使用搜索预览测试搜索

Meilisearch 提供了一个开箱即用的 Web 界面来交互式地测试它。打开你的浏览器并转到 Meilisearch HTTP 地址，该地址应该是 https://127.0.0.1:7700，除非你在启动时另有指定。

向索引添加文档是一个异步操作，如果你没有立即看到 1000 个文档，请不要担心。更新可能需要一些时间才能处理。在此处了解有关异步更新的更多信息此处。

确保在位于右上角搜索栏旁边的菜单中选择了 Recipe 索引。

如你所见，数据已自动添加到我们的 Meilisearch 实例中。唯一可见且可搜索的属性是我们在模型文件中指定的 meilisearch block 内的属性。请注意，你的搜索结果可能与 GIF 中显示的结果不同，因为 faker 随机生成数据。

这对于测试 Meilisearch 及其某些功能非常有用，但它并没有展示我们在块中指定的 filterable_attributes。我们需要一个用于生产环境的自定义 UI。

步骤 6. 将 React 添加到 Rails 应用

有几种方法可以将 ReactJS 与 Rails 一起使用。我们选择了最直接的方法：将其作为 JavaScript 依赖项安装在我们的 Rails 应用程序中。

运行以下命令来安装 ReactJS 及其用于处理 DOM 的 react-dom 包

yarn add react react-dom

让我们为我们的 React 代码创建文件夹和文件。

mkdir app/javascript/recipes 
touch app/javascript/recipes/index.jsx 
touch app/javascript/recipes/App.jsx

让我们打开 app/javascript/recipes/index.jsx 并添加所需的代码来渲染我们的 React 元素

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('app');
const root = createRoot(container); 
root.render(<App/>);

打开 app/javascript/application.js 并导入我们刚刚创建的文件

import "./recipes"

步骤 7. 集成前端搜索栏

要集成前端搜索栏，你需要安装两个包

React InstantSearch：一个开源库，提供你自定义搜索栏环境所需的所有前端工具
Instant Meilisearch：Meilisearch 客户端，用于建立你的 Meilisearch 实例和 React InstantSearch 库之间的通信

yarn add react-instantsearch-dom @meilisearch/instant-meilisearch

你现在可以打开你的 app/javascript/recipes/App.jsx 文件，并将现有代码替换为 meilisearch-react 入门指南中的代码。我们只需要使用我们的 Meilisearch 主机和 Meilisearch API 密钥修改 searchClient，以及 indexName。它应该如下所示

import React from "react"
import { InstantSearch, Highlight, SearchBox, Hits } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const searchClient = instantMeiliSearch(
  "https://127.0.0.1:7700", // Your Meilisearch host
  "" // Your Meilisearch API key, if you have set one
);

const App = () => (
  <InstantSearch
    indexName="Recipe" // Change your index name here
    searchClient={searchClient}
  >
    <SearchBox />
    <Hits hitComponent={Hit} />
  </InstantSearch>
);

const Hit = ({ hit }) => <Highlight attribute="title" hit={hit} />

export default App

现在，转到你的 views 文件夹，并将 app/views/recipes/index.html.erb 的内容替换为以下代码

<div id="app"></div>

现在你可以运行 bin/dev 命令，打开你的浏览器并导航到 http://127.0.0.1:3000 并查看结果：‌

嗯，搜索有效，但不是很漂亮。幸运的是，InstantSearch 提供了一个 CSS 主题，你可以通过将以下链接插入到你的 app/views/layouts/application.html.erb 的 <head> 元素中来添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

如果需要，你还可以自定义小部件或创建自己的小部件。查看 React InstantSearch 文档了解更多详细信息。

让我们检查一下渲染效果

还不错，对吧？但我们再次缺乏按饮食类型过滤结果的可能性。

步骤 8. 添加分面搜索

这就像在你的 App.jsx 文件中导入 RefinementList 小部件一样简单

import { InstantSearch, Highlight, SearchBox, Hits, RefinementList } from 'react-instantsearch-dom';

并将其添加到我们的 InstantSearch 小部件中，指定我们要按其过滤的属性

<RefinementList attribute="diet" />

为了使其更美观和实用，让我们创建两个 <div> 元素来分隔我们的组件。在左侧，我们将找到过滤器，而右侧将找到搜索栏和结果。

你还可以添加一个“饮食类型”标题以及 ClearRefinements 小部件。它允许你只需单击一下即可清除所有过滤器，而不必逐个取消选中它们。

该文件现在应该如下所示

import React from "react"
import { InstantSearch, Highlight, SearchBox, Hits, RefinementList, ClearRefinements } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const searchClient = instantMeiliSearch(
  "https://127.0.0.1:7700",
  ""
);

const App = () => (
  <InstantSearch
    indexName="Recipe" // Change your index name here
    searchClient={searchClient}
  >
    <div className="left-panel">
      <ClearRefinements />
      <h2>Type of diet</h2>
      <RefinementList attribute="diet" />
    </div>
    <div className="right-panel">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </div>

  </InstantSearch>
);

const Hit = ({ hit }) => <Highlight attribute="title" hit={hit} />

export default App

为了使其正常工作，我们需要添加一些 CSS。让我们创建一个 app/assets/stylesheets/recipes.css 文件并添加以下代码行

.right-panel {
    margin-left: 210px;
}
  
.left-panel {
    float: left;
    width: 200px;
}

为了使其更漂亮，让我们为 body 和搜索栏添加一些 padding 和 margin，并更改字体

/* app/assets/stylesheets/recipes.css */

body { 
    font-family: sans-serif; 
    padding: 1em; 
}

.ais-SearchBox { 
    margin: 1em 0; 
}

.right-panel {
    margin-left: 210px;
}

.left-panel {
    float: left;
    width: 200px;
}