回到首页Meilisearch 的 Logo
返回文章
2023 年 3 月 27 日

为您的 Nuxt 电子商务网站添加站内搜索的分步指南

希望为您的 Vue 电子商务网站添加站内搜索功能?在这份 Nuxt 完整指南中,了解如何集成实时排序、过滤和分面搜索。

Laurent Cazanove
Laurent Cazanove开发者体验工程师StriftCodes
A step by step guide to adding site search to your Nuxt ecommerce

搜索是网上购物不可或缺的一部分。Forrester 是一家专注于客户体验的研究公司,其报告指出,使用站内搜索的访客转化率几乎是普通访客的两倍,且购物时间更长。但是,糟糕的搜索结果会降低销售额和品牌信任度。电子商务网站搜索需要快速、相关,并根据您业务的特定需求进行定制。

本指南将引导您使用 JavaScript 框架 Nuxt 3 构建电子商务网站的搜索体验。

本指南分为三个部分

  • 设置全文搜索数据库
  • 构建“边输边搜”体验
  • 使用过滤器和分面优化搜索结果

本指南中的代码也提供在 GitHub 仓库中,其中包含不同的检查点,以帮助您跟进。在本指南结束时,我们的应用程序将看起来像这样

Ecommerce website with real time search

最终应用程序预览(查看实时演示

目录

  • 要求
  • 设置 Meilisearch 全文搜索数据库
  • 构建“边搜边打”体验
  • 带排序、分面和分页的高级搜索模式

要求

为了构建连接到 Meilisearch 数据库的 Nuxt Web 应用程序,我们将使用

  • Node 18 或更高版本 — 我们建议使用 nvm 轻松切换版本
  • yarn 3 — 一个用于 Node.js 的包管理器
  • Nuxt 3 — 一个用于使用 Vue 3 和 TypeScript 构建生产应用程序的框架
  • Meilisearch 1.3 — 一个即时生成相关搜索体验的搜索引擎

为了专注于搜索相关的问题,我们将使用一个模板仓库。这个仓库包含构建传统电子商务布局的 UI 组件。让我们从克隆它开始

git clone https://github.com/meilisearch/ecommerce-demo

然后,让我们安装依赖项

# Navigate to the project directory
cd ecommerce-demo

# Make sure to use Node.js 18.x before installing dependencies!
# nvm use v18

# Install dependencies
yarn

安装完成后,我们就可以开始设置数据库了。

遇到任何问题?请在 Discord 上使用帮助频道!

设置 Meilisearch 全文搜索数据库

在构建我们的前端应用之前,我们将初始化 Meilisearch 数据库。在这一节中,我们将

  • 启动一个 Meilisearch 数据库
  • 将我们的数据集导入到 products 索引中
  • 为电子商务搜索配置我们的 Meilisearch 实例

如果您正在使用本教程的仓库,请切换到 1-setup-database 分支

git checkout 1-setup-database

启动 Meilisearch 数据库

启动 Meilisearch 实例最简单的方法是使用 Meilisearch Cloud。它提供 14 天免费试用,无需信用卡。Meilisearch 是开源的,所以如果您更喜欢在本地运行它,可以参考关于本地安装的文档。在本指南中,我们将使用 Meilisearch Cloud。

接下来,我们需要创建一个 Meilisearch Cloud 账户。登录后,我们进入“项目”页面。从那里,创建一个项目以启动一个新的数据库(给它起一个酷炫的名字,比如 awesome-ecommerce-tutorial 😏),选择一个引擎版本,然后点击“创建”——数据库应该在一分钟内准备就绪。让我们继续, enquanto Meili 的小精灵们正在为我们插电!

当项目准备就绪后,我们可以访问“项目概览”页面以检索将在后续章节中使用的信息

  • 数据库 URL
  • 默认搜索 API 密钥
  • 默认管理员 API 密钥

“搜索 API 密钥”提供只读权限:我们将在前端应用程序中使用它进行搜索。“管理员 API 密钥”允许更新数据库及其设置——请务必将其保密!

导入我们的产品数据集

我们的仓库在 database/data.json 中包含一个电子商务产品示例数据集。我们将通过在 database/setup.js 文件中创建 Meilisearch 客户端来将其导入到我们的数据库中。

我们还需要为应用程序提供必要的凭据。为此,我们使用位于项目根目录下的 .env 文件。.env 文件是存储凭据变量的常用方法,并将由我们添加到 database/setup.js 的代码读取。

首先,复制现有的 .env.example 文件,并将其重命名为 .env。然后,更新变量以匹配您“项目概览”页面上的凭据。更新与 Meilisearch 相关的变量,使您的 .env 文件看起来像这样

# .env

# Meilisearch configuration
MEILISEARCH_HOST="use the Database URL here"
MEILISEARCH_ADMIN_API_KEY="use the Default Admin API Key here"
MEILISEARCH_SEARCH_API_KEY="use the Default Search API Key here"

# …

现在我们的环境包含数据库凭据,我们可以创建一个 Meilisearch 客户端来向数据库添加内容,这个过程称为种子数据。在 Meilisearch 中,对数据库执行的操作是异步的——我们称它们为*任务*。我们将使用 watchTasks 辅助函数来等待任务完成,然后退出脚本。

以下 database/setup.js 中的代码将存储在 database/data.json 中的数据发送到 Meilisearch

// database/setup.js

import * as dotenv from 'dotenv'
import { MeiliSearch } from 'meilisearch'
import { watchTasks } from './utils.js'
import data from './data.json' assert { type: 'json' }

// Load environment
dotenv.config()

const credentials = {
  host: process.env.MEILISEARCH_HOST,
  apiKey: process.env.MEILISEARCH_ADMIN_API_KEY
}

const INDEX_NAME = 'products'

const setup = async () => {
  console.log('🚀 Seeding your Meilisearch instance')

  if (!credentials.host) {
    console.error('Missing `MEILISEARCH_HOST` environment variable')
    process.exit(1)
  }
  if (!credentials.apiKey) {
    console.error('Missing `MEILISEARCH_ADMIN_API_KEY` environment variable')
    process.exit(1)
  }

  const client = new MeiliSearch(credentials)

  console.log(`Adding documents to \`${INDEX_NAME}\``)
  await client.index(INDEX_NAME).addDocuments(data)

  await watchTasks(client, INDEX_NAME)
}

setup()

使用 Yarn 运行我们的设置脚本

yarn setup

您应该看到类似于以下内容的输出

🚀 Seeding your Meilisearch instance
Adding documents to `products`
Start update watch for products
-------------
products index: adding documents
-------------
All documents added to "products"
  Done in 2.92s.

如果成功,恭喜——我们已连接到 Meilisearch 并导入了数据。🎉

您可以通过在浏览器中导航到您的数据库 URL 来浏览您的 Meilisearch 实例内容。

Meilisearch mini-dashboard

迷你仪表板允许您浏览数据库内容。

配置 Meilisearch 以用于电子商务

Meilisearch 为搜索提供了出色的默认设置,包括对拼写错误的容忍度和优化相关性的预定义排名规则。电子商务搜索的其他关键功能包括排序和过滤。此外,根据营销活动、合作伙伴关系或<插入业务原因>,您可能希望实施自定义排名规则。

您可以通过调整数据库设置来定制 Meilisearch。我们将在 database/setup.js 文件中进行此操作。

首先,让我们确定一个配置

  • 过滤:我们希望产品可以通过品牌、类别、标签、评分、评论数量和价格进行过滤;
  • 排序:我们希望产品可以按价格或按评分排序;
  • 排名:我们希望算法优先考虑排序(在真实的商店中,您可能希望特色产品优先)。

我们可以在 database/setup.js 文件中实现这一点。我们将更新 setup() 函数体,使其看起来像这样

// database/setup.js

// …

const setup = async () => {
  // Credentials verification code…

  const client = new MeiliSearch(credentials);

  console.log(`Adding filterable attributes to \`${INDEX_NAME}\``);
  await client
    .index(INDEX_NAME)
    .updateFilterableAttributes([
      "brand",
      "category",
      "tag",
      "rating",
      "reviews_count",
      "price",
    ]);

  console.log(`Adding ranking rules to \`${INDEX_NAME}\``);
  await client
    .index(INDEX_NAME)
    .updateRankingRules([
      "sort",
      "words",
      "typo",
      "proximity",
      "attribute",
      "exactness",
    ]);

  console.log(`Adding sortable attributes to \`${INDEX_NAME}\``);
  await client.index(INDEX_NAME).updateSortableAttributes(["rating", "price"]);

  // Adding documents and watching tasks…
};

setup();

更新索引设置会触发文档的重新索引(即,完全重建数据库),这可能会影响单线程环境中的搜索性能。为避免这种情况,最好先配置设置,然后*再*导入数据。

在上述代码中,我们更新了

  • 可过滤属性——这启用了过滤和分面搜索
  • 排名规则——我们保留了 Meilisearch 的默认设置,但将排序移到了最上面;
  • 可排序属性——以启用结果排序。

虽然不在本指南的讨论范围之内,但正确配置您的可搜索属性也很重要。这可以大大提高索引性能

至此,我们已经完成了 Meilisearch 数据库的设置。✅ 那么,我们开始构建我们的 Nuxt 3 电子商务网站吧?

构建“边搜边打”体验

如果您正在跟随 git 仓库,请切换到 2-search-as-you-type 分支

git checkout "2-search-as-you-type"

在继续之前,请确保在我们的 .env 文件中定义了 MEILISEARCH_SEARCH_API_KEY

创建 Meilisearch 客户端

我们有一个运行中的 Meilisearch 数据库,但我们仍然需要一个客户端应用程序来与之交互。如果查看我们的 package.json,我们会发现有两个库可以配合使用

  • vue-instantsearchVue InstantSearch)用于构建与搜索客户端交互的 UI 组件;
  • @meilisearch/instant-meilisearchInstant Meilisearch)用于创建一个与 InstantSearch 兼容的 Meilisearch 客户端。

我们需要一个组件来处理对数据库的身份验证,并使搜索相关的状态在应用程序的其他部分可用。让我们在 MeiliSearchProvider.vue 组件中完成此操作。它将把索引名称作为 prop 接收,并包含一个 slot 来包装子组件,这些子组件将能够访问该状态。

<!-- components/organisms/MeiliSearchProvider.vue -->

<script lang="ts" setup>
  import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
  import { AisInstantSearch } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    indexName: string;
  }>();

  const { indexName } = toRefs(props);

  const { host, searchApiKey, options } = useRuntimeConfig().meilisearch;

  const searchClient = instantMeiliSearch(host, searchApiKey, options);
</script>

<template>
  <AisInstantSearch :index-name="indexName" :search-client="searchClient">
    <slot name="default" />
  </AisInstantSearch>
</template>

我们的组件本质上是 AisInstantSearch 组件的包装器。AisInstantSearch 是基于 InstantSearch 集成的基础:它处理身份验证,并使状态对其他 InstantSearch 组件可用。我们的代码做了三件事

  • 从运行时配置中拉取凭据和选项
  • 创建一个 InstantMeilisearch 客户端(即,一个与 InstantSearch 兼容的 Meilisearch 客户端)
  • 实例化一个 Vue InstantSearch 组件

