Как сделать свой конструктор сайтов vue

Как реализовать конструктор сайтов?

Есть набор кастомных компонентов на Vue.js.
Предварительно есть конструктор (Grapesjs), который будет использоваться (вроде из коробки не поддерживает Vue компоненты).

Задача: Реализовать конструктор сайтов, используя кастомные компоненты.

• Использую Vue и в нем сам конструктор Grapesjs
• Будет бэк на Nest.js(Node.js)
• И тут самый большой пробел в знаниях: как билдить собранные в конструкторе сайты, как передавать туда информацию(API)?

Как я это представляю:
Есть Nuxt.js, в который приходит команда на сборку очередного сайта с какими-то данными из конструктора.
Или Nuxt сам чекает API и собирает сайты при обнаружении новых данных из конструктора.

• Как подружить Grapesjs с Vue компонентами
• Придется хранить кастомные компоненты в 2-х местах одновременно? (в проекте Vue с конструктором и в Nuxt) Или есть более простой и правильный способ?
• Может я совсем всё усложнил?

• Вопрос задан более двух лет назад
• 529 просмотров

1 комментарий

Средний 1 комментарий

Будет даже сложнее, чем думается. Grapesjs работает с чистым html, кастомные блоки должны отображаться и парситься из сохраненного html с атрибутами. Вот в этих атрибутах можно будет установить какую-то связь с компонентами из хранилища компонентов.
С другой стороны, если Vue сумеет обрабатывать свои сырые компоненты на лету, то есть, при добавлении кастомного блока Vue сможет распарсить и включить их в работу, то нужно будет перехватывать сохранение в тегах для Vue, ну и парсер кастомных блоков соответствующий.
Подключение скриптов можно описать также в инициализации блоков и компонентов.

Решения вопроса 0
Ответы на вопрос 1

Evgeniy S @evgensenin
Yii2 || Laravel, vue & nuxt

Привет!
GrapesJS крутой конструктор и от наших! Желаю ему процветания и развития!

По делу:
у Грейпа свой рендер и вклинить туда рендер Vue компонентов слегка проблематично.
У грейпа можно писать свои кастомные блоки и плагины, вам нужно изучить как создаются эти кастомы.

как связать с Vue —
подключить в проект Грейпа Vue-фреймворк,
подключить через кастомные блоки vue.js компоненты и сами js файлы
и тогда VUE увидя в разметке свои компоненты (например, ) на лету скомпилирует в HTML со всей реактивностью.

Когда будете экспортировать HTML от грейпа, обязательно в проекте подключите Vue

я так понимаю лучше всего хранить эти сконструированные html странички в базе и доставать их оттуда через API

Создание блога, управляемого CMS

Итак, вы только что запустили свой веб-сайт на Vue.js, поздравляем! Теперь вы хотите добавить блог, который быстро встраивается на ваш сайт и вы не хотите перевернуть всё вверх дном на сервере в попытке запустить WordPress (или любую другую CMS, использующую базу данных для этих целей). Вы хотите просто добавить несколько компонентов Vue.js для блога и пару маршрутов и чтобы всё это просто работало, не так ли? То что вы ищете для блога должно полностью основываться на API, чтобы вы могли использовать непосредственно из своего приложения Vue.js. Этот рецепт научит вас, как это сделать, давайте приступим!

Мы собираемся быстро создать блог на основе CMS с помощью Vue.js. Мы будем использовать ButterCMS, CMS в первую очередь ориентированную на API, которая позволяет управлять контентом с помощью панели управления ButterCMS и интегрировать API для получения контента в ваше приложение Vue.js. Вы можете использовать ButterCMS для новых или уже существующих проектов Vue.js.

Установка

Выполните в командной строке:

npm install buttercms --save

Butter также можно подключить с помощью CDN:

script src="https://cdnjs.buttercms.com/buttercms-1.1.0.min.js"> script> 

Быстрый старт

Установите ваш токен API:

var butter = require('buttercms')('your_api_token');

С использованием ES6:

import Butter from 'buttercms';
const butter = Butter('your_api_token');

С использованием CDN:

script src="https://cdnjs.buttercms.com/buttercms-1.1.0.min.js"> script>
script> 
 var butter = Butter('your_api_token'); 
script> 

Импортируйте этот файл в любой компонент, где вы хотите использовать ButterCMS. Затем выполните в консоли команду:

butter.post.list({page: 1, page_size: 10}).then(function(response) { 
console.log(response)
})

