Ссылка на нужны раздел документации - https://laravel.su/docs/5.4/mix
В ранних версиях инициализировать базовые элементы фронта можно было запустив php artisan make:auth. В поздних версиях это не работает.
Делаем следующее:
- Устанавливаем аутентификацию для laravel. Вводим команду в терминал
composer require laravel/ui - Необходимо установить NPM и Node.js если их еще нет. Node.js устанавливаем вручную. Для NPM вводим команды:
npm install npm run dev - Далее устанавливаем фронт по желанию:
php artisan ui bootstrap php artisan ui vue php artisan ui bootstrap --auth php artisan ui vue --auth
После установки, например, бутстрапа, должны появиться директории css и js в директории public.
После установки laravel/ui добавилось и много файлов, полный список можно посмотреть в local changes редактора PHPStorm.
Смотрим список маршрутов php artisan route:list и видим, что там добавилось много маршрутов:
- home;
- login;
- logout;
- register;
- и другие, связанные с password.
Также, в файл маршрутов web.php должны добавиться строки:
Auth::routes();//Данная команда зарегистрирует несколько маршрутов
Route::get('/home', 'HomeController@index')->name('home');//Это маршрут для авторизации. Куда нас будут перенаправлять после авторизации
Можно опробовать маршруты. Прописываем project.loc/home, например. Смотрим результат.
Далее смотрим в HomeController.php, который появился в директории контроллеров. Очень важный момент: вот эта конструкция $this->middleware('auth'); позволяет защитить контролер аутентификацией т.е. если не пройдена аутентификация то пользователь будет перенаправлен на страницу авторизации.
Дале смотрим директорию resources. Тут много чего создалось, основной файл с layouts в директории views/layouts/app.blade.php. В нем можно посмотреть базовые конструкции шаблонизатора. С ними будет дальнейшая работа.
Пример. Тут в блоке guest будет показан инфа для неавторизованного пользователя, иначе для авторизованного
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
В laravel есть такая фича как наследование шаблонов, благодаря этому, мы можем унаследовать шаблон layouts.app и разметить область, которая попадет в layouts.app в зону content. Подробнее об этом будет в отдельном разделе. Открываем шаблон из resources/views/blog/posts/index.blade.php. Модернизируем код из этог офайла до такого вида:
@extends('layouts.app')
@section('content')
<table>
@foreach($items as $item)
<tr>
<td>{{ $item->id }}</td>
<td>{{ $item->title }}</td>
<td>{{ $item->created_at }}</td>
</tr>
@endforeach;
</table>
@endsection
Теперь заходим по адресу blog/posts предварительно убрав dd() из файла PostController и видим что страница со списком статей имеет шапку и бустстраповские стили.
