Установка 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
Кликните на указанную кнопку, чтобы скачать установщик программы.
Запустите загруженный файл, откроется окно установки:
Весь процесс автоматический, так что всё что вам нужно, это дождаться появления на рабочем столе ярлыка Postman и запуска самой программы:
Нам не нужна учетная запись, чтобы работать с программой, поэтому нажимаем на Skip and go to the app
Откроется главное окно программы:
Установка в 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
Нажмем на указанную кнопку:
И введем имя Strapi Blog и нажмем Enter
Добавление запроса
Пришло время сделать наш первый запрос к API созданному в прошлой части, для этого выделим мышкой имя нашей коллекции, вызовем контекстное меню правой кнопкой мыши и выберем Add Request.
Будет открыта новая вкладка New Request.
Все запросы открываются как вкладки, это очень удобно и позволяет быстро между ними переключаться!
Введем в поле URL адрес:
http://192.168.0.6:1337/api/post-items?&populate=postImageПараметр &populate=postImage необходим, в противном случае API не выгрузит нам поля с типом Media!
Наведем курсор на имя запроса New Request, щелкнем по появившейся кнопке и переименуем запрос в Загрузить все записи блога
Нажмем на кнопку 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
}
}
}
Добавим еще одни запрос:
Загрузить одну запись блога
С адресом:
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.
Добавить комментарий