kdymsolucoes/laravel_boilerplate

该包的最新版本(v0.0.10)没有提供许可证信息。

基于 Laravel 的项目模板

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

This package is auto-updated.

Last update: 2024-09-29 04:49:05 UTC


README

这是一个基于 AdminLTE 3 的管理面板模板生成库。它包含一些预定义功能,例如用户控制、带有掩码的输入字段等。

目录

  1. 依赖
  2. 安装
  3. 可用资源
    1. 表单
    2. 登录
    3. 用户配置文件
    4. 模板
    5. 访问控制列表
    6. 用户
    7. 路由
    8. 用户界面
      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字段(类型为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.phpModel 用户创建一个 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 库 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 - 时间,格式 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) }}

使用的库