Запрос к API получит ваши записи блога. В вашей учётной записи уже будет одна запись в качестве примера, которую вы и увидите в ответе сервера.

Отображение записей

Для отображения записей мы создадим маршрут /blog (используя Vue Router) в нашем приложении и будем получать записи блога через Butter API, аналогично будет работать маршрут /blog/:slug для работы с конкретными записями блога.

Обратитесь к справочнику API ButterCMS для получения информации по дополнительным опциям, таким как фильтрация по категориям или автору. Ответ сервера также включает некоторые метаданные, которые мы будем использовать для пагинации.

import Vue from 'vue'
import Router from 'vue-router'
import BlogHome from '@/components/BlogHome'
import BlogPost from '@/components/BlogPost'

Vue.use(Router)

export default new Router({ 
mode: 'history', 
routes: [ 
{ 
path: '/blog/', 
name: 'blog-home', 
component: BlogHome 
}, 
{ 
path: '/blog/:slug', 
name: 'blog-post', 
component: BlogPost 
} 
]
})

Затем создадим components/BlogHome.vue , который будет страницей вашего блога со списком последних записей.

script> 
 import { butter } from '@/buttercms'
 export default {
 name: 'blog-home',
 data( ) {
 return {
 page_title: 'Blog',
 posts: []
 }
 },
 methods: {
 getPosts( ) {
 butter.post.list({
 page: 1,
 page_size: 10
 }).then(res => {
 this.posts = res.data.data
 })
 }
 },
 created( ) {
 this.getPosts()
 }
 } 
script>

template> 
div id="blog-home"> 
h1>{{ page_title }} h1> 
  
  
div
 v-for="(post,index) in posts"
 :key="post.slug + '_' + index"
 > 
router-link :to="'/blog/' + post.slug"> 
article class="media"> 
figure> 
  
 
img
 v-if="post.featured_image"
 :src="post.featured_image"
 alt=""
 > 
img
 v-else
 src="http://via.placeholder.com/250x250"
 alt=""
 > 
figure> 
h2>{{ post.title }} h2> 
p>{{ post.summary }} p> 
article> 
router-link> 
div> 
div> 
template> 