我们将在主页的根目录,即 HomeTemplate.vue 中使用这个组件。但是,仅仅这个组件本身并不能做太多事情。所以,在我们把所有东西串联起来之前,让我们先实现搜索栏和结果。

用搜索栏发送查询我们的应用程序需要一个搜索栏,供用户输入查询。

我们将更新 MeiliSearchBar.vue 组件来处理这个。在这个组件中,我们将输入字段的内容作为查询发送到我们的 Meilisearch 数据库。感谢现有的 SearchInput 组件,我们的代码可以非常简单

<!-- components/organisms/MeiliSearchBar.vue -->

<script lang="ts" setup>
  import { AisSearchBox } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisSearchBox>
    <template #default="{ currentRefinement, refine }">
      <SearchInput
        :value="currentRefinement"
        @input="refine($event.currentTarget.value)"
      />
    </template>
  </AisSearchBox>
</template>

我们的组件使用 AisSearchBox 的槽位属性。槽位属性允许父组件访问子作用域中管理的状态。在这里,这些槽位属性使我们能够访问搜索相关状态,从而能够构建自定义 UI。有了这些,我们就能够向 Meilisearch 数据库发送请求。这意味着现在只缺少一件事——显示搜索结果。

显示搜索结果

最后,让我们更新 `MeiliSearchResults.vue` 组件以显示搜索结果。我们将以标准的网格布局显示结果。我们可以利用  ProductCard 组件

<!-- components/organisms/MeiliSearchResults.vue -->

<script lang="ts" setup>
  import { AisHits } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisHits>
    <template #default="{ items }">
      <div class="items">
        <ProductCard
          v-for="product in items"
          :key="product.id"
          :name="product.title"
          :brand="product.brand"
          :price="product.price"
          :image-url="product.images[0]"
          :rating="product.rating"
          :reviews-count="product.reviews_count"
        />
      </div>
    </template>
  </AisHits>
</template>

