Développement Laravel : Comment utiliser Laravel Nova et AdminLTE pour générer une interface de gestion backend ?-Laravel-php.cn

Dans les applications Web modernes, l'interface de gestion est un élément important à prendre en compte. Il doit être intuitif, facile à utiliser et riche en fonctionnalités. Pour atteindre cet objectif, Laravel propose deux frameworks, Laravel Nova et AdminLTE.

Laravel Nova est un panneau d'administration dans Laravel qui génère un panneau d'administration pour votre application Laravel en quelques minutes. Laravel Nova propose une belle interface utilisateur, une gestion des utilisateurs, un CMS et bien plus encore, permettant aux développeurs de créer des applications complexes plus rapidement et plus facilement.

D'autre part, AdminLTE est un modèle d'administration backend gratuit qui fournit également une interface utilisateur agréable et les bibliothèques JavaScript nécessaires. Il est basé sur le framework CSS Bootstrap et est également réactif. Vous pouvez déployer et héberger AdminLTE localement pour une interface de gestion rapide et personnalisable.

Dans cet article, nous présenterons comment utiliser Laravel Nova et AdminLTE pour générer une belle interface de gestion.

Étape 1 : Installer Laravel Nova

Pour créer un panneau d'administration à l'aide de Laravel Nova, vous devez d'abord installer Laravel Nova. Veuillez suivre les étapes ci-dessous pour terminer l'installation :

Dans votre application Laravel, utilisez la commande suivante pour installer Nova : composer require 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();
}

Copier après la connexion

步骤2：创建Nova资源

在Laravel Nova中，资源用于与数据库模型进行交互。要创建一个资源，请运行以下命令：

php artisan nova:resource {resourceName}

Copier après la connexion

这将在 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(),
        ];
    }
}

Copier après la connexion

步骤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'),
        },
    ])
})

Copier après la connexion

添加路由，使Laravel可以访问Nova：

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

Copier après la connexion

最后，将以下内容添加到您的webpack.mix.js文件：

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

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

Copier après la connexion

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

Copier après la connexion

在新的视图中，将以下内容包含到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>

Copier après la connexion

在你的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
});

Copier après la connexion

添加一个新的路由来处理nova

config/app.php </ code>, ajoutez les lignes suivantes au tableau <code>providers

LaravelNovaNovaServiceProvider::class

app/Providers/ NovaServiceProvider .php

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

Copier après la connexion

Étape 2 : Créer des ressources Nova

Dans Laravel Nova, les ressources sont utilisées pour interagir avec les modèles de base de données. Pour créer une ressource, exécutez la commande suivante :

php artisan serve

Copier après la connexion

Cela créera une classe de ressources dans le répertoire app/Nova. Dans une classe de ressources, vous définissez comment gérer et afficher les données de ressources. Par exemple, le code suivant définit comment afficher la ressource Utilisateur :

rrreee

Étape 3 : Enregistrez les ressources Nova 🎜🎜Ajoutez ce qui suit dans resources/assets/js/app.js : 🎜rrreee🎜Ajouter un itinéraire pour que Laravel puisse accéder à Nova : 🎜rrreee🎜 Enfin, ajoutez ce qui suit à votre fichier webpack.mix.js : 🎜rrreee🎜 Étape 4 : Mixez avec Nova en utilisant AdminLTE 🎜🎜 Vous avez maintenant Laravel Nova installé et les ressources Nova créées. L'étape suivante consiste à ajouter la feuille de style AdminLTE et la bibliothèque JavaScript aux ressources Nova afin de créer un panneau d'administration personnalisé avec le style AdminLTE. 🎜🎜🎜Téléchargez AdminLTE et extrayez-le dans le répertoire public. Voici le lien de téléchargement : https://adminlte.io/themes/dev/AdminLTE/🎜🎜Créez une nouvelle vue pour présenter le panneau d'administration. Il apparaîtra dans la route pour /nova. 🎜🎜Sur la base du modèle actuel, créez un fichier nova.blade.php et insérez le contenu suivant dans le fichier : 🎜🎜rrreee

Nova

nova

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!