recherche

Maison >cadre php >Laravel >Développement Laravel : Comment utiliser Laravel Nova et AdminLTE pour générer une interface de gestion backend ?

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

PHPz
PHPzoriginal
2023-06-13 14:23:431592parcourir

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 :

  1. Dans votre application Laravel, utilisez la commande suivante pour installer Nova : 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. Modifiez config/app.php code>, ajoutez les lignes suivantes au tableau <code>providers : LaravelNovaNovaServiceProvider::class.
    Enregistrez les routes Nova pour les utilisateurs, ouvrez app/Providers/ NovaServiceProvider .php, ajoutez la méthode suivante : 
  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,
    },
    // ...
});
É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

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
    🎜Dans la nouvelle vue, Inclure le contenu suivant dans la balise body : 🎜🎜rrreee
      🎜Créez un nouveau composant Vue dans vos composants et nommez-le Nova. Le composant Nova doit enregistrer les routes et les informations associées lors de la création : 🎜🎜rrreee
        🎜Ajoutez une nouvelle route pour gérer la route nova, qui doit pointer vers le composant Vue correspondant : 🎜 🎜rrreee🎜🎜Vérifiez que la feuille de style et JavaScript de Nova sont appelés normalement, vous pouvez utiliser la commande suivante : 🎜🎜rrreee🎜Maintenant que vous avez réussi à mélanger Laravel Nova et AdminLTE, vous pouvez personnaliser le panneau d'administration. 🎜🎜Conclusion🎜🎜Dans cet article, nous avons présenté comment utiliser Laravel Nova et AdminLTE pour créer un panneau d'administration magnifique et flexible. La puissante combinaison de ces outils peut fournir aux développeurs un moyen rapide de créer des applications dotées de fonctionnalités complexes et les aider à répondre plus rapidement à leurs besoins commerciaux. J'espère que les lecteurs pourront en apprendre davantage sur le framework Laravel à partir de cet article. 🎜

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Développement Laravel : Comment utiliser les files d'attente Laravel pour gérer des tâches asynchrones ?Article suivant：Développement Laravel : Comment utiliser les files d'attente Laravel pour gérer des tâches asynchrones ?

Articles Liés

Voir plus