Herramienta de conversión de tiempo con Vue.js

Introducción

En este proyecto, aprenderá a crear una herramienta de conversión de tiempo utilizando Vue.js. Esta herramienta le permitirá convertir entre fechas y marcas de tiempo, lo cual es una necesidad común en muchas aplicaciones empresariales.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

• Cómo configurar un proyecto de Vue.js y entender la estructura de código proporcionada
• Cómo implementar la funcionalidad para convertir entre fechas y marcas de tiempo
• Cómo garantizar que los resultados de la conversión se muestren correctamente en el formato deseado

🏆 Logros

Después de completar este proyecto, podrá:

• Utilizar Vue.js para construir una aplicación web simple
• Manejar datos de fecha y hora en una aplicación web
• Convertir entre diferentes representaciones de tiempo, como fechas y marcas de tiempo
• Probar y verificar la corrección de la funcionalidad de conversión

Configurar la estructura del proyecto

En este paso, configurará los archivos y la estructura del proyecto. Siga los pasos siguientes para completar este paso:

Abra la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualícela manualmente y verá la página.

Implementar la funcionalidad de búsqueda en tiempo real

En este paso, implementará la funcionalidad para convertir entre fechas y marcas de tiempo.

1. Localice el método handleTransform() en la instancia de Vue.js.

2. Dentro del método handleTransform(), debe agregar la lógica para convertir entre fechas y marcas de tiempo.

3. Si formInline.date no está vacío y formInline.timeStamp está vacío, debe convertir el valor de la fecha a una marca de tiempo de 13 dígitos y actualizar formInline.timeStamp en consecuencia.

   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á vacío y formInline.timeStamp no está vacío, debe convertir el valor de la marca de tiempo a una cadena de fecha en el formato YYYY-MM-DD hh:mm:ss y actualizar formInline.date en consecuencia.

   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. El código completo está a continuación:

   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. Guarde el archivo index.html y actualice la página web. Pruebe la funcionalidad de conversión ingresando o seleccionando una fecha y hora, y luego haga clic en el botón "convertir".

Verificar los resultados de la conversión

En este paso, verificará que la conversión entre fechas y marcas de tiempo funcione como se espera.

1. Abra la página web y observe los resultados de la conversión.
2. Cuando ingrese o seleccione una fecha y hora en el selector de fecha y hora, el cuadro de entrada de marca de tiempo debe mostrar la marca de tiempo de 13 dígitos correspondiente.
3. Cuando ingrese una marca de tiempo de 13 dígitos en el cuadro de entrada de marca de tiempo, el selector de fecha y hora debe mostrar la fecha y hora correctas.
4. Asegúrese de que el formato de fecha se muestre como YYYY-MM-DD hh:mm:ss y que la marca de tiempo tenga 13 dígitos de longitud.
5. Pruebe la conversión en ambos sentidos para asegurarse de que funcione correctamente.

¡Felicitaciones! Ha implementado con éxito la herramienta de conversión de fecha-marca de tiempo utilizando Vue.js. Si tiene alguna pregunta adicional o necesita ayuda adicional, no dude en preguntar.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.