.jpg)
在現(xiàn)代web應(yīng)用程序中，管理界面是一個(gè)必須要考慮的重要部分。它需要是直觀、易于使用和功能豐富的。為了實(shí)現(xiàn)這一目標(biāo)，laravel提供了laravel nova和adminlte兩個(gè)框架。
Laravel Nova是Laravel中的一個(gè)管理面板，它可以在幾分鐘內(nèi)為您的Laravel應(yīng)用程序生成一個(gè)管理面板。Laravel Nova具有美觀的UI、用戶管理、CMS等功能，使開發(fā)人員能夠更快、更輕松地創(chuàng)建復(fù)雜的應(yīng)用程序。
另一方面，AdminLTE是一個(gè)免費(fèi)的后臺(tái)管理模板，它還提供了一個(gè)不錯(cuò)的用戶界面和必要的JavaScript庫。它是基于Bootstrap CSS框架的，也是響應(yīng)式的。您可以在本地部署和托管AdminLTE，從而獲得一個(gè)快速、自定義的管理界面。
在本文中，我們將介紹使用Laravel Nova和AdminLTE來生成一個(gè)漂亮的管理界面的方法。
步驟1：安裝Laravel Nova
要使用Laravel Nova創(chuàng)建一個(gè)管理面板，您需要先安裝Laravel Nova。請按照以下步驟完成安裝：
- 在您的Laravel應(yīng)用程序中，使用以下命令安裝Nova：composer require laravel/nova.
- 修改 config/app.php 文件，將以下行添加到 providers 數(shù)組中：LaravelNovaNovaServiceProvider::class.
- 為用戶注冊Nova的路由，打開 app/Providers/NovaServiceProvider.php文件，添加以下方法：
use LaravelNovaNova; protected function routes() { Nova::routes() ->withAuthenticationRoutes() ->withPasswordResetRoutes() ->register(); }
步驟2：創(chuàng)建Nova資源
在Laravel Nova中，資源用于與數(shù)據(jù)庫模型進(jìn)行交互。要?jiǎng)?chuàng)建一個(gè)資源，請運(yùn)行以下命令：
php artisan nova:resource {resourceName}
這將在 app/Nova 目錄中創(chuàng)建一個(gè)資源類。在資源類中，您可以定義如何管理和展示資源數(shù)據(jù)。例如，以下代碼定義如何顯示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 = 'AppUser'; /** * 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中添加以下內(nèi)容：
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'); });
最后，將以下內(nèi)容添加到您的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混合
現(xiàn)在您已經(jīng)安裝了Laravel Nova和創(chuàng)建了Nova資源。下一步是將AdminLTE樣式表和JavaScript庫添加到Nova資源中，以便創(chuàng)建具有AdminLTE樣式的自定義管理面板。
- 下載AdminLTE并將其解壓縮到 public 目錄中。下面是下載鏈接：https://adminlte.io/themes/dev/AdminLTE/
- 創(chuàng)建一個(gè)新的視圖來呈現(xiàn)管理面板。它將顯示在/nova的路由中。
- 基于當(dāng)前的模板，創(chuàng)建一個(gè)nova.blade.php文件，并將以下內(nèi)容插入到文件中：
<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"><div id="app"> <nova></nova> </div> <!-- Include AdminLTE and jQuery JavaScript --> <script src="/js/adminlte.js"></script><script src="%7B%7B%20asset('js/app.js')%20%7D%7D"></script>
- 在新的視圖中，將以下內(nèi)容包含到body標(biāo)簽中：
<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中創(chuàng)建一個(gè)新的Vue Component并命名為Nova。Nova Component在創(chuàng)建時(shí)需要注冊路由和相關(guān)信息：
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 });
- 添加一個(gè)新的路由來處理nova路由，它應(yīng)該指向?qū)?yīng)的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, }, // ... });
- 驗(yàn)證Nova的樣式表和JavaScript是否調(diào)用正常，您可以使用以下命令：
php artisan serve
現(xiàn)在，您已經(jīng)成功將Laravel Nova和AdminLTE混合使用，可以自定義管理面板了。
結(jié)論
在本文中，我們介紹了如何使用Laravel Nova和AdminLTE來創(chuàng)建一個(gè)漂亮、靈活的管理面板。這些工具的強(qiáng)大組合可以為開發(fā)人員提供一個(gè)快速的方法來創(chuàng)建具有復(fù)雜功能的應(yīng)用程序，并幫助開發(fā)人員更快地實(shí)現(xiàn)其業(yè)務(wù)需求。希望讀者能夠從本文中了解到更多關(guān)于Laravel框架的內(nèi)容。
.png)