Вот как это выглядит (обратите внимание, что мы добавили CSS из https://bulma.io/ для быстрой стилизации):

Теперь создадим components/BlogPost.vue который будет страницей записи блога с данными по каждой из записей.

script> 
 import { butter } from '@/buttercms'
 export default {
 name: 'blog-post',
 data( ) {
 return {
 post: {}
 }
 },
 methods: {
 getPost( ) {
 butter.post.retrieve(this.$route.params.slug)
 .then(res => {
 this.post = res.data
 }).catch(res => {
 console.log(res)
 })
 }
 },
 created( ) {
 this.getPost()
 }
 } 
script>

template> 
div id="blog-post"> 
h1>{{ post.data.title }} h1> 
h4>{{ post.data.author.first_name }} {{ post.data.author.last_name }} h4> 
div v-html="post.data.body"> div>
 
router-link
 v-if="post.meta.previous_post"
 :to="/blog/ + post.meta.previous_post.slug"
 class="button"
 > 
{{ post.meta.previous_post.title }} 
router-link> 
router-link
 v-if="post.meta.next_post"
 :to="/blog/ + post.meta.next_post.slug"
 class="button"
 > 
{{ post.meta.next_post.title }} 
router-link> 
div> 
template> 

Вот так это будет выглядеть:

Теперь наше приложение загружает все записи и мы можем переходить к чтению конкретной записи блога. Однако, наши кнопки следующей/предыдущей записи ещё не работают.

При использовании маршрутов с параметрами следует помнить, что при переходе пользователя с адреса /blog/foo на /blog/bar , будет переиспользоваться тот же экземпляр компонента. Поскольку оба маршрута отрисовывают один и тот же компонент, это эффективнее, чем уничтожение старого экземпляра компонента, а затем создание нового.

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

Чтобы исправить это, нам необходимо отслеживать объект $route и вызывать getPost() при изменении маршрута.

Обновлённая секция в файле components/BlogPost.vue :

script> 
 import { butter } from '@/buttercms'
 export default {
 name: 'blog-post',
 data( ) {
 return {
 post: null
 }
 },
 methods: {
 getPost( ) {
 butter.post.retrieve(this.$route.params.slug)
 .then(res => {
 // console.log(res.data)
 this.post = res.data
 }).catch(res => {
 console.log(res)
 })
 }
 },
 watch: {
 $route: {
 immediate: true,
 handler(to, from) {
 this.getPost()
 }
 }
 }
 } 
script> 

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

Категории, теги и авторы

Используйте API Butter для категорий, тегов и авторов, чтобы показывать и фильтровать контент в нашем блоге.

Изучите справочник API к ButterCMS для получения дополнительной информации об этих объектах:

Вот пример перечисления всех категорий и получения записей по категории. Вызовите эти методы в хуке жизненного цикла created() :

methods: { 
// . 
getCategories( ) { 
butter.category.list() 
.then(res => { 
console.log('Список категорий:') 
console.log(res.data.data) 
}) 
}, 
getPostsByCategory( ) { 
butter.category.retrieve('example-category', { 
include: 'recent_posts' 
}) 
.then(res => { 
console.log('Записи в определённой категории:') 
console.log(res) 
}) 
}
},
created( ) { 
// . 
this.getCategories() 
this.getPostsByCategory()
}

Альтернативные варианты

Альтернативным вариантом для рассмотрения, особенно если вы предпочитаете писать только в Markdown, будет использование что-то наподобие Nuxtent. Nuxtent позволяет вам использовать Vue Component внутри файлов Markdown. Этот подход будет похоже на подход статических сайтов (например, Jekyll), где вы создаёте свои записи блога в файлах Markdown. Nuxtent добавляет приятную интеграцию между Vue.js и Markdown, позволяя вам полностью быть в мире Vue.js.

Итоги

И это всё! Теперь у вас есть полностью функциональный блог, управляемый CMS, работающий в вашем приложении. Мы надеемся, что это руководство было полезным и сделало ваш опыт разработки на Vue.js ещё приятнее 🙂

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

Как мы написали конструктор для сайта СМИ на Битриксе

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

Решение

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

1 Информация о проекте

Для вводных нам показали текущую версию сайта и попросили оценить, насколько он по-нашему мнению современный, доступный и понятный пользователю.

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

Мы обсудили недостатки проекта, выявили, что он написан на WordPress и тут же узнали, что заказчик хочет делать проект на Битриксе, так как он проще в управлении и более гибок к масштабированию. Далее, мы попросили заказчика запустить отрисовку дизайна и ждали макеты.

2 Бизнес-аналитика

В разработанном заказчиком дизайне, лента главной страницы представляла из себя набор карточек в сетке из трех колонок на десктопе и одной колонки на адаптиве.

После ознакомления с дизайном мы решили провести глубинное интервью и уточнить у Заказчика, каким образом он планирует монетизировать этот проект, так как контент в карточках и колонках был достаточно разноплановый: Услуги, Афиши, Достопримечательности, Организации, Новости, Блог, Объявления и другое. То есть, контент агрегатора можно было сразу же поделить на коммерческие и некоммерческие направления.

Например, рубрику Новости и Достопримечательности будут читать жители региона и его туристы. А рубрику Объявления, Организации будут просматривать как заинтересованные в покупках различных услуг (например, такси или маникюр) жители региона, так и сами рекламодатели.

Здесь мы и узнали, что основной доход этого проекта будет заключаться в продаже рекламных мест в сетке сайта, причем:

– Заказчик рекламы может выкупить любое место в любой колонке;

– Рекламное место выкупается на определенный срок, после чего объявление нужно снять с публикации;

– Эталонно администрировать это силами редакторов заказчика, которые будут получать заявки на размещение от отдела продаж, чтобы не держать в штате разработчика;

– В день могло быть неограниченное количество корректировок в связи со снятием рекламных блоков с публикации, либо продлением публикации на новый срок;

– Отдельные блоки и сам адаптив управляются независимо от типа устройства (на адаптиве часть блоков отсутствовала).

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

3 Этап 1. Проектирование и написание ТЗ проекта

Мы построили майндмап, позволяющий отразить структуру модуля и учесть все сценарии работы пользователя сайта и редактора, а также поведения элементов верстки при внесении настроек публикации:

После сборки майндмапа мы приступили к написанию технического задания и достаточно быстро его согласовали.

Для реализации этого проекта потребовалось собрать команду из менеджера проектов, Front-end разработчика (знающего VueJS) и Back-end разработчика, умеющего работать с Rest APi.

В рамках ТЗ определили последовательно шаги процесса разработки:

1) Подготовка среды разработки

Настройка локальных копий и демо-среды для клиента.

2) Back-end (реализация на уровне независимого Модуля Битрикс)

2.1 Архитектура модуля

