首頁 > 文章 > php框架 > Laravel開發：如何使用Laravel Nova和AdminLTE產生後台管理介面？

Laravel開發：如何使用Laravel Nova和AdminLTE產生後台管理介面？

PHPz原創: 2023-06-13 14:23:431562瀏覽

在現代網頁應用程式中，管理介面是一個必須考慮的重要部分。它需要是直覺、易於使用和功能豐富的。為了實現這一目標，Laravel提供了Laravel Nova和AdminLTE兩個框架。

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.
#為使用者註冊Nova的路由，開啟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資源

在resources/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混合

現在您已經安裝了Laravel Nova和創建了Nova資源。下一步是將AdminLTE樣式表和JavaScript庫新增至Nova資源中，以便建立具有AdminLTE樣式的自訂管理面板。

下載AdminLTE並將其解壓縮到 public 目錄中。以下是下載連結：https://adminlte.io/themes/dev/AdminLTE/
建立一個新的視圖來呈現管理面板。它將顯示在/nova的路由中。
基於目前的模板，建立一個nova.blade.php文件，並將以下內容插入到文件中：

<!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>

在新的視圖中，將以下內容包含到body標籤中：

<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>

在你的Conponents中建立一個新的Vue Component並命名為Nova。 Nova Component在建立時需要註冊路由和相關資訊：

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路由，它應該指向對應的Vue Component：

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,
    },
    // ...
});

驗證Nova的樣式表和JavaScript是否呼叫正常，您可以使用以下命令：

php artisan serve

現在，您已經成功將Laravel Nova和AdminLTE混合使用，可以自訂管理面板了。

結論

在本文中，我們介紹如何使用Laravel Nova和AdminLTE來建立一個漂亮、靈活的管理面板。這些工具的強大組合可以為開發人員提供一個快速的方法來創建具有複雜功能的應用程序，並幫助開發人員更快地實現其業務需求。希望讀者能夠從本文中了解更多關於Laravel框架的內容。

以上是Laravel開發：如何使用Laravel Nova和AdminLTE產生後台管理介面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Laravel開發：如何使用Laravel Queues處理非同步任務？下一篇：Laravel開發：如何使用Laravel Queues處理非同步任務？

看更多