1年前のこれの続き tohokuaiki.hateblo.jp
LaravelプロジェクトをVueベースで管理画面まで
よくある感じで。
$ composer create-project laravel/laravel=6.* --prefer-dist junoe_app $ composer require laravel/ui=1.* $ ./artisan ui vue --auth $ ./artisan migrate
で、LaravelプロジェクトをVueベースでAuth画面まで作る。
AdminlteのLaravelバンドルを導入する
こんな感じでAdminlteのLaravelバンドルを導入。
$ composer require jeroennoten/laravel-adminlte $ ./artisan adminlte:status +------------------+------------------------------------------+---------------+----------+ | Package Resource | Description | Status | Required | +------------------+------------------------------------------+---------------+----------+ | assets | The AdminLTE required assets | Not Installed | true | | config | The default package configuration file | Not Installed | true | | translations | The default package translations files | Not Installed | true | | main_views | The default package main views | Not Installed | false | | auth_views | The default package authentication views | Mismatch | false | | basic_views | The default package basic views | Mismatch | false | | basic_routes | The package routes | Not Installed | false | +------------------+------------------------------------------+---------------+----------+
Auth_viewsでMismatchと出ているのは、AdminlteのAuthと先ほど導入したLaravelのAuthが違っているので。 Basic ViewsでのMismatchはHome画面のテンプレートの違い。
Adminlteから必要な物をインストール（ファイルのコピー）を行う
で、必要な物だけadminlteからインストールする。
アセット
$ ./artisan adminlte:install --only=assets
で、以下のファイルがコピーされる。
add 'public/vendor/adminlte/dist/css/adminlte.css' add 'public/vendor/adminlte/dist/css/adminlte.css.map' add 'public/vendor/adminlte/dist/css/adminlte.min.css' add 'public/vendor/adminlte/dist/css/adminlte.min.css.map' add 'public/vendor/adminlte/dist/img/AdminLTELogo.png' add 'public/vendor/adminlte/dist/js/adminlte.js' add 'public/vendor/adminlte/dist/js/adminlte.js.map' add 'public/vendor/adminlte/dist/js/adminlte.min.js' add 'public/vendor/adminlte/dist/js/adminlte.min.js.map' add 'public/vendor/bootstrap/js/bootstrap.bundle.js' add 'public/vendor/bootstrap/js/bootstrap.bundle.js.map' add 'public/vendor/bootstrap/js/bootstrap.bundle.min.js' add 'public/vendor/bootstrap/js/bootstrap.bundle.min.js.map' add 'public/vendor/bootstrap/js/bootstrap.js' add 'public/vendor/bootstrap/js/bootstrap.js.map' add 'public/vendor/bootstrap/js/bootstrap.min.js' add 'public/vendor/bootstrap/js/bootstrap.min.js.map' add 'public/vendor/fontawesome-free/css/all.css' add 'public/vendor/fontawesome-free/css/all.min.css' add 'public/vendor/fontawesome-free/css/brands.css' add 'public/vendor/fontawesome-free/css/brands.min.css' add 'public/vendor/fontawesome-free/css/fontawesome.css' add 'public/vendor/fontawesome-free/css/fontawesome.min.css' add 'public/vendor/fontawesome-free/css/regular.css' add 'public/vendor/fontawesome-free/css/regular.min.css' add 'public/vendor/fontawesome-free/css/solid.css' add 'public/vendor/fontawesome-free/css/solid.min.css' add 'public/vendor/fontawesome-free/css/svg-with-js.css' add 'public/vendor/fontawesome-free/css/svg-with-js.min.css' add 'public/vendor/fontawesome-free/css/v4-shims.css' add 'public/vendor/fontawesome-free/css/v4-shims.min.css' add 'public/vendor/fontawesome-free/webfonts/fa-brands-400.eot' add 'public/vendor/fontawesome-free/webfonts/fa-brands-400.svg' add 'public/vendor/fontawesome-free/webfonts/fa-brands-400.ttf' add 'public/vendor/fontawesome-free/webfonts/fa-brands-400.woff' add 'public/vendor/fontawesome-free/webfonts/fa-brands-400.woff2' add 'public/vendor/fontawesome-free/webfonts/fa-regular-400.eot' add 'public/vendor/fontawesome-free/webfonts/fa-regular-400.svg' add 'public/vendor/fontawesome-free/webfonts/fa-regular-400.ttf' add 'public/vendor/fontawesome-free/webfonts/fa-regular-400.woff' add 'public/vendor/fontawesome-free/webfonts/fa-regular-400.woff2' add 'public/vendor/fontawesome-free/webfonts/fa-solid-900.eot' add 'public/vendor/fontawesome-free/webfonts/fa-solid-900.svg' add 'public/vendor/fontawesome-free/webfonts/fa-solid-900.ttf' add 'public/vendor/fontawesome-free/webfonts/fa-solid-900.woff' add 'public/vendor/fontawesome-free/webfonts/fa-solid-900.woff2' add 'public/vendor/jquery/jquery.js' add 'public/vendor/jquery/jquery.min.js' add 'public/vendor/jquery/jquery.min.map' add 'public/vendor/overlayScrollbars/css/OverlayScrollbars.css' add 'public/vendor/overlayScrollbars/css/OverlayScrollbars.min.css' add 'public/vendor/overlayScrollbars/js/OverlayScrollbars.js' add 'public/vendor/overlayScrollbars/js/OverlayScrollbars.min.js' add 'public/vendor/overlayScrollbars/js/jquery.overlayScrollbars.js' add 'public/vendor/overlayScrollbars/js/jquery.overlayScrollbars.min.js' add 'public/vendor/popper/esm/popper-utils.js' add 'public/vendor/popper/esm/popper-utils.js.map' add 'public/vendor/popper/esm/popper-utils.min.js' add 'public/vendor/popper/esm/popper-utils.min.js.map' add 'public/vendor/popper/esm/popper.js' add 'public/vendor/popper/esm/popper.js.map' add 'public/vendor/popper/esm/popper.min.js' add 'public/vendor/popper/esm/popper.min.js.map' add 'public/vendor/popper/popper-utils.js' add 'public/vendor/popper/popper-utils.js.map' add 'public/vendor/popper/popper-utils.min.js' add 'public/vendor/popper/popper-utils.min.js.map' add 'public/vendor/popper/popper.js' add 'public/vendor/popper/popper.js.map' add 'public/vendor/popper/popper.min.js' add 'public/vendor/popper/popper.min.js.map' add 'public/vendor/popper/umd/popper-utils.js' add 'public/vendor/popper/umd/popper-utils.js.map' add 'public/vendor/popper/umd/popper-utils.min.js' add 'public/vendor/popper/umd/popper-utils.min.js.map' add 'public/vendor/popper/umd/popper.js' add 'public/vendor/popper/umd/popper.js.flow' add 'public/vendor/popper/umd/popper.js.map' add 'public/vendor/popper/umd/popper.min.js' add 'public/vendor/popper/umd/popper.min.js.map'
設定ファイル
$ ./artisan adminlte:install --only=config
で
config/adminlte.php
がコピー生成される。
翻訳ファイル
$ ./artisan adminlte:install --only=translations
で以下の言語ファイル
resources/lang/vendor/adminlte/ca/adminlte.php resources/lang/vendor/adminlte/es/adminlte.php resources/lang/vendor/adminlte/es/menu.php resources/lang/vendor/adminlte/tr/adminlte.php resources/lang/vendor/adminlte/tr/menu.php resources/lang/vendor/adminlte/vi/adminlte.php resources/lang/vendor/adminlte/vi/menu.php resources/lang/vendor/adminlte/id/adminlte.php resources/lang/vendor/adminlte/id/menu.php resources/lang/vendor/adminlte/it/adminlte.php resources/lang/vendor/adminlte/de/adminlte.php resources/lang/vendor/adminlte/de/menu.php resources/lang/vendor/adminlte/hu/adminlte.php resources/lang/vendor/adminlte/en/adminlte.php resources/lang/vendor/adminlte/en/menu.php resources/lang/vendor/adminlte/uk/adminlte.php resources/lang/vendor/adminlte/uk/menu.php resources/lang/vendor/adminlte/pl/adminlte.php resources/lang/vendor/adminlte/pt-br/adminlte.php resources/lang/vendor/adminlte/pt-br/menu.php resources/lang/vendor/adminlte/zh-CN/adminlte.php resources/lang/vendor/adminlte/zh-CN/menu.php resources/lang/vendor/adminlte/ja/adminlte.php resources/lang/vendor/adminlte/ja/menu.php resources/lang/vendor/adminlte/ru/adminlte.php resources/lang/vendor/adminlte/ru/menu.php resources/lang/vendor/adminlte/fa/adminlte.php resources/lang/vendor/adminlte/hr/adminlte.php resources/lang/vendor/adminlte/ar/adminlte.php resources/lang/vendor/adminlte/fr/adminlte.php resources/lang/vendor/adminlte/nl/adminlte.php
Basic View
Homeテンプレートのコピー
./artisan adminlte:install --only=basic_views
で、
resources/views/home.blade.php
が変わる。diff取るとこんな感じ
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 05dfca9..91ff6a2 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -1,23 +1,19 @@ -@extends('layouts.app') +@extends('adminlte::page') + +@section('title', 'AdminLTE') + +@section('content_header') + <h1 class="m-0 text-dark">Dashboard</h1> +@stop @section('content') -<div class="container"> - <div class="row justify-content-center"> - <div class="col-md-8"> + <div class="row"> + <div class="col-12"> <div class="card"> - <div class="card-header">Dashboard</div> - <div class="card-body"> - @if (session('status')) - <div class="alert alert-success" role="alert"> - {{ session('status') }} - </div> - @endif - - You are logged in! + <p class="mb-0">You are logged in!</p> </div> </div> </div> </div> -</div> -@endsection +@stop
認証系のテンプレート
ログインとかパスワードの再発行回り。
$ ./artisan adminlte:install --only=auth_views
で
resources/views/auth/login.blade.php resources/views/auth/passwords/confirm.blade.php resources/views/auth/passwords/email.blade.php resources/views/auth/passwords/reset.blade.php resources/views/auth/register.blade.php resources/views/auth/verify.blade.php
が作成コピーされる。
basic_routesとmain_viewsのインストール
basic_routesはroutes/web.phpに
Auth::routes();
Route::get('/home', function() {
return view('home');
})->name('home')->middleware('auth');
が入るだけなので、./artisan ui vue --authしてるので不要。
main_viewsは
resources/views/vendor/adminlte/auth/auth-page.blade.php resources/views/vendor/adminlte/auth/login.blade.php resources/views/vendor/adminlte/auth/passwords/confirm.blade.php resources/views/vendor/adminlte/auth/passwords/email.blade.php resources/views/vendor/adminlte/auth/passwords/reset.blade.php resources/views/vendor/adminlte/auth/register.blade.php resources/views/vendor/adminlte/auth/verify.blade.php resources/views/vendor/adminlte/master.blade.php resources/views/vendor/adminlte/page.blade.php resources/views/vendor/adminlte/partials/common/brand-logo-xl.blade.php resources/views/vendor/adminlte/partials/common/brand-logo-xs.blade.php resources/views/vendor/adminlte/partials/footer/footer.blade.php resources/views/vendor/adminlte/partials/navbar/dropdown-item-link.blade.php resources/views/vendor/adminlte/partials/navbar/dropdown-item-submenu.blade.php resources/views/vendor/adminlte/partials/navbar/dropdown-item.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-dropdown-menu.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-dropdown-user-menu.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-left-sidebar-toggler.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-link.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-logout-link.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-right-sidebar-toggler.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item-search-form.blade.php resources/views/vendor/adminlte/partials/navbar/menu-item.blade.php resources/views/vendor/adminlte/partials/navbar/navbar-layout-topnav.blade.php resources/views/vendor/adminlte/partials/navbar/navbar.blade.php resources/views/vendor/adminlte/partials/sidebar/left-sidebar.blade.php resources/views/vendor/adminlte/partials/sidebar/menu-item-header.blade.php resources/views/vendor/adminlte/partials/sidebar/menu-item-link.blade.php resources/views/vendor/adminlte/partials/sidebar/menu-item-search-form.blade.php resources/views/vendor/adminlte/partials/sidebar/menu-item-treeview-menu.blade.php resources/views/vendor/adminlte/partials/sidebar/menu-item.blade.php resources/views/vendor/adminlte/partials/sidebar/right-sidebar.blade.php resources/views/vendor/adminlte/plugins.blade.php
が入るのだけど、これはこのファイルを変更しないのであれば不要だと思うのでやらない。
状況確認
$ ./artisan adminlte:status Checking the resources installation ... 7/7 [■■■■■■■■■■■■■■■■■■■■■■■■] 100% All resources checked succesfully! +------------------+------------------------------------------+---------------+----------+ | Package Resource | Description | Status | Required | +------------------+------------------------------------------+---------------+----------+ | assets | The AdminLTE required assets | Installed | true | | config | The default package configuration file | Installed | true | | translations | The default package translations files | Installed | true | | main_views | The default package main views | Not Installed | false | | auth_views | The default package authentication views | Installed | false | | basic_views | The default package basic views | Installed | false | | basic_routes | The package routes | Not Installed | false | +------------------+------------------------------------------+---------------+----------+
ここまでやって、config/app.phpでlocaleをjaにするとログインとか登録の画面がAdminlteの日本語のものになる。
AdminLteのJavaScriptとCSSの追加
CSS
resources/sass/admin.scss とか作って、
// Fonts @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic'); $fa-font-path: "/vendor/fontawesome-free/webfonts"; // @import '~@fortawesome/fontawesome-free/css/all.css'; @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss'; @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; @import '~@fortawesome/fontawesome-free/scss/regular.scss'; @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/v4-shims.scss'; // OverlayScrollbars @import '~overlayscrollbars/css/OverlayScrollbars.css'; // iCheck @import '~icheck-bootstrap/icheck-bootstrap.css'; // AdminLTE @import '../../vendor/almasaeed2010/adminlte/dist/css/adminlte.css';
とすると、AdminlteのCSSができる。webpack.mix.jsでコンパイルに入れておく。
JavaScript
VueにAdminlteも入れておくこんな感じ。 resources/js/admin.js
require('./bootstrap'); require('overlayscrollbars'); require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte'); window.Vue = require('vue'); const app = new Vue({ el: '#app', });
JavaScript/SASSの依存ライブラリ
まだAdminlteの依存ライブラリが無いのでnpm run prodするとエラーが出る。
以下のコマンドを実行。
$ npm i overlayscrollbars $ npm i @fortawesome/fontawesome-free $ npm i icheck-bootstrap
webpack.mix.js
ということで、自分のwebpack.mix.jsはこんな感じ。
const mix = require('laravel-mix'); const is_prod = mix.inProduction() ? true : false; mix.webpackConfig({ devtool: is_prod ? "" : "inline-source-map", resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': __dirname + '/resources/js' } }, }).options({ processCssUrls: is_prod }) .js('resources/js/app.js', 'public/js/dist/app.js') .js('resources/js/admin.js', 'public/js/dist/admin.js') .sass('resources/sass/app.scss', 'public/css') .sass('resources/sass/admin.scss', 'public/css') .sourceMaps(!is_prod) .version() ;
管理画面を作る
ものっそい簡単なやつを作る。
Controllerの追加
$ ./artisan make:controller AdminController
app/Http/Controllers/AdminController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class AdminController extends Controller { public function home() { return view('admin.home'); } }
Routeの追加
routes/web.php
<?php Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function (){ Route::get('/', 'AdminController@home')->name('home'); });
テンプレートの追加
resources/views/admin/home.blade.php
@extends('adminlte::page')
JavaScriptとCSSを先ほどwebpack.mix.jsでコンパイルしたものにする
config/adminlte.phpの設定
vendor/jeroennoten/laravel-adminlte/resources/views/page.blade.php
をwrapしている
vendor/jeroennoten/laravel-adminlte/resources/views/master.blade.php
を見ると config('adminlte.enabled_laravel_mix') がtrueでないとコンパイル済みでなく個々のCSS・JavaScriptを読んでしまう
config/adminlte.php
<?php 'enabled_laravel_mix' => true 'laravel_mix_css_path' => 'css/admin.css', 'laravel_mix_js_path' => 'js/admin.js',
としておく。
cssなんかは css/admin.cssに一括しているので vendor/fontawesome-free/css/fontawesome.css とかは要らない。なので、
$ ./artisan adminlte:install --only=assets
でインストールしたウチの
public/vendor/fontawesome-free/webfonts
配下のフォント以外は削除しても良いのかもしれない。あ、vendor/adminlte/dist/img/AdminLTELogo.png も必要といえば必要。
確認する
とりあえずこれで
http://my-laravel-app.local/login でログイン後に
http://my-laravel-app.local/admin
にアクセスするとAdminlteのガワだけのページが表示される。
メニューの設定
config/adminlte.phpを編集する。
'menu'
権限ごとに出し分け
<?php [ 'can' => 'create', 'model' => App\User::class ]
で、bladeの@can('create', App\User::class) に相当する。
