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

ホームページ

PHPフレームワーク

Laravel

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

PHPz

Jun 13, 2023 pm 02:23 PM

laraveladminltenova

最新の 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Laravelの人気には、単純化された開発プロセスが含まれ、快適な開発環境を提供し、豊富な機能が提供されます。 1）Rubyonrailsの設計哲学を吸収し、PHPの柔軟性を組み合わせています。 2）Eloquentorm、Bladeテンプレートエンジンなどのツールを提供して、開発効率を向上させます。 3）そのMVCアーキテクチャと依存関係噴射メカニズムにより、コードがよりモジュール化され、テスト可能になります。 4）キャッシュシステムやベストプラクティスなどの強力なデバッグツールとパフォーマンス最適化方法を提供します。

どちらが良いのか、DjangoとLaravel？Mar 28, 2025 am 10:41 AM

DjangoとLaravelはどちらもフルスタックのフレームワークです。 DjangoはPython開発者や複雑なビジネスロジックに適していますが、LaravelはPHP開発者とエレガントな構文に適しています。 1.DjangoはPythonに基づいており、迅速な発展と高い並行性に適した「バッテリーコンプリート」哲学に従います。 2. LaravelはPHPに基づいており、開発者エクスペリエンスを強調しており、小規模から中規模のプロジェクトに適しています。

どちらがより良いPHPですか、それともLaravelですか？Mar 27, 2025 pm 05:31 PM

LaravelはPHPベースのフレームワークであるため、PHPとLaravelは直接匹敵するものではありません。 1.PHPは、シンプルで直接的であるため、小規模プロジェクトや迅速なプロトタイピングに適しています。 2。LARAVELは、豊富な機能とツールを提供するため、大規模なプロジェクトや効率的な開発に適していますが、急な学習曲線があり、純粋なPHPほど良くない場合があります。

Laravelはフロントエンドですか、それともバックエンドですか？Mar 27, 2025 pm 05:31 PM

laravelisabackendframeworkbuiltonphp、designforwebapplicationdevelopment.itfocusonserver-sidelogic、databasemanagement、およびapplicationStructure、およびbueithedendtechnologiesvue.jsorreactforfull-stackdevelymentと統合されていること。