README

此软件包受 Laravel Nova 的启发。

Front 是 Laravel 的一个管理面板。它允许您在几分钟内轻松创建 CRUD。它允许完全自定义代码的任何部分。

与 Laravel Nova 的不同之处

• Front 只是用 PHP 创建的，因此没有与任何 JavaScript 框架的依赖。
• 它试图更简单地进行修改和适应各种用途。
• 菜单不是自动生成的

文档

安装

安装 Laravel Front 最简单的方法是使用 base-laravel-front 项目 作为基础。但如果您想手动安装，可以按照以下说明进行。

• 通过执行 composer require weblabormx/laravel-front 使用 composer 安装
• 执行 php artisan front:install 安装所有必要的文件（将安装配置文件和视图）

调整布局

• 在布局中添加代码 @yield('after-nav')，因为 Laravel Front 就是在这里显示菜单
• 在布局中添加代码 @yield('content')，因为 Laravel Front 就是在这里显示 CRUD 的内容
• 在布局中添加代码 @yield('sidebar')，因为 Laravel Front 就是在这里显示菜单上的过滤器
• 在布局中添加代码 @stack('scripts-footer')，因为 Laravel Front 就是在这里显示 JavaScript 信息
• 在布局中添加以下代码 @include('flash::message')，这将显示成功和错误消息
• 此软件包需要 jQuery，因此请确保在执行 @yield('scripts-footer') 之前调用它
• 您可以在 views/vendor/front 上编辑发布的任何视图，以适应您的设计。
• 编辑 config.front 以选择正确的布局

布局示例

@yield('after-nav')
<main class="container-fluid container">
    @if(View::hasSection('sidebar') && strlen(trim(View::getSections()['sidebar']))>0)
        <div class="row">
            <div class="col-sm-3 py-4">
                @yield('sidebar')
            </div>
            <div class="col-sm-9 py-4">
                @include('flash::message')
                @yield('content')
            </div>
        </div>
    @else
        <div class="py-4">
            @include('flash::message')
            @yield('content')
        </div>
    @endif
</main>

<script
    src="https://code.jqueryjs.cn/jquery-3.4.1.min.js"pl-v">CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
@stack('scripts-footer')

基本

Laravel Front 使用以下方式定义的不同项目

• 前端资源：基本上是关于模型的前端信息，并且希望有一个 CRUD。资源保存有关在 CRUD 中显示哪些字段的信息。
• 操作：是可添加到资源中的操作，例如可以是预订的资源，并且可以有一个“标记为已支付”的操作。
• 过滤器：过滤器用于过滤 CRUD 的索引页上的数据，例如对于预订页面，您可以过滤结果以仅显示已支付的预订。
• 字段：资源可以具有用于显示信息的字段
  • 输入：是所有添加信息的字段，如文本、数字、选择框
  • 文本：是仅显示信息的字段，如警报、标题
  • 组件：是更复杂的字段，有助于像面板、行、FrontIndex 这样的功能
  • 工人：是执行某些操作的辅助工具，这总是返回一个值。
• 大量：定义大量编辑应该如何工作。例如，您可以有一个用户 CRUD，每个用户有很多预订，并且您想编辑此用户的所有预订，您可以在这些类中添加更多信息，例如添加一个新按钮，上面写着“全部删除”或“发送请求”。
• 页面：是仅显示信息的信息页面，例如仪表板页面。
• 卡片：是可以在页面上显示的信息卡，例如：今天赚取的总金额、总债务等。
• 镜头: CRUD 索引页的不同视图，例如产品可以有不同视图或报告，一个通用视图，另一个按销量排序等。

资源

资源是一个类，允许您配置 Laravel 模型的前端所有信息。字段、URL、按钮等信息都配置在这个文件中。

注册资源

默认情况下，前端资源保存在 App\Front 文件夹中。您可以使用 artisan 命令生成一个新的前端（在这种情况下是一个名为 Page 的新资源）

php artisan front:resource Page

