Laravel 개발: Laravel Nova 및 AdminLTE를 사용하여 백엔드 관리 인터페이스를 생성하는 방법은 무엇입니까?-Laravel-php.cn

집

PHP 프레임워크

Laravel

Laravel 개발: Laravel Nova 및 AdminLTE를 사용하여 백엔드 관리 인터페이스를 생성하는 방법은 무엇입니까?

PHPz

Jun 13, 2023 pm 02:23 PM

laraveladminltenova

최신 웹 애플리케이션에서 관리 인터페이스는 고려해야 할 중요한 부분입니다. 직관적이고 사용하기 쉬우며 기능이 풍부해야 합니다. 이 목표를 달성하기 위해 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.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

config/app.php를 수정하세요. code> 파일에서 <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,
    },
    // ...
});

2단계: Nova 리소스 생성

Laravel Nova에서는 리소스가 데이터베이스 모델과 상호 작용하는 데 사용됩니다. 리소스를 생성하려면 다음 명령을 실행하세요.

php artisan serve

이렇게 하면 app/Nova 디렉터리에 리소스 클래스가 생성됩니다. 리소스 클래스에서는 리소스 데이터가 관리되고 표시되는 방법을 정의합니다. 예를 들어, 다음 코드는 User 리소스를 표시하는 방법을 정의합니다.

rrreee

3단계: Nova 리소스 등록 🎜🎜resources/assets/js/app.js에 다음을 추가합니다. 🎜rrreee🎜Add Laravel이 Nova에 액세스할 수 있도록 경로: 🎜rrreee🎜 마지막으로 webpack.mix.js 파일에 다음을 추가합니다: 🎜rrreee🎜 4단계: AdminLTE를 사용하여 Nova와 혼합 🎜🎜 이제 Laravel Nova가 설치되고 Nova 리소스가 생성되었습니다. 다음 단계는 AdminLTE 스타일시트가 포함된 사용자 정의 관리 패널을 생성하기 위해 AdminLTE 스타일시트와 JavaScript 라이브러리를 Nova 리소스에 추가하는 것입니다. 🎜🎜🎜AdminLTE를 다운로드하고 public 디렉터리에 압축을 풉니다. 다운로드 링크는 다음과 같습니다: https://adminlte.io/themes/dev/AdminLTE/🎜🎜관리자 패널을 표시하는 새 보기를 만듭니다. /nova 경로에 나타납니다. 🎜🎜현재 템플릿을 기반으로 nova.blade.php 파일을 생성하고 파일에 다음 콘텐츠를 삽입합니다. 🎜🎜rrreee

Nova

nova

위 내용은 Laravel 개발: Laravel Nova 및 AdminLTE를 사용하여 백엔드 관리 인터페이스를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

라 라벨 프레임 워크 기술 공유Apr 18, 2025 pm 01:12 PM

이 지속적인 기술 발전 시대에, Mastering Advanced Frameworks는 현대 프로그래머에게 중요합니다. 이 기사는 Laravel 프레임 워크에서 거의 알려지지 않은 기술을 공유하여 개발 기술을 향상시키는 데 도움이됩니다. 우아한 구문과 광범위한 기능으로 유명한이 기사는 강력한 기능을 파고 효율적이고 유지 관리 가능한 웹 애플리케이션을 만드는 데 도움이되는 실용적인 팁과 요령을 제공합니다.

Laravel과 ThinkPhp의 차이점Apr 18, 2025 pm 01:09 PM

Laravel과 ThinkPHP는 모두 인기있는 PHP 프레임 워크이며 개발에 고유 한 장점과 단점이 있습니다. 이 기사는 두 가지 깊이를 비교하여 건축, 기능 및 성능 차이를 강조하여 개발자가 특정 프로젝트 요구에 따라 정보에 입각 한 선택을 할 수 있도록 도와줍니다.

Laravel 사용자 로그인 기능 목록Apr 18, 2025 pm 01:06 PM

