Laravel 開発: Laravel Nova と AdminLTE を使用してバックエンド管理インターフェイスを生成する方法?-Laravel-php.cn

Laravel 開発: Laravel Nova と AdminLTE を使用してバックエンド管理インターフェイスを生成する方法?

PHPz

リリース： 2023-06-13 14:23:43

オリジナル

1614 人が閲覧しました

最新の Web アプリケーションでは、管理インターフェイスは考慮する必要がある重要な部分です。直感的で使いやすく、機能が豊富である必要があります。この目標を達成するために、Laravel は Laravel Nova と AdminLTE という 2 つのフレームワークを提供します。

Laravel Nova は、Laravel アプリケーションの管理パネルを数分で生成できる Laravel の管理パネルです。 Laravel Nova は美しい UI、ユーザー管理、CMS などを備えており、開発者は複雑なアプリケーションをより迅速かつ簡単に作成できます。

一方、AdminLTE は無料のバックエンド管理テンプレートであり、優れたユーザーインターフェイスと必要な JavaScript ライブラリも提供します。 Bootstrap CSS フレームワークに基づいており、応答性も優れています。 AdminLTE をローカルに展開してホストし、高速でカスタマイズ可能な管理インターフェイスを実現できます。

この記事では、Laravel NovaとAdminLTEを使って美しい管理インターフェースを生成する方法を紹介します。

ステップ 1: Laravel Nova をインストールする

Laravel Nova を使用して管理パネルを作成するには、まず Laravel Nova をインストールする必要があります。インストールを完了するには、以下の手順に従ってください:

Laravel アプリケーションで、次のコマンドを使用して Nova をインストールします: composer require laravel/nova.
##config/app.php ファイルを変更し、次の行を providers 配列に追加します: LaravelNovaNovaServiceProvider::class.
app/Providers/NovaServiceProvider.php ファイルを開き、次のメソッドを追加します。

use LaravelNovaNova;

protected function routes()
{
    Nova::routes()
        ->withAuthenticationRoutes()
        ->withPasswordResetRoutes()
        ->register();
}

ログイン後にコピー

ステップ 2: Nova リソースを作成する

Laravel Nova で、リソースはデータベースモデルと対話するために使用されます。リソースを作成するには、次のコマンドを実行します。

php artisan nova:resource {resourceName}

ログイン後にコピー

これにより、

app/Nova ディレクトリにリソースクラスが作成されます。リソースクラスでは、リソースデータの管理および表示方法を定義します。たとえば、次のコードは、User リソースを表示する方法を定義します。

namespace AppNova;

use LaravelNovaResource;
use LaravelNovaFieldsID;
use LaravelNovaFieldsText;
use LaravelNovaFieldsGravatar;

class User extends Resource
{
    /**
     * The model the resource corresponds to.
     *
     * @var string
     */
    public static $model = 'App\User';

    /**
     * Get the displayable label of the resource.
     *
     * @return string
     */
    public static function label()
    {
        return __('Users');
    }

    /**
     * Get the displayable singular label of the resource.
     *
     * @return string
     */
    public static function singularLabel()
    {
        return __('User');
    }

    /**
     * Get the fields displayed by the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Gravatar::make(),
            Text::make('Name')->sortable(),
            Text::make('Email')->sortable(),
        ];
    }
}

ログイン後にコピー

ステップ 3: Nova リソースを登録します。

以下を resource/assets/js/ に追加します。 app.js:

import Nova from './vendor/laravel/nova/Nova.js';

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'nova',
            path: '/nova',
            component: require('./views/Nova'),
        },
    ])
})

ログイン後にコピー

Laravel が Nova にアクセスできるようにルートを追加します:

Route::get('/nova', function () {
    return view('nova');
});

ログイン後にコピー

最後に、webpack.mix.js ファイルに以下を追加します:

    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .sourceMaps();

    if (mix.inProduction()) {
        mix.version();
    }

ログイン後にコピー

ステップ4: AdminLTE と Nova Mix を使用する

これで、Laravel Nova がインストールされ、Nova リソースが作成されました。次のステップでは、AdminLTE スタイルシートと JavaScript ライブラリを Nova リソースに追加して、AdminLTE スタイルを備えたカスタム管理パネルを作成します。

public ディレクトリに抽出します。ダウンロードリンクは次のとおりです: https://adminlte.io/themes/dev/AdminLTE/
/nova のルートに表示されます。
nova.blade.php ファイルを作成し、次の内容をファイルに挿入します。 new ビューの body タグに次のコンテンツを含めます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compati ble" content="ie=edge">
    <title>{{ config('app.name') }} - {{__('Nova')}}</title>
    <!-- Include AdminLTE CSS -->
    <link rel="stylesheet" href="/css/adminlte.css">
</head>
<body class="hold-transition sidebar-mini">
    <div id="app">
        <nova/>
    </div>
    <!-- Include AdminLTE and jQuery JavaScript -->
    <script src="/js/adminlte.js"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

ログイン後にコピー

Nova

<div class="wrapper">
    {{-- Main navigation --}}
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    </nav>
    {{-- Left side column. contains the logo and sidebar --}}
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
    </aside>
    {{-- Content Wrapper. Contains page content --}}
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        {{-- Your Nova API Resource --}}
                        {{-- Example: @resource('users') --}}
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- Main Footer --}}
    <footer class="main-footer">
    </footer>
</div>

ログイン後にコピー

nova

require('./bootstrap');
    
import Vue from 'vue';
import Nova from './Nova';

import router from './router';
import store from './store';

Vue.component('nova', Nova);
    
const app = new Vue({
    el: '#app',
    router,
    store
});

ログイン後にコピー

Nova のスタイルシートと JavaScript が正常に呼び出されることを確認します。次のコマンドを使用できます。

import Vue from 'vue';
import Router from 'vue-router';

import Home from './components/Home';
import Nova from './Nova';

Vue.use(Router);

export default new Router({
    // ...
    {
        path: '/nova',
        name: 'nova',
        component: Nova,
    },
    // ...
});

ログイン後にコピー

これで、Laravel Nova と AdminLTE が正常に混合されました。管理パネルのカスタマイズに使用します。

結論

この記事では、Laravel Nova と AdminLTE を使用して美しく柔軟な管理パネルを作成する方法を紹介しました。これらのツールを強力に組み合わせることで、複雑な機能を備えたアプリケーションを迅速に作成する方法が開発者に提供され、開発者がビジネスニーズをより早く認識できるようになります。読者がこの記事からLaravelフレームワークについてさらに学んでいただければ幸いです。

以上がLaravel 開発: Laravel Nova と AdminLTE を使用してバックエンド管理インターフェイスを生成する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。