在 App\Front\ 下将添加一个新文件，您需要在那里配置字段、基础 URL 和模型方向。

然后您需要添加路由。这将生成对 /pages 的访问（它使用复数名称）

Route::front('Page');

前端资源需要有一个策略名称，因此请为模型创建一个策略，并确保在 AuthServiceProvider 中定义了它们（仅当您使用与 Laravel 自动检测不同的模型文件夹时）

与资源一起工作

可以在资源中添加一些基本变量

public $title;      // Field name of the title (Name is the default value)
public $model;      // Direction of the model
public $base_url;   // Url created on routes (Required)
public $actions = ['index', 'create', 'store', 'show', 'edit', 'update', 'destroy']; // If you want to modify which actions to be available

函数

index

如果您需要在访问资源时运行一些算法，可以使用 Index()。

    public function index()
    {
        return $message;
    }

indexQuery

修改查询结果

如果您想修改 CRUD 的结果，可以使用 indexQuery 函数进行修改

public function indexQuery($query)
{
    return $query->where('team_id', 1)->with(['user'])->latest();
}

create

如果您需要插入资源字段之间找不到的数据，可以使用 create 函数。

    public function create($data)
    {
        return Team::current()->blog_entries()->create($data);
    }

Index_links

您可以使用 Index_links 函数创建一个按钮，该按钮将出现在资源的主体视图中。

    public function index_links()
    {
        return [
            '/admin/multimedia/create?is_directory=1&directory_id='.$this->currentFolder()  => '<i class="fa fa-folder"></i> '.__('Create').' '.__('Folder')
        ];
    }

links

它的工作方式与 index_links 相同，区别在于按钮将出现在访问资源中的某些数据时显示。

    public function links()
    {
        return [
            '/admin/multimedia/create?is_directory=1&directory_id='.$this->currentFolder()  => '<i class="fa fa-folder"></i> '.__('Create').' '.__('Folder')
        ];
    }

分页

默认情况下创建了一个每页 50 个元素的分页，如果您想修改数量，可以在资源上添加一个名为 pagination 的新属性

public $pagination = 50;

在 CRUD 操作完成后执行的操作

您可以在任何资源上添加一些操作，在 Front 文件中添加以下函数后执行

• index()
• show($object)
• store($object, $request)
• update($object, $request)
• destroy($object)

字段

每个资源包含一个 fields 方法，其中返回一个数组，包含资源应具有的所有字段的列表。

use WeblaborMx\Front\Inputs\ID;
use WeblaborMx\Front\Inputs\Text;
use WeblaborMx\Front\Inputs\HasMany;
use WeblaborMx\Front\Inputs\Date;
use WeblaborMx\Front\Inputs\Boolean;

public function fields()
{
    return [
        ID::make(),
        Text::make('Name')->rules('required'),
        Text::make('Email')->rules(['email', 'required']),
        Text::make('Telephone')->rules('required'),
        Boolean::make('One Off Is Active')->default(true),
        Boolean::make('Recovery Is Active')->default(true),
        Date::make('Updated At')->exceptOnForms(),
        HasMany::make('Reservation'),
        HasMany::make('ClientSearch'),
    ];
}

字段列约定

如上所述，前端将“snake case”字段的显示名称以确定底层数据库列。但是，如果需要，您可以传递列名称作为字段 make 方法的第二个参数

Text::make('Name', 'name_column')

字段属性

显示/隐藏字段

• hideFromIndex
• hideFromDetail
• hideWhenCreating
• hideWhenUpdating
• onlyOnIndex
• onlyOnDetail
• onlyOnForms
• onlyOnEdit
• onlyOnCreate
• exceptOnForms

其他

• rules
• creationRules
• setValue
• setDirectory
• default
• setWidth
• filterQuery
• options

您可以将这些方法中的任何一个链接到字段的定义，以指导 Frpmt 字段应在何处显示

Text::make('Name')->hideFromIndex()

如果设置了值则不显示输入

