Laravel 개발: Laravel Nova 및 AdminLTE를 사용하여 백엔드 관리 인터페이스를 생성하는 방법은 무엇입니까?
최신 웹 애플리케이션에서 관리 인터페이스는 고려해야 할 중요한 부분입니다. 직관적이고 사용하기 쉬우며 기능이 풍부해야 합니다. 이 목표를 달성하기 위해 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.- 사용자를 위한 Nova 경로를 등록하고
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,
},
// ...
});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- 🎜새 보기에서 포함 본문 태그에 다음 콘텐츠: 🎜🎜rrreee
- 🎜구성 요소에 새 Vue 구성 요소를 만들고 이름을
Nova로 지정하세요. Nova 구성 요소는 생성 시 경로 및 관련 정보를 등록해야 합니다. 🎜🎜rrreee- 🎜해당 Vue 구성 요소를 가리켜야 하는
nova 경로를 처리할 새 경로를 추가합니다. 🎜 🎜rrreee🎜🎜Nova의 스타일시트와 JavaScript가 정상적으로 호출되는지 확인하고 다음 명령을 사용할 수 있습니다. 🎜🎜rrreee🎜이제 Laravel Nova와 AdminLTE를 성공적으로 혼합했으므로 관리자 패널을 사용자 정의할 수 있습니다. 🎜🎜결론🎜🎜이 글에서는 Laravel Nova와 AdminLTE를 사용하여 아름답고 유연한 관리자 패널을 만드는 방법을 소개했습니다. 이러한 도구의 강력한 조합은 개발자에게 복잡한 기능을 갖춘 애플리케이션을 빠르게 생성할 수 있는 방법을 제공하고 개발자가 비즈니스 요구 사항을 더 빠르게 실현하는 데 도움을 줄 수 있습니다. 독자들이 이 기사를 통해 Laravel 프레임워크에 대해 더 많이 배울 수 있기를 바랍니다. 🎜위 내용은 Laravel 개발: Laravel Nova 및 AdminLTE를 사용하여 백엔드 관리 인터페이스를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7706
15
1640
14
1394
52
1288
25
1231
29
Laravel에서 이메일 전송이 실패 할 때 반환 코드를 얻는 방법은 무엇입니까?
Apr 01, 2025 pm 02:45 PM
Laravel 이메일 전송이 실패 할 때 반환 코드를 얻는 방법. Laravel을 사용하여 응용 프로그램을 개발할 때 종종 확인 코드를 보내야하는 상황이 발생합니다. 그리고 실제로 ...
laravel 일정 작업이 실행되지 않습니다 : 스케줄 후 작업이 실행되지 않으면 어떻게해야합니까?
Mar 31, 2025 pm 11:24 PM
laravel 일정 작업 실행 비 응답 문제 해결 Laravel의 일정 작업 일정을 사용할 때 많은 개발자 가이 문제에 직면합니다 : 스케줄 : 실행 ...
Laravel에서는 이메일로 확인 코드를 보내지 못하는 상황을 처리하는 방법은 무엇입니까?
Mar 31, 2025 pm 11:48 PM
Laravel의 이메일을 처리하지 않는 방법은 LaRavel을 사용하는 것입니다.
DCAT 관리자에서 데이터를 추가하기 위해 클릭하는 사용자 정의 테이블 기능을 구현하는 방법은 무엇입니까?
Apr 01, 2025 am 07:09 AM
DCAT를 사용할 때 DCATADMIN (LARAVEL-ADMIN)에서 데이터를 추가하려면 사용자 정의의 테이블 기능을 구현하는 방법 ...
Laravel Redis Connection 공유 : 선택 메소드가 다른 연결에 영향을 미치는 이유는 무엇입니까?
Apr 01, 2025 am 07:45 AM
Laravel 프레임 워크 및 Laravel 프레임 워크 및 Redis를 사용할 때 Redis 연결을 공유하는 데 영향을 줄 수 있습니다. 개발자는 문제가 발생할 수 있습니다. 구성을 통해 ...
Laravel 멀티 테넌트 확장 STANCL/TENANCY : 테넌트 데이터베이스 연결의 호스트 주소를 사용자 정의하는 방법은 무엇입니까?
Apr 01, 2025 am 09:09 AM
Laravel 다중 테넌트 확장 패키지 패키지 패키지 패키지 패키지 Stancl/Tenancy, ...
Bangla 부분 모델 검색의 Laravel Eloquent Orm)
Apr 08, 2025 pm 02:06 PM
Laraveleloquent 모델 검색 : 데이터베이스 데이터를 쉽게 얻을 수 있습니다. 이 기사는 데이터베이스에서 데이터를 효율적으로 얻는 데 도움이되는 다양한 웅변 모델 검색 기술을 자세히 소개합니다. 1. 모든 기록을 얻으십시오. 모든 () 메소드를 사용하여 데이터베이스 테이블에서 모든 레코드를 가져옵니다. 이것은 컬렉션을 반환합니다. Foreach 루프 또는 기타 수집 방법을 사용하여 데이터에 액세스 할 수 있습니다 : Foreach ($ postas $ post) {echo $ post->
Laravel 's geospatial : 대화식지도의 최적화 및 많은 양의 데이터
Apr 08, 2025 pm 12:24 PM
7 백만 레코드를 효율적으로 처리하고 지리 공간 기술로 대화식지도를 만듭니다. 이 기사는 Laravel과 MySQL을 사용하여 7 백만 개 이상의 레코드를 효율적으로 처리하고 대화식지도 시각화로 변환하는 방법을 살펴 봅니다. 초기 챌린지 프로젝트 요구 사항 : MySQL 데이터베이스에서 7 백만 레코드를 사용하여 귀중한 통찰력을 추출합니다. 많은 사람들이 먼저 프로그래밍 언어를 고려하지만 데이터베이스 자체를 무시합니다. 요구 사항을 충족시킬 수 있습니까? 데이터 마이그레이션 또는 구조 조정이 필요합니까? MySQL이 큰 데이터로드를 견딜 수 있습니까? 예비 분석 : 주요 필터 및 속성을 식별해야합니다. 분석 후, 몇 가지 속성만이 솔루션과 관련이 있음이 밝혀졌습니다. 필터의 타당성을 확인하고 검색을 최적화하기위한 제한 사항을 설정했습니다. 도시를 기반으로 한지도 검색
