Rumah >hujung hadapan web >tutorial js >Cara menggunakan React dan Elasticsearch untuk mencapai perolehan teks penuh yang cekap
Cara menggunakan React dan Elasticsearch untuk mencapai perolehan teks penuh yang cekap
Pengenalan:
Dengan kemunculan era ledakan maklumat, perolehan teks penuh telah menjadi cara yang cekap untuk mendapatkan dan mengurus sejumlah besar maklumat. React dan Elasticsearch ialah kedua-dua teknologi yang sangat popular pada masa ini, dan gabungannya boleh membantu kami mencapai fungsi carian teks penuh yang cekap. Artikel ini akan memperkenalkan secara terperinci cara menggunakan React dan Elasticsearch untuk melaksanakan pengambilan teks penuh dan memberikan contoh kod khusus.
Mula-mula, kita perlu memasang dan mengkonfigurasi Elasticsearch. Anda boleh pergi ke laman web rasmi Elasticsearch (https://www.elastic.co/cn/downloads/elasticsearch) untuk memuat turun pakej pemasangan yang sesuai untuk sistem pengendalian anda, dan pasang serta konfigurasikannya mengikut dokumentasi rasmi. Setelah selesai, mulakan perkhidmatan Elasticsearch.
Sebelum kita mula, kita perlu mencipta projek React. Buka baris arahan dan laksanakan arahan berikut:
npx create-react-app search-demo cd search-demo npm start
Pada ketika ini, projek React baharu telah dibuat dan dimulakan.
Dalam direktori akar projek React, laksanakan arahan berikut untuk memasang pemalam elasticsearch:
npm install @elastic/elasticsearch
Kemudian buat fail elasticsearch.js dalam direktori src dan tambahkan kod berikut:
import { Client } from '@elastic/elasticsearch'; const client = new Client({ node: 'http://localhost:9200' }); export default client;
Dengan cara ini kita Ini melengkapkan pemasangan dan konfigurasi Elasticsearch.
Buat fail Search.js dalam direktori src dan tambah kod berikut:
import React, { useState } from 'react'; import client from './elasticsearch'; function Search() { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]); const handleSearch = async () => { const response = await client.search({ index: 'your_index_name', body: { query: { match: { content: searchTerm } } } }); const hits = response.body.hits.hits; setSearchResults(hits); }; return ( <div> <input type="text" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} /> <button onClick={handleSearch}>搜索</button> {searchResults.map(result => ( <div key={result._id}>{result._source.content}</div> ))} </div> ); } export default Search;
Dalam kod di atas, kami mula-mula memperkenalkan modul elasticsearch dan mencipta komponen Carian. Komponen ini mengandungi kotak input dan butang carian, serta div yang digunakan untuk memaparkan hasil carian. Dalam fungsi handleSearch, kami memperoleh hasil carian dengan memanggil antara muka carian elastik dan mengemas kini status SearchResults.
Buka fail App.js dan tambahkan kod berikut padanya:
import React from 'react'; import Search from './Search'; function App() { return ( <div> <Search /> </div> ); } export default App;
Dengan cara ini, kami telah memperkenalkan komponen Carian dalam komponen Aplikasi.
Kini, anda boleh menjalankan projek React melalui baris arahan.
npm start
Buka pelayar dan lawati http://localhost:3000, anda akan melihat halaman yang mengandungi kotak input carian. Masukkan kata kunci dalam kotak input dan klik butang carian untuk mendapatkan hasil carian.
Kesimpulan:
Melalui langkah di atas, kami berjaya melaksanakan fungsi carian teks penuh yang cekap menggunakan React dan Elasticsearch. React menyediakan platform untuk membina UI dengan cepat, manakala Elasticsearch menyediakan enjin carian teks penuh yang berkuasa. Gabungan mereka membolehkan kami membangunkan aplikasi carian teks penuh yang berkuasa dengan mudah. Saya harap artikel ini dapat membantu pembaca dan boleh memainkan peranan yang lebih besar dalam amalan.
Bahan rujukan:
Atas ialah kandungan terperinci Cara menggunakan React dan Elasticsearch untuk mencapai perolehan teks penuh yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!