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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

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

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

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

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

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

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

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

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

1. Найдите метод handleTransform() в экземпляре Vue.js.

2. Внутри метода handleTransform() необходимо добавить логику конвертации между датами и временными метками.

3. Если 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();
   }

4. Если 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;
   }

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

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

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

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

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

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

Резюме

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