Создание движка

Установка

Как упоминалось ранее, Strapi — это полноценная CMS без головы с включенными возможностями движка. Если вы никогда раньше не работали со Strapi, он просто отлично вам подойдет.

Strapi имеет собственный генератор проектов. Мы выйдем (cd) из нашего внешнего приложения и создадим серверную часть бок о бок:

my-portfolio $ cd ..
$ yarn create strapi-app portfolio-backend --quickstart

После установки сервер запустится автоматически. Вы попадете прямо на новую вкладку в вашем браузере:

Создание движка

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

Создание движка

Потрясающе! После того, как вы создадите свой аккаунт, вы должны увидеть главную панель инструментов Strapi:

Создание движка

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

Коллекции

В левом меню, под Plugins, вы увидите Content-Type Builder. Здесь вы сможете создавать различные типы данных.

Тип Single — это как раз то, на что он похож. Это единый тип данных. Это может быть фрагмент статического текста или что-то подобное.

Тип Коллекция (Collection) — это тип, у которого много элементов. В нашем случае тип Коллекция будет содержать много элементов портфолио. Это также было бы правильным выбором, если бы вы создали блог, газету или что-нибудь еще с несколькими записями, которые вы бы повторяли во фронтенде.

Давайте настроим тип коллекции — Портфолио.

Нажмите кнопку «Создать новый тип коллекции» (Create a new collection type) и введите имя коллекции.

Создание движка

Когда закончите, нажмите «Продолжить» (Continue). Затем нам нужно выяснить, какие поля данных мы хотим использовать. Я думаю об этих вещах:

  • Headline
  • Content
  • Image
  • slug id

Для заголовка мы создадим новое текстовое поле Text field и назовем его «Headline» (заголовок).

Создание движка

Для нашего контента мы создадим текстовое поле Rich text:

Создание движка

Для нашего основного изображения мы создадим поле Media:

Создание движка

Для нашего слага (url) мы создадим поле id и установим для него Headline (Заголовок):

Создание движка

Это должно дать нам 4 поля, и мы можем создать их в итоге нажав «Сохранить» (Save):

Создание движка

Сервер перезапустится и внесет все наши изменения. После этого вы заметите, что наш тип портфолио указан в списке типов коллекций в левом меню:

Создание движка

Вы видели, что оно было написано во множественном числе автоматически? Это потому, что оно может содержать несколько портфолио. Этого бы не случилось с типом Single.

Разрешения

Разрешения или Permissions. Следующим шагом будет добавление разрешений. По умолчанию Strapi полностью закрыт, поэтому вам нужно вручную выбрать, какие типы запросов должны быть общедоступными. В левом меню нажмите «Настройки» (Settings), затем нажмите «Роли» Roles в разделе «Плагин пользователей и разрешений» (Users & Permissions Plugin).

Создание движка

Здесь мы можем установить разрешения для аутентифицированных и общедоступных API. Поскольку мы собираемся создавать элементы нашего портфолио непосредственно внутри нашей CMS, нам не нужно беспокоиться об аутентификации. Выберите здесь Public:

Создание движка

Мы хотим, чтобы общедоступный API был открыт только для просмотра всех или отдельных элементов портфолио:

Создание движка

Добавляя find и findone мы делаем роуты /portfolios/:id и /portfolios доступными. Нажмите save и переходите к нашему новому типу коллекции Portfolios (Портфолио).

Добавление элемента портфолио

У нас еще нет элементов портфолио. Давайте создадим один! Кликните на Add New Portfolio в правом верхнем углу. Нам также понадобится изображение. Я взял случайное фото, которое я буду использовать:

https://unsplash.com/photos/tZc3vjPCk-Q

Мы можем добавить новое изображение, щелкнув в правом верхнем углу поля изображения:

Создание движка

Загрузить ресурсы:

Создание движка

Мы можем выбирать между загрузкой с локального компьютера или по URL-адресу. Я добавляю URL изображения:

Создание движка

И выберите загрузить и завершить (upload):

Создание движка

Это должно добавить наше изображение прямо в наше портфолио. Заполним и остальные поля.

Создание движка

Обратите внимание, что слаг был заполнен автоматически. Если по какой-то причине вам это не подходит, заполните его вручную дефисами между каждым словом. Он должен напоминать ваш заголовок.

Щелкните «Сохранить» (Save). Элемент портфолио создан. Нам также нужно нажать «Опубликовать» (Publish), чтобы он стал доступен через API.

Если вы перейдете по адресу http://localhost:1337/portfolios, вы увидите нашу недавно созданную запись портфолио в формате JSON.

В следующем разделе мы вернемся к нашему интерфейсу.

Не забывайте, что ваш бэкэнд должен работать, пока вы работаете с фронтендом.

Была ли эта страница полезной?