<style src="~/assets/css/components/results-grid.css" scoped />

整合

我们构建了三个组件:一个搜索客户端提供程序、一个搜索栏和一个搜索结果网格。这些组件在 HomeTemplate.vue 中使用。使用这些组件的行目前被注释掉了。随着我们通过指南的进展,我们将取消注释相应的行以查看我们的组件的实际效果。

让我们通过取消注释使用 <MeiliSearchProvider/><MeiliSearchBar/><MeiliSearchResults/> 的行来检查我们的实现是否成功。我们的代码应该看起来像这样

<!-- components/templates/HomeTemplate.vue -->

<script lang="ts" setup>
  const sortingOptions = [
    { value: "products", label: "Featured" },
    { value: "products:price:asc", label: "Price: Low to High" },
    { value: "products:price:desc", label: "Price: High to Low" },
    { value: "products:rating:desc", label: "Rating: High to Low" },
  ];
</script>

<template>
  <MeiliSearchProvider index-name="products">
    <TheNavbar class="mb-5 shadow-l">
      <template #search>
        <MeiliSearchBar />
      </template>
    </TheNavbar>
    <div class="container mb-5">
      <div class="filters">
        <!-- Removed for clarity -->
      </div>
      <div class="results">
        <div class="mb-5 results-meta">
          <!-- <MeiliSearchStats /> -->
          <!-- <MeiliSearchSorting /> -->
        </div>
        <MeiliSearchResults class="mb-5" />
        <!-- <MeiliSearchPagination /> -->
      </div>
    </div>
  </MeiliSearchProvider>
</template>

<style src="~/assets/css/components/home.css" scoped />

我们现在已经搭建了一个与 Meilisearch 集成的基本 Nuxt 3 应用程序的骨架。要以开发模式启动我们的应用程序,请运行以下命令

yarn dev

默认情况下,开发服务器 URL 是 localhost:3000。我们可以在浏览器中打开它,然后……瞧!🎉 我们应该能够在搜索框中输入并看到结果出现

Ecommerce app with search bar and results.

一个带有搜索栏和结果的基本电子商务网站。

好的。我们现在有一个可以实时搜索产品的工作应用程序了。让我们添加一些闪亮的功能,使其更适合实际的电子商务场景。✨

带排序、分面和分页的高级搜索模式

如果您正在跟随 git 仓库,请切换到 3-advanced-search-patterns 分支

git checkout "3-advanced-search-patterns"

排序结果

排序对于导航搜索结果至关重要。例如,用户可能希望查看按价格或评分排序的产品。我们将更新 MeiliSearchSorting.vue 组件,允许用户使用我们现有的 BaseSelect 组件更改结果的排序。我们将使排序选项作为 props 接收。

<!-- components/organisms/MeiliSearchSorting.vue -->

<script lang="ts" setup>
  import { AisSortBy } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    options: Array<{
      value: string;
      label: string;
    }>;
  }>();

  const { options } = toRefs(props);
</script>

<template>
  <AisSortBy :items="options">
    <template #default="{ items, refine }">
      <BaseSelect :options="items" @change="refine($event.target.value)" />
    </template>
  </AisSortBy>
</template>

如果我们回顾 HomeTemplate.vue 文件,我们可以看到定义了以下数组用于 options 属性

const sortingOptions = [
  { value: "products", label: "Featured" },
  { value: "products:price:asc", label: "Price: Low to High" },
  { value: "products:price:desc", label: "Price: High to Low" },
  { value: "products:rating:desc", label: "Rating: High to Low" },
];

要查看排序组件的实际效果,请取消注释使用 <MeiliSearchSorting/> 的行。请注意,只有在您事先配置了可排序属性后,排序功能才会生效。

使用分面和筛选器缩小结果范围

排序结果很好。但对于庞大的产品目录,电子商务网站也需要筛选器来优化搜索结果。这就是分面的作用。让我们先添加一个用于按产品类别或品牌筛选的优化列表。然后,我们将添加组件以按价格范围和评分进行筛选。

分面筛选器

让我们更新 MeiliSearchFacetFilter.vue 组件,以显示给定属性所有可能值的清单。我们将把 attribute 设置为一个 prop,以便该组件可以重复使用。在我们的案例中,我们将它用于类别品牌。组件代码应该看起来像这样

<!-- components/organisms/MeiliSearchFacetFilter.vue -->

<script lang="ts" setup>
  import { AisRefinementList } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    attribute: string;
  }>();

  const { attribute } = toRefs(props);
