Веб-разработчик (Laravel, Vue.js, Node.js, Vuetify.js)


Оглавление (нажмите, чтобы открыть):

Веб-разработчик (Laravel, Vue.js, Node.js, Vuetify.js)

Начиная с версии фреймворка Laravel 5.3, в него был встроен Vue. Это дает возможность легко «разбавить» backend frontend-ом, который все равно будет взаимодействовать с серверной частью проекта.

Для использования Vue в проекте на фреймворке Laravel, нужно иметь установленный Node.js и менеджеры пакетов NPM и, возможно, YARN (работает немного быстрее NPM). Прежде всего нужно войти в корневую директорию проекта и выполнить команды

Для автоматической пересборки «на лету» клиентского java-скрипта ( /public/js/app.js ) и основного файла стилей приложения ( /public/css/app.css ) применяются команды

Исходники этих файлов находятся в директории /resources/assets/ ( начиная с версии Laravel 5.7 — в /resources/js/ и /resources/sass/ ) и перекомпилируются при каждом их изменении.

Например, изменяем файл /resources/js/app.js

и видим эти же изменения в файле /public/js/app.js :

Работа Vue в Laravel прежде всего подразумевает под собой использование компонентов Vue .

Компоненты — это переиспользуемые экземпляры Vue со своим именем. Мы можем использовать компонент как пользовательский тег внутри корневого экземпляра Vue , созданного с помощью new Vue() :

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

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

В Laravel используются однофайловые компоненты, которые находятся в директории /resources/assets/js/components/ ( или /resources/js/components/ для Laravel 5.7 ). Дефолтный компонент, который уже создан по умолчанию, находится в файле ExampleComponent.vue :

Каждый Vue-компонент может содержать максимум один блок template , а первый вложенный в него элемент ( напр. div ) должен быть единственным родительским. Т.е. недопустима, например, такая запись:

Секция script — язык по умолчанию — JS. Каждый .vue -файл может содержать максимум один блок script . Это обычный commonJS -модуль, что позволяет использовать require для подключения других зависимостей.

Секция style — язык по умолчанию — CSS . Таких секций может быть несколько в одном .vue -файле.

После создания компонента его необходимо зарегистрировать. Глобальная регистрация компонента осуществляеется в файле app.js в папке с исходниками resources . Компонент указывается после подключения фреймворка Vue.js, но до создания первого экземпляра Vue:

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

Веб-разработчик (Laravel, Vue.js, Node.js, Vuetify.js)

Коротко о себе: в вебе уже достаточно количество времени, последние 5 лет занимаюсь разработкой коммерческих систем на Laravel (CRM, аукционы, системы логистики и складского хранения, базы недвижимости, информационные порталы, интернет магазины и т.д. — кому интересны пруфы — в ЛС). Свою игру переписывал 7 раз. Надеюсь это последняя итерация ибо нет предела совершенству.

Коротко о курсе: Курс рассчитан на тех кто уже примерно знает принципы работы веба, веб серверов и разработки. Мы с вами разберем принципы разработки на Laravel 6, vue.js. Научимся работать с Git. Создадим эдакий аналог БК.

Что нам потребуется:
1) ПК (планшеты, телефоны и т.д. эт ересь)
2) IDE — именно IDE не всякие блокноты, саблаймы, а именно IDE! (PhpStorm, NetBeans и т.д. В уроках будет PhpStorm)
3) Веб сервер (PHP > 7.2.x, Mysql > 5.6, Redis > 3.x.x) (локальный: xampp, lampp, openserver, mamp, но не денвер — эт тоже ересь причем старая)
4) MySql клиент (если вы используете комплексное ПО из пункта 3 — там везде есть phpMyAdmin)
5) Composer.phar — менеджер пакетов php
6) Node.js — мы будем использовать для компиляции js, scss — webpack
7) Git — система контроля версий

Урок 1. Окружение

Описывать процесс установки веб сервера не буду — много мануалов есть на эту тему.
Начну с IDE. Напоминаю что у нас PhpStorm (далее по текст Шторм) взят за основу т.к. в нем есть плагины существенно упрощающие разработку.