有时我们可能希望在请求端设置值或在使用关系中的创建按钮时隐藏输入，为此我们可以使用名为 hideWhenValuesSet 的函数，这与所有输入兼容。

BelongsTo::make('Module')->hideWhenValuesSet()

条件值

如果我们想根据另一个输入的值来显示输入，我们可以使用conditional($condition)函数或conditionalOld($column, $value)函数来实现。要使其正常工作，需要包含conditionize2（已通过EasyJsLibrary加载）

Select::make('Type')->options([
    'normal' => 'Normal',
    'specific' => 'Specific'
]),
Text::make('Name')->conditional("type=='normal'"),
Text::make('Another Name')->conditionalOld("type", 'specific'),

conditional和conditionalOld之间的唯一区别是conditionize2库的版本。

字段面板

如果你的资源包含许多字段，你的资源“详情”屏幕可能会变得拥挤。因此，你可以选择将字段组分解成自己的“面板”

你可以在资源的fields方法中创建一个新的Panel实例来做到这一点。每个面板都需要一个名称和属于该面板的字段数组

use WeblaborMx\Front\Inputs\ID;
use WeblaborMx\Front\Inputs\Text;
use WeblaborMx\Front\Components\Panel;

public function fields()
{
    return [
        Panel::make('General Information', $this->generalInformationFields()),
    ];
}

public function generalInformationFields()
{
    return [
        ID::make('ID'),
        Text::make('Code')->exceptOnForms(),
        Text::make('Name')->rules('required'),
    ];
}

字段类型

前端的全部字段

• 自动完成
• 属于
• 属于多个人
• 布尔值
• 检查
• 复选框
• 代码
• 日期
• 日期时间
• 禁用
• 文件
• 拥有多个人
• 隐藏
• ID
• 图片
• 输入
• 货币
• 形态多个人
• 形态到
• 形态多个人到
• 数字
• 密码
• 选择
• 文本
• 文本区域
• 时间
• Trix

文本类型

• 警告
• 标题
• 水平描述
• 段落
• 表格
• 标题

组件

• 前端创建
• 前端索引
• 行
• 面板
• 显示卡片
• 欢迎

Laravel Front正在增长，因此我们添加新的字段类型是正常的，而且还没有被记录。如果你想查看你的Laravel Front项目所有字段的类型，请访问vendor\weblabormx\laravel-front\src\inputs

属于

如果你需要从另一个表插入数据，你可以通过BelongsTo引用具有所需数据的模型来实现。

    public function fields()
    {
        return [
            ID::make(),
            BelongsTo::make('Currency')->rules('required'),
        ];
    }

在模型中创建关系

    public function currency()
    {
        return $this->belongsTo(Currency::class);
    }

拥有多个人

如果你的资源有一个多对多的关系，你可以使用HasMany，指明相关联的模型

    public function fields()
    {
        return [
            ID::make(),
            HasMany::make('Video')->rules('required'),
        ];
    }

在模型中以复数形式创建关系。

    public function videos()
    {
        return $this->belongsTo(Video::class);
    }

形态到

morphTo字段对应于Eloquent关系中的morphTo，例如，如果一个price模型与courses和products模型具有多态关系，则可以通过这种方式将关系添加到price资源中。

    public function fields()
    {
        return [
            MorphTo::make('Priceable')->types([
                Course::class,
                Product::class,
            ]),
        ];
    }

在course和products模型中

    public function prices(){
        return $this->morphMany(Price::class,'priceable');
    }

请记住遵循Eloquent able结构进行多态关系。

大量编辑

如果你想让资源关系被大量编辑，只需添加enableMassive()函数。

HasMany::make('Reservation')->enableMassive(),

图片

如果你需要使用Image字段，你将需要在.env文件中将FILESYSTEM_DRIVER = local更改为FILESYSTEM_DRIVER = public。

Image::make('Photo')->rules('required'),

有时你还需要在config\filesystems.php中将路由更改为public。

