Comment utiliser React et Elasticsearch pour obtenir une récupération efficace du texte intégral

Comment utiliser React et Elasticsearch pour obtenir une récupération de texte intégral efficace

Introduction :
Avec l'avènement de l'ère de l'explosion de l'information, la récupération de texte intégral est devenue un moyen efficace d'obtenir et de gérer de grandes quantités d'informations. React et Elasticsearch sont deux technologies très populaires à l'heure actuelle, et leur combinaison peut nous aider à obtenir des fonctions de recherche en texte intégral efficaces. Cet article présentera en détail comment utiliser React et Elasticsearch pour implémenter la récupération de texte intégral et fournira des exemples de code spécifiques.

1. Installer et configurer Elasticsearch

Tout d'abord, nous devons installer et configurer Elasticsearch. Vous pouvez accéder au site Web officiel d'Elasticsearch (https://www.elastic.co/cn/downloads/elasticsearch) pour télécharger le package d'installation adapté à votre système d'exploitation, puis l'installer et le configurer conformément à la documentation officielle. Une fois terminé, démarrez le service Elasticsearch.

2. Créer un projet React

Avant de commencer, nous devons créer un projet React. Ouvrez la ligne de commande et exécutez la commande suivante :

npx create-react-app search-demo
cd search-demo
npm start

À ce stade, un nouveau projet React a été créé et démarré.

3. Installez et configurez le plug-in Elasticsearch

Dans le répertoire racine du projet React, exécutez la commande suivante pour installer le plug-in elasticsearch :

npm install @elastic/elasticsearch

Créez ensuite un fichier elasticsearch.js dans le répertoire src et ajoutez le code suivant :

import { Client } from '@elastic/elasticsearch';

const client = new Client({ node: 'http://localhost:9200' });

export default client;

De cette façon, nous Ceci termine l'installation et la configuration d'Elasticsearch.

4. Créer un composant de recherche

Créez le fichier Search.js dans le répertoire src et ajoutez le code suivant :

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;

Dans le code ci-dessus, nous introduisons d'abord le module elasticsearch et créons un composant de recherche. Ce composant contient une zone de saisie et un bouton de recherche, ainsi que des divs utilisés pour afficher les résultats de la recherche. Dans la fonction handleSearch, nous obtenons les résultats de la recherche en appelant l'interface de recherche elasticsearch et mettons à jour le statut searchResults.

5. Utilisation du composant Search dans App.js

Ouvrez le fichier App.js et ajoutez-y le code suivant :

import React from 'react';
import Search from './Search';

function App() {
  return (
    <div>
      <Search />
    </div>
  );
}

export default App;

De cette façon, nous avons introduit le composant Search dans le composant App.

6. Exécuter un projet

Maintenant, vous pouvez exécuter des projets React via la ligne de commande.

npm start

Ouvrez le navigateur et visitez http://localhost:3000, vous verrez une page contenant une zone de saisie de recherche. Entrez des mots-clés dans la zone de saisie et cliquez sur le bouton de recherche pour obtenir les résultats de la recherche.

Conclusion :
Grâce aux étapes ci-dessus, nous avons mis en œuvre avec succès une fonction de recherche en texte intégral efficace à l'aide de React et Elasticsearch. React fournit une plate-forme permettant de créer rapidement une interface utilisateur, tandis qu'Elasticsearch fournit un puissant moteur de recherche en texte intégral. Leur combinaison nous permet de développer facilement de puissantes applications de recherche en texte intégral. J'espère que cet article pourra être utile aux lecteurs et pourra jouer un plus grand rôle dans la pratique.

Matériaux de référence :

• Documentation officielle de React : https://reactjs.org/
• Documentation officielle d'Elasticsearch : https://www.elastic.co/guide/index.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!