Cosmic JS - потрясающая система управления контентом с возможностью категоризации и распределения данных в удобном для вас виде. При создании экспозиционного сайта в образовательных целях необходимо отображать большое количество текста, изображений,
видео и прочего. В этом руководстве мы узнаем, как использовать возможности Cosmic JS CMS для простого отображения, отслеживания и обновления больших объемов данных.
TL;DR
Демонстрация сайта Scholastic
Посмотреть код на GitHub
Что мы будем строить:
вступление
Поскольку на этом сайте есть много статей, которые помогут вам начать работу с Cosmic JS, в этом руководстве предполагается, что вы имеете базовое понимание того, как работает Cosmic JS. См. Руководство по началу работы.
Поскольку Cosmic JS - это CMS, ориентированная на API, ее исключительно легко установить и запустить - вам просто нужно сделать простой асинхронный вызов в Vue. В ходе этого руководства вы сможете увидеть, насколько просто разделить данные и обновить их с помощью Cosmic JS CMS.
Установка и настройка нашего проекта:
В этом руководстве мы будем использовать интерфейс командной строки и NPM Vue для установки Cosmic JS и быстрой и удобной настройки нашего проекта. Мы также можем установить Vuex, чтобы использовать его глобальный магазин:
$ npm install -g vue-cli $ vue init webpack cosmic-game $ cd cosmic-game $ npm install --save vuex cosmicjs $ npm install $ npm run dev
При желании мы также можем добавить Bootstrap (и его зависимости от jQuery и popper.js) в наш проект, чтобы использовать некоторый заранее написанный CSS для организации наших макетов:
$ npm install bootstrap jquery popper.js
Если вы решили добавить Bootstrap в свой проект, после запуска npm install вам также необходимо импортировать его в main.js:
import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';
Загрузка данных об активах в Cosmic JS:
При создании сайта в образовательных целях ваш сайт требует размещения большого количества текста, изображений, видео и других ресурсов. По мере того, как вы продолжаете итерацию на своем сайте, жизненно важно не только иметь возможность легко редактировать эти активы, но и иметь возможность легко получить к ним доступ.
Во-первых, нам нужно создать Bucket для нашего проекта. Как только это будет сделано, мы сможем использовать некоторые уникальные свойства, которые предлагает Cosmic JS, для разделения наших данных. Поскольку сайт, создаваемый в этом руководстве, ориентирован на нашу Солнечную систему, давайте добавим новый тип объекта под названием «Космические ресурсы». Объект Cosmic Assets будет нести ответственность за содержание информации, изображений и других активов о жителях нашей Солнечной системы. Например, если бы я хотел добавить некоторую информацию о планете Юпитер - я бы пошел в тип объекта «Космические активы» и создал новый космический актив с именем «Юпитер».
Теперь у нас есть Космический Актив, который может содержать любые данные, которые мы хотим привязать к планете Юпитер. Мы можем добавлять изображения Юпитера, давать экспозиционные данные и даже быстро перечислять лакомые кусочки информации, используя метаполе ввода текста, предоставляемое CMS.
Возможность разбить данные наших Cosmic Assets на поле контента, метаполе изображения и метаполе ввода текста позволяет очень легко взглянуть на CMS и понять, где каждый фрагмент данных отображается в нашем приложении Vue.js.
Настройка нашего приложения:
Поскольку наша солнечная система содержит так много объектов, мы должны использовать свойство v-for, которое Vue предлагает нам для их обхода. Это предотвращает повторение нашего кода для каждого небесного объекта и позволяет нам использовать всю мощь компонентного проектирования.
В этом проекте мы используем три компонента:
Первый компонент, который в нашем проекте называется Homescreen.vue, отвечает за рендеринг всего. Он вызывает и получает данные, которые мы добавили в Cosmic JS CMS, и использует их для рендеринга нашего приложения.
Второй компонент, упоминаемый в нашем проекте как CosmicAsset.vue, представляет собой краткое введение в небесный объект. На нем отображается небольшое изображение и название небесного объекта. При нажатии на этот компонент отображается следующий компонент: CosmicPage.vue.
CosmicPage.vue отображает полноэкранный компонент, который предоставляет подробную информацию о конкретной сущности. В нем есть большой экспозиционный абзац, несколько забавных фактов и другая информация, такая как размер и расстояние от Земли.
Доступ к загруженным данным из Cosmic JS в нашем приложении Vue.JS
Мы можем использовать Cosmic JS API для доступа к данным, которые мы загрузили в CMS. Во-первых, нам нужно инициализировать Bucket, в котором хранится наш проект. Мы делаем это, сначала создавая экземпляр Cosmic JS в нашем компоненте, а затем используя обещание для возврата данных из конкретного Bucket, который нам нужен. Затем мы можем изменить информацию и добавить ее в качестве свойства объекта данных нашего компонента Vue. Мы вызываем Cosmic JS API в свойстве mount () жизненного цикла Vue, чтобы необходимая нам информация была доступна сразу после монтирования компонента (ов):
Обработка наших компонентов на основе доступных данных:
Как вы можете видеть выше, мы находим нужный сегмент, получаем из него загруженные данные и изменяем его так, как мы хотим. Мы фильтруем объекты по данным и определяем, являются ли они космическими объектами или простым контентом, который должен отображаться на странице.
Теперь у нас есть наши космические объекты, хранящиеся в массиве в свойстве данных cosmicAssetObjs объекта Vue. Используя этот массив, мы можем использовать v-for Vue для циклического просмотра и рендеринга нашего компонента CosmicAsset. Мы можем разбить каждый из этих компонентов с помощью классов Boostrap, чтобы они отображались в сетке:
Как видите, мы используем свойство v-for для циклического просмотра нашего массива. Для каждого элемента, который мы проходим в цикле, мы передаем этот конкретный элемент как свойство для использования компонентом. Мы можем увидеть, как используются реквизиты, посмотрев на сам компонент (ы):
Как видите, мы берем информацию о конкретной небесной сущности в форме объекта и фильтруем ее, чтобы отобразить то, что мы хотим.
Заключение
В этом руководстве мы загрузили большой объем данных в Cosmic JS, чтобы мы могли создать образовательное приложение, которое обучает тому, что есть в нашей Солнечной системе. Используя Cosmic JS API, мы могли легко и беспрепятственно получать доступ к этим данным.
Cosmic JS - это легкая платформа с чрезвычайно мощной CMS.
Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, напишите нам в Twitter и присоединитесь к разговору в Slack.
