Пришло время получить актуальные данные из нашей серверной части и отобразить их в наших компонентах. Для этого нам нужно использовать клиентскую библиотеку HTTP, а поскольку Vue.js не имеет своей собственной, мы собираемся использовать Axios. Кроме того, нам необходимо настроить Axios для отправки запросов на наш внутренний сервер в зависимости от окружения, в которой находится наше приложение.
Настройка переменных окружения
В режиме разработки нам нужно направить наши HTTP-запросы на наш локальный бэкэнд, который находится по адресу http://localhost:5000/api. Когда мы развертываем приложение в производственной среде, мы будем направлять наши запросы API на бэкэнд, который находится на удаленном сервере, а не в наш локальный бэкэнд, что-то вроде http://www.youproject.com/api
.
Чтобы реализовать это поведение, нам нужно изменить файлы окружения.
В каталоге config
у нас есть файлы среды. Давайте откроем файл config/dev.env.js
и добавим в него новую переменную окружения:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ENDPOINT: '"http://localhost:5000/api"'
})
Проделаем то же самое с файлом config/prod.env.js
:
module.exports = {
NODE_ENV: '"production"',
API_ENDPOINT: '"http://www.youproject.com/api"'
}
Теперь нам нужно установить Axios
и настроить его для использования этих переменных.
Установка Axios
Откроем терминал и в корне нашего проекта и введем команду:npm i axios
После завершения установки необходимо открыть файл main.js
, импортировать Axios
и настроить его для использования переменной API_ENDPOINT
в качестве базового URL для всех запросов Axios
.
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Axios from 'axios';
Vue.config.productionTip = false;
Axios.defaults.baseURL = process.env.API_ENDPOINT;
Vue.use(BootstrapVue);
process
- это глобальная переменная Node.js, через которую мы можем получить доступ к нашим переменным среды.
После того, как мы закончили с переменными окружения, пришло время создать нашу первую службу API, с помощью которой необходимо собирать некоторые данные из нашей серверной части.
Vue.js не имеет никаких правил об архитектуре кода, например о том, где размещать сервисы или модели. Мы можем структурировать проект Vue.js по своему усмотрению, поскольку он не знает таких терминов, как Service
, Controller
или Model
. Мы можем реализовать все это в простом файле .js
, который мы создаем для этой конкретной цели.
Создание службы API
Давайте создадим новый каталог в нашем каталоге src
и назовем его api-services
. Затем внутри него мы создадим новый файл и назовем его owner.service.js
.
В этом файле мы собираемся реализовать наши вызовы Axios на бэкэнд, и рекомендуется создавать отдельные служебные файлы API для каждой сущности в нашей базе данных или ресурсе RESTful.
Далее импортируем Axios
и реализуем вызовы RESTful в нашем файле owner.service.js
:
import Axios from 'axios';
const RESOURCE_NAME = '/owner';
export default {
getAll() {
return Axios.get(RESOURCE_NAME);
},
get(id) {
return Axios.get(${RESOURCE_NAME}/${id});
},
create(data) {
return Axios.post(RESOURCE_NAME, data);
},
update(id, data) {
return Axios.put(${RESOURCE_NAME}/${id}, data);
},
delete(id) {
return Axios.delete(${RESOURCE_NAME}/${id});
}
};
Просто для целей тестирования импортируем наш сервис API в компонент Home.vue
и проверим, работает ли она.
Получение данных из серверной части
Откроем файл src/Home.vue
, импортируем в него OwnerService
и выполним из него функцию getAll()
:
<script>
import OwnerService from '@/api-services/owner.service';
export default {
name: 'Home',
created() {
OwnerService.getAll().then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error.response.data);
});
}
};
</script>
Функция created()
является частью жизненного цикла компонента Vue.js. Она будет выполнена после того, как компонент будет создан и все данные установлены, но этап монтирования компонента еще не начат. Мы используем этот хук, чтобы проверить, работает ли OwnerService
.
Когда мы вызываем любую из функций Axios
в нашей службе API, эта функция возвращает Promise
, потому что HTTP-вызовы являются асинхронными. Что нам нужно сделать, так это вернуть это обещание из нашей службы API, а затем прослушать ответ Promise
. Это основная причина, по которой мы вызываем .then()
после вызова службы API.
Запустим наше приложение с npm run dev
и введем http://localhost:8080
в веб-браузере. Затем мы собираемся открыть DevTools
(F12), переключиться на Console
и перезагрузить нашу страницу. Мы должны увидеть следующий результат:
Далее удалим реализацию хука жизненного цикла created()
, потому что мы убедились, что наша служба API работает нормально.
Заключение
Теперь вы готовы создавать новые компоненты и отображать данные, которые будете получать от серверной части.
Прочитав этот пост, вы узнали:
- Как работать с файлами окружения в Vue.js
- Как установить и настроить клиент Axios
- Как реализовать API-сервис
- Как совершать HTTP-вызовы
В следующей части вы узнаете, как создавать собственные компоненты и отображать данные, полученные из серверной части.