Форматирование и визуализация данных с использованием Vue.js

Введение

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

👀 Предварительный просмотр

🎯 Задачи

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

• Отправлять HTTP-запрос для извлечения данных из JSON-файла
• Форматировать данные для соответствия требуемому формату отображения
• Отображать отформатированные данные в HTML-таблице с использованием Vue.js и Element UI

🏆 Достижения

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

• Использовать axios для отправки HTTP-запросов и извлечения данных
• Обрабатывать и преобразовывать данные в нужный формат
• Интегрировать Vue.js и Element UI для создания отзывчивого и визуально привлекательного компонента таблицы

Skills Graph

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

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

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

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

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

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

Отправка запроса для извлечения данных

В этом шаге вы научитесь отправлять HTTP-запрос для извлечения данных из файла fetchTableData.json.

1. Откройте файл index.html в редакторе кода.
2. В секции <script> добавьте новый метод getTableData() в methods в экземпляре Vue.
3. Внутри метода getTableData() используйте функцию axios.get() для отправки GET-запроса к файлу fetchTableData.json:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Форматировать данные и присвоить их tableData
    });
  }
}

4. Вызовите функцию getTableData в mounted экземпляра Vue.

mounted() {
  this.getTableData();
},

Форматирование данных

В этом шаге вы научитесь форматировать данные в требуемый формат и присвоить их свойству tableData.

1. Откройте файл index.html в редакторе кода.
2. В секции <script> найдите метод getTableData() внутри экземпляра Vue.
3. Внутри обратного вызова успеха метода then() в функции getTableData() получите свойство data из объекта ответа:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. Пройдитесь по массиву resData и отформатируйте данные в соответствии с требованиями:

   • Для поля datetime преобразуйте формат из YYYYMMDD в YYYY-MM-DD.
   • Для поля sex преобразуйте значение из 1 в "Man" и 0 в "Woman".
   • Для поля vip преобразуйте значение из 1 в "Yes" и 0 в "No".

   Вот код для форматирования данных:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         let resData = response.data.data;
         resData.forEach((item) => {
            item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
            item.sex = item.sex? "Man" : "Woman";
            item.vip = item.vip? "Yes" : "No";
         });
      });
   }

5. После форматирования данных присвойте массив resData свойству tableData:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         //...
         this.tableData = resData;
      });
   }

Теперь данные отформатированы и присвоены свойству tableData, которое будет использоваться для отображения таблицы в HTML.

Финальный эффект выглядит так:

Резюме

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