2.2 Rest APi (с описанием методов и запросов)

2.3 Кеширование под проект, с уклоном на большие нагрузки (html, memcache)

2.4 Проработка возможностей SEO

2.5 Проработка возможностей Автотестирования

3.1 Интеграция верстки в реактивную среду Vue.js

3.2 Проработка связи js контейнера с Rest APi

3.3 Отладка производительности приложения на клиентах

3.4 Проработка возможностей Автотестирования при деплое

4) Совместное тестирование внутри компании

4 Этап 2. Реализация проекта

Для администрирования модуля была создана группа пользователей “Редакторы”, попадая в которую, сотрудники Заказчика могли видеть все доступные инфоблоки, а также разработанный модуль.

Сценарии работы редактора можно было отразить следующим образом, пошагово:

Шаг 1: Заходит на сайт в административную панель.

Шаг 2: Создаёт физически новость в разделе «Данные» — Новости — Создать элемент. Устанавливает галочку «Показывать на главной», являющуюся признаком отправки элемента в таблицу модуля.

Шаг 3: Переходит во вкладку модуля в админке (Вынесен в меню отдельно).

Шаг 4: Переходит в основную панель — управление порядком блоков с информацией. Выбирает нужный блок, например, Новости.

Шаг 5: Видит список новостей (помеченные для отображения на главной).

Шаг 6: Находит нужную новость среди опубликованных на главной, либо через поиск по названию новости

Шаг 7: Устанавливает параметры сортировки (порядок вывода блока в колонках), сроки закрепления публикации (поля для ввода интервала даты активности)

Шаг 8: Блок выведен на главную страницу с указанными редактором или администратором параметрами.

5 Администрирование в модуле заложили по следующим параметрам:

1) Автоматическое управление интервалами активности

– Задается начало активности публикации элемента или блока

Публикация появляется на странице в указанную дату и время. Если она не заполнена принудительно — выводится автоматически с момента присвоения статуса «Опубликовать на главной»

– Задается окончание активности публикации элемента или блока

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

2) Ручное управление публикацией элементов:

3) Для разделов по умолчанию:

— Возможность задавать ограничение на количество элементов для вывода в блоке

— Возможность задавать сортировку относительно других блоков

4) Отображение блока в зависимости от устройства

— Возможность задать индивидуальные настройки отображать/НЕ отображать

— Возможность задать индивидуальные настройки сортировки для ПК и телефона.

Результат

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

1. В любой гениальной идее может и имеет место быть две стороны “медали”: бизнес-логика заказчика и логика возможностей сценариев работы решения. Они могут совпадать (и в идеале) стремятся к закрытию единой задачи — автоматизации бизнеса, минимизация операций и рутины. Чтобы на старте учесть все подводные камни и синхронизировать ожидания заказчика и разработчика, категорически важно согласование пожеланий и точное снятие потребностей при помощи визуальных инструментов: логических карт, прототипов, описание пользовательских сценариев.

2. Важно вести документацию проекта и его API с самого начала работ.

3. На берегу важно начать с определения формата взаимодействия специалистов и выделить время на созвоны и обсуждения участников проектной команды.

4. Нужно уделить внимание определению основных пользовательских сценариев, после финального тестирования составить обучающий документ для клиента, подготовить фото/видеоматериалы для обращения к ним в процессе взаимодействия с модулем, реализовать подсказки в интерфейсе редактора. Для понимания между клиентом и исполнителем важно провести презентацию всех сценариев совместными усилиями, чтобы избежать конфликтов и негатива, связанных с неправильным интуитивным самостоятельным тестированием клиента.

Комментарий агентства

Евгений Александров

Этот проект являлся одним из первых продакшн проектов в стеке API-based (VueJS/Bitrix) в нашей компании, что также накладывало трудности и в реализации, и при том же проектировании системы. Однако, этот проект стал самым нетиповым и интересным для нас. Благодаря ему, мы почувствовали, что действительно способны разработать любое решение для любого бизнеса, которое действительно будет решать его основные задачи в онлайн.

Vue.js — конструктор для веб-приложений

Когда-то мы объясняли, как работает и зачем нужен Angular, то упомянули Vue.js. Это тоже фреймворк для фронтенд-разработки, только работает немного иначе — он чуть проще и позволяет переходить на него постепенно, без полного переписывания кода.

Что такое Vue.js

