Инструмент конвертации времени | Проект Vue.js

Введение

В этом проекте вы научитесь создавать инструмент конвертации времени с использованием Vue.js. Этот инструмент позволит вам конвертировать между датами и временными метками, что является распространенным требованием в многих бизнес-приложениях.

👀 Предпросмотр

Предпросмотр инструмента конвертации времени

🎯 Задачи

В этом проекте вы научитесь:

настраивать проект на Vue.js и понимать структуру предоставленного кода;
реализовывать функциональность конвертации между датами и временными метками;
обеспечивать правильное отображение результатов конвертации в требуемом формате.

🏆 Достижения

После завершения этого проекта вы сможете:

использовать Vue.js для создания простого веб-приложения;
обрабатывать данные о дате и времени в веб-приложении;
конвертировать между разными представлениями времени, такими как даты и временные метки;
тестировать и проверять правильность функциональности конвертации.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Реализация функции реального времени поиска

В этом шаге вы реализуете функциональность конвертации между датами и временными метками.

Найдите метод handleTransform() в экземпляре Vue.js.
Внутри метода handleTransform() необходимо добавить логику конвертации между датами и временными метками.
Если formInline.date не пуст и formInline.timeStamp пуст, необходимо преобразовать значение даты в 13-значную временную метку и обновить formInline.timeStamp соответственно.
```
let date = this.formInline.date;
let timeStamp = this.formInline.timeStamp;
if (date && !timeStamp) {
  let newValue = new Date(date);
  this.formInline.timeStamp = newValue.getTime();
}
```

Если formInline.date пуст и formInline.timeStamp не пуст, необходимо преобразовать значение временной метки в строку даты в формате YYYY-MM-DD hh:mm:ss и обновить formInline.date соответственно.

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

Полный код представлен ниже:

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

Сохраните файл index.html и обновите веб-страницу. Проверьте функциональность конвертации, введя или выбрав дату и время, а затем нажав кнопку "конвертировать".

Проверить результаты конвертации

В этом шаге вы проверите, что конвертация между датами и временными метками работает как ожидается.

Откройте веб-страницу и изучите результаты конвертации.
Когда вы вводите или выбираете дату и время в компоненте выбора даты и времени, в поле ввода временной метки должно отображаться соответствующее 13-значное значение временной метки.
Когда вы вводите 13-значное значение временной метки в поле ввода временной метки, в компоненте выбора даты и времени должно отображаться правильная дата и время.
Убедитесь, что формат даты отображается в виде YYYY-MM-DD hh:mm:ss, а временная метка содержит 13 цифр.
Проверьте конвертацию в обоих направлениях, чтобы убедиться, что она работает правильно.

Описание изображения

Поздравляем! Вы успешно реализовали инструмент конвертации даты и временной метки с использованием Vue.js. Если у вас возникнут дополнительные вопросы или потребуется дополнительная помощь, не стесняйтесь задавать их.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете выполнить больше лабораторных работ в LabEx, чтобы улучшить свои навыки.

Инструмент конвертации времени с использованием Vue.js