Pembangunan Laravel: Bagaimana untuk menggunakan Laravel Nova dan AdminLTE untuk menjana antara muka pengurusan bahagian belakang?

Dalam aplikasi web moden, antara muka pengurusan adalah bahagian penting yang mesti dipertimbangkan. Ia perlu intuitif, mudah digunakan dan kaya dengan ciri. Untuk mencapai matlamat ini, Laravel menyediakan dua rangka kerja, Laravel Nova dan AdminLTE.

Laravel Nova ialah panel pentadbir dalam Laravel yang menjana panel pentadbir untuk aplikasi Laravel anda dalam beberapa minit. Laravel Nova menampilkan UI yang cantik, pengurusan pengguna, CMS dan banyak lagi, membolehkan pembangun mencipta aplikasi yang kompleks dengan lebih pantas dan lebih mudah.

Sebaliknya, AdminLTE ialah templat pengurusan bahagian belakang percuma yang turut menyediakan antara muka pengguna yang bagus dan perpustakaan JavaScript yang diperlukan. Ia berdasarkan rangka kerja CSS Bootstrap dan juga responsif. Anda boleh menggunakan dan mengehoskan AdminLTE secara setempat untuk antara muka pengurusan yang pantas dan boleh disesuaikan.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan Laravel Nova dan AdminLTE untuk menjana antara muka pengurusan yang cantik.

Langkah 1: Pasang Laravel Nova

Untuk membuat panel pentadbir menggunakan Laravel Nova, anda perlu memasang Laravel Nova terlebih dahulu. Sila ikuti langkah di bawah untuk melengkapkan pemasangan:

1. Dalam aplikasi Laravel anda, gunakan arahan berikut untuk memasang Nova: composer require laravel/nova.
2. Ubah suai fail config/app.php dan tambah baris berikut Dalam tatasusunan providers: LaravelNovaNovaServiceProvider::class.
3. Daftar penghalaan Nova untuk pengguna, buka fail app/Providers/NovaServiceProvider.php dan tambah kaedah berikut:

use LaravelNovaNova;

protected function routes()
{
    Nova::routes()
        ->withAuthenticationRoutes()
        ->withPasswordResetRoutes()
        ->register();
}

Langkah 2: Cipta sumber Nova

Dalam Laravel Nova, sumber digunakan untuk berinteraksi dengan model pangkalan data. Untuk mencipta sumber, jalankan arahan berikut:

php artisan nova:resource {resourceName}

Ini akan mencipta kelas sumber dalam direktori app/Nova. Dalam kelas sumber, anda menentukan cara mengurus dan memaparkan data sumber. Sebagai contoh, kod berikut mentakrifkan cara untuk memaparkan sumber 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(),
        ];
    }
}

Langkah 3: Daftar sumber Nova

Tambahkan yang berikut pada 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'),
        },
    ])
})

Tambah laluan supaya Laravel boleh mengakses Nova:

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

Akhir sekali, tambah yang berikut pada fail webpack.mix.js anda:

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

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

Langkah 4: Campurkan dengan AdminLTE dengan Nova

Kini anda telah memasang Laravel Nova dan mencipta sumber Nova. Langkah seterusnya ialah menambah helaian gaya AdminLTE dan perpustakaan JavaScript pada sumber Nova untuk membuat panel pentadbir tersuai dengan penggayaan AdminLTE.

1. Muat turun AdminLTE dan ekstrak ke dalam direktori public. Berikut ialah pautan muat turun: https://adminlte.io/themes/dev/AdminLTE/
2. Buat paparan baharu untuk membentangkan panel pentadbir. Ia akan dipaparkan dalam laluan /nova.
3. Berdasarkan templat semasa, cipta fail nova.blade.php dan masukkan kandungan berikut ke dalam fail:

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

4. Dalam paparan baharu, masukkan kandungan berikut Dalam tag badan:

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

5. Buat Komponen Vue baharu dalam Komponen anda dan namakannya Nova. Nova Component perlu mendaftar laluan dan maklumat berkaitan semasa membuat:

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
});

6. Tambah laluan baharu untuk mengendalikan laluan nova, yang sepatutnya menghala ke Komponen Vue yang sepadan:

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

7. Untuk mengesahkan sama ada helaian gaya Nova dan JavaScript dipanggil seperti biasa, anda boleh menggunakan arahan berikut:

php artisan serve

Kini, anda telah berjaya mencampurkan Laravel Nova dan AdminLTE dan boleh Tentukan panel pentadbir secara automatik.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan Laravel Nova dan AdminLTE untuk mencipta panel pentadbir yang cantik dan fleksibel. Gabungan kuat alatan ini boleh memberikan pembangun cara yang pantas untuk mencipta aplikasi dengan fungsi yang kompleks dan membantu pembangun merealisasikan keperluan perniagaan mereka dengan lebih cepat. Saya harap pembaca boleh mengetahui lebih lanjut tentang rangka kerja Laravel daripada artikel ini.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk menggunakan Laravel Nova dan AdminLTE untuk menjana antara muka pengurusan bahagian belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!