认识 Laravel Orchid

AlexandrChernyaev 的个人博客 / 1208 / 2 / 创建于 5年前

对于我们心爱的框架，有十几个不同的管理员甚至更多的生成器，选择可能看起来很混乱，有些人只写自己的解决方案。我没有与大家合作，我不能说有些更好/更差，但我可以告诉你关于ORCHID以及如何在10分钟内使用它。

始终从数据开始。

我希望你已经安装了框架和一个平台，创建了一个数据库，甚至推出了一个Web服务器。
显而易见的延续将是为您的数据库编写模型和迁移。

创建一个新模型“Projects”：

php artisan make:model Project -m

使用-m标志，将创建我们的迁移文件。

为其添加名称（唯一标识符，创建/更新时间应该是默认值）

namespace App;

use Illuminate\Database\Eloquent\Model;

class Project extends Model
{
    /**
     * @var array
     */
    protected $fillable = [
        'name'
    ];
}

不要忘记更改迁移文件：

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProjectsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('projects', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('projects');
    }
}

太棒了，它仍然只是使用以下命令将我们的更改应用于数据库：

php artisan migrate

添加一个屏幕

在当前阶段，我们只需要添加简单的操作，例如创建和显示“项目”的表格。大多数解决方案建议创建一个单独的类，其中将描述整个CRUD，但ORCHID提供了另一种机制 - 屏幕，开发人员描述应在浏览器页面上显示的内容。

创建自己的屏幕以显示列表，为此我们执行命令：

php artisan orchid:screen ProjectListScreen

将在 app/Orchid/Screens 目录中创建一个新类 ProjectListScreen，让我们分析它：

namespace App\Orchid\Screens;

use Orchid\Screen\Screen;

class ProjectListScreen extends Screen
{
    / **
      *名称和描述属性负责
      *将显示的名称
      *在用户屏幕和标题上。
      * /
    public $name = 'ProjectListScreen';

    public $description = 'ProjectListScreen';

    /**
     *定义所有屏幕输入数据的方法
      *应该调用数据库请求，
      * api或任何其他（不一定明确），
      *其结果应为数组，
      *他的钥匙将被使用的上诉。
     */
    public function query(): array
    {
        return [];
    }

    /**
     *标识控制按钮和事件。
     *必须通过按压发生
     */
    public function commandBar(): array
    {
        return [];
    }

    /**
     *映射集
      *行，表，图，
      *模态窗口及其组合
     */
    public function layout(): array
    {
        return [];
    }
}

屏幕与控制器的主要区别在于预先定义的结构 只有一页 定义数据和事件。

与控制器一样，屏幕需要在路径文件中注册，我们在管理面板的文件中定义它 routes/platform.php:


use App\Orchid\Screens\ProjectListScreen;

$this->screen('projects', ProjectListScreen::class)->name('platform.projects');

这将确定url地址 / dashboard / projects 将由 ProjectListScreen 类处理并具有系统名称 platform.projects

我们来看看浏览器中的结果：

我们只看到了类的指定属性，我们添加了创建“Projects”的能力，为此我们定义了输入字段和save方法，主要的可视组件以 Layouts 类的形式描述，这些类可以是表，行，度量等。

以字符串的形式添加带有显示的变体，该字符串将包含一个简单的输入字段：

namespace App\Orchid\Screens;

use Orchid\Screen\Fields\InputField;
use Orchid\Screen\Layouts;
use Orchid\Screen\Screen;

class ProjectListScreen extends Screen
{

    public $name = 'ProjectListScreen';
    public $description = 'ProjectListScreen';

    public function query(): array
    {
        return [];
    }

    public function commandBar(): array
    {
        return [];
    }

    public function layout(): array
    {
        return [
            Layouts::rows([
                InputField::make('project.name')
                    ->type('text')
                    ->title('Name Project')
            ]),
        ];
    }
}

刷新页面并确保该字段确实显示在屏幕上。

虽然显示了该字段，但如果没有额外的处理它仍然没有任何意义，所以让我们这样做吧！为此，请在命令行中添加一个按钮并定义其事件：

namespace App\Orchid\Screens;

use App\Project;
use Illuminate\Http\Request;
use Orchid\Screen\Fields\InputField;
use Orchid\Screen\Layouts;
use Orchid\Screen\Link;
use Orchid\Screen\Screen;
use Orchid\Support\Facades\Alert;

class ProjectListScreen extends Screen
{

    public $name = 'ProjectListScreen';
    public $description = 'ProjectListScreen';

    public function query(): array
    {
        return [];
    }

    public function commandBar(): array
    {
        return [
            Link::name('Добавить проект')
                ->method('createProject'),
        ];
    }

    public function layout(): array
    {
        return [
            Layouts::rows([
                InputField::make('project.name')
                    ->type('text')
                    ->title('Name project')
            ]),
        ];
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function createProject(Request $request)
    {
        Project::create($request->get('project'));

        Alert::success('Project has created');

        return back();
    }
}

屏幕上将显示一个新的“添加项目”按钮。当您单击它时，将执行该方法。 createProject.

太棒了，但这对于成熟的工作来说显然还不够，因为我们还不能看到已经创建的项目，将它们的列表添加到屏幕上，为此我们将使用以下命令创建一个新的Layout表类型：

php artisan orchid:table ProjectListTable

将在 app/Orchid/Layouts 目录中创建 ProjectListTable 类，其中包含以下内容：

namespace App\Orchid\Layouts;

use Orchid\Screen\Layouts\Table;

class ProjectListTable extends Table
{

