Heim > Web-Frontend > js-Tutorial > Erstellen einer Rezept -Suchstelle mit Angular und Elasticsearch

Erstellen einer Rezept -Suchstelle mit Angular und Elasticsearch

尊渡假赌尊渡假赌尊渡假赌
Freigeben: 2025-02-21 10:42:10
Original
672 Leute haben es durchsucht

Dieser Artikel zeigt, dass das Erstellen einer Rezept -Suchwebsite mit Angular und Elasticsearch erstellt wird. Satt, mit Solr oder Lucene zu ringen? Elasticsearch, eine Open-Source-Storage-Engine in Lucene, bietet eine einfachere Lösung seit 2010. Es ist mehr als nur eine Suchmaschine. Es handelt sich um eine Dokumentgeschäfte, die die Suchgeschwindigkeit priorisieren. Für viele Anwendungen kann es als das gesamte Backend dienen.

Building a Recipe Search Site with Angular and Elasticsearch

Schlüsselvorteile:

  • nutzt die JSON -Kompatibilität von Elasticsearch mit OpenRecipes, einem leicht verfügbaren JSON -Rezept -Datensatz.
  • Verwendet Elasticsearchs erholsame API für eine einfache Interaktion mit verschiedenen Umgebungen (hier verwendet JavaScript -Treiber).
  • verwendet AngularJS für die Benutzeroberfläche und integriert sich nahtlos in das Elasticsearch -Backend für effizientes Datenab Abrufen und Anzeige.
  • befasst sich mit Sicherheitsbedenken der Bereitstellung, indem es die Notwendigkeit eines Proxy zum Schutz der Elasticsearch -Instanz hervorhebt (ohne inhärente Benutzer-/Berechtigungssteuerung).

Erstellen der Rezept -Suchmaschine:

Dieses Tutorial führt Sie durch das Erstellen einer Rezept -Suchmaschine ähnlich wie bei OpenRecipesearch.com. OpenRecipes bietet ein bequemes JSON -Format, das perfekt mit der JSON -Struktur von Elasticsearch übereinstimmt.

  1. Setup: Elasticsarch herunterladen und ausführen. Das eingebaute erholsame Backend vereinfacht die Interaktion. Der JavaScript -Treiber wird in diesem Beispiel verwendet.
  2. Datenaufnahme: Die OpenRecipes -Datenbank (eine große JSON -Datei) erhalten. Ein bereitgestelltes Node.js -Skript (load_recipes.js) lädt diese Daten effizient in Elasticsarch. Dieses Skript verwendet die Elasticsearch JavaScript -Bibliothek (npm install elasticsearch).
  3. Überprüfung: Überprüfen Sie den Datenimport mit curl (falls verfügbar): curl -XPOST http://localhost:9200/recipes/recipe/_search -d '{"query": {"match": {"_all": "cake"}}}'

Erstellen der Rezept -Such -UI (mit Angular):

AngularJS wird verwendet, um die Benutzeroberfläche zu erstellen. Der Prozess beinhaltet:

  1. Benutzereingabe: Der Benutzer gibt eine Suchabfrage ein.
  2. Elasticsearch -Abfrage: Die Abfrage wird an Elasticsearch gesendet.
  3. Ergebnis Abruf: Suchergebnisse werden abgerufen.
  4. Ergebniswiedergabe: Ergebnisse werden dem Benutzer angezeigt.

Der bereitgestellte HTML -Code zeigt die Angular -Direktiven, die zum Erstellen der Suchschnittstelle verwendet werden. Schlüsselwinkelkonzepte werden erläutert, einschließlich Anweisungen (ng-app, ng-controller usw.), Vorlagenvariablen ({{}}) und Datenbindung.

Der JavaScript -Code enthält:

  • Modulerstellung: window.MyOpenRecipes = angular.module('myOpenRecipes', ['elasticsearch'], ...); Legt das Winkelmodul fest.
  • Controller (recipeCtrl): verwaltet UI -Interaktion, einschließlich Suche und Pagination.
  • Service (recipeService): verarbeitet die Kommunikation mit dem Elasticsearch -Backend. Dieser Dienst verwendet die Elasticsearch JavaScript -Bibliothek und den $q -Dienst für Versprechen.

Bereitstellungshinweise:

Sicherstellen Sie Ihre Elasticsearch -Instanz für die Produktionsbereitstellung. In Elasticsearch fehlt ein integriertes Benutzer/Berechtigungsmanagement. Ein Proxy (wie nginx) wird empfohlen, den Zugriff auf nur erforderliche Endpunkte (z. B. /recipes/recipe/_search) zu beschränken.

Schlussfolgerung:

Dieses Tutorial bietet einen praktischen Leitfaden zum Erstellen einer funktionalen Rezept -Suchwebsite mit Angular und Elasticsearch. Der vollständige Code ist auf GitHub verfügbar (Link, der nicht im Originaltext angegeben ist). Der FAQS-Abschnitt befasst sich mit häufigen Fragen zu Pagination, Abfrageoptimierung, Fehlerbehandlung, Sicherheit, Test, Bereitstellung, Echtzeitsuche, Aggregationen, Autocomplete und Cluster-Leistungsüberwachung.

Das obige ist der detaillierte Inhalt vonErstellen einer Rezept -Suchstelle mit Angular und Elasticsearch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage