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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/obj_manip -.-> lab-445781{{"Инструмент конвертации времени с использованием Vue.js"}} javascript/dom_select -.-> lab-445781{{"Инструмент конвертации времени с использованием Vue.js"}} javascript/dom_manip -.-> lab-445781{{"Инструмент конвертации времени с использованием Vue.js"}} javascript/event_handle -.-> lab-445781{{"Инструмент конвертации времени с использованием Vue.js"}} javascript/dom_traverse -.-> lab-445781{{"Инструмент конвертации времени с использованием Vue.js"}} end

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

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

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

├── 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, чтобы улучшить свои навыки.