Настройка IDE PhpStorm
Сама установка проходит стандартно. После нее необходимо запустить Шторм. И перейти в настройки:

Там нас интересует вкладка Plugins:

Нам необходимо проверить стоят ли следующие плагины, и если они не стоят — установить и запустить их:

  • .env files support — помогает работать с файлами окружения
  • .ignore — помогает вносить в игнор нужные и не очень файлы, что бы не тягать весь проект
  • Laravel — хэлпер написания кода в laravel
  • LiveEdit — безумно удобная штука для живого редактирования кода, без постоянного F5
  • PHP annotations — расширенные аннотации кода
  • PHP composer.json support — удобная работа с файлом composer.json
  • Apache config (.htaccess) — удобная работа с файлом конфигов апача .htaccess
  • Blade — поддержка шаблонизатора Blade
  • Git — поддержка работы с GIT из интерфейса IDE
  • Vue.js — помогает в работе с vue как подсветкой так и расширенной отладкой

Установка Laravel 6
После установки плагинов, нам надо создать проект!) Но не спешите создавать его в IDE. Дело в том что она создаст папку .idea которая нам не даст развернуть Laravel при помощи Composer. Поэтому:
1) В консоли переходим в папку с будущим проектом (рекомендую называть проекты по доменам к примеру lesson.loc), и пишем команду:

в данной команде мы говорим композеру что надо создать пустой проект с Laravel, а точка на конце — обозначает что создать его надо в текущей папке. Помните я писал о то что надо в консоли перейти в папку с будущим проектом?)))

2) В конце установки вы получите в консоли примерно такой ответ (Использую Консоль из комплекта OpenServer)

После этого запускаем наш Шторм и нажимаем сюда:

В появившемся окне выбираем папку с проектом. Первое время шторм может немного нагрузить систему — это индексация проекта, она происходит при первом открытии его. Итоговый вид проекта вот такой:Ъ

3) Подключаем Git. В консоли, в папке проекта где мы вызывали композер вводим код:

4) Теперь переходим в настройки веб сервера, нам надо в настройках домена указать директиву Document Root, так что бы она ссылалась на папку нашего проекта — public. В OpenServer это выглядит так:

5) Если вы все сделали правильно, то при открытии адреса lesson.loc увидите такую красоту:

Поздравляю! Вы запустили свой первый проект на Laravel 6!

Урок: Создание блога на vue.js + Laravel + vuedo за 15 минут

В последнее время я повадился делится своими заметками с новичками в веб разработке. Для этого я использую блого-подобные системы. Большинство моих проектов построено на контент-фреймворке Drupal но всё чаще я стал смотреть по сторонам в выборе чего-то более шустрого на фронтенде. На момент написания статьи я тестировал блог на JS а именно на Ghost.

А в этой статье я поделюсь своим опытом как построить свой быстрый блог с фронтендом на известном JS фреймворке Vue.js и библиотеке Vuedo.

Для того, что бы выполнить этот урок, у вас уже должен быть веб-сервер с PHP и MySQL, установлен Composer, Node JS и Gulp. Так-же я продполагаю что вы используете Unix подобную ОС у меня это Mac OS, а на продакшене Ubuntu. Все шаги совпадают в различных системах, но могут отличаться в Windows, я предполагаю вы знаете об этих различиях раз выбрали эту ОС для разработки вместо нормальной.

Давайте приступим. Для начала скачайте Vuedo из репозитория на гитхабе https://github.com/Vuedo/vuedo Распакуйте его и закиньте в папку вашего веб сервера.

Установка очень простая, после распаковки архива переименуйте файл .env.example в .env затем необходимо настроить в этом файле параметрв, такие как Имя пользователя, хост, порт базы данных итд.

Здесь я приведу пример конфигурации:


Для того, чтобы начать установку откройте терминал, перейдите в папку проекта и по очереди выполните следующие команды:

После отработки команды php artisan db:seed вы увидите ваш логин и пароль для админа. У меня отобразилось вот так:

