В этом руководстве мы решаем наиболее распространенный вопрос о том, как загрузить данные JSON в Vue.js и Nuxt.js с помощью HTTP-запроса GET. Мы делаем это с помощью AXIOS. Этот пакет, который мы установили, уже есть при создании приложения с использованием Nuxt.js.

Пошаговое руководство №1

1. Создайте новую страницу Vue.

Сначала мы начнем с базового использования axios, следуя примеру из документации Nuxt.js. Мы создаем новую страницу getapi.vue в папке Pages с базовой структурой, как показано ниже.

Раньше я начинал с базового шаблона, чтобы стандартизировать практику программирования. Кроме того, мне легче выучить новый язык.

2. Добавить Axios

Хорошо, мы сначала используем Axios для загрузки внешних данных JSON в список. В разделе ‹script› мы добавляем

3. Отображение данных JSON в теге ‹li›

Затем мы отображаем возвращаемые данные в ‹li› следующим образом.

Вы можете увидеть результат в браузере следующим образом.

ЧАЕВЫЕ

Помимо asyncData, в качестве альтернативы мы можем использовать метод выборки. Fetch не может устанавливать компоненты страницы, но asyncData может. Поэтому для новичков мы используем только asyncData, поскольку этого достаточно для большинства требований приложений.

В Vue.js v-for - это рендеринг списка для сопоставления массива элементам. Одно из распространенных применений v-for - это, как в приведенном выше примере, для заполнения массива в списке тегов ‹li›.

Глобальный базовый URL

В реальном приложении мы будем вызывать множество API. Изменение каждого вызова AJAX при изменении базового URL займет много времени, например с сервера разработки на рабочий сервер. Жизнь станет проще, если мы сможем определить глобальный базовый URL.

Пошаговое руководство №2

1. Определите глобальную переменную (переменную среды)

Мы можем определить переменные среды в nuxt.config.js, которые можно использовать во всем приложении.

Внутри module.export мы добавляем переменную apiBaseUrl, которая имеет значение URL-адреса API, например «Https://jsonplaceholder.typicode.com»

2. Создайте плагины

Также мы создадим плагин axios.js и поэтому добавим его в раздел плагинов в nuxt.config.js.

В папке плагинов мы создаем новый файл «axios.js» со скриптами.

Мы устанавливаем baseURL axios для вновь созданной переменной окружения apiBaseUrl.

3. Используйте baseURL на страницах.

Чтобы использовать новый baseURL на страницах, мы сначала импортируем axios из плагинов axios.js.

Результат веб-вывода такой же, как и раньше. Однако, если мы хотим изменить базовый URL-адрес API, нам не нужно менять URL-адреса на страницах одну за другой. Мы просто устанавливаем его один раз прямо в переменной окружения nuxt.config.js.

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

Не забывайте подписываться на нас и хлопать в ладоши 👏 в поддержку нашего письма.

Другие пошаговые руководства по Vue.js:

Другой способ создания приложения для Android

С помощью онлайн-службы Web to App вы можете легко преобразовать свой любимый веб-сайт в приложение без программирования. Это может сделать кто угодно.

Проверьте это на http://fastweb2app.baseappstudio.com.

Это 100% бесплатно как для личного, так и для делового использования.