Leptos Meilisearch 集成

leptos_meilisearch 是 meilisearch 的集成助手。它将 meilisearch_sdk 结构体进行包装，使其与 Leptos 兼容。您可以使用内置的包装资源系统来操作 SearchQuery。这允许使用 Leptos 资源并轻松与 Meilisearch 搜索引擎通信。

目录

• Leptos 兼容性
• 安装
• 使用方法
  • 初始化和示例
• 许可证

Leptos 兼容性

安装

要在您的项目中使用 leptos_meilisearch 集成，您需要将其及其依赖项添加到您的 Cargo.toml 文件中。

[dependencies]
leptos_meilisearch = "0.2"

使用方法

leptos_meilisearch 实际上只是一个围绕 meilisearch_sdk 的包装类。关于 meilisearch 自身的文档相当不错，我强烈推荐！但这个库可以帮助更容易地与 Leptos 一起工作。

初始化和示例

use std::collections::HashMap;

use chrono::{DateTime, FixedOffset};
use leptos::*;
use leptos_meilisearch::*;

// This is how the struct for a Product looks like in the meilisearch `products`
// index.
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct Product {
    pub id: String,
    pub name: String,
    pub description: String,
    pub preview_image_url: Option<String>,
    pub price: f32,
    pub tax: f32,
    pub created: DateTime<FixedOffset>,
    pub updated: DateTime<FixedOffset>,
    pub categories: HashMap<String, String>,
}

// This is how the struct for an User looks like in the meilisearch `users`
// index.
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct User {
    pub id: String,
    pub name: String,
    pub roles: Vec<String>,
}

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    let meilisearch_parameters = AuthParameters {
        host: "https://your-api-endpoint".to_string(),
        api_key: Some(
            "your-search-api-key".to_string(),
        ),
    };

    // Initializing needs to define the structured design of the Meilisearch
    // view. This can be done by definining a struct an implement `Deserialize`
    // for it.
    SingleSearch::<Product>::init(
        meilisearch_parameters.clone(),
        "products",
        &SearchQueryBuilder::default()
            .hits_per_page(12_usize)
            .facets(Selectors::Some(vec!["categories"])),
    )
    .expect("unable to init meilisearch");

    // You can initialize also multiple systems, if you have products and for
    // example users, which accessible under different indexes.
    SingleSearch::<User>::init(
        meilisearch_parameters.clone(),
        "products",
        &SearchQueryBuilder::default(),
    )
    .expect("unable to init meilisearch");

    view! {
        <Stylesheet id="leptos" href="/pkg/main.css"/>

        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>

        <Router>
            // Your app with router
        </Router>
    }
}

// In this example you can see how you can manipulate the `SearchQuery`, for
// example a live search query
#[component]
pub fn ProductSearchBar() -> impl IntoView {
    let products = expect_context::<SingleSearch<Product>>();

    view! {
       <input
           type="search"
           id="products-search"
           on:input=move |ev| {
               products
                  .search_query()
                  .update(move |search_query| {
                      search_query.query = Some(event_target_value(&ev));
                   })
           }
       />
    }
}

// Here you can see a list of products, which can be fetched from the
// Meilisearch resource. The **leptos_meilisearch** library has also some helper
// function, for example `hits`, which return just the hits.
#[component]
pub fn ProductList() -> impl IntoView {
    let products = expect_context::<SingleSearch<Product>>();
    // You can also fetch multiple meilisearch resources at the same time.
    let _users = expect_context::<SingleSearch<User>>();

    view! {
        <For
            each=move || {
                products
                    .hits()
                    .map(|search_result| {
                        search_result
                            .into_iter()
                            .map(|hit| hit.result)
                            .collect::<Vec<Product>>()
                    })
                    .unwrap_or_default()

            }

            key=|product| product.id
            children=move |product: Product| {
                view! {
                    <h1>{product.name}</h1>
                    <h2>{product.price}</h2>
                }
            }
        />
    }
}

许可证

leptos_meilisearch 在 MIT 许可证 下发布。有关更多信息，请参阅 LICENSE 文件。