Vue.js — это фреймворк для разработки сайтов и веб-приложений, написанный на JavaScript. Проще говоря, это гора чужого кода, упакованная таким образом, чтобы вы могли использовать чужие наработки в своих целях. В частности — для интерфейсов и веб-приложений.

Во фреймворке Vue.js зашита логика кнопок и других элементов интерфейса; их внешний вид; механизмы обмена данными и другие необходимые для интерфейса штуки. Стандартными средствами JavaScript, HTML и CSS всё это хозяйство описать можно, но только огромной горой кода. А если делать это хорошо, то гора должна быть очень большой: нужно учесть и ввод с клавиатуры, и ввод с тач-устройств, и другие ограничения. В Vue предусмотрено всё необходимое, и оно уже готово к употреблению.

Технически Vue.js — это просто скрипт, который можно подключить к странице:

Можно скачать себе это файл, хранить на сервере или на компьютере и подключать тоже как обычный скрипт.

В чём идея этого фреймворка

Разработчики называют этот фреймворк прогрессивным и реактивным, и это не про современность и скорость, а про принципы работы.

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

Допустим, что весь интернет-магазин написан на чистом JavaScript и CSS. Со временем он стал большим, теперь его неудобно поддерживать. Благодаря Vue.js можно не переписывать сразу весь интерфейс, а обновлять его постепенно. Можно сначала сделать на Vue.js добавление в корзину, потом пересчёт цен и скидок, потом оформление заказа — и так, небольшими итерациями, перевести всё на Vue.js.

Реактивность — это когда система умеет реагировать на какие-то действия, пользовательские или служебные, и показывать новое содержимое на экране. Проще говоря, это когда мы говорим, что при нажатии на элемент кнопки нужно сделать вот такую анимацию, а система потом сама следит за всеми нажатыми кнопками.

А ещё весь фреймворк весит около 16 килобайт — это очень мало.

Пример страницы на vue.js

Чтобы было проще понять, о чём пойдёт речь, вот пример страницы, в которой используется Vue.js. Так как это простой проект, то мы собрали всё в один файл, а в сложных сервисах таких файлов со скриптами может быть много.

          
>
 
>
 Перевернуть сообщение 
    

Как всё устроено

В основе фреймворка — связь между HTML-элементами и действиями или свойствами, которые можно к нему привязать.

В нашем примере мы сделали так:

1. Создали на странице отдельные блоки, которым присвоили имена.
2. Через эти имена мы привязали приложения к блокам.
3. Теперь мы можем полностью управлять содержимым этих блоков вообще без участия HTML и работать напрямую через Vue.js.

К первому блоку мы привязали простое приложение, которое выводит только текст. За вывод этого текста отвечал Vue.js, а не исходный HTML-документ.

Во втором блоке мы вывели текст и добавили кнопку, которая его переворачивает задом наперёд. Но так как этот текст мы прописали внутри приложения, то и управлять им получается гораздо легче, чем если бы он был прописан прямо в HTML-коде.

Получается, что HTML-каркас нам нужен только для того, чтобы первоначально разместить базовые элементы на странице, а управлять контентом мы будем уже с помощью Vue.js.

Зачем нужен Vue.js и где используется

Кроме быстрой разработки прототипов, Vue.js отлично подходит для полноценного создания SPA — одностраничных сайтов-сервисов. Это значит, что на одной странице расположены все структурные элементы приложения, а в скриптах — вся логика. И всё это хозяйство загружается в браузер и работает как полноценное приложение без перезагрузки.

Вот примеры веб-приложений, где используется Vue:

• Facebook
• Netflix
• Grammarly
• Behance
• Upwork

Стану ли я иноагентом, если буду использовать Vue? Признана ли эта библиотека экстремистской на территории Российской Федерации?

На момент написания статьи фреймворк Vue.js не признан экстремистским на территории Российской Федерации, а использование его не делает разработчиков иностранными агентами. Юридическая ответственность за использование Vue.js в проектах отсутствует. Но спросите снова завтра.

С точки зрения права фреймворк распространяется по лицензии МТИ, что означает, что вы обязаны только указать имя автора Yuxi Evan You, дальше делайте что хотите. Полный текст лицензии — на Гитхабе.

С точки зрения цифрового суверенитета лучше не подключать код фреймворка с внешних сайтов, а хранить его строго на своём сервере. Это вообще хорошая практика для всех проектов в любое время.

Что дальше

Следующий этап — напишем свой мини-проект на Vue.js с компонентами и переходами. Заодно посмотрим, насколько быстро он будет работать и много ли нам времени на него понадобится.