Laravel开发：如何使用Laravel Nova和AdminLTE生成后台管理界面？-Laravel-PHP中文网

首页

php框架

Laravel

Laravel开发：如何使用Laravel Nova和AdminLTE生成后台管理界面？

PHPz

Jun 13, 2023 pm 02:23 PM

laraveladminltenova

在现代Web应用程序中，管理界面是一个必须要考虑的重要部分。它需要是直观、易于使用和功能丰富的。为了实现这一目标，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

超越Zoom Call：连接分布式团队的创意策略Apr 26, 2025 am 12:24 AM

ToenhanceGaimentAndCohesionAmongDistributedTeamSbeyondzoom，实施策略：1）组织virtualCoffeebreaksForinfornformalChats，2）useassynchronoustoolslikeslikeslikeslikeslikeslikslackfornon worksdiscusions，3）介绍present cuctuceGamificationgamificeGamificationgamificationgamificationWithteamGameGameSorchallEngEsorChallEngEnsErchallEnges，and4）

最新的Laravel版本中有什么破坏变化？Apr 26, 2025 am 12:23 AM

Laravel10 IntroducesseveralbreakingChanges：1）Itrequiresphp8.1orhigher，2）TherOuteserviceProviderNowSabootMethodForloadingRoutes，3）thewithTimestAmpAmpAmps（）MethodOneLoquentRectrationShipsissississisdeprected，and4））

生产力悖论：在远程设置中保持重点和动力Apr 26, 2025 am 12:17 AM

tomaintainfocusandmotivationInremotework，createStructuredEnvorment，托管式构成，促进性，促进性通过socialescialactionsions andgoalsetting，维持工作劳动生平，维持且苏联核酸盐学。1）setupadeDedworkspadedworkspacepaceandstickeandsticketicktickticktoorine aroutine。

从远处建立信任：在分布式环境中促进协作Apr 26, 2025 am 12:13 AM

tofosterCollaboraboraboraboraboraboraboraboraborateNremoteTeams，实施策略：1）建立指定性的，结构性的通用性在PersonalCheck-ins，2）Usecollaborativetoolsfortransparenty，3）识别sectizeandcelebrateachivements，和4）fosterractulcultrustruloftrustrustandadadatapataptaptaptapity。

最新的Laravel版本的主要功能是什么？Apr 26, 2025 am 12:01 AM

Laravel的最新版本主要特色包括：1.LaravelOctane提升应用性能，2.改进的模型工厂支持关系和状态定义，3.增强的Artisan命令，4.改进的错误处理，5.新增的Eloquent访问器和修改器。这些功能显着提升了开发效率和应用性能，但需谨慎使用以避免潜在问题。

包容的幻想：解决偏远工作中的孤立和孤独感Apr 25, 2025 am 12:28 AM

Tocombatisolationandlonelinessinremotework,companiesshouldimplementregular,meaningfulinteractions,provideequalgrowthopportunities,andusetechnologyeffectively.1)Fostergenuineconnectionsthroughvirtualcoffeebreaksandpersonalsharing.2)Ensureremoteworkers

Laravel用于全堆栈开发：综合指南Apr 25, 2025 am 12:27 AM

laravelispularfullull-stackDevelopmentBecapeitOffersAsAseAseAseAseBlendOfbackendEdpoperandPowerandForterFlexibility.1）ITSbackEndCapaPabilities，sightifyDatabaseInteractions.2）thebladeTemplatingEngingEngineAllolowsLows