Outil de conversion de temps avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à créer un outil de conversion de temps à l'aide de Vue.js. Cet outil vous permettra de convertir entre des dates et des timestamps, ce qui est une exigence commune dans de nombreuses applications commerciales.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer un projet Vue.js et comprendre la structure de code fournie
• Comment implémenter la fonctionnalité de conversion entre des dates et des timestamps
• Comment s'assurer que les résultats de conversion sont affichés correctement dans le format souhaité

🏆 Réalisations

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

• Utiliser Vue.js pour construire une application web simple
• Gérer les données de date et d'heure dans une application web
• Convertir entre différentes représentations temporelles, telles que des dates et des timestamps
• Tester et vérifier la correction de la fonctionnalité de conversion

Skills Graph

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épertoire est la suivante :

├── element-ui.css
├── element-ui.js
├── index.html
└── vue.js

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

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

Dans cette étape, vous allez implémenter la fonctionnalité de conversion entre des dates et des timestamps.

1. Localisez la méthode handleTransform() dans l'instance Vue.js.

2. À l'intérieur de la méthode handleTransform(), vous devez ajouter la logique de conversion entre des dates et des timestamps.

3. Si formInline.date n'est pas vide et formInline.timeStamp est vide, vous devriez convertir la valeur de la date en un timestamp de 13 chiffres et mettre à jour formInline.timeStamp en conséquence.

   let date = this.formInline.date;
   let timeStamp = this.formInline.timeStamp;
   if (date && !timeStamp) {
     let newValue = new Date(date);
     this.formInline.timeStamp = newValue.getTime();
   }

4. Si formInline.date est vide et formInline.timeStamp n'est pas vide, vous devriez convertir la valeur du timestamp en une chaîne de date au format AAAA-MM-JJ hh:mm:ss et mettre à jour formInline.date en conséquence.

   if (!date && timeStamp) {
     timeStamp = new Number(timeStamp);
     let d = new Date(timeStamp);
     var Y = d.getFullYear() + "-";
     var M =
       (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
       "-";
     var D = d.getDate() < 10 ? "0" + d.getDate() + " " : d.getDate() + " ";
     var H = d.getHours() + ":";
     var M2 =
       (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) + ":";
     var S = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
     this.formInline.date = Y + M + D + H + M2 + S;
   }

5. Le code complet est ci-dessous :

   handleTransform() {
      // TODO
      let date = this.formInline.date;
      let timeStamp = this.formInline.timeStamp;
      if (date &&!timeStamp) {
        let newValue = new Date(date);
        this.formInline.timeStamp = newValue.getTime();
      }
      if (!date && timeStamp) {
        timeStamp = new Number(timeStamp);
        let d = new Date(timeStamp);
        var Y = d.getFullYear() + "-";
        var M =
          (d.getMonth() + 1 < 10
           ? "0" + (d.getMonth() + 1)
            : d.getMonth() + 1) + "-";
        var D =
          d.getDate() < 10? "0" + d.getDate() + " " : d.getDate() + " ";
        var H = d.getHours() + ":";
        var M2 =
          (d.getMinutes() < 10? "0" + d.getMinutes() : d.getMinutes()) +
          ":";
        var S =
          d.getSeconds() < 10? "0" + d.getSeconds() : d.getSeconds();
        this.formInline.date = Y + M + D + H + M2 + S;
      }
   }

6. Enregistrez le fichier index.html et rafraîchissez la page web. Testez la fonctionnalité de conversion en saisissant ou en sélectionnant une date et une heure, puis en cliquant sur le bouton "convertir".

Vérifier les résultats de conversion

Dans cette étape, vous allez vérifier que la conversion entre des dates et des timestamps fonctionne comme prévu.

1. Ouvrez la page web et observez les résultats de conversion.
2. Lorsque vous entrez ou sélectionnez une date et une heure dans le sélecteur de date et d'heure, la zone de saisie de timestamp devrait afficher le timestamp de 13 chiffres correspondant.
3. Lorsque vous entrez un timestamp de 13 chiffres dans la zone de saisie de timestamp, le sélecteur de date et d'heure devrait afficher la date et l'heure correctes.
4. Assurez-vous que le format de date est affiché sous la forme AAAA-MM-JJ hh:mm:ss et que le timestamp est composé de 13 chiffres.
5. Testez la conversion dans les deux sens pour vous assurer qu'elle fonctionne correctement.

Félicitations ! Vous avez réussi à implémenter l'outil de conversion de date-timestamp à l'aide de Vue.js. Si vous avez d'autres questions ou avez besoin d'aide supplémentaire, n'hésitez pas à demander.

Sommaire

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