Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать.
В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно обмениваться пользовательской информацией, не получая ее из API или не получая ее из запроса POST.
В этой статье я покажу вам быстрый и простой способ анализа строк запроса из пользовательского URL-адреса и вставки данных в ваше представление, используя только ссылку Vue CDN и обычный JavaScript.
Приступим к делу.
Настройте свой документ
Для начала вам понадобится стандартный файл HTML5, как показано ниже.
Принесите Вью
Вы можете добавить разрабатываемую или производственную версию Vue, используя ссылку CDN, которую можно найти на их официальном сайте здесь.
Создайте свой экземпляр Vue
Мы собираемся настроить ваш экземпляр Vue, чтобы через минуту мы могли хранить некоторые данные и методы, которые нам понадобятся.
Создайте свой блок #app
Затем мы создадим новый удерживающий div для нашего экземпляра Vue с идентификатором «#app», который будет соответствовать значению «el» или элементу в нашем экземпляре Vue. Это сделано для того, чтобы Vue знал, что ищет и где размещать данные.
Добавьте некоторые данные
Теперь мы собираемся добавить некоторые данные имени со значением пустой строки в наш объект данных в экземпляре Vue и использовать наши двойные фигурные скобки для интерполяции этих данных (не волнуйтесь, мы заставим это работать). через секунду).
На этом этапе, если вы загрузите свой проект с помощью расширения, такого как live-server for VS Code, вы должны увидеть что-то вроде этого:
Давайте разберем несколько строк запроса!
Ну а теперь к мясу и картошке! В этом примере нам нужна возможность извлечь имя из строки запроса, прикрепленной к концу URL-адреса (пример: www.example.com?name=NameGoesHere).
Для этого нам понадобится API браузера, о котором я узнал из Блог Дэвида Уолша, и адаптированный для работы с Vue в данном случае, но по своей сути это ванильный JavaScript, и его можно использовать везде, где есть JS. обычно используется.
Команда, которую мы будем использовать, называется URLSearchParams, чтобы получить строки запроса из шаблона URL и проанализировать их так, чтобы нам было легко с ними работать.
В этой части я создам новый метод с именем «getName» в объекте методов экземпляра Vue, создам новую переменную с именем «urlParams» и создам экземпляр нового объекта с URLSearchParams(window.location.search);
Кроме того, это также устанавливает для нашей переменной name значение urlName, которое мы только что проанализировали, и теперь его можно использовать в представлении.
Метод запуска при монтировании
Вы хотите убедиться, что ваша команда «getName» выполняется, когда документ полностью загружен. Для этого мы поместим вызов этой функции в смонтированный хук жизненного цикла в экземпляре Vue.
Протестируйте, чтобы убедиться, что это работает
Если вы обслуживаете вне HTTP, вы должны иметь возможность использовать такой шаблон URL, чтобы проверить и убедиться, что синтаксический анализ строки запроса работает.
127.0.0.1:5500/start.html?name=Ник
Исправление некоторых ошибок
Условный рендеринг
Чтобы убедиться, что у нас хорошее отображение и для общего взаимодействия с пользователем, нам нужно убедиться, что приветственное сообщение не отображается, если у нас действительно нет данных имени для него.
Сделать это относительно просто с помощью директивы v-if и прямой проверки переменной name. Поскольку пустая строка является ложной в JavaScript, она будет оценена как ложная, если наша функция getName не нашла параметр URL «имя».
Скрытие до готовности
Наконец, мы хотим использовать настраиваемый атрибут v-cloak и создать для него стиль, который отключает отображение.
Причина этого в том, что вы можете получить какое-то странное мерцание B.S. при первоначальной загрузке страницы, если у вас нет v-cloak, прикрепленного к условно отображаемым компонентам, которые содержат интерполяцию данных.
Вот и все!
Если все прошло хорошо, вы должны быть в порядке.
Этот подход имеет широкое применение и теоретически может быть использован для самых разных целей. Как вы могли бы использовать этот подход в своем следующем продукте или услуге, чтобы повысить ценность?
Удачного разбора! ;D
Ник Лоуренс Дизайн
Веб-сайт | "Портфолио"
