Допустим, нам необходимо создать своего рода каркас для нашего будущего приложения с уже реализованной системой аутентификации и авторизации на php, где для каждого подтвержденного пользователя на основе присвоенных ему в последующем определенных ролей будет доступен определённый функционал в проекте. Это позволит в процессе разработки строить логику для каждой категории участвующих в нем – суперадмин, админ, клиент и т.п..
Т.е., к примеру, для админов отрисовывать свой интерфейс с соответствующим функционалом, а для клиентов свой - личный кабинет со своими функциями.
Оптимальным вариантом для быстрого решения указанной задачи является стартовый комплект на базе php фреймворка Laravel и его экосистемы Breeze, а так же Inertia.js, Vue 3 и Tailwind CSS , который позволит быстро создать гибкую платформу управления доступом для всех зарегистрированных пользователей, а так же минимизировать время на начальную настройку проекта.
Преимущества такого стека:
1. Современные технологии
Laravel: Это один из самых популярных PHP-фреймворков, который активно используется для создания robust веб-приложений. Он предлагает множество инструментов и библиотек для упрощения разработки.
Inertia.js: Позволяет создавать одностраничные приложения (SPA) с использованием привычных методов серверной разработки, что делает его удобным для разработчиков, знакомых с Laravel.
Vue 3: Современная версия Vue.js с новым функционалом (например, <script setup>), который упрощает разработку компонент и улучшает производительность.
Tailwind CSS: Этот CSS-фреймворк находит все больше поклонников благодаря своей гибкости и удобству при стилизации приложений, позволяя быстро создавать адаптивные интерфейсы.
2. Минимальная настройка
Использование Laravel Breeze для аутентификации и управления пользователями минимизирует время на начальную настройку проекта. Это особенно актуально для стартапов и малых команд, которым нужно быстро выйти на рынок.
3. Актуальные практики разработки
Проект соответствует современным практикам разработки, таким как:
SPA (одностраничные приложения): Большую часть работы выполняет JavaScript на клиенте, что делает взаимодействие с сервером более быстрым и отзывчивым.
Адаптивный дизайн: Tailwind CSS делает процесс создания отзывчивых интерфейсов более простым и эффективным.
Установка платформы для проекта
Технологии
- Laravel Breeze - простая аутентификация на Laravel
- Inertia.js - для общения между клиентом и сервером
- Vue 3 с использованием
script setup - TailwindCSS - утилитарный CSS-фреймворк
Шаг 1: Установка Laravel
Для начала, необходимо установить Laravel. Убедитесь, что у вас уже установлен Composer, который является менеджером пакетов для PHP. Если вы не знаете, как его установить, посетите официальный сайт Composer.
Теперь откройте терминал и выполните следующую команду:
composer create-project --prefer-dist laravel/laravel my-projectЗамените my-project на имя вашего проекта. Это создаст новую папку с установленным Laravel.
Шаг 2: Настройка базы данных
Теперь создайте базу данных в вашей системе управления базами данных, например, в MySQL. Вы можете сделать это через интерфейс phpMyAdmin или с помощью команды:
CREATE DATABASE your_database_name;После создания базы данных откройте файл .env в корне вашего проекта и измените следующие строки, указывая данные вашей базы данных:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password
Замените your_database_name, your_database_user, и your_database_password на свои значения.
Шаг 3: Установка Laravel Breeze
Laravel Breeze - это простое решение для реализации аутентификации. Установите его, выполнив следующие команды в терминале:
composer require laravel/breeze --dev
php artisan breeze:install
Эти команды установят Breeze и создадут необходимые маршруты и представления для аутентификации.
Шаг 4: Установка Vue и Inertia.js
Теперь установим Vue и Inertia.js. Убедитесь, что Node.js и npm у вас установлены. После этого выполните следующие команды:
npm install
npm install vue@next
npm install @inertiajs/inertia @inertiajs/inertia-vue3
npm install -D tailwindcss
Эти команды устанавливают все нужные зависимости для работы с Vue и Inertia.
Шаг 5: Настройка TailwindCSS
Создайте файл конфигурации для TailwindCSS командой:
npx tailwindcss initПосле этого откройте файл tailwind.config.js и добавьте пути к файлам вашего проекта:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
Шаг 6: Подключение TailwindCSS
Создайте файл стилей, например resources/css/app.css, и добавьте в него:
@tailwind base;
@tailwind components;
@tailwind utilities;
Шаг 7: Компиляция вашего CSS
Теперь вам нужно скомпилировать ваш CSS с помощью TailwindCSS. Для этого выполните следующую команду:
npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watchЭта команда будет отслеживать изменения в вашем app.css и обновлять скомпилированный файл public/css/app.css в реальном времени.
Шаг 8: Настройка Inertia.js в вашем проекте
Теперь создайте файл для инициализации вашего приложения с Vue и Inertia.js. Откройте файл resources/js/app.js и добавьте следующий код:
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import '../css/app.css';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
InertiaProgress.init();
Этот код создает новое приложение Vue и подключает Inertia.js, позволяя вам использовать его для маршрутизации и отображения страниц. InertiaProgress.init() отвечает за отображение индикатора загрузки при переходах между страницами.
Шаг 9: Создание маршрутов и представлений для аутентификации
Теперь создадим маршруты и представления для аутентификации. Откройте файл routes/web.php и добавьте следующий код:
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'index'])->name('home');
Route::middleware(['auth'])->group(function () {
// Защищенные маршруты для зарегистрированных пользователей
});
Теперь создайте контроллер для обработки маршрутов. Выполните команду:
php artisan make:controller HomeControllerОткройте файл app/Http/Controllers/HomeController.php и добавьте следующий код:
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
class HomeController extends Controller
{
public function index()
{
return Inertia::render('Home');
}
}
Этот контроллер отвечает за отображение главной страницы.
Шаг 10: Создание страницы Home
Теперь создайте файл Vue для главной страницы по следующему пути: resources/js/Pages/Home.vue и добавьте в него следующий код:
<template>
<div>
<h1>Добро пожаловать на главную страницу!</h1>
<p>Это ваша первая страница с использованием Inertia и Vue.</p>
</div>
</template>
<script setup>
// Здесь может находиться логика компонента
</script>
<style scoped>
/* Стили компонента (если нужно) */
</style>
Шаг 11: Запуск миграций
Теперь нужно запустить миграции для создания необходимых таблиц в базе данных. В терминале выполним следующую команду:
php artisan migrateЭта команда создаст таблицы для пользователей, которые необходимы для аутентификации в вашем приложении.
Шаг 12: Запуск приложения
Теперь вы готовы запустить ваше приложение. Для этого выполните команду:
php artisan serveПосле этого откройте ваш браузер и перейдите по адресу http://localhost:8000. Вы должны увидеть вашу главную страницу.
Шаг 13: Проверка аутентификации
Теперь, чтобы проверить работу аутентификации, вам нужно зарегистрировать нового пользователя и зайти в систему. Laravel Breeze автоматически создает страницы для регистрации и входа в систему.
Откройте ваш браузер и перейдите по адресу http://localhost:8000/register для регистрации нового пользователя. Заполните поля, указав имя, адрес электронной почты и пароль, а затем нажмите кнопку "Зарегистрироваться".
После успешной регистрации вы будете перенаправлены на главную страницу. Попробуйте также перейти по адресу http://localhost:8000/login, чтобы войти в систему с ранее зарегистрированным пользователем.
Это базовая настройка. Вы можете продолжить развивать свое приложение, добавляя новые компоненты, страницы и функциональность. Задействуйте возможности Vue для создания интерактивных интерфейсов и Tailwind для кастомизации стилей.
В дальнейшем, на уже установленной нашей платформе, с помощью миграции дополнительного поля role в таблицу users и фасада Gate мы реализуем механизм проверки всех пользователей на присвоенные им роли. Это позволит выстраивать определённую логику в нашей CRM-системе при разработке.