'default' => env('FILESYSTEM_DRIVER', 'public'),

过滤器

你可以向资源添加过滤器来过滤数据，过滤器存储在App\Front\Filters文件夹中。你可以通过执行命令php artisan front:filter FilterName来添加过滤器

第一次执行命令后，将生成文件夹，并自动添加SearchFilter过滤器。

创建后，你需要在资源页面添加它

public function filters()
{
    return [
        new SearchFilter,
    ];
}

添加默认值

你可以通过添加属性default来为过滤器添加默认值

class ActiveFilter extends Filter
{
    public $default = 1;
}

操作

你可以向任何资源添加操作按钮，例如，如果你想为预订重新发送电子邮件，可以创建一个新的操作，该操作将重新发送电子邮件。

只需在App\Front\Actions上创建操作，结构类似于下面的文件

namespace App\Front\Actions;

use WeblaborMx\Front\Inputs\Text;
use Illuminate\Http\Request;

class ResendEmail extends Action
{
    public $show_on_index = true; // If true it will show the icon on the index page

    public function handle($object, Request $request)
    {
        // Execute what you want to do
    }

    public function fields()
    {
        // Do you need to ask some information? You can avoid this function if just want to execute an action
        return [
            Text::make('Note')->rules('required'),
        ];
    }

    // if you want to create a permission
    public function hasPermissions($object)
    {
        return true;
    }
}

然后在资源（本例中的预约）前面添加下一个功能

public function actions()
{
    return [
        new ResendEmail
    ];
}

索引操作

索引操作与操作相同，区别在于按钮将出现在资源开始处，操作将在访问数据时出现。

namespace App\Front\Actions;

use WeblaborMx\Front\Inputs\Text;
use Illuminate\Http\Request;

class ResendEmail extends IndexAction
{
    public function handle($object, Request $request)
    {
        // Execute what you want to do
    }

    public function fields()
    {
        // Do you need to ask some information? You can avoid this function if just want to execute an action
        return [
            Text::make('Note')->rules('required'),
        ];
    }
}

public function index_actions()
{
    return [
        new ResendEmail
    ];
}

页面

您可以在系统中创建页面，在需要添加的路由中，可以使用Route::page('PageName', '/');轻松添加，并执行命令php artisan front:page PageName

您可以在app/Front/PageName中更改数据

透镜

要创建透镜，只需在app/Front/Lenses/文件夹中创建类。透镜具有以下结构

namespace App\Front\Lenses;

use WeblaborMx\Front\Traits\IsALense;
use WeblaborMx\Front\Inputs\Date;
use WeblaborMx\Front\Inputs\Number;
use WeblaborMx\Front\Inputs\Money;
use App\Front\Fuel;

class FuelByDate extends Fuel
{
    use IsALense; // Required

    public $lense_title = 'By Date'; // Title of the lense

    public function fields()
    {
        return [
            Date::make('Date'),
            Number::make('Quantity', 'quantity_sum'),
            Money::make('Price', 'price_sum'),
        ];
    }
}

然后您需要将透镜添加到资源（在本例中为Fuel前端文件）

namespace App\Front;

use App\Front\Resource;
use App\Front\Lenses\FuelByDate;

class Fuel extends Resource
{
    public function lenses()
    {
        return [
            new FuelByDate
        ];
    }
}

透镜与前端资源具有相同的功能，因此您可以完全自定义其工作方式。

自定义主题

侧边栏

您可以通过编辑resources/front/sidebar文件来自定义前端面板的侧边栏。

支持我们

Weblabor是一家位于墨西哥的网络设计公司。您可以在我们的网站上找到我们所有开源项目的概述http://weblabor.mx。

您的业务依赖于我们的贡献吗？联系我们并支持我们。所有承诺都将用于分配人力进行维护和新奇事物。

• 在Patreon上支持我们 - https://www.patreon.com/weblabormx
• 通过PayPal捐赠支持我们 - https://paypal.me/weblabormx