В прошлой статье мы установили Strapi, сегодня мы рассмотрим, как же он устроен.

Strapi – backend CMS, это означает что у него нет frontend-части, т.е. сайта, который видит конечный пользователь.

Так же в Strapi отсутствуют таблицы, категории, посты и прочие разделы, которые привычны всем нам по классическим CMS. Всё это вам нужно добавить самому или использовать заранее подготовленные шаблоны.

Обратите внимание, в первой части мы использовали быстрый способ создания проекта, при котором используется база данных sqlite. Позже перейти на Mysql и любую другую БД будет невозможно! Тем не менее, для простого сайта или лендинга хватит и sqlite. Позже мы рассмотрим процесс создания проекта с использованием Mysql.

Двумя основными компонентами, доступными после установки, являются:

- Content-Type Builder – по сути редактор таблиц, который позволяет создавать таблицы для хранения данных, создавать связанные таблицы и связывать их между собой;

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

Так же в админку встроен свой каталог бесплатных плагинов (Marketplace), которых больше 94! С их помощью вы сможете добавить дополнительный функционал, например, оценки для статей, комментарии, заменить встроенный редактор, на поддерживающий HTML и много другое.

Для Strapi подготовлено несколько шаблонов, которые при создании нового проекта предоставляют вам уже готовую структуру для:

- Блога;

- Корпоративного сайта;

- Магазина.

Список шаблонов вы можете в специально созданном репозитории на Github. 

Построитель Коллекции Типов (Content-Type Builder)

Используется для создания и редактирования структуры данных вашего сайта.

Collection Types

В Strapi вместо таблиц используются Collection Types – Коллекция Типов, по сути те же таблицы, но, в отличии от СУБД, эта коллекция сразу после создания, добавления элементов и предоставления прав доступа доступна через API.

Добавляя элементы в коллекцию мы по сути добавляем столбцы в таблицу. Каждый элемент описывает:

- Тип данных;

- Имя;

- Является ли обязательным к заполнению;

- Является ли уникальным;

- Минимальную и максимальную длину;

- Прочие параметры.

После обновления любого поля необходим перезапуск сервера, во время которого производится обновление схемы базы данных и пересборка бакэнда.

Одиночные Типы (Single Types)

По сути это таблица из одной строки, вы так же добавляете элементы, как и в коллекцию, но при переходе к редактированию данных вам будет предложено просто заполнить эти поля. Очень полезны для хранения данных для отдельных страниц, например, «О нас» или «Контакты».

Компоненты - Components

Позволяет создавать компоненты, облегчающие заполнение данных.

Например, выбирать категории из списка и задавать для них какое-либо значение.

Это более продвинутый способ, который мы будем рассматривать в одной из следующих статей.

Созданием новой коллекции типов 

Откроем админ панель Strapi 

http://192.168.0.6:1337/admin/

Кликнем на Content-Type Builder

Нажмем на Skip the tour

Кликнем по Create new collection type

Заполним форму

Display name – postItem

Остальные поля будут заполнены автоматически

Нажмем Continue

Щелкнем по Text

Заполним форму:

Name – postTitle

Оставим Short Text

Кликнем на Advanced Settings

Установим галочки:

Required field

Unique field

Нажмем Finish.

Добавим еще несколько полей:

Name - postText

Type - Rich Text

Required field - Да

Name - postImage

Type - Media

Single Media

Required field - Да

 Выбрать из списка только Images

Нажмем Save и дождемся окончания перезапуска сервера.

Попробуем открыть в браузере адрес: 

http://192.168.0.6:1337/api/post-items

В ответ получим:

{"data":null,"error":{"status":403,"name":"ForbiddenError","message":"Forbidden","details":{}}}

 Нам нужно исправить права доступа к этому разделу API

Откроем Settings -> Users & Permissions Plugin (Roles) -> Public

Раскроем Post-Item и установим галочки напротив:

find

findOne

Нажмем Save

Еще раз обновим страницу и получим: 

{"data":[],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":0,"total":0}}}

Заполняем данные

Для заполнения нашего сайта данными используется раздел Content Manager.

Он содержит список всех коллекций, типов и компонентов.

С его помощью вы можете добавлять записи в коллекции и редактировать данные Одиночных Типов.

Откроем Content Manager и нажмем на кнопку Create new entry

Заполним поля

Пролистаем вниз и нажмем на область под Image

Откроется окно загрузки изображений

Нажмем на кнопку в центре – Add new assets

Перетащим картинку или выберем новую, я буду использовать одну и прошлых статей:

Нажмите Upload 1 asset to the library

Картинка появится в списке, убедитесь что она выбрана – установлена галочка и нажмите Finish

Картинка появится в поле Image

Пролистаем наверх и нажмем на Save, а потом на Publish

В браузере обновим страницу:  

http://192.168.0.6:1337/api/post-items

Содержимое изменится:  

{"data":[{"id":2,"attributes":{"createdAt":"2022-12-19T05:29:12.228Z","updatedAt":"2022-12-19T05:35:22.489Z","publishedAt":"2022-12-19T05:30:33.397Z","postTitle":"Это первый пост","postText":"Это текст поста\n\n### Подзаголовок поста"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":1}}}

Если ничего не изменилось, вы забыли нажать Publish!

Данные были выгружены из базы данных в формате JSON с помощью API.

Заключение

Сегодня мы рассмотрели добавление новой коллекции данных для нашего блога:

Добавили новую коллекцию;

Добавили новые поля;

Прописали права публичного доступа к нашему API;

Добавили запись в наш блог;

Рассмотрели загрузку изображений в библиотеку;

Проверили результат выгрузки в API;

В следующий раз мы установим программу для работы с API Postman и рассмотрим подробнее получившееся API.