    /**
     * 数据源
     *
     * @var string
     */
    public $data = '';

    /**
     * 要显示为列的字段
     *
     * @return array
     */
    public function fields(): array
    {
        return [];
    }
}

我们需要在屏幕中定义它并将数据传递给它，以便充分利用这些机会，回到Project模型并使用MultiLanguageTrait特性添加它：

namespace App;

use Illuminate\Database\Eloquent\Model;
use Orchid\Platform\Traits\MultiLanguageTrait;

class Project extends Model
{
    use MultiLanguageTrait;
    /**
     * @var array
     */
    protected $fillable = [
        'name'
    ];
}

之后，让我们返回到屏幕并定义数据：

namespace App\Orchid\Screens;

use App\Orchid\Layouts\ProjectListTable;
use App\Project;
use Illuminate\Http\Request;
use Orchid\Screen\Fields\InputField;
use Orchid\Screen\Layouts;
use Orchid\Screen\Link;
use Orchid\Screen\Screen;
use Orchid\Support\Facades\Alert;

class ProjectListScreen extends Screen
{

    public $name = 'ProjectListScreen';
    public $description = 'ProjectListScreen';

    public function query(): array
    {
        $projects = Project::paginate();

        return [
            'projects' => $projects
        ];
    }

    public function commandBar(): array
    {
        return [
            Link::name('Create Project')
                ->method('createProject'),
        ];
    }

    public function layout(): array
    {
        return [
            Layouts::rows([
                InputField::make('project.name')
                    ->required()
                    ->type('text')
                    ->title('Name project')
            ]),

            ProjectListTable::class,
        ];
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function createProject(Request $request)
    {
        Project::create($request->get('project'));

        Alert::success('Project has created');

        return back();
    }
}

在query方法中，我定义了keyproject，其中包含将在所有模板中可用并自动插入到字段/列等中的项目列表。

它仍然只是确定我们表中的key和列：

namespace App\Orchid\Layouts;

use Orchid\Screen\Layouts\Table;
use Orchid\Screen\TD;

class ProjectListTable extends Table
{

    /**
     * @var string
     */
    public $data = 'projects';

    /**
     * @return array
     */
    public function fields(): array
    {
        return [
            TD::set('name','Name project'),
            TD::set('created_at','Created'),
            TD::set('updated_at','Updated')
        ];
    }
}

刷新页面并查看结果。

表旁边的孤独字段看起来不是最好的，我们在模态窗口中删除它，为此我们包装输入字段并更改按钮，如下所示：

namespace App\Orchid\Screens;

use App\Orchid\Layouts\ProjectListTable;
use App\Project;
use Illuminate\Http\Request;
use Orchid\Screen\Fields\InputField;
use Orchid\Screen\Layouts;
use Orchid\Screen\Link;
use Orchid\Screen\Screen;
use Orchid\Support\Facades\Alert;

class ProjectListScreen extends Screen
{

    public $name = 'ProjectListScreen';
    public $description = 'ProjectListScreen';

    public function query(): array
    {
        $projects = Project::paginate();

        return [
            'projects' => $projects
        ];
    }

    public function commandBar(): array
    {
        return [
            Link::name('Create project')
                ->title('Create project')
                ->modal('createProjectModal')
                ->method('createProject'),
        ];
    }

    public function layout(): array
    {
        return [

            Layouts::modals([

                'createProjectModal' => Layouts::rows([
                    InputField::make('project.name')
                        ->required()
                        ->type('text')
                        ->title('Name project')
                ]),

            ]),

            ProjectListTable::class,
        ];
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function createProject(Request $request)
    {
        Project::create($request->get('project'));

        Alert::success(''Project has created');

        return back();
    }
}

在这个，我们的屏幕几乎准备好了，它仍然需要把它带到菜单和面包屑

要指定面包屑，请编辑routes / breadcrumbs.php文件，在最后添加：

// Platform -> Projects
Breadcrumbs::for('platform.projects', function ($trail) {
    $trail->parent('platform.index');
    $trail->push('Project');
});

要在菜单中指定，您需要在课程中添加作曲家。 /app/Orchid/Composers/MainMenuComposer.php

namespace App\Orchid\Composers;

use Orchid\Platform\ItemMenu;
use Orchid\Platform\Dashboard;

class MainMenuComposer
{
    /**
     * @var Dashboard
     */
    private $dashboard;

    /**
     * MenuComposer constructor.
     *
     * @param Dashboard $dashboard
     */
    public function __construct(Dashboard $dashboard)
    {
        $this->dashboard = $dashboard;
    }

    /**
     * Registering the main menu items.
     */
    public function compose()
    {
        // Main
        $this->dashboard->menu
            ->add('Main',
                ItemMenu::setLabel('Projects')
                    ->setIcon('icon-folder')
                    ->setRoute(route('platform.projects'))
                    ->setGroupName('Manager')
            );
    }
}

刷新页面并查看结果。