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. - 修改
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路由，它應該指向對應的Vue Component：
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,
},
// ...
});- 驗證Nova的樣式表和JavaScript是否呼叫正常，您可以使用以下命令：
php artisan serve
現在，您已經成功將Laravel Nova和AdminLTE混合使用，可以自訂管理面板了。
結論
在本文中，我們介紹如何使用Laravel Nova和AdminLTE來建立一個漂亮、靈活的管理面板。這些工具的強大組合可以為開發人員提供一個快速的方法來創建具有複雜功能的應用程序，並幫助開發人員更快地實現其業務需求。希望讀者能夠從本文中了解更多關於Laravel框架的內容。
以上是Laravel開發：如何使用Laravel Nova和AdminLTE產生後台管理介面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
在Laravel中如何獲取郵件發送失敗時的退信代碼？
Apr 01, 2025 pm 02:45 PM
Laravel郵件發送失敗時的退信代碼獲取方法在使用Laravel開發應用時，經常會遇到需要發送驗證碼的情況。而在實�...
Laravel計劃任務不執行：schedule:run命令後任務未運行怎麼辦？
Mar 31, 2025 pm 11:24 PM
Laravel計劃任務運行無響應排查在使用Laravel的計劃任務調度時，不少開發者會遇到這樣的問題：schedule:run...
在dcat admin中如何實現點擊添加數據的自定義表格功能？
Apr 01, 2025 am 07:09 AM
在dcatadmin(laravel-admin)中如何實現自定義點擊添加數據的表格功能在使用dcat...
Laravel Redis連接共享：為何select方法會影響其他連接？
Apr 01, 2025 am 07:45 AM
Laravel框架中Redis連接的共享與select方法的影響在使用Laravel框架和Redis時，開發者可能會遇到一個問題：通過配置...
Laravel多租戶擴展stancl/tenancy：如何自定義租戶數據庫連接的主機地址？
Apr 01, 2025 am 09:09 AM
在Laravel多租戶擴展包stancl/tenancy中自定義租戶數據庫連接使用Laravel多租戶擴展包stancl/tenancy構建多租戶應用時，...
Bangla 部分模型檢索中的 Laravel Eloquent ORM）
Apr 08, 2025 pm 02:06 PM
LaravelEloquent模型檢索：輕鬆獲取數據庫數據EloquentORM提供了簡潔易懂的方式來操作數據庫。本文將詳細介紹各種Eloquent模型檢索技巧，助您高效地從數據庫中獲取數據。 1.獲取所有記錄使用all()方法可以獲取數據庫表中的所有記錄：useApp\Models\Post;$posts=Post::all();這將返回一個集合(Collection)。您可以使用foreach循環或其他集合方法訪問數據：foreach($postsas$post){echo$post->
Laravel數據庫遷移遇到類重複定義：如何解決遷移文件重複生成及類名衝突？
Apr 01, 2025 pm 12:21 PM
Laravel數據庫遷移過程中出現類重複定義問題在使用Laravel框架進行數據庫遷移時，開發者可能會遇到“類已使用�...
