ホームページ > ウェブフロントエンド > jsチュートリアル > AngularとElasticsearchを使用してレシピ検索サイトを構築します

AngularとElasticsearchを使用してレシピ検索サイトを構築します

尊渡假赌尊渡假赌尊渡假赌
リリース: 2025-02-21 10:42:10
オリジナル
674 人が閲覧しました

この記事では、AngularとElasticsearchを使用してレシピ検索Webサイトを構築することを示しています。 SolrやLuceneとのレスリングにうんざりしていませんか? オープンソースのLuceneベースのストレージエンジンであるElasticsearchは、2010年以来よりシンプルなソリューションを提供します。単なる検索エンジン以上のものです。検索速度に優先順位を付けるドキュメントストアです。多くのアプリケーションでは、バックエンド全体として機能します。

Building a Recipe Search Site with Angular and Elasticsearch

重要な利点:

Leverages ElasticSearchのJSON互換性とOpenRecipes、すぐに利用できるJSONレシピデータセット。
    さまざまな環境との簡単な相互作用のためにElasticSearchのRESTFUL APIを使用しています(ここで使用されているJavaScriptドライバー)。 ユーザーインターフェイスにAngularJSを採用し、ElasticSearchバックエンドとシームレスに統合して、効率的なデータ検索と表示を行います。
  • ElasticSearchインスタンスを保護するためのプロキシの必要性を強調することにより、展開セキュリティの懸念に対処します(固有のユーザー/許可コントロールがありません)。
  • レシピ検索エンジンの構築:
  • このチュートリアルは、OpenRecipesearch.comに似たレシピ検索エンジンを作成することをガイドします。 OpenRecipesは、ElasticSearchのJSON構造と完全に整合する便利なJSON形式を提供します。
のセットアップ:

elasticsearchをダウンロードして実行します。組み込みのRESTFULバックエンドは、相互作用を簡素化します。 JavaScriptドライバーは、この例で使用されています データの摂取:

OpenRecipesデータベース(大きなJSONファイル)を取得します。提供されたnode.jsスクリプト()は、このデータをElasticSearchに効率的にロードします。 このスクリプトでは、ElasticSearch javascriptライブラリ(

)を使用しています

    検証:
  1. (利用可能な場合)を使用してデータのインポートを確認する
  2. レシピ検索UI(Angularを使用)の構築:
  3. AngularJSは、ユーザーインターフェイスを作成するために使用されます。 プロセスには次のものが含まれます load_recipes.js npm install elasticsearch
  4. ユーザー入力:
  5. ユーザーは検索クエリを入力します。 curlelasticsearchクエリ:curl -XPOST http://localhost:9200/recipes/recipe/_search -d '{"query": {"match": {"_all": "cake"}}}'クエリはelasticsearchに送信されます
結果の取得:

検索結果が取得されます。

結果レンダリング:

結果がユーザーに表示されます。

  1. 提供されたHTMLコードは、検索インターフェイスの構築に使用されるAngularディレクティブを紹介します。 指令(など)、テンプレート変数(
  2. )、およびデータバインディングなど、主要な角度の概念が説明されています。
  3. JavaScriptコードには以下が含まれます
    • モジュールの作成:window.MyOpenRecipes = angular.module('myOpenRecipes', ['elasticsearch'], ...);Angularモジュールをセットアップします。
    • コントローラー():recipeCtrl検索とページネーションを含むUIインタラクションを管理します
    • service():
    • ElasticSearchバックエンドとの通信を処理します。 このサービスでは、ElasticSearch JavaScriptライブラリと約束の取り扱いのためのサービスを使用しています。 recipeService $q展開ノート:

    生産展開については、ElasticSearchインスタンスを保護します。 ElasticSearchには、組み込みのユーザー/許可管理がありません。必要なエンドポイントのみへのアクセスを制限するには、プロキシ(nginxなど)が推奨されます(例えば、)。

    結論:

    /recipes/recipe/_search このチュートリアルは、AngularおよびElasticsearchを使用して機能的なレシピ検索Webサイトを構築するための実用的なガイドを提供します。 完全なコードはGitHubで使用できます(元のテキストではリンクが提供されていません)。 FAQSセクションでは、パジネーション、クエリの最適化、エラー処理、セキュリティ、テスト、展開、リアルタイム検索、集約、オートコンプリート、クラスターパフォーマンスモニタリングに関する一般的な質問に対処します。

以上がAngularとElasticsearchを使用してレシピ検索サイトを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート