Maîtriser la fonctionnalité de recherche avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à créer une fonction de recherche simple à l'aide de Vue 2. La fonction de recherche permet aux utilisateurs de rechercher du contenu et d'afficher les résultats correspondants. Ce projet vous aidera à comprendre les bases de Vue.js et à implémenter une fonction de recherche dans une application web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la structure du projet et préparer les fichiers et dossiers nécessaires
Comment ajouter la structure HTML au fichier index.html
Comment implémenter la logique JavaScript pour gérer la fonction de recherche
Comment styliser l'entrée de recherche et les résultats de recherche à l'aide de CSS

🏆 Réalisations

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

Utiliser Vue.js pour créer une interface utilisateur responsive et interactive
Implémenter une fonction de recherche qui filtre et affiche le contenu pertinent
Intégrer HTML, CSS et JavaScript pour créer une application web complète
Travailler avec des données et des propriétés calculées dans Vue.js

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

Le code initial de cette question a déjà été fourni. Ouvrez l'environnement de codage, et la structure de répertoire est la suivante :

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

Le dossier css contient le fichier style.css, qui sera utilisé pour styliser l'entrée de recherche et les résultats de recherche. Le dossier images contient les images qui seront affichées dans les résultats de recherche. Le fichier index.html est le fichier HTML principal du projet, et le fichier vue.min.js est la bibliothèque Vue.js.

Le principal objectif du projet est de compléter le fichier index.html en ajoutant la structure HTML nécessaire, la logique JavaScript et les styles CSS pour implémenter la fonction de recherche.

Ajouter la structure HTML

Dans cette étape, vous allez ajouter la structure HTML au fichier index.html.

Ouvrez le fichier index.html et ajoutez le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Function</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Please search" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      // JavaScript code will be added in the next step
    </script>
  </body>
</html>

Cette structure HTML inclut un champ d'entrée de recherche et un conteneur pour afficher les résultats de recherche. Le champ d'entrée de recherche est lié à la propriété de données search, et les résultats de recherche sont affichés à l'aide de la directive v-for pour parcourir le tableau filteredList.

Ajouter la logique JavaScript

Dans cette étape, vous allez ajouter la logique JavaScript au fichier index.html.

Dans la balise <script>, ajoutez le code suivant :

class Post {
  constructor(title, link, img) {
    this.title = title;
    this.link = link;
    this.img = img;
  }
}

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post(
        "kitty",
        "https://unsplash.com/s/photos/cat",
        "./images/cat.png"
      ),
      new Post("puppy", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "polar bear",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "little lion",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "little bird",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "fox",
        "https://unsplash.com/@introspectivedsgn",
        "./images/fox.png"
      )
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.includes(this.search);
      });
    }
  }
});

Ce code JavaScript définit une classe Post et crée une nouvelle instance Vue avec les données et les propriétés calculées nécessaires pour gérer la fonction de recherche.

La classe Post est utilisée pour créer des instances de publications avec des propriétés de titre, de lien et d'image.
L'instance Vue (app) est créée avec les propriétés suivantes :
- el : Spécifie l'élément sur lequel monter l'instance Vue.
- data : Contient la propriété search pour l'entrée de recherche et un tableau d'éléments postList.
- computed : Définit une propriété calculée filteredList qui filtre le postList sur la base de l'entrée de recherche.

Modifier les styles CSS

Le fichier css/style.css a été fourni avec quelques styles initiaux.

Si vous souhaitez personnaliser davantage les styles, vous pouvez modifier le fichier CSS pour changer l'apparence de l'entrée de recherche et des résultats de recherche.

Ou, vous pouvez laisser les styles tels quels et passer à l'étape suivante.

Exécuter le projet

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-la manuellement, et vous verrez la page.

Résumé

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

Développement de la fonctionnalité de recherche avec Vue.js