Извлечение параметров объекта из запроса

Введение

В этом проекте вы научитесь исправлять ошибку в библиотеке vue-router, которая вызывает проблемы при передаче объекта в параметр запроса. Проект проведет вас по шагам, необходимым для поиска файла с проблемой, идентификации ошибки и реализации решения для исправления ошибки.

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

🎯 Задачи

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

• настраивать разработочную среду и устанавливать необходимые зависимости;
• искать файл, содержащий ошибку, и готовить его к исправлению;
• исправлять ошибку в функции resolveQuery;
• перестраивать и тестировать исправление, чтобы убедиться, что ошибка устранена.

🏆 Достижения

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

• определять и исправлять ошибки в сторонней библиотеке;
• обрабатывать значения объектов в параметрах запроса;
• проверять исправления, чтобы убедиться, что они работают как ожидается;
• внести вклад в открытые исходные коды и улучшить свои навыки решения проблем и отладки.

Исправьте ошибку

Для начала ознакомьтесь с структурой каталога файлов слева, которая выглядит следующим образом:

├── vue-router-3.4.1
├── vue.js
└── index.html

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

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

Откройте консоль браузера и наблюдайте вывод. Сначала нажмите кнопку "test", а затем кнопку "pushQuery". Предварительный просмотр страницы в браузере должен выглядеть следующим образом:

В коде vue-router v3.4.1 есть ошибка, которая заключается в том, что при использовании this.$router.push, когда value, соответствующее key в query, является объектом, оно будет прочитано как строка "[object object]", что не позволяет нам правильно получить значение объекта. Пожалуйста, исправьте эту проблему.

В этом шаге вы исправите ошибку в функции resolveQuery.

1. Найдите файл vue-router-3.4.1/src/util/query.js и перейдите на строку 41, чтобы решить проблему на основе воспроизведения ошибки.

2. Функция castQueryParamValue должна обрабатывать случай, когда значение является объектом. Измените функцию следующим образом:

   const castQueryParamValue = (value) =>
     typeof value == "number" ? "" + value : value;
   

Перестройте и протестируйте исправление

В этом шаге вы перестройте пакет vue-router-3.4.1 и протестируете исправление.

1. В терминале перейдите в директорию vue-router-3.4.1.
2. Выполните команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс зависнет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)
3. После успешной установки всех зависимостей выполните команду npm run build, чтобы перестроить и выпустить проект.
4. Перезапустите страницу и нажмите "Web 8080", чтобы просмотреть страницу.
5. Откройте консоль браузера снова и наблюдайте за выводом. Сначала нажмите кнопку "Test", а затем кнопку "pushQuery", чтобы увидеть и протестировать эффект исправления.

Теперь исправление должно правильно обрабатывать случай, когда value, соответствующее key в query, является объектом, и вы должны увидеть, что объект отображается правильно в консоли.

Резюме

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