После выполнения последней команды php artisan serve наш сервер начнёт работать по адресу localhost:8000 где собственно и будет виден ваш блог.

Что мы получаем?

  • Управление статьями в блоге
  • Управление пользователями
  • Пользовательские роли
  • Модерирование статей
  • Управление мультимедиа файлами
  • Интеграция с сервисами Amazon s3
  • Редактор Markdown

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

Vue 2020: дорожная карта начинающего разработчика

Даже если вы новичок в разработке на Vue, вы, вероятно, слышали много относящихся к ней терминов, таких как одностраничные приложения (SPA, single-page apps), асинхронные компоненты (async components), рендеринг на стороне сервера (server-side rendering) и т. д.

Вы, вероятно, также слышали названия инструментов и библиотек, которые обычно упоминаются вместе с Vue: Vuex, Webpack, Vue CLI,Nuxt.

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

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

0. JavaScript и базовые принципы веб-разработки

Если бы я попросил вас выучить от корки до корки книгу, написанную на китайском, вам бы сначала пришлось научиться читать по-китайски, верно?

Здесь то же самое. Vue – это JavaScript-фреймворк, следовательно, для успешной работы с ним нужно знать основы JavaScript и веб-разработки.

1. Основные понятия Vue

Если вы новичок в разработке на Vue, то начать следует с основ – ядра Vue-экосистемы, которое включает в себя библиотеку ядра (Vue core library), маршрутизатор (Vue Router) и Vuex.

Эти инструменты используются в большинстве приложений Vue.

Основные функции Vue

Основа Vue – синхронизация веб-страницы и JavaScript. Для этого используются реактивная привязка данных и ряд функций шаблонов: директивы и интерполяция. Именно с изучения этих понятий и следует начать.

Чтобы создать свое первое приложение Vue, вам также нужно знать, как его установить, и понять жизненный цикл экземпляра Vue-инстанса.

Компоненты

Компоненты Vue – это изолированными элементами пользовательского интерфейса, которые можно повторно использовать при необходимости. Необходимо понимать, как объявлять компоненты и как наладить взаимодействие между ними с помощью свойств (props) и событий (events).

Компоненты – это основа для создания надежных масштабируемых Vue-приложений.

Одностраничные приложения

Одностраничная архитектура приложения (SPA) позволяет одной веб-странице работать как традиционный многостраничный веб-сайт без неэффективной перезагрузки при навигации.

Мастер Йода рекомендует:  HTML5-видеоплееры, о которых вы должны знать

Создав набор «страниц» в виде Vue-компонентов, вы можете сопоставить их с уникальными адресами (путями) с помощью Vue Router, инструмента, поддерживаемого командой Vue.

Управление состоянием

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

Специальный шаблон под названием» Flux » сохраняет ваши данные в предсказуемом и стабильном центральном хранилище. Реализовать этот шаблон помогает библиотека Vuex, также поддерживаемая командой Vue.

2. Vue в реальном мире

Все знания, полученные из первого модуля, можно использовать для создания высокопроизводительных и эффективных приложений Vue на локальном сервере. Однако как запустить их в продакшн?

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

Скаффолдинг

Создав несколько Vue-приложений, вы обнаружите, что почти в каждом проекте есть одни и те же конфигурации, настройки и инструменты разработчика.

Команда Vue поддерживает инструмент под названием Vue CLI, который позволяет развернуть надежную среду разработки за считанные минуты.

Full-stack / приложения с аутентификацией

Реальные приложения Vue работают с данными, которые могут приходить из разных источников. Чаще всего – из безопасного API на Node, Laravel, Rails, Django или какой-либо другой серверной платформы.

Возможно, данные будут предоставлены обычным REST API или GraphQL, или это могут быть данные в реальном времени через веб-сокеты.

Вам следует ознакомиться с шаблонами проектирования, используемыми для интеграции Vue в full-stack конфигурацию, а также с различными рекомендациями по обеспечению безопасности пользовательских данных.

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

Тестирование

