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.

1. Pasang dan konfigurasikan Elasticsearch

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.

2. Buat Projek React

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.

3. Pasang dan konfigurasikan pemalam Elasticsearch

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.

4. Buat komponen carian

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.

5. Menggunakan komponen Carian dalam App.js

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.

6. Run Project

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:

• React dokumentasi rasmi: https://reactjs.org/
• Dokumentasi rasmi Elasticsearch: https://www.elastic.co/guide/index.html

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!