agenciamaior/laravel_boilerplate

此包的最新版本(v0.0.10)没有可用的许可信息。

Laravel项目启动模板

v0.0.10 2019-04-25 00:06 UTC

This package is auto-updated.

Last update: 2024-09-25 12:34:10 UTC


README

基于 AdminLTE 3 的一个用于生成标准管理面板模板的库。它自带一些预定义功能,例如:用户控制、带掩码的字段等。

目录

  1. 依赖
  2. 安装
  3. 可用资源
    1. 表单
    2. 登录
    3. 用户配置文件
    4. 模板
    5. ACLs
    6. 用户
    7. 路由
    8. UI
      1. 掩码
      2. 日期选择器
      3. Select2
      4. 编辑器
    9. 验证
    10. 可确认的
    11. 表单提交动画
    12. 解析器
    13. 巴西各州
  4. 使用的库

依赖

安装

$ 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 库 MaskPluginMaskMoney

要使用这些马赛克,请将相应的类添加到字段中

  • .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) }}

使用的库