Ferramenta de Conversão de Tempo | Projeto Vue.js

Introdução

Neste projeto, você aprenderá como criar uma ferramenta de conversão de tempo usando Vue.js. Esta ferramenta permitirá que você converta entre datas e timestamps (carimbos de tempo), um requisito comum em muitas aplicações de negócios.

👀 Pré-visualização

Pré-visualização da ferramenta de conversão de tempo

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar um projeto Vue.js e entender a estrutura de código fornecida
Como implementar a funcionalidade para converter entre datas e timestamps
Como garantir que os resultados da conversão sejam exibidos corretamente no formato desejado

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar Vue.js para construir uma aplicação web simples
Manipular dados de data e hora em uma aplicação web
Converter entre diferentes representações de tempo, como datas e timestamps
Testar e verificar a correção da funcionalidade de conversão

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Funcionalidade de Busca em Tempo Real

Nesta etapa, você implementará a funcionalidade para converter entre datas e timestamps.

Localize o método handleTransform() na instância Vue.js.
Dentro do método handleTransform(), você precisa adicionar a lógica para converter entre datas e timestamps.

Se formInline.date não estiver vazio e formInline.timeStamp estiver vazio, você deve converter o valor da data em um timestamp de 13 dígitos e atualizar formInline.timeStamp de acordo.

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

Se formInline.date estiver vazio e formInline.timeStamp não estiver vazio, você deve converter o valor do timestamp em uma string de data no formato YYYY-MM-DD hh:mm:ss e atualizar formInline.date de acordo.

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;
}

O código completo é o seguinte:

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;
   }
}

Salve o arquivo index.html e atualize a página web. Teste a funcionalidade de conversão inserindo ou selecionando uma data e hora e, em seguida, clicando no botão "converter".

Verificar os Resultados da Conversão

Nesta etapa, você verificará se a conversão entre datas e timestamps está funcionando conforme o esperado.

Abra a página web e observe os resultados da conversão.
Ao inserir ou selecionar uma data e hora no seletor de data e hora, a caixa de entrada do timestamp deve exibir o timestamp correspondente de 13 dígitos.
Ao inserir um timestamp de 13 dígitos na caixa de entrada do timestamp, o seletor de data e hora deve exibir a data e hora corretas.
Certifique-se de que o formato da data seja exibido como YYYY-MM-DD hh:mm:ss e que o timestamp tenha 13 dígitos.
Teste a conversão em ambas as direções para garantir que esteja funcionando corretamente.

Descrição da imagem

Parabéns! Você implementou com sucesso a ferramenta de conversão de data-timestamp usando Vue.js. Se tiver mais alguma dúvida ou precisar de assistência adicional, sinta-se à vontade para perguntar.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Ferramenta de Conversão de Tempo com Vue.js