Создание структуры для блога в Strapi. Создание блога на API с помощью Vuejs и Strapi. Часть 2
В прошлой статье мы установили 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.
Добавить комментарий