Если вы хотите создавать ремонтопригодные и стабильные проекты, вам не следует забывать про тестирование.


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

Команда Vue поддерживает инструмент под названием Vue Test Utils, который позволяет создавать и запускать тесты для изолированных компонентов Vue.

Хотя тестирование E2E не связано с Vue, оно также может обеспечить надежность вашего проекта. Отличный инструмент E2E, который можно добавить в проект через Vue CLI 3 – Cypress.

Оптимизация

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

Чтобы оптимизировать приложение Vue, можно использовать различные методы, включая рендеринг на стороне сервера (server-side rendering). При этом приложение Vue выполняется на сервере, а пользователь получает конечный HTML-код.

Другие методы оптимизации включают использование асинхронных компонентов (async components) и функций визуализации (render functions).

3. Ключевые инструменты

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

Современный JavaScript и Babel

Vue приложения могут эффективно работать с ES5 – JS-стандартом, который поддерживается практически всеми браузерами.

Но для расширения возможностей можно использовать и более новые стандарты (ES2015, ES2020). Однако, если вы решите использовать современный JavaScript, браузеры большей части ваших пользователей с ним не справятся. Чтобы решить эту проблему, нужен Babel. Его задача состоит в том, чтобы «транспилировать» (перевести и скомпилировать) современные функции в стандартные аналоги перед отправкой приложения.

Webpack

Webpack – это сборщик модулей. Если ваш код написан в разных модулях (например, в разных файлах JavaScript), Webpack может «собрать» их в один файл (bundle) для браузера.

Webpack также работает как конвейер сборки, позволяя преобразовывать и оптимизировать его с помощью ряда плагинов (например, Babel, Sass или TypeScript).

Многие разработчики находят Webpack трудным для понимания и еще более трудным для настройки, но без него некоторые из лучших функций Vue, такие как однофайловые компоненты (single-file components), были бы недоступны.

В недавно выпущенном Vue CLI 3 было предоставлено решение для абстрагирования и автоматической настройки Webpack в проектах Vue.

Значит ли это, что вам не нужно изучать Webpack? Нет, так как однажды вам неизбежно потребуется настроить или отладить конфигурацию Webpack.

TypeScript

TypeScript – надмножество языка JavaScript, которое поддерживает типы (String, Boolean, Number и т.д.). Это помогает писать надежный код и отлавливать ошибки на ранней стадии

Vue.js 3, выходящий в 2020 году, будет полностью написан на TypeScript. Это не означает, что вы должны использовать его в своих проектах. Но если вы хотите внести свой вклад в Vue и понять его внутреннюю работу, знание TypeScript необходимо.

4. Vue-фрейморки

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

Существует много отличных фреймворков Vue, мы упомянем только три самых популярных и важных.

Nuxt.js

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

Nuxt.js предоставляет все это и еще больше (например, PWA) прямо из коробки.

Vuetify

Стандарт Material Design от Google – это широко используемая система рекомендаций по созданию красивых и логичных пользовательских интерфейсов.

Vuetify реализует ряд компонентов Vue (модальные окна, навбары, пагинацию и др.) в соответствии с этим стандартом.

NativeScript-Vue

Если вы хотите использовать Vue для нативных мобильных интерфейсов, вам нужен NativeScript-Vue.

NativeScript – это система для создания приложений с использованием собственных компонентов пользовательского интерфейса на iOS и Android, а NativeScript-Vue – это фреймворк поверх NativeScript, обеспечивающий использование синтаксиса и компонентов Vue.

5. Разное

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

Разработка плагинов

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

Анимация

Если вы любите создавать анимацию, обратите внимание на систему переходов Vue (transition system), которая является частью ядра библиотеки. Она обеспечивает анимацию при добавлении или удалении элементов из DOM.

Чтобы сделать переход, вы создаете классы CSS для определения нужного эффекта анимации, например, для затухания или изменения цвета. Vue определит, когда элемент добавляется или удаляется из DOM, и добавит или удалит соответствующие классы во время перехода.

Прогрессивные веб-приложения

