В этой статье я собираюсь создать одностраничное приложение (SPA) с Laravel 5.8, Vue.js, Vue Router и шаблоном целевой страницы Tailwind CSS.

Слишком долго; не читал - исходный код здесь

Введение в одностраничные приложения (SPA)

Обычные приложения из фреймворков MVC, таких как Laravel, Ruby On Rails или Django, используют модели, представления и контроллеры, чтобы брать информацию из базы данных и отображать ее на HTML-страницах. На современном языке это называется рендерингом на стороне сервера (SSR). Это хорошо для SEO. Первоначально с появлением Angular 1.x, а теперь и React и Vue.js разработка веб-приложений сместилась в сторону API. Вместо того, чтобы настраивать внешний вид HTML-представления, сервер представляет собой API, который отправляет только JSON и JSON. Со всеми основными фреймворками Javascript на стороне клиента логика маршрутизации и просмотра может выполняться на внешнем интерфейсе независимо от сервера. Перенос логики просмотра и маршрутизации с сервера на клиент создает новые проблемы.

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

Рекомендуемые ресурсы по разработке через API с помощью Laravel и Vue

Появилась новая страница документации для Laravel 5.8, объясняющая Аутентификацию API. Джеффри Уэй прошел курс Laracasts, охватывающий материал. Эта серия от Server Side Up - еще один полезный ресурс при изучении того, как соединить Laravel и Vue.js для одностраничных приложений.

Что мы строим

В этом руководстве мы собираемся создать одностраничное приложение, в котором пользователи могут подавать заявки на присоединение и входить в систему после утверждения. В процессе мы настроим Tailwind CSS для стилизации, Vue Router для внешней маршрутизации и аутентификации Laravel 5.8. Мы собираемся пройти весь процесс с нуля, создав новое приложение Laravel 5.8. Давайте приступим!

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

Шаг 1. Создайте приложение Laravel 5 локально

Первое, что мы собираемся сделать, это создать приложение Laravel по умолчанию. Если вы еще не создали приложение Laravel, настройка конфигурации может быть немного сложной. Правильная установка MySQL с правильными версиями PHP и путями к файлам может быть особенно неприятной. Vagrant и Laravel Homestead были созданы специально, чтобы помочь разработчикам быстрее приступить к работе, не беспокоясь о настройке. Недавно я опубликовал сообщение с моими заметками о настройке нового Mac для разработки PHP здесь, посвященное настройке Vagrant. Ранее я публиковал здесь пост о настройке MySQL на моем локальном компьютере: установка MySQL на Mac. Если вы любите приключения, вы можете попробовать настроить среду Laravel с помощью Docker и Laradock. Я бы не рекомендовал это, если вы новичок или новичок в разработке PHP / Laravel. Docker и Kubernetes - мощные инструменты, но для их работы требуются специальные знания, выходящие за рамки ядра Laravel и PHP. Docker выходит за рамки этого руководства, но если вы хотите узнать больше, я рекомендую Серверы для хакеров в качестве отправной точки (или даже на полпути) в вашем путешествии.

При создании новых приложений Laravel я обычно называю этот сценарий командами, которые мне нужно запустить для создания нового приложения Laravel. Это может немного отличаться в зависимости от того, находится ли ваша база данных MySQL на вашем локальном компьютере, на виртуальной машине Vagrant или в Docker, но это должно помочь в качестве руководства для начала создания нового приложения Laravel и общих команд, которые вам нужно запустить. Он включает в себя создание приложения, перенос базы данных и очистку кеша. Некоторые из этих команд вы можете использовать позже в сценариях развертывания.

Я рекомендую установить этот пакет Laravel Инструменты SEO. Это помогает отображать ваши результаты в Google.

На данный момент у меня есть приложение Laravel 5.8, работающее локально на моем компьютере с базой данных MySQL.

Шаг 2. Инициируйте Tailwind CSS и дизайн пользовательского интерфейса

Установите пакет Tailwind npm:

$ npm i tailwindcss --save-dev 
$ npx tailwind init

Npx - это команда интерфейса командной строки Tailwind. Запуск init создает файл tailwind.config.js в корне вашего проекта. Обязательно прочтите подробности в разделе Начало работы Документов Tailwind.

Вместо написания собственного файла конфигурации Webpack Laravel предоставляет оболочку Laravel Mix. Обновите файл webpack.mix.js, чтобы он выглядел так:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
 
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false,
     postCss: [ tailwindcss('./tailwind.config.js') ],
   });

В документации есть более подробная информация о том, что здесь происходит, и несколько вопросов Github, в которых обсуждается то, что происходит. Если вы вставите это в свой файл Laravel Mix и используете Tailwind версии 1, все будет в порядке.

Импортируйте Tailwind в resources / sass / app.scss:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

Вот и все! Вы должны уметь использовать Tailwind CSS в своем приложении Laravel 5.8.

Я нашел шаблон целевой страницы в Tailwind Toolbox и теперь добавил этот HTML-код в свой файл resources / views / welcome.blade.php. После небольшой настройки шаблона у меня был вид целевой страницы, которым я был доволен.