</script>

<template>
  <AisRefinementList :attribute="attribute" operator="or">
    <template #default="{ items, refine }">
      <BaseTitle class="mb-3 text-valhalla-100"> {{ attribute }} </BaseTitle>
      <BaseCheckbox
        v-for="item in items"
        :key="item.value"
        :value="item.isRefined"
        :label="item.label"
        :name="item.value"
        :disabled="item.count === 0"
        @change="refine(item.value)"
      >
        <BaseText
          tag="span"
          size="m"
          :class="[ item.count ? 'text-valhalla-500' : 'text-ashes-900']"
        >
          {{ item.label }}
          <BaseText tag="span" size="s" class="text-ashes-900">
            ({{ item.count.toLocaleString() }})
          </BaseText>
        </BaseText>
      </BaseCheckbox>
    </template>
  </AisRefinementList>
</template>

取消注释 HomeTemplate.vue 中相关行后,我们的应用程序现在应该显示类别和品牌列表。类别列表应如下所示

A multi-facets selection list for category

类别筛选器允许只显示与给定类别匹配的产品。

🆕 可选 – 分面搜索和排序分面值

Meilisearch v1.3 引入了两项功能:搜索分面值排序分面值

搜索分面值

搜索分面值

按名称或计数排序分面值

排序分面值

请查看仓库 main 分支上的 MeiliSearchFacetFilter.vue 组件,了解如何实现它。

价格筛选器

为了添加价格范围筛选器,我们将更新 MeiliSearchRangeFilter.vue 组件。我们将使用现有的 RangeSlider 组件来显示一个滑块,允许用户设置最小值和最大值

<!-- components/organisms/MeiliSearchRangeFilter.vue -->

<script lang="ts" setup>
  import { AisRangeInput } from "vue-instantsearch/vue3/es";

  interface Range {
    min: number;
    max: number;
  }

  const props = defineProps<{
    attribute: string;
  }>();

  const { attribute } = toRefs(props);

  const toValue = (
    currentValue: Range,
    boundaries: Range
  ): [number, number] => {
    return [
      typeof currentValue.min === "number" ? currentValue.min : boundaries.min,
      typeof currentValue.max === "number" ? currentValue.max : boundaries.max,
    ];
  };
</script>

<template>
  <AisRangeInput :attribute="attribute">
    <template #default="{ currentRefinement, range, refine }">
      <BaseTitle class="mb-3 text-valhalla-100"> {{ attribute }} </BaseTitle>
      <div class="slider-labels text-valhalla-500 mb-2">
        <BaseText size="m">
          <span class="text-ashes-900">$ </span>{{ currentRefinement.min ??
          range.min }}
        </BaseText>
        <BaseText size="m">
          <span class="text-ashes-900">$ </span>{{ currentRefinement.max ??
          range.max }}
        </BaseText>
      </div>
      <RangeSlider
        :model-value="toValue(currentRefinement, range)"
        :min="range.min"
        :max="range.max"
        @update:model-value="refine($event)"
      />
    </template>
  </AisRangeInput>
</template>

<style scoped>
  .slider-labels {
    display: flex;
    justify-content: space-between;
  }
</style>

移除 HomeTemplate.vue 中相应行前的注释,瞧!

A range slider allowing to set minimum and maximum values

价格范围筛选器允许设置最低和最高价格。

评分筛选器

对于在线购物者来说,一种有用的筛选方式是移除低于给定平均评分的产品,因此让我们更新 MeiliSearchRatingFilter.vue 组件来处理这个问题。我们将使用 vue-instantsearch 中的 AisRatingMenu 组件,它有一个限制:它只能使用整数值进行评分。因此,我们将提供 rating_rounded 属性而不是 rating。我们的组件将接受两个 props:attributelabel(可选)。

<!-- components/organisms/MeiliSearchRatingFilter.vue -->

<script lang="ts" setup>
  import { AisRatingMenu } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    attribute: string;
    label?: string;
  }>();

  const { attribute, label } = toRefs(props);
</script>

