08.04.2024 в 20:40

Руководство по заполнению динамических зон и мультимедиа в Strapi использование контроллеров

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

Когда я начинал свою стажировку в MyCaptain, мне было поручено изучить (погуглить) доступные на рынке варианты CMS, которые хорошо подходили бы для нашего сценария использования. Я начал свое исследование и по чистой случайности наткнулся на Strapi, которая представляет собой автономную CMS с открытым исходным кодом, полностью основанную на Javascript.

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

Мы контролируем заселенность различных полей в Страпи, о которых вы можете прочитать больше здесь.

Используя подстановочный знак populate=*, мы можем получить все поля, но даже это не заполняет медиа и динамические зоны, поэтому для их заполнения нам нужно изменить наши контроллеры для получения данных.

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

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

"use strict";

/**
 * testing-app controller
 */

const { createCoreController } = require("@strapi/strapi").factories;

module.exports = createCoreController(
  "api::testing-app.testing-app",
  ({ strapi }) => ({
    async find(ctx) {
      const { query } = ctx;
      const entity = await strapi.entityService.findMany(
        "api::testing-app.testing-app",
        {
          ...query,
          populate: {
            proCard: {
              populate: {
                footerImage: true,
                backgroundImage: true,
                ctaRedirection: true,
              },
            },
            exploreCard: {
              populate: {
                pointers: {
                  populate: {
                    image: true,
                  },
                },
                courseCards: true,
                curriculumSection: true,
              },
            },
          },
        }
      );
      const sanitizedEntity = await this.sanitizeOutput(entity, ctx);
      return this.transformResponse(sanitizedEntity);
    },
  })
);

Разбирая это, мы поймем, как заполняются наши данные.

Мы инициализируем функцию createCoreController из модуля @strapi/strapi. Эта функция используется для создания контроллера в Strapi.

const { createCoreController } = require("@strapi/strapi").factories;

Определение контроллера:

module.exports = createCoreController(
    "api::testing-app.testing-app",
    ({ strapi }) => ({
        async find(ctx) {
          // Controller logic
          const { query } = ctx;
          const entity = await strapi.entityService.findMany(
        "api::testing-app.testing-app",
        // JSON Object Structure of Response
        {
          ...query,
          populate: {
            proCard: {
              populate: {
                footerImage: true,
                backgroundImage: true,
                ctaRedirection: true,
              },
            },
            exploreCard: {
              populate: {
                pointers: {
                  populate: {
                    image: true,
                  },
                },
                courseCards: true,
                curriculumSection: true,
              },
            },
          },
        }
      );
      const sanitizedEntity = await this.sanitizeOutput(entity, ctx);
      return this.transformResponse(sanitizedEntity);
    },
  })
);

В Strapi контроллеры служат точками входа для обработки HTTP-запросов и организации взаимодействия между клиентом и данными приложения. Вот как мы настраиваем контроллер для нашей модели тестового приложения:

Разбираем это

Module.exports: эта строка экспортирует модуль контроллера, делая его доступным для других частей нашего приложения.

createCoreController: Strapi предоставляет эту функцию для создания пользовательских контроллеров, адаптированных к конкретным типам или моделям контента.

«api::testing-app.testing-app»: эта строка идентифицирует тип или модель контента, связанную с нашим примером контроллера, указывая, что он связан с приложением для тестирования.

({ Strapi }) => ({ ... }): эта функция принимает объект Strapi в качестве параметра, предоставляя доступ к сервисам и утилитам Strapi.

async find(ctx) { ... }: этот метод определяет действие контроллера, отвечающее за обработку HTTP-запросов GET. Параметр ctx инкапсулирует контекст запроса, позволяя нам взаимодействовать с данными запроса и реагировать соответствующим образом.

Обработка GET-запросов

В методе find мы реализуем логику для обработки запросов GET и получения данных из указанного типа или модели контента. Это включает в себя запрос к базе данных и форматирование данных ответа соответствующим образом для клиента.

Использование сервисов Strapi

Объект Strapi предоставляет доступ к различным сервисам, таким какentityService, который облегчает взаимодействие с базовой базой данных. Эти службы предлагают методы запроса, создания, обновления и удаления данных, что позволяет нам выполнять операции CRUD в логике нашего контроллера.

Настройка параметров запроса

Используя такие методы, как findMany из entityService, мы можем настроить параметры запроса для уточнения процесса получения данных. Сюда входит указание фильтров, критериев сортировки и заполнение связанных структур данных на основе параметров запроса клиента.

Возврат ответа

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

Таким образом, наш контроллер действует как посредник между входящими запросами и уровнем данных приложения, эффективно обрабатывая запросы GET и предоставляя клиентам запрошенные данные в структурированном формате.

Давайте также посмотрим, как мы управляем данными внутри API:

// JSON Object Structure of Response
        {
          ...query,
          populate: {
            proCard: {
              populate: {
                footerImage: true,
                backgroundImage: true,
                ctaRedirection: true,
              },
            },
            exploreCard: {
              populate: {
                pointers: {
                  populate: {
                    image: true,
                  },
                },
                courseCards: true,
                curriculumSection: true,
              },
            },
          },
        }

Используя ключевое слово populate, мы определяем компоненты, вложения также требуют от вас добавления ключевого слова populate, поэтому структура ваших компонентов должна быть четко определена.

Используя эти стратегии, Strapi позволяет нам иметь микроскопический контроль над заполняемыми данными в наших запросах API, помогая оптимизировать запросы и удалять ненужные элементы из самого ответа.

Источник

#JavaScript

Войти на сайт