Recherche en temps réel de phrases avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une application web qui permet aux utilisateurs de rechercher et d'afficher en temps réel de belles phrases issues de la littérature. L'application récupérera les données à partir d'un fichier JSON et utilisera Vue.js pour implémenter la fonction de recherche et afficher les résultats.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet et comprendre les fichiers et les répertoires fournis
• Comment implémenter la requête de données pour récupérer les données à partir du fichier data.json
• Comment implémenter la fonction de recherche en temps réel pour afficher les phrases correspondantes
• Comment ajouter quelques touches finales au projet en stylisant la page web

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer un projet de développement web avec HTML, CSS et JavaScript
• Utiliser Vue.js pour construire une application web responsive et interactive
• Récupérer des données à partir d'un fichier JSON et les afficher sur la page web
• Implémenter la fonction de recherche en temps réel et mettre en évidence les mots clés correspondants
• Styliser une page web à l'aide de CSS pour améliorer l'apparence générale et l'expérience utilisateur

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoires est la suivante :

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

Dans cette structure :

• css/style.css est le fichier de style.
• index.html est la page principale.
• data.json est les données qui seront utilisées dans le projet.
• js/vue.min.js est le fichier de la version vue2.x utilisé dans le projet.
• js/axios.min.js est le fichier axios.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Implémenter la requête de données

Dans cette étape, vous allez compléter la requête de données pour récupérer les données à partir du fichier data.json.

1. Dans le fichier index.html, localisez le commentaire TODO dans la section <script>.
2. Dans la fonction data(), ajoutez le code suivant pour récupérer les données à partir du fichier data.json :

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

Ce code configure les propriétés de données initiales, list et search, puis appelle la méthode getData() dans le hook mounted() pour récupérer les données à partir du fichier data.json.

3. Enregistrez le fichier index.html et rafraîchissez la page web. Vous devriez maintenant voir les données initiales chargées à partir du fichier data.json.

Implémenter la fonctionnalité de recherche en temps réel

Dans cette étape, vous allez implémenter la fonctionnalité de recherche en temps réel pour afficher les phrases correspondantes en fonction de l'entrée de l'utilisateur.

1. Dans le fichier index.html, localisez le commentaire TODO dans la section <div class="search-form">.
2. Remplacez le contenu à l'intérieur de l'élément <div class="search-form"> par le code suivant :

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Titre Phrase Auteur"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

Ce code utilise des directives Vue.js pour afficher dynamiquement la liste des phrases correspondantes en fonction de l'entrée de l'utilisateur.

3. Ensuite, ajoutez le code suivant au frère mounted() :

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
       ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

La propriété calculée hightLight est une fonction qui entoure les mots clés correspondants dans la balise <span class='highlight'>. La propriété calculée filterList filtre la liste de phrases en fonction de l'entrée de l'utilisateur dans la zone de recherche.

4. Enregistrez le fichier index.html et rafraîchissez la page web. Vous devriez maintenant voir la fonctionnalité de recherche en temps réel fonctionnant, avec les phrases correspondantes affichées et les mots clés mis en évidence.

Après avoir terminé, l'effet final de la page est le suivant :

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.