Laravel에서 사용자 로그인 기능을 구축하는 것은 중요한 작업 이며이 기사는 사용자 등록에서 로그인 검증에 이르기까지 모든 중요한 단계를 다루는 포괄적 인 개요를 제공합니다. 우리는 Laravel의 내장 검증 기능의 힘을 발휘하고 특정 요구에 맞게 로그인 프로세스를 사용자 정의하고 확장하는 것을 안내합니다. 이 단계별 지침을 따르면 Laravel 애플리케이션 사용자에게 완벽한 액세스 경험을 제공하는 안전하고 안정적인 로그인 시스템을 만들 수 있습니다.

어떤 버전의 Laravel이 있습니까? 초보자를위한 Laravel 버전을 선택하는 방법Apr 18, 2025 pm 01:03 PM

초보자를위한 Laravel Framework 버전 선택 안내서 에서이 기사는 초보자가 많은 버전 중에서 정보에 입각 한 선택을하는 데 도움이되도록 설계된 Laravel의 버전 차이점으로 뛰어 들었습니다. 우리는 각 릴리스의 주요 기능에 중점을두고 장단점을 비교하며 초보자가 기술 수준 및 프로젝트 요구 사항에 따라 가장 적합한 Laravel 버전을 선택할 수 있도록 유용한 조언을 제공 할 것입니다. 초보자에게는 적절한 버전의 Laravel을 선택하는 것이 학습 곡선과 전반적인 개발 경험에 크게 영향을 줄 수 있기 때문에 중요합니다.

Laravel의 버전 번호를 보는 방법은 무엇입니까? Laravel의 버전 번호를 보는 방법Apr 18, 2025 pm 01:00 PM

Laravel 프레임 워크에는 개발자의 다양한 요구를 충족시키기 위해 버전 번호를 쉽게 볼 수있는 내장 방법이 있습니다. 이 기사는 Composer Command Line 도구 사용, .env 파일에 액세스하거나 PHP 코드를 통해 버전 정보를 얻는 것을 포함하여 이러한 방법을 탐색합니다. 이러한 방법은 Laravel 애플리케이션의 버전 관리를 유지 관리하고 관리하는 데 필수적입니다.

PHP 프레임 워크 Laravel을 사용하는 최신 방법Apr 18, 2025 pm 12:57 PM

Laravel은 우아한 구문과 강력한 기능으로 개발자에게 인기있는 PHP 기반 웹 응용 프로그램 프레임 워크입니다. 최신 버전은 개발 경험과 응용 프로그램 성능을 향상 시키도록 설계된 많은 개선 사항과 새로운 기능을 소개합니다. 이 기사는 Laravel의 최신 접근 방식으로 뛰어 들어 이러한 업데이트를 활용하여보다 강력하고 효율적인 웹 애플리케이션을 구축하는 방법에 중점을 둘 것입니다.

Laravel 프레임 워크 설치 방법Apr 18, 2025 pm 12:54 PM

기사 요약 :이 기사는 Laravel 프레임 워크를 쉽게 설치하는 방법에 대한 독자들을 안내하기위한 자세한 단계별 지침을 제공합니다. Laravel은 웹 애플리케이션의 개발 프로세스를 가속화하는 강력한 PHP 프레임 워크입니다. 이 자습서는 시스템 요구 사항에서 데이터베이스 구성 및 라우팅 설정에 이르기까지 설치 프로세스를 다룹니다. 이러한 단계를 수행함으로써 독자들은 라벨 프로젝트를위한 탄탄한 토대를 빠르고 효율적으로 놓을 수 있습니다.

Laravel을 배우는 방법 무료로 LaRavel을 배우는 방법Apr 18, 2025 pm 12:51 PM

Laravel 프레임 워크를 배우고 싶지만 자원이나 경제적 압력이 없습니까? 이 기사는 Laravel의 무료 학습을 제공하며 온라인 플랫폼, 문서 및 커뮤니티 포럼과 같은 리소스를 사용하여 PHP 개발 여정을 시작하는 것에서 마스터까지의 탄탄한 토대를 마련하는 방법을 가르쳐줍니다.

See all articles