Прогрессивные веб-приложения (PWA) похожи на обычные веб-приложения, но включают ряд современных функций, которые улучшают пользовательский опыт, например, автономное кэширование, серверный рендеринг, push-уведомления и т. д.


Создание 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 фреймворком – моим любимым фронтенд фрейморком? И какой же ответ? Оказывается, все это очень интересно. В этой статье я хочу подробно рассмотреть этот стек.

Я расскажу о следующих шагах:

  1. Создание моделей с настраиваемыми полями в WordPress
  2. Создание пользовательской конечной точки для API REST WP (API URL)
  3. Настройка одностраничного приложения Vue.js
  4. Хостинг приложения

Но в начале, давайте определимся что такое «использование 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 расширяется с каждой минутой. Теперь есть инструменты, основанные на нем, для практически любых фронтенд-проектов. Вот основные из них, на которые следует обратить внимание:

  • Nuxt: Отличный фреймворк для создания статических сайтов, разработки одностраничных приложений (SPA) и рендеринга на стороне сервера. В этом уроке мы использовали его для создания статического сайта поверх headless CMS.
  • Gridsome: Vue.js эквивалент Gatsby. Работает на GraphQL для извлечения данных из любых источников, в том числе headless CMS. Он может генерировать прогрессивные веб-приложения (PWA).
  • VuePress: Минималистичный статический генератор сайтов на базе Vue, идеально подходящий для создания документации и небольших блогов.

Проблемы с SEO?

Отличительной чертой традиционного использования WordPress является то, что вам не нужно слишком беспокоиться о SEO; он в основном оптимизировано для этого по умолчанию. Обычно есть проблемы с использованием SEO с JS-фреймворками.

Но давайте закроем этот вопрос, раз и навсегда. На самом деле вы можете получить отличные результаты в SEO и с Vue.js, если вы правильно с этим справитесь. Рендеринг на стороне сервера с Nuxt.js – это один из способов, но вы также можете использовать простой сервис предварительного рендеринга, как мы сделали это здесь.

Мастер Йода рекомендует:  Выравнивание по вертикали c помощью CSS

Так же лучшая производительность и UX помогут вам улучшить ваши результаты в SEO!

Headless WordPress, связанный с Vue.js SPA

Контекст

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

Я покажу вам, как создать адаптивный Vue SPA, чтобы сделать именно это. Бэкэнд очень похож на мой пост, посвященный React с WordPress, но я буду использовать его совершенно по-другому с приложением на Vue.js.

Необходимые условия

  • Работающий экземпляр WordPress
  • Базовые знания Vue
  • Бесплатный аккаунт MapBox


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 CLI. Если у вас его еще нет, вы можете легко установить его с помощью npm install -g @vue/cli

Затем создайте свой проект: 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!

Laravel and Vue.js — Fullstack Web Development (2020)

    Сертификат об окончании
  • You should have a basic understanding of HTML, PHP, OOP, CSS & Javascript
  • A Mac, Windows, or Linux computer with Local Development Environement installed (xampp, wamp or Laravel homestead, etc)
  • A Mac, Windows, or Linux computer with Nodejs installed

Update histories

November 2020 — Added new section about building Single Page Application (SPA)

October 2020 — Added new section about RESTful API Development

September 2020 — Added new lesson about how to upgrade Laravel version from 5.8 to 6.0

August 2020 — Added new section section about deploying Laravel application in Digital Ocean

June 2020 — Added new section about upgrading laravel version (5.7, 5.8)

March 2020 — Added new section about building editor component with syntax highlighter support with Vue.js & Prism.js

Welcome to Laravel and Vue.js — Fullstack Web Development course, the best online resource for learning how to build full stack web app with Laravel, Vue.js and other technologies.

You will learn basic and advance Laravel features, integrating Bootstrap 4 to create beautiful and responsive website, Integrating Fontawesome 5, utilizing Laravel mix to write and compile Sass code and Javascript code and much more.

All of my courses are project-driven learning, in this course we will build real world project, that will make you proud of yourself and make you confident to build complex web applications that you can imagine.

Here’s exactly what you will learn:

