Rumah >hujung hadapan web >tutorial js >Membina tapak carian resipi dengan sudut dan elasticsearch

Membina tapak carian resipi dengan sudut dan elasticsearch

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2025-02-21 10:42:10675semak imbas

Artikel ini menunjukkan membina laman web carian resipi menggunakan Angular dan Elasticsearch. Bosan bergelut dengan Solr atau Lucene? Elasticsearch, enjin penyimpanan berasaskan sumber terbuka, menawarkan penyelesaian yang lebih mudah sejak 2010. Ia lebih daripada sekadar enjin carian; Ia adalah kedai dokumen yang mengutamakan kelajuan carian. Bagi banyak aplikasi, ia boleh berfungsi sebagai keseluruhan backend.

Building a Recipe Search Site with Angular and Elasticsearch

Kelebihan utama:

    memanfaatkan keserasian JSON Elasticsearch dengan OpenRecipes, dataset resipi JSON yang sedia ada.
  • menggunakan API Restful Elasticsearch untuk interaksi mudah dengan pelbagai persekitaran (pemandu JavaScript yang digunakan di sini).
  • menggunakan angularjs untuk antara muka pengguna, mengintegrasikan dengan lancar dengan backend Elasticsearch untuk pengambilan dan paparan data yang cekap.
  • menangani kebimbangan keselamatan penempatan dengan menonjolkan keperluan untuk proksi untuk melindungi contoh Elasticsearch (kurang kawalan pengguna/kebenaran).

Membina Enjin Carian Resipi:

Tutorial ini membimbing anda melalui membuat enjin carian resipi yang serupa dengan OpenRecipesearch.com. OpenRecipes menyediakan format JSON yang mudah, dengan sempurna menyelaraskan struktur JSON Elasticsearch.

  1. Persediaan: Muat turun dan jalankan Elasticsearch. Backend yang terbina dalamnya memudahkan interaksi. Pemandu JavaScript digunakan dalam contoh ini.
  2. Pengambilan data: Dapatkan pangkalan data OpenRecipes (fail JSON yang besar). Skrip node.js yang disediakan () dengan cekap memuatkan data ini ke dalam Elasticsearch. Skrip ini menggunakan Perpustakaan Elasticsearch JavaScript (). load_recipes.js npm install elasticsearch
  3. Pengesahan:
  4. Sahkan import data menggunakan (jika ada): curl curl -XPOST http://localhost:9200/recipes/recipe/_search -d '{"query": {"match": {"_all": "cake"}}}'
Membina UI carian resipi (dengan sudut):

AngularJS digunakan untuk membuat antara muka pengguna. Proses ini melibatkan:

    Input Pengguna:
  1. Pengguna memasuki pertanyaan carian.
  2. pertanyaan elasticsearch:
  3. pertanyaan dihantar ke elasticsearch.
  4. Pengambilan hasil:
  5. Hasil carian diambil. Hasil Rendering Result: Hasil dipaparkan kepada pengguna.
  6. Kod HTML yang disediakan mempamerkan arahan sudut yang digunakan untuk membina antara muka carian. Konsep sudut utama dijelaskan, termasuk arahan (, , dan lain -lain), pembolehubah templat (
  7. ), dan mengikat data.

kod JavaScript termasuk: ng-app

  • Penciptaan modul: window.MyOpenRecipes = angular.module('myOpenRecipes', ['elasticsearch'], ...); menetapkan modul sudut.
  • pengawal (): recipeCtrl Menguruskan interaksi UI, termasuk carian dan penomboran.
  • Perkhidmatan (): recipeService mengendalikan komunikasi dengan backend Elasticsearch. Perkhidmatan ini menggunakan Perpustakaan JavaScript Elasticsearch dan Perkhidmatan untuk pengendalian janji. $q

Nota Penyebaran:

Untuk penggunaan pengeluaran, selamatkan contoh Elasticsearch anda. Elasticsearch tidak mempunyai pengguna terbina dalam/pengurusan kebenaran; Proksi (seperti nginx) disyorkan untuk menyekat akses kepada hanya titik akhir yang diperlukan (mis., ).

/recipes/recipe/_search

Kesimpulan:

Tutorial ini menyediakan panduan praktikal untuk membina laman web carian resipi fungsional menggunakan Angular dan Elasticsearch. Kod lengkap boleh didapati di GitHub (pautan tidak disediakan dalam teks asal). Seksyen Soalan Lazim menangani soalan umum mengenai penomboran, pengoptimuman pertanyaan, pengendalian ralat, keselamatan, ujian, penempatan, carian masa nyata, agregasi, autocomplete, dan pemantauan prestasi kluster.

Atas ialah kandungan terperinci Membina tapak carian resipi dengan sudut dan elasticsearch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Belajar Fokus ()Artikel seterusnya:Belajar Fokus ()