Как создать учебный веб-сайт с помощью Cosmic JS и Vue.js

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

TL;DR

Демонстрация учебного веб-сайта
Посмотреть код на GitHub

Что будем строить:
изображение.png

вступление

Поскольку на этом сайте есть много статей, которые помогут вам начать работу с Cosmic JS, в этом руководстве предполагается, что вы имеете общее представление о том, как работает Cosmic JS. См. Руководство по началу работы.
Поскольку Cosmic JS — это CMS, ориентированная на API, ее исключительно легко настроить и запустить — вам просто нужно сделать простой асинхронный вызов в Vue. В ходе этого руководства вы сможете увидеть, насколько просто разделить данные и обновить их с помощью Cosmic JS CMS.
Установка и настройка нашего проекта:
В этом руководстве мы будем использовать интерфейс командной строки Vue и NPM для быстрой и простой установки 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 предлагает для разделения наших данных. Поскольку сайт, создаваемый в этом руководстве, сосредоточен вокруг нашей Солнечной системы, давайте добавим новый тип объекта под названием «Космические активы». Объект «Космические активы» будет отвечать за хранение информации, изображений и других активов о жителях нашей Солнечной системы. Например, если бы я хотел добавить некоторую информацию о планете Юпитер, я бы перешел к типу объекта «Космические активы» и создал новый космический актив с именем «Юпитер».
Теперь у нас есть космический актив, который может хранить любые данные, которые мы хотим связать с планетой Юпитер. Мы можем добавлять изображения Юпитера, давать экспозиционные данные и даже быстро перечислять лакомые кусочки информации, используя метаполе ввода текста, предоставляемое CMS.
Возможность разбить данные наших космических активов на поле содержимого, метаполе изображения и метаполе текстового ввода позволяет чрезвычайно легко взглянуть на 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 в свойстве Mounted() жизненного цикла Vue, чтобы необходимая нам информация была легко доступна, как только компонент(ы) будут смонтированы:

Данные корзины

Рендеринг наших компонентов из доступных данных:

Как вы можете видеть выше, мы находим нужный Bucket, получаем из него загруженные данные и изменяем его так, как хотим. Мы фильтруем объекты в данных и определяем, являются ли они космическими объектами или простым контентом, который должен отображаться на странице.
Теперь у нас есть наши космические объекты, хранящиеся в массиве в свойстве данных cosmicAssetObjs на объекте Vue. Используя этот массив, мы можем использовать v-for Vue для циклического прохождения и рендеринга нашего компонента CosmicAsset. Мы можем разбить каждый из этих компонентов с помощью классов Boostrap, чтобы они отображались в сетке:

компонентДанные

Как видите, мы используем свойство v-for для циклического просмотра нашего массива. Для каждого элемента, который мы прокручиваем, мы передаем этот конкретный элемент в качестве реквизита для использования компонентом. Мы можем увидеть, как используются реквизиты, взглянув на сам компонент(ы):

космический актив

космическая страница

Как видите, мы берем информацию о конкретном небесном объекте в виде объекта и фильтруем ее, чтобы отобразить то, что нам нужно.
Вывод
В этом уроке мы загрузили большой объем данных в Cosmic JS, чтобы создать образовательное приложение, которое учит тому, что происходит в нашей Солнечной системе. Используя Cosmic JS API, мы могли легко и беспрепятственно получить доступ к этим данным.
Cosmic JS — это легкая платформа с чрезвычайно мощной CMS.
Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, свяжитесь с нами в Twitter и присоединитесь к обсуждению в Slack.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *