agenciamaior / 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 字段(整型)中。
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。在此文件开头,生成了两个变量以识别当前控制器和当前操作,因此可以在页面打开相应菜单项时激活菜单。
新菜单项的示例
@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 中查看。
ACL
安装会自动在 app/Policies/UserPolicy.php 中为 Model 用户创建一个 Policy,并且已经自动导入到 app/Providers/AuthServiceProvider.php 文件中。其他策略需要手动创建和导入。有关策略的更多信息,请参阅 Laravel 文档。
允许管理员访问任何内容的默认指令也已添加到 AuthServiceProvider.php。
// ... class AuthServiceProvider extends ServiceProvider { // ... public function boot() { $this->registerPolicies(); Gate::before(function ($user) { if ($user->role == User::ROLE_ADMIN) { return true; } }); // ... } }
策略使用示例
@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 - 小时,格式 小时:分钟 (00:00)
- .date-mask - 日期,格式 日/月/年 (99/99/9999)
- .money-mask - 货币 (R$ 999.999,99)
- .number-mask - 带小数的数字 (999.999,99)
- .percent-mask - 百分比 (999,99%)
您可以在该 链接 中查看马赛克使用示例。
可以在 resources/js/boilerplate.js 中更改马赛克的配置。
日期选择器
将 .datepicker 类添加到字段以使用 jQuery 库 jQueryUI 的日期选择器。
注意: 类 .date-mask 可以与日期选择器一起使用。
您可以在该 链接 中查看日期选择器使用示例。
可以在 resources/js/boilerplate.js 中更改日期选择器的配置。
Select2
将 .select-2 类添加到 Select 类型的字段以使用 Select2。
您可以在该 链接 中查看 Select2 使用示例。
可以在 resources/js/boilerplate.js 中更改 Select2 的配置。
编辑器
将 .editor 类添加到 TextArea 类型的字段以使用 Summernote。
您可以在该 链接 中查看 Select2 使用示例。
可以在 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中,安装将复制两个函数来转换日期和货币类型的值。
在Controller中使用的示例
$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) }}