Basic Laravel features: database migration, database seeds, model factories, accessor & mutattors, form validation, authentication and authorization.

Advance Eloquent Relationship: Many to many and Many to Many polymorphic relationship.

Integrating Fontawesome 5 via Laravel mix.

Integrating Bootstrap 4 for UI Styling.

Implementing DRY principle.

Using Git for version control and Github as code repository.

Introduction to Vue js: Directive, list rendering, conditional rendering, class binding, style binding, components, mixins and much more.

Integrating Vue js & Ajax to make our application more interactive.

RESTfull API Development

Deploy Laravel applications in Heroku and Digital Ocean Virtual Private Server.

Upgrade Laravel application to the newer version to make our app up to date.

JavaScript — Использование Vue в Laravel

Я новичок в Vue, но я решил попробовать его в недавнем проекте, я понимаю, почему он понравился. В любом случае, все шло отлично, пока я не переключился на IE, где ничего не работало.


С ошибками типа Object doesn’t support property or method ‘assign’ Я дал ему Google, и, видимо, IE не очень хорошо поддерживает ES6, согласно этому вопросу: Получение ошибки: объект не поддерживает свойство или метод ‘assign’

Итак, я слышал о Babel, и это выглядело как нечто, что могло бы сделать эту работу, поскольку он способен конвертировать из ES6. После этого я попытался интегрировать Babel в свой проект Laravel.

Я обновил свой webpack.min.js следующее:

Однако это, похоже, не решило мою проблему.

Должен ли я просто использовать mix.babel вместо?

Решение

Импортируйте это как первую строку в вашей записи (app.js).

Тем не менее, я бы рекомендовал использовать Vue Cli вместо смеси ларавеллы целиком.

Node.js взаимодействие с vue.js и express.js

Информации по фреймворку vue.js достаточно много, но одно абсолютно не понятно, как обеспечивается взаимодействие Node.js и Vue.js для разработки веб приложения.

С Express.js все более менее ясно, можно создать простой index.js со следующим содержанием:

И сделать запуск

Запустится простой сервер на базе веб-фреймворка Express.js с возможностью его дальнейшего расширения. А с помощью генератора приложений, можно сформировать каркас проекта, и также его запустить.

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

Т.к. vue.js можно подключить через script в html, то могу предположить, что его можно использовать подключив в шаблоне views express.js, но тогда не ясно как проект должен выглядеть.

Таким образом, общий вопрос звучит так: как организовать проект node.js + vue.js для целей веб-разработки (сайта), что он из себя должен представлять и как его запускать.

1 ответ 1

Для простых тестов просто подключайте через cdn и не парьтесь.

Для разворачивания Что твориться у меня (ubuntu 16.04, php 7.0, apache 2.4, mariaDB, nodejs 7.4.0, npm 3.10.10). В созданой папке выполняю команду npm init , далее вношу необходимые данные и npm install . Дальше npm install vue —save , таким образом добавляем через npm vue. Далее создаю папку js и в ней файл app.js в котором подключаю Vue import Vue from ‘vue’ . Потом устанавливаем webpack (локально или глобально), выполняем его настройки (создаём в корне проекта файл webpack.config.js примерного содержания

) и далее для сборки отдельных vue templates загружаем vue-loader npm install vue-loader —save-dev . После написания кода в app.js и подключения темплейтов (и мгногого другого) запускаем команду webpack (для production webpack -p ) он создаст файл (в моём случае build.js) и подключаем его в наш проект через

Мастер Йода рекомендует:  Как научиться не накапливать технический долг — отвечают эксперты

Спасибо за ваш ответ на Stack Overflow на русском!

  • Пожалуйста, убедитесь, что публикуемое сообщение отвечает на поставленный вопрос. Предоставьте как можно больше деталей, расскажите про проведенное исследование!
  • Просьб помощи, уточнений или ответов на темы не относящиеся к вопросу.
  • Ответов основанных на мнениях; приводите аргументы основанные только на реальном опыте.

Также, обратите внимание на заметку в справочном центре о том, как писать ответы.

