Среда, 21.12.2022 23:21

Установка Postman и работа с API. Создание блога на API с помощью Vuejs и Strapi. Часть 3

Установка Postman и работа с API. Создание блога на API с помощью Vuejs и Strapi. Часть 3

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

Что же касается конечного пользователя, для работы с API ему придется использовать специальную программу, так как информация, передаваемая в формате JSON неудобна для восприятия и необходимо стороннее программное обеспечение для отображения результатов запросов в понятном и структурированном виде.

Из всех существующих программ, наиболее удачно этот функционал реализован в Postman. Это бесплатная программа, которая к тому же может быть использована без регистрации учетной записи на сайте производителя.

С её помощью вы можете создавать коллекции запросов, сами запросы можно распределять по папкам, экспортировать и импортировать коллекции, что очень удобно и позволяет разработать коллекцию запросов для последующего использования.

Сегодня мы рассмотрим установку Postman под Windows и Alt Linux и использование программы для изучения результатов запроса.

Установка под Windows

Откроем страницу загрузки Postman https://www.postman.com/downloads/?utm_source=postman-home для Windows

2022-12-21-17-15-www.postman.com_2.png

Кликните на указанную кнопку, чтобы скачать установщик программы.

Запустите загруженный файл, откроется окно установки:

2022-12-21_17-21-27.png

Весь процесс автоматический, так что всё что вам нужно, это дождаться появления на рабочем столе ярлыка Postman и запуска самой программы:

2022-12-21_17-23-58.png

Нам не нужна учетная запись, чтобы работать с программой, поэтому нажимаем на Skip and go to the app

Откроется главное окно программы:

2022-12-21_17-29-27.png

Установка в Alt lInux

Для начала обязательно обновляем список пакетов и сам дистрибутив: 

sudo apt-get update sudo apt-get dist-upgrade 

Устанавливать мы будем через snap:

Установим: 

sudo apt-get install snapd sudo systemctl start snapd sudo snap install postman

Для запуска программы введем: 

snap run postman

Вы можете самостоятельно создать ярлык на рабочий стол для запуска программы.

Добавляем первую коллекцию

У меня уже создано несколько коллекций, у вас же список будет пуст.

В Postman все запросы можно группировать в коллекции. Они необязательно должны принадлежать одному API или даже серверу, всё зависит от того, как вы решите их сгруппировать.

Добавим новую коллекцию и назовем ее Strapi Blog

Нажмем на указанную кнопку:

2022-12-21_17-32-59.png

И введем имя Strapi Blog и нажмем Enter

2022-12-21_17-34-40.png

Добавление запроса

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

2022-12-21_17-35-48.png

Будет открыта новая вкладка New Request.

Все запросы открываются как вкладки, это очень удобно и позволяет быстро между ними переключаться!

Введем в поле URL адрес: 

 http://192.168.0.6:1337/api/post-items?&populate=postImage

Параметр &populate=postImage необходим, в противном случае API не выгрузит нам поля с типом Media!

Наведем курсор на имя запроса New Request, щелкнем по появившейся кнопке и переименуем запрос в Загрузить все записи блога

2022-12-21_17-40-28.png

Нажмем на кнопку Send

В нижней части окна отобразятся данные полученные с сервера API в формате JSON.

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "postTitle": "Первый пост",
                "postText": "Это первый пост\n\n### Это подзаголовок\n\nЭто текст после подзаголовка",
                "createdAt": "2022-12-21T01:18:47.257Z",
                "updatedAt": "2022-12-21T01:18:53.433Z",
                "publishedAt": "2022-12-21T01:18:53.423Z",
                "postImage": {
                    "data": {
                        "id": 1,
                        "attributes": {
                            "name": "full.png",
                            "alternativeText": null,
                            "caption": null,
                            "width": 1200,
                            "height": 628,
                            "formats": {
                                "thumbnail": {
                                    "name": "thumbnail_full.png",
                                    "hash": "thumbnail_full_dd6a1a40cb",
                                    "ext": ".png",
                                    "mime": "image/png",
                                    "path": null,
                                    "width": 245,
                                    "height": 128,
                                    "size": 10.25,
                                    "url": "/uploads/thumbnail_full_dd6a1a40cb.png"
                                },
                                "large": {
                                    "name": "large_full.png",
                                    "hash": "large_full_dd6a1a40cb",
                                    "ext": ".png",
                                    "mime": "image/png",
                                    "path": null,
                                    "width": 1000,
                                    "height": 523,
                                    "size": 56.67,
                                    "url": "/uploads/large_full_dd6a1a40cb.png"
                                },
                                "medium": {
                                    "name": "medium_full.png",
                                    "hash": "medium_full_dd6a1a40cb",
                                    "ext": ".png",
                                    "mime": "image/png",
                                    "path": null,
                                    "width": 750,
                                    "height": 393,
                                    "size": 38.31,
                                    "url": "/uploads/medium_full_dd6a1a40cb.png"
                                },
                                "small": {
                                    "name": "small_full.png",
                                    "hash": "small_full_dd6a1a40cb",
                                    "ext": ".png",
                                    "mime": "image/png",
                                    "path": null,
                                    "width": 500,
                                    "height": 262,
                                    "size": 24.31,
                                    "url": "/uploads/small_full_dd6a1a40cb.png"
                                }
                            },
                            "hash": "full_dd6a1a40cb",
                            "ext": ".png",
                            "mime": "image/png",
                            "size": 14.32,
                            "url": "/uploads/full_dd6a1a40cb.png",
                            "previewUrl": null,
                            "provider": "local",
                            "provider_metadata": null,
                            "createdAt": "2022-12-21T01:18:42.068Z",
                            "updatedAt": "2022-12-21T01:18:42.068Z"
                        }
                    }
                }
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 1
        }
    }
}

2022-12-21_17-45-26.pngДобавим еще одни запрос:

Загрузить одну запись блога

С адресом: 

http://192.168.0.6:1338/api/post-items/1?&populate=postImage

Обратите внимание, мы просто добавили в URL запроса ИД поста, в данном случае это 1: 

/api/post-items/1

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

 "data": [         {             "id": 1,

А в случае с одной записью, объект: 

{     "data": {         "id": 1,

Заключение

Сегодня мы рассмотрели установку и использование Postman для работы с API:

Установку в Windows;

Установку в Alt Linux;

Создали новую коллекцию;

Добавили запрос списка записей;

Добавили запрос одной записи.

В следующей статье мы используем готовый шаблон сайта, написанный на Vue.js для отображения данных нашего API.

Категория API
Теги Postman API Strapi

Добавить комментарий

Простой текст

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.
Просмотров: 213