kdymsolucoes / laravel_boilerplate
基于 Laravel 的项目模板
Requires
- agenciamaior/bootstrap_forms: >=0.0.1
- doctrine/dbal: >=2.9
- laravel/framework: >=5.5
README
这是一个基于 AdminLTE 3 的管理面板模板生成库。它包含一些预定义功能,例如用户控制、带有掩码的输入字段等。
目录
依赖
安装
$ composer require agenciamaior/laravel_boilerplate
通过 Composer 下载包后,您需要运行以下命令来安装库:
$ php artisan boiler:install
警告:安装库将替换您 Laravel 项目文件夹中的多个文件。建议您在干净的 Laravel 安装上执行此命令。
由于将下载多个 NPM 包到您的项目中,安装可能需要一些时间。
该库不会在您的项目中安装或配置数据库。您需要像创建任何新的 Laravel 项目一样手动完成此操作。
安装将自动运行 php artisan make:auth
命令以生成一个带有一些已预配置迁移的认证系统,用于用户表,这些迁移已修改以添加一些标准 Laravel 安装中不存在的字段。
安装后,您可以通过以下命令运行迁移:
$ php artisan migrate
安装将复制多个样式和脚本文件到 resources 文件夹中。样式文件位于 resources/sass/_boilerplate.scss,您需要手动将其导入到 resources/sass/app.scss 文件中。
@import 'boilerplate';
导入后,您需要通过以下命令编译脚本:
$ npm run dev
或者,如果您希望每次修改资产时自动编译,则运行并保持以下命令运行:
$ npm run watch
在您的 routes/web.php 路由文件中,将根地址指向首页
之前
Route::get('/', function() { return view('welcome'); });
之后
Route::get('/', 'HomeController@index')->name('home'); \AgenciaMaior\LaravelBoilerplate\LaravelBoilerplateServiceProvider::routes();
安装将自动添加自己的路由。在本文档的 路由 部分中,您可以了解如何覆盖这些路由。
可用资源
表单
所有视图中的表单都使用 BootstrapForms 库。要阅读该库的完整文档,请点击 此处。
登录
首次登录时,系统将在用户表中查找是否为空。如果为空,您将被引导到创建第一个管理员用户的界面。
此表单已通过 jQuery Validation 库进行了javascript验证。
如果表格中存在已注册的用户,您将正常重定向到登录页面。
该页面的布局可以在/resources/views/auth/login.blade.php中找到并自由修改。
用户配置文件
该库使用数字常量来表示用户配置文件,具体如下
- 管理员 => 0
- 普通用户 => 1
这些常量在模型app/User.php中定义
//... const ROLE_ADMIN = 0; const ROLE_COMMON = 1; public static function roles() { return [ self::ROLE_ADMIN => 'Administrador', self::ROLE_COMMON => 'Comum', ]; } public function getRoleStringAttribute() { return self::roles()[$this->role]; } //...
您可以选择添加新配置文件或修改现有配置文件。这些常量存储在users表(由安装迁移生成)的role字段(类型为INTEGER)中。
getRoleStringAttribute函数是一个访问器,用于获取用户配置文件的文字表示形式。有关Laravel中访问器的更多信息,请参阅文档。
常量使用示例
$user->role = \App\User::ROLE_ADMIN; // Equivalente a: $user->role = 0;
访问器使用示例
<p><b>Perfil do Usuário:</b> {{ $user->role_string }}</p> <!-- Equivalente a: --> <p><b>Perfil do Usuário:</b> Administrador</p>
模板
所有模板都位于/resources/views/boilerplate中。在该目录中,存在一个名为master的模板,可以在此添加项目的元标签,以及更改页面的标题和其他全局属性。
raw模板用于登录页面和其他具有相同格式的页面。
其他页面将继承page模板。
要更改菜单,请访问该目录中的main-menu视图。在菜单部分,您可以了解更多关于如何添加菜单项的详细信息。
resources/views/home.blade.php视图的结构,遵循库的模板
@extends('boilerplate.page') @section('css') {{-- Seus estilos específicos de página aqui --}} @endsection @section('header-title') <h1> Bem-vindo </h1> @stop @section('header-breadcrumbs') <li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item active">Dashboard</li> @endsection @section('content') {{-- Seu conteúdo aqui --}} @stop @section('js') {{-- Seus scripts específicos de página aqui --}} @endsection
样式和脚本
样式文件位于resources/sass/_boilerplate.scss中。如安装说明中所述,该文件不会自动导入到resources/sass/app.scss中,以避免与项目当前样式冲突。要导入它,请在app.scss文件中使用以下命令:
@import 'boilerplate';
您需要手动解决导入后出现的任何样式冲突。
与样式文件不同,脚本文件resources/js/boilerplate.js已自动添加到resources/js/bootstrap.js文件的末尾。
因此,您可以分别定义自己的全局样式和脚本,但您也可以修改这些文件,如果您愿意的话。
页面的特定样式和脚本可以放在视图中的相应@section
中。
菜单
菜单模板位于resources/boilerplate/main-menu.blade.php中。在该文件的开始部分,生成了两个变量,用于识别当前的Controller和Action。这样,当页面在其菜单项中打开时,可以使菜单项处于活动状态。
新菜单项的示例
@php $class = ''; if ($controller == 'AlgumController') { $class = 'active'; } @endphp <li class="nav-item"> <a href="link/do/menu" class="nav-link {{ $class }}"> <i class="nav-icon fa fa-icone"></i> <p>Novo Link</p> </a> </li>
该库使用FontAwesome图标,但您可以使用任何其他图标库。
包含两个菜单项的新组的示例
@php $class = ''; if ($controller == 'AlgumController') { $class = 'menu-open'; } @endphp <li class="nav-item has-treeview {{ $class }}"> <a href="#" class="nav-link"> <i class="nav-icon fa fa-icone"></i> <p>Grupo <i class="fa fa-angle-left right"></i></p> </a> <ul class="nav nav-treeview"> @php $class = ''; if ($controller == 'AlgumController' && $action == 'algumaAction') { $class = 'active'; } @endphp <li class="nav-item"> <a href="link/do/menu" class="nav-link {{ $class }}"> <i class="fa fa-icone nav-icon"></i> <p>Item 1</p> </a> </li> @php $class = ''; if ($controller == 'OutroController') { $class = 'active'; } @endphp <li class="nav-item"> <a href="link/do/menu" class="nav-link {{ $class }}"> <i class="fa fa-icone nav-icon"></i> <p>Item 2</p> </a> </li> </ul> </li>
其他所有菜单选项都可以在库的官方页面AdminLTE 3中查看。
ACLs
安装会自动在 app/Policies/UserPolicy.php 为 Model 用户创建一个 Policy,并且该文件已自动导入到 app/Providers/AuthServiceProvider.php 中。其他 Policies 需要手动创建和导入。有关 Policies 的更多信息,请参阅 Laravel 的文档。
默认情况下,允许管理员访问任何内容的标准指令也已添加到 AuthServiceProvider.php。
// ... class AuthServiceProvider extends ServiceProvider { // ... public function boot() { $this->registerPolicies(); Gate::before(function ($user) { if ($user->role == User::ROLE_ADMIN) { return true; } }); // ... } }
Policies 的使用示例
@can('create', \App\User::class) <a href="{{ route('users.create') }}" class="btn btn-primary"><i class="fa fa-plus"></i> Novo Usuário</a> @endcan @foreach($users as $u) @can('edit', $u) <a href="{{ route('users.edit', ['user' => $u]) }}" class="btn btn-default btn-sm"><i class="fa fa-pencil-alt"></i> Editar</a> @endcan @endforeach
用户
该库生成了一个简单的用户 CRUD。其视图可以在 resources/views/users 中查看或修改,相应的控制器在 app/Http/Controllers/UsersController.php 中。
用户列表使用了 jQuery 插件 DataTables。
该区域还提供了锁定/解锁用户的功能。
默认情况下,您无法在此列表中锁定或删除自己的用户。此行为可以在同一 view 中更改。
个人资料
该库有一个个人资料页面,您可以在此更改密码或上传头像。如果未上传图片,则将使用您的名字和姓氏的首字母组成的 placeholder。此行为可以在 app/User.php 模型中的 Accessor getAvatarAttribute() 内更改。
路由
安装会在 routes/web.php 文件的末尾添加以下命令
\AgenciaMaior\LaravelBoilerplate\LaravelBoilerplateServiceProvider::routes();
它包含以下路由
Route::group(['prefix' => '/users'], function () { Route::post('/first-user', 'UsersController@storeFirstUser')->name('users.first-user'); Route::get('/profile', 'UsersController@profile')->name('users.profile'); Route::post('/profile', 'UsersController@updateProfile')->name('users.save-profile'); Route::post('/check-email', 'UsersController@checkEmail')->name('users.check-email'); Route::post('/check-profile-email', 'UsersController@checkProfileEmail')->name('users.check-profile-email'); Route::post('/check-profile-password', 'UsersController@checkProfilePassword')->name('users.check-profile-password'); Route::get('/block/{user}', 'UsersController@block')->name('users.block'); Route::get('/unblock/{user}', 'UsersController@unblock')->name('users.unblock'); }); Route::resource('/users', 'UsersController');
上述任何路由都可以覆盖,前提是它们必须定义在上述命令之前。
UI
马赛克
马赛克使用了 jQuery 库 MaskPlugin 和 MaskMoney。
要使用这些马赛克,请将相应的类添加到字段中
- .cpf-mask - CPF (000.000.000-00)
- .cnpj-mask - CNPJ (00.000.000/0000-00)
- .cpf-cnpj-mask - 同一字段中的 CPF 或 CNPJ,随着输入而变化
- .tel-ddd-mask - 带有 DDD 的电话号码,接受带有或没有 9 的号码 ((00) 00000000 或 (00) 900000000)
- .cep-mask - CEP (00000-000)
- .time-mask - 时间,格式 hours:minutes (00:00)
- .date-mask - 日期,格式 day/month/year (99/99/9999)
- .money-mask - 货币 (R$ 999.999,99)
- .number-mask - 带小数的数字 (999.999,99)
- .percent-mask - 百分比 (999,99%)
您可以在此链接中查看马赛克的示例使用。
您可以在 resources/js/boilerplate.js 中更改马赛克的配置。
日期选择器
将 .datepicker 类添加到字段以使用库的日期选择器 jQueryUI。
注意: 类 .date-mask 可以与日期选择器一起使用。
您可以在此链接中查看日期选择器的示例使用。
您可以在 resources/js/boilerplate.js 中更改日期选择器的配置。
Select2
将 .select-2 类添加到类型为 Select 的字段以使用 Select2。
您可以在此链接中查看Select的示例用法。
Select2的配置可以在resources/js/boilerplate.js中进行修改。
编辑器
将类.editor添加到文本区域字段中,以使用Summernote。
您可以在此链接中查看Select的示例用法。
编辑器的配置可以在resources/js/boilerplate.js中进行修改。
验证
本节描述了用于在jQuery Validation库中使用的自定义验证。
所有验证都可以在resources/js/boilerplate.js中进行修改。
dateBR
验证一个字段是否为格式为dd/mm/aaaa的有效日期。
示例
{{ Form::bsText('data', 'Data', ['class' => 'datepicker date-mask']) }}
$('#id-do-formulario').validate({ rules: { data: { required: true, dateBR: true, }, } });
该验证器的示例用法可以在此链接中查看。
period
验证一个日期字段相对于另一个日期字段的有效时间段。
示例
<div class="row"> <div class="col-md-6"> {{ Form::bsText('data_inicio', 'Data Início', ['class' => 'datepicker date-mask']) }} </div> <div class="col-md-6"> {{ Form::bsText('data_fim', 'Data Fim', ['class' => 'datepicker date-mask']) }} </div> </div>
$('#id-do-formulario').validate({ rules: { data_inicio: { required: true, dateBR: true, }, data_fim: { required: true, dateBR: true, period: ['data_inicio'], }, } });
该验证器的示例用法可以在此链接中查看。
filesize
验证文件字段的大小,指定兆字节。
示例
{{ Form::bsFile('arquivo', 'Arquivo <small>máx 2MB</small>') }}
$('#id-do-formulario').validate({ rules: { arquivo: { required: true, extension: ['jpg', 'jpeg', 'png'], filesize: 2, }, } });
cpf
验证带有.cpf-mask格式的字段是否为有效的CPF,使用11位模验证。
示例
{{ Form::bsText('cpf', 'CPF', ['class' => 'cpf-mask']) }}
$('#id-do-formulario').validate({ rules: { cpf: { required: true, cpf: true, }, } });
cnpj
验证带有.cnpj-mask格式的字段是否为有效的CNPJ,使用11位模验证。
示例
{{ Form::bsText('cnpj', 'CNPJ', ['class' => 'cnpj-mask']) }}
$('#id-do-formulario').validate({ rules: { cnpj: { required: true, cnpj: true, }, } });
cpfCnpj
验证带有.cpf-cnpj-mask格式的字段是否为有效的CPF/CNPJ,使用11位模验证。
示例
{{ Form::bsText('cpf_cnpj', 'CPF/CNPJ', ['class' => 'cpf-cnpj-mask']) }}
$('#id-do-formulario').validate({ rules: { cpf_cnpj: { required: true, cpfCnpj: true, }, } });
这些验证器的示例用法可以在此链接中查看。
editorRequired
检查带有.editor格式的字段是否为空或非空。
示例
{{ Form::bsTextarea('editor', 'Editor', ['class' => 'editor']) }}
$('#id-do-formulario').validate({ ignore: [], // Essa diretiva é obrigatória para esse validator funcionar rules: { editor: 'editorRequired', } });
该验证器的示例用法可以在此链接中查看。
可确认的
将类.confirmable添加到任何按钮或链接中,以添加确认窗口。该功能在删除按钮中经常使用。
表单提交时的动画
默认情况下,当提交表单时,提交按钮将被禁用,其中的文本将被旋转器替换。这阻止了用户多次单击提交按钮。
要禁用此行为,请将类.without-spinner添加到页面上的<form>
标签。
解析器
在文件app/Http/Controller/Controller.php中,安装会复制两个函数来转换日期和货币类型的值。
控制器中使用的示例
$date = '03/05/2019'; $newDate = $this->parseDate($date); // 2019-05-03 $price = 'R$ 300,00'; $newPrice = $this->parseCurrency($price); // 300
巴西州
在文件app/Http/Controller/Controller.php中,安装会复制包含所有巴西州及其相应缩写的数组。
const ESTADOS_BRASILEIROS = [ 'AC' => 'Acre', 'AL' => 'Alagoas', 'AP' => 'Amapá', 'AM' => 'Amazonas', 'BA' => 'Bahia', 'CE' => 'Ceará', 'DF' => 'Distrito Federal', 'ES' => 'Espírito Santo', 'GO' => 'Goiás', 'MA' => 'Maranhão', 'MT' => 'Mato Grosso', 'MS' => 'Mato Grosso do Sul', 'MG' => 'Minas Gerais', 'PA' => 'Pará', 'PB' => 'Paraíba', 'PR' => 'Paraná', 'PE' => 'Pernambuco', 'PI' => 'Piauí', 'RJ' => 'Rio de Janeiro', 'RN' => 'Rio Grande do Norte', 'RS' => 'Rio Grande do Sul', 'RO' => 'Rondônia', 'RR' => 'Roraima', 'SC' => 'Santa Catarina', 'SP' => 'São Paulo', 'SE' => 'Sergipe', 'TO' => 'Tocantins' ];
在Select中使用示例
{{ Form::bsSelect('estados', 'Estados', \App\Http\Controller::ESTADOS_BRASILEIROS) }}