Переход с jQuery на Vue.js Зачем, как и что из этого вышло

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего.

Введение

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего. Если CSS хоть как-то собирался, был разбит на модули, то на некоторых проектах весь JavaScript хранился в одном файле длиной несколько тысяч строк, не минифицировался, и периодически встречались комментарии типа «Не лезь, оно тебя сожрет». В другом месте JS-функция иногда возвращала “trulio” вместо true. Большая часть кодовой базы была написана на jQuery, что тоже не упрощало работу.

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

Постепенно, мы занялись созданием сборки фронтенда, начали с минификации (сжатия) и транспиляции (трансформации кода таким образом, чтобы он работал в старых браузерах) JavaScript с помощью популярного сборщика Gulp. Позже стали разбивать код на модули. С 2020 года мы начинали постепенно внедрять php-фреймворк Laravel. Кстати, создатели Laravel (Taylor Otwell) и Vue.js (Evan You) много общаются и выступают на конференциях друг у друга.

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

Почему Vue

Vue.js – это прогрессивный фреймворк для создания пользовательских интерфейсов. Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз.

Почему мы выбрали именно его?

Во-первых, Vue.js реактивен, и это его основное преимущество перед jQuery, который мы использовали ранее. Это значит, что изменение данных вызывает автоматический ререндеринг в тех местах, где они выводятся. Это позволяет писать меньше кода, упрощает разработку и увеличивает читабельность кода.

Во-вторых, Vue довольно легко интегрируется с Laravel, backend-фреймворком, который мы используем.

Веб-разработчик (Laravel, Vue.js, Node.js, Vuetify.js)

I’ve been commissioned to write a book about building full stack Vue.js apps. Since many Laravel developers are interested in Vue (Vue now ships with Laravel), the publisher wants the book to focus on full stack Vue.js with Laravel.

In preparing for the book I knew I would have to answer a very important question for myself: why would anyone even want to use Laravel as backend for a single page app when they can use Node.js?

Node.js advantages

Like many web devs who learned to code in the last decade, I started out with PHP. But as I got interested in frontend development and SPAs (single page apps), I eventually made the switch to full stack JavaScript and I hadn’t really looked back since.


Node.js has some very clear advantages as an SPA backend:

  1. One language in the project (JavaScript) means it’s simply easier to code.
  2. There’s opportunity to share code between the frontend and backend apps or even make the app isomorphic.
  3. Node.js allows server-side rendering. This means you can render your page on the server before it hits the browser, allowing users to see the page quicker. (There are attempts to achieve this with PHP/JS extensions, but for the time being, these do not work with many SPA frameworks like Vue, and if they do, they’re much slower).
  4. Node has non-blocking I/O and is better at handling concurrent requests (PHP can do this now too, but again, slower).

Stuck with PHP

Given all of the above, my assumption for why you’d use PHP for a SPA backend is because you must be stuck with it, and Laravel is chosen because it’s simply the best of a bad situation.

You might be stuck with PHP if:

  • The core competency of you and your team is PHP and you don’t feel comfortable going full JS.
  • You have a legacy code base or infrastructure that is PHP-based and you can’t easily change it.
  • Your client is insisting on PHP for whatever reason that they won’t budge on («money» for example. )

All those are actually pretty good reasons to use PHP, albeit not very inspiring ones. And that’s the bit that didn’t make sense.

How come so many devs passionately choose Laravel when their stack would always be inferior to one with Node.js? Are they just ignorant or too stubborn to acknowledge the glory of full stack JavaScript?

Going back to PHP and working with Laravel for the first time in a few years, I can now see that there was more to the story than I realised.

Why Laravel is great for a SPA backend

Most developers will mention performance and features when discussing the benefits of a framework, but when performance and features are sufficiently met, the ease of development and maintenance will be what matters most.

Laravel has a mantra of «making developers happy», and a big reason users are so passionate about Laravel is because it really delivers on this. Going to Laravel after a few years with Node.js/Express, I was pretty impressed with how simple and elegant it is.

Example: syntax

