Собственное RESTful API за 2.5 шага

Шаг 0.5 - основа основ

Для начала необходимо создать директорию (пусть ее название будет restfulApiForYandexDzen). В ней мы создадим файл index.html и две папки - css, js.

1 Шаг - установка необходимых библиотек и фреймворков

Мы будем использовать такие библиотеки и фреймоврки, как Vue, Axios и Bootstrap. Так же для работы bootstrap'а необходимы jquery, popper.

Bootstrap - https://getbootstrap.com/

2 Шаг - Подключение и сборка

Примерно так будет выглядеть index.html после подключения нужных скриптов.

Обратите внимание на порядок подключения скриптов, его важно соблюсти, иначе все может полететь, так как bootstrap зависит от jquery и popper'а.

Инициализируем объект класса Vue. Создаем пару реактивных переменных.

Инициализация объекта класса Vue. Создание реактивных переменных.

Ищем какую-нибудь тестовую api (я использую Reqres), а затем реализуем несколько методов для работы с api при помощи axios.

Методы работы с API средствами библиотеки axios.

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

Пример ответа с API. Ура, все работает!

А теперь вернемся к дизайну. Bootstrap крайне упросит верстку.

Минимальный пример отрисовки ответа API.

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

Пример использования хука жизненного цикла Vue