Я немного повеселился, выбирая цвета. Небольшой совет: выбор цветовых градиентов предоставьте профессионалам. Я был недоволен выбранными градиентами, потом увидел эту статью с десятками цветовых смесей. Оттуда я использовал расширение Chrome палитру цветов и добавил цвета в качестве переменных в свой файл resources / sass / _variables.scss.

Что касается других дизайнерских ресурсов, Hero Patterns довольно хорош для фоновых рисунков щелчков мышью. Undraw.co предоставляет иллюстративные изображения с открытым исходным кодом, которые вы можете использовать прямо из коробки.

Есть один класс под названием gradient, отвечающий за градиент фона CSS на сайте. Это выглядит так:

.gradient {
    background: linear-gradient(90deg, $brand-1 0%, $brand-2 100%);
}

Где $brand-1 и $brand-2 - цветовые переменные, которые я определил в файле _variables.scss.

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

Шаг 3: настройка маршрутизации SPA с Laravel и Vue

Как только у меня будет создан новый проект, пришло время немного подправить его, чтобы сделать его SPA. Честно говоря, этот курс Ларакастов должен стать вашим руководством при создании такого рода вещей. Джеффри Уэй - отличный учитель. Этот курс Laravel вдохновил меня написать этот пост.

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

Вместо маршрутизации Laravel мы будем использовать официальный маршрутизатор Vue.js. После его установки нам нужно указать параметры конфигурации. Файл записи JS resources / js / app.js выглядит следующим образом:

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
 
Vue.use(VueRouter);
 
let app = new Vue({
   el: '#app',
 
   router: new VueRouter(routes)
});

Теперь, когда мы настроили интерфейс для обработки маршрутизации, нам нужно указать на стороне Laravel всегда загружать приветственный шаблон Blade. Это в routes / web.php:

Route::get('/{any?}', function () {
    return view('welcome');
});

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

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

А пока я добавлю конфигурацию маршрутов, чтобы каждый маршрут отображал новый компонент Vue.js. Это создаст SPA с Laravel 5.8 и Vue.js!

import Welcome from './pages/Welcome.vue';
import Login from './pages/Login.vue';
import Apply from './pages/Apply.vue';
import Employers from './pages/Employers.vue';
export default {
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Welcome,
      name: 'welocome'
    },
    {
      path: '/login',
      component: Login,
      name: 'login'
    },
{
path: '/apply',
   component: Apply,
   name: 'apply'
 },
{
   path: '/employers',
   component: Employers,
   name: 'employers'
 }
  ]
};

В приведенном выше примере используются именованные маршруты. Мы можем ссылаться на маршруты, используя имя. Одним из преимуществ этого является то, что мы можем четко указать страницу, на которую собираемся. Если позже мы изменим URL-путь, связав его с именем маршрута, наши ссылки не разорвутся. Пара режим: ключ-значение истории позволяет Vue Router знать, что мы хотим использовать режим истории HTML5. По умолчанию маршрутизатор Vue будет использовать хешированные URL-адреса, например mysite.com/#/vue-route-here. Если этот параметр включен, Vue Routers использует API истории HTML5, благодаря чему URL-адреса выглядят как mysite.com/vue-route-here. Приведенная выше конфигурация сервера Laravel будет обрабатывать все маршруты, а приложение отобразит соответствующую страницу с помощью Vue.js.

Не забывайте обрабатывать 404 страницы. Вот этот полезный эпизод Laracasts о том, как действовать в случае, когда кто-то вводит ссылку на страницу вашего сайта, которой не существует ...

Шаг 4: страницы компонентов Vue.js

Последний шаг - это создание страниц приветствия, входа в систему, подачи заявки и работодателей. Это много HTML с Tailwind, обрабатывающим магию CSS. Я не хочу вставлять сюда тонну HTML, особенно с открытым исходным кодом на GitHub. Тем не менее, вот видео о том, как сайт выглядит при локальной работе:

Компоненты Vue.js с классами Tailwind CSS находятся в папке resources / js. Я разделил компоненты Vue на две папки, «страницы» и «компоненты», чтобы упорядочить вещи более четко между компонентами страницы и компонентами, которые занимают часть страницы.

Размышления о создании этого

Для меня создание этого приложения было доказательством концепции использования Vue Router и Tailwind вместо шаблонов Blade и Bootstrap 4. В настоящее время я создал Employbl.com с шаблонами Blade и Bootstrap 4. Существует довольно много компонентов Vue. , особенно со страницами Google Maps. Создание этого приложения с нуля помогло мне подумать о том, что действительно необходимо на сайте Employbl.com и что я создаю. Tailwind CSS требует большой специализации и владения CSS и классами. Я думаю, это путь к созданию действительно выглядящего сайта. Не знаю, уберу ли полностью Blade и Bootstrap из Employbl, но это заманчивое предложение!

Движение вперед: аутентификация API на основе токенов

В будущих руководствах я хотел бы расширить это приложение, включив в него функции для входа пользователей в систему. Я написал немало руководств по аутентификации с помощью Laravel. В документации Laravel 5.8 есть новый раздел, специально предназначенный для аутентификации API здесь. Как указано выше, курс Laracasts по аутентификации - еще один невероятный ресурс.

Первоначально опубликовано на https://employbl.com.