VueJS. Создаем одностраничное приложение на Vue 2 (часть 1)
Начало работы с Vue CLI
Чтобы быстро стартовать, а также пропустить процесс настройки webpack для компиляции с ES6 на ES5, мы используем Vue CLI. Если у вас нет установленного Vue CLI, установите его, выполнив следующее:
После установки Vue CLI настало время создать проект на Vue. Для этого мы запускаем следующую команду.
Примечание. В данном руководстве во время выполнения команды, приведенной ниже, я выбрал no (нет) при вопросе о проверке кода.
Такая проверка гарантирует, что код будет с правильными отступами, а также без лишних пробелов. Но я люблю оставлять пустые места в коде, чтобы он был лучше организован.
В вышеуказанной строке есть два странных новых слова webpack и spa.
Webpack относится к имени шаблона, обработкой которого мы займемся, т.к. vue-cli позволяет нам делать шаблоны. Самих шаблонов великое множество, более подробно о них можно узнать на официальном сайте Vue CLI.
Spa относится к имени папки для нашего приложения, которую мы создадим. После запуска приведенного выше кода нам потребуется изменить каталог в нашем приложении и установить модули:
Если после запуска вышеуказанных команд мы перейдем к http://localhost:8080, то увидим следующее:
Установка и конфигурирование роутера в Vue 2
Мы все настроены и готовы к запуску нашего одностраничного приложения. Тем не менее, у нас есть еще одна зависимость для установки, по имени vue-router.
Vue-router является официальным маршрутизатором для Vue. Он глубоко интегрируется с ядром Vue.js, чтобы сделать простым создание одностраничных приложений на с Vue.js. Особенности:
Если вы уже работали ранее с Angular или знаете что-либо о нем, то вам будет проще, поскольку vue-маршрутизатор очень похож на маршрутизатор angular; либо если знакомы с react, будет проще из-за схожести с react-router.
Основная причина, по которой мы используем vue-router, заключается в том, что он позволяет нам переключаться между страницами без перезагрузки страницы. Мы можем установить его, выполнив следующую команду.
Теперь перейдем к нашему файлу src/main.js для настройки маршрутизатора в приложении. Скопируйте и замените содержимое в src/main.js на это:
В следующей строке мы определяем константу по имени routes как пустой массив. routes должна быть массивом объектов, где каждый объект представляет собой путь.
На данный момент, если мы снова вернемся к нашему приложению, мы заметим, что, похоже, ничего не изменилось. Однако сейчас у нас настроен маршрутизатор.
Если мы рассмотрим приведенный выше код, то заметим некоторые отличия от кода, который был автоматически сгенерирован:
Удаленные компоненты были удалены потому что больше в них нет необходимости, но самое важное – это то, что появилась табличка вида роутера, как уже и говорилось.
На данный момент, если мы перезагрузим наше приложение, мы получим пустую страницу.
Настройка маршрутов
Теперь давайте добавим компонент hello в качестве нашего компонента для домашней страницы, а также добавим путь к нашему массиву routers.
Откройте файл main.js и замените блок, который держит маршруты:
Взгляните на приведенный выше код. Мы импортировали компонент hello, который у нас есть изначально и присвоили ему путь, поскольку есть компонент, который обрабатывает путь к корню, а соответственно если мы перезагрузим страничку, то увидим это:
Обратите внимание, что на изображении выше логотип Vue больше не появляется, потому что мы удалили это изображение когда заменяли контент компонента App.
Теперь давайте определим еще один маршрут, для чего создадим новый компонент. Создайте внутри папки src/components файл по имени About.vue и поместите в него следующее:
Теперь давайте рассмотрим вышеупомянутый компонент. Компонент содержит текст внутри шаблона, который будет отображаться после того, как мы перейдем к ссылке странице about. Однако нам все равно нужно добавить новый компонент и путь к нашим маршрутам, прежде чем его можно будет просмотреть. Для этого откройте main.js и замените блок с маршрутами следующим:
Единственное отличие нового кода состоит в том, что мы импортировали компонент about, а также добавили маршрут к этой странице. Если теперь перейти к http://localhost:8080/about, мы увидим, что на ней написано.
Использование ссылок маршрутизатора
Этот код создает для нас два ссылочных тега и выполняет динамическую маршрутизацию, так что страница не перезагружается. Если вы перезагрузите приложение, вы заметите, что добавились две новые ссылки. При щелчке по этим ссылкам содержимое изменяется, а страница не перезагружается.
Заключение
Вот как создать одностраничное приложение. Вы можете усложнить его:
В следующей части этого урока мы поговорим о передаче параметров, а также об использовании защиты маршрутов для защиты вашего приложения.
Создаем простое SPA на Vue 2
May 30, 2017 · 3 min read
Vue.js — это библиотека для создания интерактивных веб-интерфейсов. Она обеспечивает data-reactive компоненты с помощью простого и гибкого API.
Vue cli
Чтобы быстро подготовить шаблон нашего приложения, а также пропустить процесс настройки webpack для компиляции с ES6 до ES5, мы будем использовать vue cli. Если у вас не установлен vue cli, мы можем установить его, выполнив следующее команды в терминале.
После успешной установки vue-cli создаем проект. Для этого мы запускаем следующую команду.
Мы выбрали сборщик webpack, vue-cli поддерживает и другие сборщики, подробнее можно прочитать здесь. s pa указывает на папку, в которой будет развернут проект.
После выполнения вышеуказанных команд, переходим http://localhost:8080
Настройка Vue router
Роутер нужен нам для того, чтобы мы могли переключаться между страницами без обновления или перезагрузки страницы.
Vue-router является официальным роутером для Vue. Он глубоко интегрируется с ядром Vue.js, чтобы создать одностраничное приложение. Если раньше вы работали с angular и его роутером, то у вас не должно возникнуть проблем роутером от vue, также если вы работали с react-router.
Мы можем установить его, выполнив следующую команду.
Теперь перейдем к нашему src/main.js, чтобы настроить приложение на использование роутера.
Скопируйте и замените содержимое src/main.js на следующее:
Теперь открываем файл src/App.vue и заменяем его следующим:
Если мы посмотрим на приведенный выше код, мы заметили бы некоторые отличия от кода, который был автоматически сгенерирован там, эти различия включают в себя:
Установка роутов
Теперь давайте добавим компонент hello в качестве нашего компонента для главной страницы, а также добавим путь к нашему массиву роутов.
Откройте файл main.js и замените блок, который содержит константы роутера:
Теперь создадим файл внутри папки src/components с именем About.vue и поместим в него следующее.
Компонент содержит некоторый текст внутри шаблона, который будет отображаться, когда мы перейдем к ссылке на странице about.
Для этого откройте свой main.js и импортируйте наш About компонент, после чего добавьте новый роут:
Если мы перейдем к http://localhost:8080/about, мы увидим, что будет отрисован текст компонента About.
Использование ссылок
Давайте откроем наш файл App.vue, а затем добавим к нему ссылки, перед объявлением нашего :
Вышеприведенный код создаст для нас два якорных тега и выполнит динамическую маршрутизацию, чтобы страница не перезагружалась.
Пишем одностраничное приложение с Flask и Vue.js
Авторизуйтесь
Пишем одностраничное приложение с Flask и Vue.js
Эта статья — пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Начнём с создания нового приложения Vue, используя Vue CLI, а затем перейдём к выполнению основных операций CRUD с помощью RESTful API на бэкенде под управлением Python и Flask.
К концу этого урока вы узнаете:
Что такое Flask?
Flask — это простой, но мощный микро-фреймворк для Python, идеально подходящий для создания RESTful API. Как Sinatra (Ruby) и Express (Node), он минималистичен и гибок, поэтому вы можете начинать с простых проектов и при необходимости создавать более сложные приложения.
Если вы первый раз работаете с Flask, вам стоит изучить следующие ресурсы:
Что такое Vue?
Vue — это JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов. Он содержит некоторые из лучших концепций React и Angular, но по сравнению с ними он более доступен, поэтому новички могут быстро приступать к работе. Также он не уступает этим фреймворкам в мощности и предоставляет все необходимые функции для создания современных фронтенд-приложений.
19–21 ноября, Онлайн, Беcплатно
Чтобы узнать больше о Vue, а также о плюсах и минусах его использования по сравнению с Angular и React, можете посмотреть следующие статьи:
Если вы первый раз работаете с Vue, вам следует прочитать введение из официального руководства Vue.
Настройка Flask
Начнём с создания новой директории проекта:
Вышеуказанные команды могут отличаться в зависимости от вашей среды разработки.
Установите Flask вместе с расширением Flask-CORS:
Добавьте файл app.py в только что созданный каталог:
Flask-CORS нужен для отправки cross-origin-запросов (запросы, исходящие из другого протокола, IP-адреса, имени домена или порта), поэтому необходимо включить общий доступ к ресурсам (CORS).
Стоит отметить, что описанная выше настройка позволяет отправлять запросы из разных источников по всем маршрутам из любого домена, протокола или порта. В продакшне должны быть разрешены только запросы из домена, на котором размещено фронтенд-приложение. Для получения дополнительной информации можете ознакомиться с документацией Flask-CORS.
Для проверки введите в строку адреса браузера http://localhost:5000/ping. Должно получиться: « Pong! ».
Настройка Vue
Для создания индивидуального темплейта проекта используем мощный интерфейс Vue CLI.
Установите его глобально:
Если вы первый раз работаете с npm, вам будет полезно почитать официальное руководство по нему.
В каталоге flask-vue-crud выполните следующую команду для инициализации нового проекта Vue под именем client с конфигом webpack:
webpack — это пакетный модуль и инструмент для сборки, используемый для создания, минимизации и объединения файлов JavaScript и других клиентских ресурсов.
Шаги создания нового проекта Vue:
Должно получиться следующее:
Файл index.html является отправной точкой данного Vue-приложения.
Также обратите внимание на элемент
Файлы и каталоги внутри папки src :
main.js — точка входа в приложение, которая загружает и инициализирует Vue вместе с корневым компонентом.
App.vue — корневой компонент, из которого будут рендериться все остальные компоненты (отправная точка).
assets — место хранения статических ассетов вроде изображений и шрифтов.
components — место хранения UI-компонентов.
router — место определения URL-адресов и сопоставление их с компонентами.
Перейдите по адресу http://localhost:8080 в браузере. Вы должны увидеть следующее:
Добавьте новый компонент с именем Ping.vue в папку client/src/components :
Обновите файл client/src/router/index.js так, чтобы он отображал / в компонент Ping:
В client/src/App.vue удалите изображение из темплейта:
Теперь в браузере должно отобразиться « Hello! ».
Чтобы соединить клиентское Vue-приложение с бэкендом на Flask, можно использовать библиотеку axios для отправки AJAX-запросов.
Начнём с установки:
Обновим раздел script компонента в Ping.vue следующим образом:
Запустите приложение Flask в новом окне. В браузере по адресу http://localhost:8080 должно отобразиться « pong! ». По сути, после ответа от серверной части устанавливаем в msg значение, полученное из data вернувшегося объекта.
Настройка Bootstrap
Добавим Bootstrap, чтобы можно было быстро настроить стиль приложения.
Импортируем стили Bootstrap в client/src/main.js :
Обновим раздел style в client/src/App.vue :
Убедитесь, что Bootstrap подключён корректно, используя Button и Container в компоненте Ping :
Добавим компонент Books в новый файл Books.vue :
Добавим таблицу в стиле Bootstrap в компонент Books :
Отображаться должно следующее:
Теперь можно приступить к созданию функциональности CRUD-приложения.
Что будем создавать?
Цель — разработать бэкенд RESTful API, работающий на Python и Flask, для единственного ресурса — книги. API должен следовать принципам разработки RESTful, используя основные HTTP-команды: GET, POST, PUT и DELETE.
GET-маршрут
Сервер
Добавим список книг в server/app.py :
Добавим обработчик маршрута:
Теперь запустим приложение и проверим маршрут по адресу http://localhost:5000/books.
Клиент
После инициализации компонента вызываем метод getBooks() через хук жизненного цикла (lifecycle hook) created, который выбирает книги из только что настроенного маршрута на бэкенде.
Больше информации про Lifecycle Hook находится здесь.
В темплейте просматривается список книг с помощью директивы v-for, которая создаёт новую строку таблицы на каждой итерации. Значение индекса используется в качестве ключа (key). Затем используется директива v-if для отображения Yes или No — читал пользователь книгу или нет.
Bootstrap Vue
В следующем разделе используем компонент Modal для добавления новых книг. Для этого добавим библиотеку Bootstrap Vue, которая предоставляет набор Vue-компонентов, стилизованных с помощью HTML и CSS на основе Bootstrap.
Выбор Bootstrap Vue обоснован тем, что компонент Modal Bootstrap использует jQuery. Следует избегать совместного использования jQuery и Vue в одном проекте, поскольку последний использует Virtual Dom для обновления DOM-структуры. Другими словами, если вы используете jQuery для манипуляций с DOM, Vue об этом не узнает. По крайней мере, если вам необходимо использовать jQuery, не используйте его вместе с Vue на одних и тех же элементах DOM.
Подключим библиотеку Bootstrap Vue в файле client/src/main.js :
POST-маршрут
Сервер
Обновим существующий обработчик маршрута для обработки POST-запросов для добавления новых книг:
Запустив сервер Flask, вы можете проверить POST-маршрут на новой вкладке браузера:
Вы также должны увидеть добавленную книгу по http://localhost:5000/books.
Клиент
Внесём следующий modal для добавления новой книги. Начнём с HTML:
Эту часть нужно добавить непосредственно перед закрывающим тегом
Обновим раздел script :
Рассмотрим, что происходит в этом фрагменте кода.
Теперь обновим кнопку «Add Book» в темплейте, чтобы при её нажатии отображался modal:
Теперь компонент должен выглядеть следующим образом:
Можно выполнить проверку, попробовав добавить книгу.
Компонент Alert
Добавим компонент Alert для отображения конечному пользователю сообщения о том, что добавлена новая книга. Для этого создадим новый компонент, поскольку вполне вероятно, что вы захотите использовать эту функциональность в ряде других компонентов.
Добавим новый файл с именем Alert.vue в каталог client/src/components :
Затем импортируем его в разделе script компонента Books и зарегистрируем:
Теперь можно ссылаться на новый компонент в разделе template :
Обновите браузер. Должно быть отображено следующее:
Теперь добавим фактический компонент b-alert в шаблон:
Больше информации о props находится здесь.
Чтобы сделать Alert динамическим и передать пользовательское сообщение, можно использовать выражение привязки (binding expression) в Books.vue :
Добавьте message в параметр data в Books.vue :
Обновим сообщение в addBook :
Добавим showMessage в data :
Теперь можно проверить работу.
PUT-маршрут
Сервер
Для обновлений необходимо использовать уникальный идентификатор, поскольку нельзя полагаться на то, что заголовок книги будет уникальным. Можно использовать uuid из стандартной библиотеки Python.
Обновим BOOKS в server/app.py :
Также не забудьте импортировать:
Рефакторинг all_books для учёта уникального идентификатора при добавлении новой книги:
Добавим новый обработчик маршрута:
Добавим вспомогательную функцию:
Клиент
Будем идти пошагово:
1. Добавление modal и формы
Сначала добавим новый modal к темплейту, сразу после первого modal:
Добавим стейт формы в часть data раздела script :
2. Обработка нажатия кнопки Update
Обновим кнопку «Update» в таблице:
Добавим новый метод для обновления значений в editForm :
Затем добавим метод, обрабатывающий отправку формы:
3. Подключение AJAX-запроса
4. Оповещение пользователя (Alert)
5. Обработка нажатия кнопки Cancel
Обязательно протестируйте приложение. Убедитесь, что modal отображается при нажатии кнопки и что введённые значения заполнены правильно.
DELETE-маршрут
Сервер
Обновим обработчик маршрута:
Клиент
Обновим кнопку «Delete» следующим образом:
Добавим методы для обработки нажатия кнопки, а затем удалим книгу:
Заключение
В этой статье были рассмотрены основы настройки CRUD-приложения с помощью Vue и Flask. Исходный код из тега v1 вы можете найти в репозитории flask-vue-crud.
Создание SPA на Vue.js поверх Headless WordPress
Перевод статьи Maxime LaBoissonniere: Build a Vue.js SPA on Top of Headless WordPress. Статья написана от первого лица то есть от имени автора Максима ЛаБуассоньера.
Я не могу поверить, что снова собираюсь написать статью о WordPress. На самом деле я шучу, так как в прошлый раз, когда я играл с WordPress REST API, я подумал, что на самом деле это довольно круто!
Это был настоящий глоток свежего воздуха, увидеть как мастодонт веб-индустрии, открывается для современных тенденций и новых парадигм.
Вот я и подумал: насколько было бы интересно использовать WordPress в качестве headless CMS с Vue.js фреймворком — моим любимым фронтенд фрейморком? И какой же ответ? Оказывается, все это очень интересно. В этой статье я хочу подробно рассмотреть этот стек.
Я расскажу о следующих шагах:
Но в начале, давайте определимся что такое «использование WordPress как headless CMS».
Использование WordPress в качестве headless бэкэнда
Что это значит?
Прежде чем углубляться в WordPress в качестве конкретного примера, давайте удостоверимся, что мы понимаем, что означает headless CMS.
Еще несколько лет назад мы были привычны к тому, что традиционные CMS работают определенным образом. То есть они управляют всем. Под этим я подразумеваю бэкэнд (управление данными/контентом, роли и разрешения, задачи администратора) и внешним интерфейсов то есть фронтендом (в большинстве случаев представления, генерируемые PHP) и естественно всем, что между ними.
Тем не менее, относительно недавно произошел значительный сдвиг благодаря росту современного фронтенд интерфейса. В огромной экосистеме, которая возникла вокруг нее, просто нет места для старых, монолитных CMS. Появились генераторы статических сайтов, микросервисы, ориентированные на API, и serverless архитектуры.
Это не значит, что что-то вроде WordPress должно исчезнуть. Это только означает, что он больше не должен управлять всеми частями веб-сайта. Почему так? Потому что есть инструменты, которые намного лучше выполняют определенные задачи, чем другие.
Итак, почему бы не использовать WordPress только для того, в чем он действительно хорош? Это именно то, что называется API-интерфейс WP JSON REST который был включен в его состав с момента выпуска WordPress 4.7. Он позволяет использовать контент, внедренный в бэкэнд WordPress, в во внешних приложениях, независимо от того, какая технология задействована.
Это изменяет правила игры.
Вы можете найти более подробное объяснение API WP REST в нашем первом посте на эту тему.
Зачем тебе это использовать?
Я уверен, что если вы разработчик с минимальным опытом работы с WordPress, вы уже видите мир новых возможностей, которые это приносит.
Основным недостатком WordPress (кстати, на который разработчики жаловались годами) было отсутствие свободы разработки и хлопоты, связанные с настройкой шаблонов. Но используя WordPress только как бэкэнд, эти проблемы выбрасываются в окно и с высокой скоростью:
→ Разработчикам возвращается свобода использования инструментов, которые они любят, на модульном уровне. Это позволяет масштабировать проекты только тогда, когда это необходимо, и, кстати, приводит к повышению производительности.
→ Работа с WP-шаблонами окончена. Подключите его по своему вкусу и не беспокойтесь о переопределении шаблонов на основе PHP. Намного проще создавать потрясающие пользовательские интерфейсы с нуля, которые затем могут использовать данные WordPress.
Следующая демонстрация подчеркнет эти преимущества. На Vue.js — мы создадим оболочку внешнего интерфейса, которую я буду использовать для создания своего приложения поверх WordPress.
Зачем использовать Vue.js с WordPress?
Связывание WordPress с JS-фреймворками позволяет нам использовать его в приложениях, там где в прошлом это было бы непросто. Подумайте о приложениях для нескольких устройств, IoT, прогрессивных веб-приложениях и других современных методах.
Помимо того факта, что я уже использовал React для моей первой демонстрации headless WP, есть много причин, по которым я бы предложил Vue.js всем, кто ищет подходящую среду интерфейса.
Основные вещи, которые вы услышите от людей о Vue, — это его модульность, скорость и высокая производительность.
Я рассказал больше о том, почему Vue.js правильный выбор в нашем блоге.
Выбор Vue.js
Как и вся экосистема JavaScript в целом, сообщество Vue расширяется с каждой минутой. Теперь есть инструменты, основанные на нем, для практически любых фронтенд-проектов. Вот основные из них, на которые следует обратить внимание:
Проблемы с SEO?
Отличительной чертой традиционного использования WordPress является то, что вам не нужно слишком беспокоиться о SEO; он в основном оптимизировано для этого по умолчанию. Обычно есть проблемы с использованием SEO с JS-фреймворками.
Но давайте закроем этот вопрос, раз и навсегда. На самом деле вы можете получить отличные результаты в SEO и с Vue.js, если вы правильно с этим справитесь. Рендеринг на стороне сервера с Nuxt.js — это один из способов, но вы также можете использовать простой сервис предварительного рендеринга, как мы сделали это здесь.
Так же лучшая производительность и UX помогут вам улучшить ваши результаты в SEO!
Headless WordPress, связанный с Vue.js SPA
Контекст
Наша команда расширяется в размерах, но также и по городах, где живут некоторые из наших членов команды. Итак, давайте допустим, что нам становится все труднее помнить, где все находятся, когда мы растем. И я создам приложение, чтобы оставлять точки маркеров на интерактивной карте и следить за местонахождением каждого из команды.
Я покажу вам, как создать адаптивный Vue SPA, чтобы сделать именно это. Бэкэнд очень похож на мой пост, посвященный React с WordPress, но я буду использовать его совершенно по-другому с приложением на Vue.js.
Необходимые условия
1. Создание моделей с настраиваемыми полями в WordPress
Давайте сразу перейдем прямо в админку WordPress.
Я буду использовать плагин ACF (Advanced Custom Fields) для создания наших пользовательских объектов для демонстрации.
Этот плагин позволяет добавлять настраиваемые поля в нативные сущности WordPress, такие как посты (posts). Он тщательно протестирован, стабилен и облегчает нам добавлении пользовательских данных на страницу.
Вы можете легко установить его, используя вкладку «Плагины» на панели инструментов WordPress. Вот что вы должны найти:
Объявите настраиваемые поля, щелкнув на новый раздел настраиваемых полей на левой панели.
Для этого варианта использования вам понадобятся четыре атрибута: две координаты, имя и изображение. Вот как это выглядит на дашбоард панели:
Теперь, когда вы можете добавлять пользовательские данные в свои записи WordPress, давайте использовать их для создания маркеров, показывающих, где живут члены команды. Вот список недавно созданных сообщений:
2. Создание пользовательской конечной точки
Теперь, когда у вас есть ваши данные, вам нужно открыть их для всеобщего использования через API JSON REST.
Для этого создайте пользовательскую конечную точку. Откройте папку WordPress и откройте файл functions.php. Здесь вы зарегистрируете свою новую конечную точку.
Добавьте следующие строки в конец файла:
Метод add_action создает пользовательскую конечную точку и регистрирует ее через ловушку (hook) rest_api_init. После вызова конечной точки будет выполнен обратный вызов, который добавит ваши настраиваемые поля под ключом acf.
Теперь, когда отображение работает должным образом, не стесняйтесь зайти на новую конечную точку REST по адресу: /wordpress/wp-json/markers/v1/post.
Вот структура, которую вы должны увидеть после GET запроса, обратите внимание на новое поле ACF:
3. Настройка Vue SPA
Давайте использовать эти свежеиспеченные данные, чтобы сделать их полезными.
Затем создайте свой проект: vue create markers.
Первое, что нужно сделать, это получить данные из API непосредственно в вашем компоненте App. Для этого просто добавьте следующее объявление в компонент:
Давайте вернемся обратно в компонент App и импортируем новый компонент import Badge from ‘./components/Badge.vue’.
Зарегистрируйте его непосредственно в объекте компонента с помощью:
Теперь давайте создадим новый компонент: Map.vue.
Здесь я буду использовать Mapbox для визуализации карты. У них есть хороший бесплатный доступ, аккуратная и полная документация … Больше я ничего не могу просить. Создав учетную запись, вы сможете получить доступ к токену доступа непосредственно на домашней странице панели управления: https://account.mapbox.com/.
Во-первых, добавьте JS и CSS Mapbox прямо в ваш файл index.html:
Затем определите ваш компонент следующим образом:
Как видите, единственные переменные, которые вам нужно передать, это маркеры. Точнее массив, содержащий всю информацию о наших маркерах. Вам нужно привязать этот процесс к map.on ‘load’, чтобы вы не пытались добавить что-либо на карту, пока она не будет готова к получению информации.
Затем мы создаем свои маркеры (используя фоновое изображение, определенное в CSS) и добавляем их на карту.
Последнее, что мы делаем, это добавляем слушателей событий addEventListener, чтобы карта перемещалась к нужному маркеру, когда кто-то нажимает на значок.
Этого должно быть достаточно на данный момент. Вы можете добавить или удалить маркеры непосредственно на своем бэкэнд на WordPress, и приложение будет загружать их соответствующим образом. Попробуй сами!
4. Хостинг для демо
Чтобы сделать это публичным, мы должны где-то разместить его. Чтобы сделать это дешево, вам придется разместить свою базу данных и экземпляр WordPress в разных экосистемах. Например, я буду использовать Heroku, но так как бесплатный уровень поддерживает только эфемерную файловую систему, мне также придется разместить базу данных на другом сервере.
Размещение базы данных MySQL может осуществляться тысячами способов, поэтому я оставлю эту часть на ваше усмотрение и сосредоточусь на размещении только экземпляра WordPress и приложения Vue.
Вот как это сделать с Heroku:
Зайдите в их панель и создайте новый проект.
Как только это будет сделано, добавьте их репозиторий в качестве удаленного к вашему проекту. Вы можете увидеть, как это сделать прямо на панели инструментов.
Затем измените строки подключения к базе данных. Это можно сделать очень легко в файле wp-config.php со следующими атрибутами:
Поскольку вы, вероятно, начали разработку на своем локальном хосте, вам, вероятно, придется изменить URL своего сайта, поскольку он больше не будет локальным. Есть много способов сделать это, поэтому я позволю вам выбрать путь, который вы предпочитаете, или как написано в официальных документах.
Ура, вам нужно только разместить ваше приложение Vue, и все будет готово!
Я воспользовался бесплатным аккаунтом Netlify, что означает, что он перенесет демо в публичное репо и подключит его к проекту Netlify.
Итак, после того, как запушили код, перейдите на панель инструментов Netlify и используйте следующую конфигурацию для сайта:
Просто измените свой метод fetch, чтобы он указывал на ваш новый экземпляр Heroku (а не на ваш локальный хост), и все готово.
Приложение будет извлекать данные из вашего экземпляра Heroku, который сам подключен к вашей удаленной базе данных. Он проанализирует данные и отправит их обратно клиенту, чтобы отобразить маркеры на карте.
Live demo & GitHub repo
Посмотреть репозитарйи на GitHub
Заключение
Мне нравится работать с WordPress как с headless CMS каждый раз, когда я это пробую! Vue.js всегда подразумевает замечательный опыт разработки, поэтому мне очень понравилось создавать эту демонстрацию.
Mapbox также впечатляет. Это был мой первый раз, когда я игрался с Maps API, и это отличный сервис, с хорошей документацией. Всегда круто пробовать что-то новое. ?
Должно быть, я потратил 2-3 часа на все это!
Вы можете попробовать свою интеграцию, чтобы определить более сложные объекты, что займет немного больше времени, но сама идея останется прежней! Таким образом, мы могли бы визуализировать гораздо больше, чем просто маркеры, и сделать нашу карту более насыщенной.
Любые вопросы? Не стесняйтесь оставлять комментарии, чтобы высказать свои мысли, отзывы и вопросы. Если вам понравился этот пост, уделите секунду ? или поделитесь им в Twitter!