Laravel开发：怎样使用Laravel Nova和AdminLTE天生后台治理界面？
在现代web应用程序中，治理界面是一个必需要思量的主要部分。它需要是直观、易于使用和功效富厚的。为了实现这一目的，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天生后台治理界面？的详细内容，更多请关注本网内其它相关文章！