Laravel syntax is expressive and easy for humans to understand. Even if you’ve never seen Laravel code before, you can probably tell what the following is doing:

But once you break down what it is actually doing, there’s an even greater level of beauty. You might have already picked up that this is a route that captures incoming GET requests to paths matching api/users/ where is a user ID, but you might not have picked up on the following:

  1. The argument of the function $user type hints the App\User class. Laravel’s Service Container (explained below) will resolve this and inject an instance of that class in the closure.
  2. Laravel knows this is a data model since the User class extends the Eloquent class (Eloquent is Laravel’s ORM). The instance of User you get will be one where the ID matches the corresponding ID from the request URI i.e. .
  3. If a matching model instance is not found in the database, a 404 HTTP response will automatically be generated.

That’s pretty damn elegant.

Learn Full-Stack Vue.js and Laravel

This book, written for Laravel developers who want to learn and master Vue, provides a detailed guide to full-stack development with these technologies, emphasizing design principles and best practices.

Object-oriented frameworks are powerful

JavaScript now has «classes» but it is not naturally an object-oriented (OO) language. PHP is, though, and Laravel makes heavy use of OO design patterns to powerful effect.

Let’s look at one example that I think you’ll be impressed with: Laravel’s Service Container. This is an implementation of an object-oriented design concept known as «inversion of control» that makes dependency injection a breeze.

Let’s say you’re creating an app that allows users to crop their images. The images get stored in an Amazon S3 bucket and you’ll have a lot of transactions with that bucket throughout your app. You make a helper class called Bucket that, when instantiated, can be used like this:

The class you create would look like this:

Note that the constructor requires the API key to be passed in, as you obviously don’t want to hard code it, so you’ll instantiate your class at the top of every file like this:

The problem is that this same code will need be repeated in every file, not only adding repetition, but also the potential for bugs.

The Service Container allows you to do that setup one time, then inject it anywhere. Here’s the setup:

Now app helper can inject a fresh, pre-configured Bucket object anywhere:

The coolest thing is that you don’t need to use the app helper in functions as you can type hint in the profile and Laravel will automatically resolve it from the Service Container:

If you want to make a real-time app with a ton of concurrent users, or if server-side rendering is critical, then sure, Node.js is the clear choice. But for the broader question of whether Laravel could contend against Node as a SPA backend, I’d say definitely yes, as Laravel:

  • Is a simple and elegant framework that makes development and maintenance a breeze.
  • Uses powerful object-oriented design features to help you architect a well-structured backend.

If you look at the last few releases of Laravel (e.g 5.3 adding Vue as the default JS framework, and 5.4 adding Laravel Mix as a Webpack API) it’s clear that the creators intend for Laravel to stay relevant in the world of SPAs.

If you’re interested in hearing when my book Vue.js Full Stack Development will be done, jump on my newsletter as I’ll have more info about it soon!

Epilogue: Server rendering alternatives

It is a bit of downside to Laravel (and, to be fair, all other non-JS frameworks) that server-side rendering SPAs is often not an option. For example, Vue.js only supports SSR with Node.js.

However, one alternative to SSR that is often suitable is pre-rendering. With this approach you run your app before deploying it, capture the page output and replace your HTML files with this captured output. It’s pretty much the same concept as SSR except it’s done pre-deployment in your development environment, not a live server. It has certain caveats, but may be a sufficient solution for your SPA.

I wrote more about pre-rendering with Laravel in a previous article.

The other option is to run a Node server parallel to your Laravel server and let Node handle the SSR.

About Anthony Gore

I’m Anthony Gore and I’m here to teach you Vue.js! Through my books, online courses, and social media, my aim is to turn you into a Vue.js expert.

I’m a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.

If you enjoyed this article, show your support by buying me a coffee, and if you’d like to support me ongoingly, you can make a pledge through Patreon.

Never miss a new post!

Get our latest post in your inbox every Tuesday by subscribing to the Vue.js Developers Newsletter .

With more than 7000 subscribers, the newsletter will deepen your knowledge of Vue with weekly must-read articles.

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