<template>
  <AisRatingMenu :attribute="attribute" :max="5">
    <template #default="{ items, refine }">
      <BaseTitle class="mb-3 text-valhalla-100">
        {{ label ?? attribute }}
      </BaseTitle>
      <a
        v-for="item in items"
        :key="item.value"
        class="rating-link"
        :class="[item.isRefined ? 'text-dodger-500' : 'text-valhalla-500']"
        href="#"
        @click.prevent="refine(item.value)"
      >
        <span class="rating-label">
          <StarRating :rating="Number(item.value)" />
          <BaseText tag="span" size="m" class="ml-1">
            & Up
            <BaseText tag="span" size="s" class="text-ashes-900">
              ({{ item.count.toLocaleString() }})
            </BaseText>
          </BaseText>
        </span>
      </a>
    </template>
  </AisRatingMenu>
</template>

<style src="~/assets/css/components/rating-filter.css" scoped />

瞧!

A list allowing users to filter out items by minimum rating

评分筛选组件允许按最低评分进行筛选。

结果分页

我们将实现一个分页系统,以便用户更容易找到结果。在电子商务场景中,[编号分页是推荐的方法](/blog/pagination-vs-infinite-scroll-vs-load-more/#ecommerce-demo&utm_source=blog),因为它允许用户记住页面,从而在想再次找到之前看过的产品时更容易返回。让我们更新 MeiliSearchPagination.vue 组件

<script lang="ts" setup>
  import { AisPagination } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisPagination>
    <template
      #default="{ currentRefinement, pages, refine, nbPages, isFirstPage, isLastPage }"
    >
      <!-- First page -->
      <PageNumber
        v-if="!isFirstPage && !pages.includes(0)"
        :has-gap-separator="!pages.includes(1)"
        :is-current="currentRefinement === 0"
        @page-click="refine(0)"
      >
        Page 1
      </PageNumber>
      <!-- Current page and 3 previous/next -->
      <PageNumber
        v-for="(page, index) in pages"
        :key="page"
        :show-separator="index < (pages.length-1)"
        :is-current="currentRefinement === page"
        @page-click="refine(page)"
      >
        Page {{ page + 1 }}
      </PageNumber>
      <!-- Last page -->
      <PageNumber
        v-if="!isLastPage && !pages.includes(nbPages-1)"
        separator="before"
        :has-gap-separator="!pages.includes(nbPages-2)"
        :is-current="currentRefinement === nbPages-1"
        @page-click="refine(nbPages-1)"
      >
        Page {{ nbPages }}
      </PageNumber>
    </template>
  </AisPagination>
</template>

取消注释 HomeTemplate.vue 文件中相应行后,我们现在将在结果下方看到一个页面列表。此列表将始终显示第一页和最后一页,以及当前页及其前后最多 2 页。

A list of pages

分页组件显示一个页面列表。

至此,我们已经完成了我们的电子商务应用程序。恭喜您完成本指南。🎉

我们的最终应用程序应该看起来像这样

An ecommerce application with real time site search with filters, facets, and pagination

我们的最终应用程序(查看实时演示

总结

让我们回顾一下我们构建了什么

  • 一个 Nuxt 3 电子商务网站
  • 一个用于初始化 Meilisearch 数据库以进行电子商务搜索的 Node.js 脚本
  • 用于搜索产品和显示、过滤、排序结果的 InstantSearch 集成

所有代码都可以在演示仓库中找到:https://github.com/meilisearch/ecommerce-demo

该仓库的 main 分支存在一些小差异,例如 Meilisearch 作为 Nuxt 模块实现。这种方法对于希望实现服务器端渲染以改善 SEO 的用户将很有用。为了简洁起见,本指南省略了服务器端渲染和与路由器同步状态等高级主题。

感谢您的阅读!希望本指南对您有所帮助。欢迎在我们的 Discord 社区中告诉我!

以下是与我们联系的其他方式

Meilisearch indexes embeddings 7x faster with binary quantization

Meilisearch 通过二进制量化将嵌入索引速度提高了 7 倍

通过与向量存储 Arroy 结合实现二进制量化,在保持搜索相关性和效率的同时,大幅减少了大型嵌入的磁盘空间使用和索引时间。

Tamo
Tamo2024 年 11 月 29 日
How to add AI-powered search to a React app

如何向 React 应用程序添加 AI 驱动的搜索

使用 Meilisearch 的 AI 驱动搜索构建一个 React 电影搜索和推荐应用程序。

Carolina Ferreira
Carolina Ferreira2024 年 9 月 24 日
Meilisearch is too slow

Meilisearch 太慢了

在这篇博客文章中,我们探讨了 Meilisearch 文档索引器所需的增强功能。我们将讨论当前的索引引擎、其缺点以及优化性能的新技术。

Clément Renault
Clément Renault2024 年 8 月 20 日