suchen

Heim  >  Artikel  >  PHP-Framework  >  Laravel-Entwicklung: Wie verwende ich Laravel Nova und AdminLTE, um eine Backend-Verwaltungsschnittstelle zu generieren?

Laravel-Entwicklung: Wie verwende ich Laravel Nova und AdminLTE, um eine Backend-Verwaltungsschnittstelle zu generieren?

PHPz
PHPzOriginal
2023-06-13 14:23:431565Durchsuche

In modernen Webanwendungen ist die Verwaltungsoberfläche ein wichtiger Teil, der berücksichtigt werden muss. Es muss intuitiv, einfach zu bedienen und funktionsreich sein. Um dieses Ziel zu erreichen, stellt Laravel zwei Frameworks zur Verfügung: Laravel Nova und AdminLTE.

Laravel Nova ist ein Admin-Panel in Laravel, das in wenigen Minuten ein Admin-Panel für Ihre Laravel-Anwendung generiert. Laravel Nova verfügt über eine schöne Benutzeroberfläche, Benutzerverwaltung, CMS und mehr, sodass Entwickler komplexe Anwendungen schneller und einfacher erstellen können.

Andererseits ist AdminLTE eine kostenlose Backend-Admin-Vorlage, die auch eine schöne Benutzeroberfläche und notwendige JavaScript-Bibliotheken bietet. Es basiert auf dem Bootstrap-CSS-Framework und ist zudem responsiv. Sie können AdminLTE lokal bereitstellen und hosten, um eine schnelle, anpassbare Verwaltungsoberfläche zu erhalten.

In diesem Artikel stellen wir vor, wie Sie mit Laravel Nova und AdminLTE eine schöne Verwaltungsoberfläche erstellen.

Schritt 1: Laravel Nova installieren

Um ein Admin-Panel mit Laravel Nova zu erstellen, müssen Sie zuerst Laravel Nova installieren. Bitte befolgen Sie die folgenden Schritte, um die Installation abzuschließen:

  1. Verwenden Sie in Ihrer Laravel-Anwendung den folgenden Befehl, um Nova zu installieren: composer require laravel/nova.composer require laravel/nova.
  2. 修改 config/app.php 文件，将以下行添加到 providers 数组中：LaravelNovaNovaServiceProvider::class.
  3. 为用户注册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样式的自定义管理面板。

  1. 下载AdminLTE并将其解压缩到 public 目录中。下面是下载链接：https://adminlte.io/themes/dev/AdminLTE/
  2. 创建一个新的视图来呈现管理面板。它将显示在/nova的路由中。
  3. 基于当前的模板，创建一个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>
  1. 在新的视图中，将以下内容包含到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>
  1. 在你的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
});
  1. 添加一个新的路由来处理nova
    2. Ändern Sie config/app.php code>-Datei, fügen Sie die folgenden Zeilen zum Array <code>providers hinzu: LaravelNovaNovaServiceProvider::class.
    Registrieren Sie Nova-Routen für Benutzer, öffnen Sie app/Providers/ Fügen Sie in der Datei NovaServiceProvider .php die folgende Methode hinzu: 
  1. 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,
    },
    // ...
});
Schritt 2: Nova-Ressourcen erstellen

In Laravel Nova werden Ressourcen zur Interaktion mit Datenbankmodellen verwendet. Um eine Ressource zu erstellen, führen Sie den folgenden Befehl aus: 

php artisan serve

Dadurch wird eine Ressourcenklasse im Verzeichnis app/Nova erstellt. In einer Ressourcenklasse definieren Sie, wie Ressourcendaten verwaltet und angezeigt werden. Der folgende Code definiert beispielsweise, wie die Ressource Benutzer angezeigt wird:

rrreee

Schritt 3: Nova-Ressourcen registrieren 🎜🎜Fügen Sie Folgendes in resources/assets/js/app.js hinzu: 🎜rrreee🎜Hinzufügen eine Route, damit Laravel auf Nova zugreifen kann: 🎜rrreee🎜 Fügen Sie abschließend Folgendes zu Ihrer webpack.mix.js-Datei hinzu: 🎜rrreee🎜 Schritt 4: Mit Nova über AdminLTE mischen 🎜🎜 Jetzt haben Sie Laravel Nova installiert und Nova-Ressourcen erstellt. Der nächste Schritt besteht darin, das AdminLTE-Stylesheet und die JavaScript-Bibliothek zu den Nova-Ressourcen hinzuzufügen, um ein benutzerdefiniertes Admin-Panel mit AdminLTE-Stil zu erstellen. 🎜🎜🎜Laden Sie AdminLTE herunter und extrahieren Sie es in das Verzeichnis public. Hier ist der Download-Link: https://adminlte.io/themes/dev/AdminLTE/🎜🎜Erstellen Sie eine neue Ansicht, um das Admin-Panel anzuzeigen. Es wird in der Route für /nova angezeigt. 🎜🎜Erstellen Sie basierend auf der aktuellen Vorlage eine nova.blade.php-Datei und fügen Sie den folgenden Inhalt in die Datei ein: 🎜🎜rrreee
    🎜In der neuen Ansicht „Einschließen“. den folgenden Inhalt im Body-Tag: 🎜🎜rrreee
      🎜Erstellen Sie eine neue Vue-Komponente in Ihren Komponenten und nennen Sie sie Nova. Nova Component muss beim Erstellen Routen und zugehörige Informationen registrieren: 🎜🎜rrreee
        🎜Fügen Sie eine neue Route hinzu, um die nova-Route zu verarbeiten, die auf die entsprechende Vue-Komponente verweisen sollte: 🎜 🎜rrreee🎜🎜Stellen Sie sicher, dass Novas Stylesheet und JavaScript normal aufgerufen werden. Sie können den folgenden Befehl verwenden: 🎜🎜rrreee🎜Nachdem Sie Laravel Nova und AdminLTE erfolgreich gemischt haben, können Sie das Admin-Panel anpassen. 🎜🎜Fazit🎜🎜In diesem Artikel haben wir vorgestellt, wie man mit Laravel Nova und AdminLTE ein schönes und flexibles Admin-Panel erstellt. Die leistungsstarke Kombination dieser Tools kann Entwicklern eine schnelle Möglichkeit bieten, Anwendungen mit komplexer Funktionalität zu erstellen und ihnen dabei zu helfen, ihre Geschäftsanforderungen schneller umzusetzen. Ich hoffe, dass die Leser in diesem Artikel mehr über das Laravel-Framework erfahren können. 🎜

Das obige ist der detaillierte Inhalt vonLaravel-Entwicklung: Wie verwende ich Laravel Nova und AdminLTE, um eine Backend-Verwaltungsschnittstelle zu generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Laravel-Entwicklung: Wie verwende ich Laravel-Warteschlangen zur Bearbeitung asynchroner Aufgaben?Nächster Artikel：Laravel-Entwicklung: Wie verwende ich Laravel-Warteschlangen zur Bearbeitung asynchroner Aufgaben?

In Verbindung stehende Artikel

Mehr sehen