README

Laravel 应用程序的网页设置向导。

此包基于 smajti1/laravel-wizard 修改。

版本兼容性

安装

通过 composer 安装包

composer require ycs77/laravel-wizard

发布配置

php artisan vendor:publish --tag=wizard-config

使用

1. 生成控制器和向导步骤

现在您可以快速生成向导控制器和向导步骤

php artisan make:wizard User NameStep,EmailStep

此命令生成 UserWizardController、NameStep 和 EmailStep 类，并将向导路由追加到 routes/web.php。

routes/web.php

use App\Http\Controllers\UserWizardController;
use Illuminate\Support\Facades\Route;
use Ycs77\LaravelWizard\Facades\Wizard;

...

Wizard::routes('/wizard/user', UserWizardController::class, 'wizard.user');

如果您不能使用自动追加路由，可以将 config/wizard.php 属性 append_route 设置为 false。

2. 设置步骤

这是生成的 NameStep 类，您可以通过 model 方法设置模型，通过 rules 方法设置表单验证，并通过 saveData 方法将 $data 保存到您的数据库中，例如

app/Steps/User/NameStep.php

<?php

namespace App\Steps\User;

use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Arr;
use Ycs77\LaravelWizard\Step;

class NameStep extends Step
{
    /**
     * The step slug.
     *
     * @var string
     */
    protected $slug = 'name';

    /**
     * The step show label text.
     *
     * @var string
     */
    protected $label = 'Name';

    /**
     * Set the step model instance or the relationships instance.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Database\Eloquent\Model|\Illuminate\Database\Eloquent\Relations\Relation|null
     */
    public function model(Request $request)
    {
        return User::find(1);
    }

    /**
     * Save this step form data.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  array|null  $data
     * @param  \Illuminate\Database\Eloquent\Model|\Illuminate\Database\Eloquent\Relations\Relation|null  $model
     * @return void
     */
    public function saveData(Request $request, $data = null, $model = null)
    {
        $data = Arr::only($data, 'name');
        $model->update($data);
    }

    /**
     * Validation rules.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function rules(Request $request)
    {
        return [
            'name' => 'reqred',
        ];
    }
}

然后添加一些步骤视图，例如

resources/views/steps/user/name.blade.php

<div class="form-group mb-3">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" @class(['form-control', 'is-invalid' => $errors->has('name')]) value="{{ old('name', $step->data('name')) }}">

    @error('name')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

resources/views/steps/user/email.blade.php

<div class="form-group mb-3">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email" @class(['form-control', 'is-invalid' => $errors->has('email')]) value="{{ old('email', $step->data('email')) }}">

    @error('email')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

接下来，浏览 URL /wizard/user，开始使用 Laravel Wizard。

如果您想获取布局，可以将 Laravel layouts/app.blade.php 复制到 resources/views/layouts/app.blade.php。

3. 安装向导步骤 CSS 包

此包默认视图的 CSS 基于 Bootstrap Steps，使用 NPM 安装即可使用

npm install bootstrap bootstrap-steps
// or yarn
yarn add bootstrap bootstrap-steps

将其导入到 app.scss 文件中，并运行 npm run dev 或 yarn run dev

resources/sass/app.scss

...

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-steps/scss/bootstrap-steps';

缓存

数据库驱动程序

要使用 database 向导缓存驱动程序，您需要一个数据库表来保存向导的缓存数据。生成一个创建此表的迁移，并运行 wizard:table Artisan 命令

php artisan wizard:table

php artisan migrate

禁用缓存

将 cache 在 config/wizard.php 中设置为 false 以禁用缓存输入数据

'cache' => false,

或将它设置为您的 WizardController 的 wizardOptions 属性

protected $wizardOptions = [
    'cache' => false,
];

如果禁用缓存，则数据将在每个步骤发送后立即保存。如果您担心重复保存数据，可以隐藏上一个按钮，或使用 Model::updateOrCreate() (https://laravel.net.cn/docs/6.x/eloquent#other-creation-methods)。

控制器

设置配置

将 wizardOptions 属性添加到您的向导控制器中，您可以使用 cache、driver、connection 和 table 选项来覆盖配置。

app/Http/Controllers/UserWizardController.php

/**
 * The wizard options.
 *
 * @var array
 */
protected $wizardOptions = [
    'cache' => true,
    'driver' => 'session',
    'table' => 'wizards',
];

自定义视图

此包布局视图使用 Bootstrap 5，但如果您不想使用默认视图，则可以发布视图以自定义

php artisan vendor:publish --tag=wizard-views-bs5

如果您使用 Bootstrap 4，则可以发布布局

php artisan vendor:publish --tag=wizard-views-bs4

如果您使用 Tailwind CSS，则可以发布布局

php artisan vendor:publish --tag=wizard-views-tailwind

现在您可以在您的 Laravel 项目中自定义 resources/views/vendor/wizard/*.blade.php。

但是如果您只想有一个仅用于自定义的向导视图基本视图，您可以复制从 resources/views/vendor/wizard/*.blade.php 到 resources/views/wizards/user/*.blade.php 的视图。（user 是您向导控制器中 wizardName 属性的值），

步骤

获取缓存数据

例如，FirstStep 有 name 和 email 字段，而 SecondStep 有 age 和 phone 字段。您可以使用步骤的 data 方法来获取步骤数据

$name = $firstStep->data('name');
// 'Lucas'

$data = $secondStep->data();
// ['age' => '30', 'phone' => '0900111222']

或者您可以使用步骤存储库来获取其他步骤数据

$data = $secondStep->find('first')->data();
// ['name' => 'Lucas']

$name = $secondStep->find('first')->data('name');
// 'Lucas'

重定向到步骤

如果您想手动跳转到另一个步骤，可以使用向导的 redirectToStep()，它将返回一个重定向响应。

// given a step slug
return $wizard->redirectToStep('second');

// given a step insatnce
return $wizard->redirectToStep($secondStep);

步骤存储库

步骤存储库保存所有步骤数据，如果您想使用另一个步骤，则需要使用它

从向导中获取

$stepRepo = $wizard->stepRepo();

从步骤中获取

$stepRepo = $step->getRepo();

获取上一个步骤

$prevStep = $step->prev();
// same as:
$prevStep = $step->getRepo()->prev();

获取下一个步骤

$prevStep = $step->next();
// same as:
$nextStep = $step->getRepo()->next();

步骤存储库所有可用的方法详细参考：src/StepRepository.php

上传文件

自 v2.3.3 以来，支持在 Cache 和 No Cache 中上传文件，如果使用 Cache Mode，您可以将所有输入数据和上传的文件缓存到最后的步骤中

<?php

class LastStep extends Step
{
    public function model(Request $request)
    {
        return $request->user();
    }

    public function saveData(Request $request, $data = null, $model = null)
    {
        $data = [
            'avatar' => $this->find('has-avatar-step')->data('avatar'),
        ];

        $data['avatar'] = $data['avatar']->store('avatar', ['disk' => 'public']);

        $model->update($data);
    }
}

然后添加一个上传头像图像的步骤视图

resources/views/steps/user/has-avatar.blade.php

<div class="form-group mb-3">
    <label for="avatar">Avatar</label>
    <input type="file" name="avatar" id="avatar" @class(['form-control', 'is-invalid' => $errors->has('avatar')])>

    @error('avatar')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

跳过步骤

注意：v2.3.3+

要使步骤可跳过，将 $skip 属性设置为 true，然后此步骤将跳过验证并保存数据

app/Steps/User/NameStep.php

<?php

class NameStep extends Step
{
    /**
     * Is it possible to skip this step.
     *
     * @var boolean
     */
    protected $skip = true;
}

将数据传递到视图中

因为每个步骤都被注入到步骤的视图中，所以只需在步骤类中添加一个返回数据的方法即可。例如，将下拉选项的数据传递给视图

app/Steps/User/NameStep.php

<?php

class NameStep extends Step
{
    public function getOptions()
    {
        return [
            'Taylor',
            'Lucas',
        ];
    }
}

resources/views/steps/user/name.blade.php

<div class="form-group mb-3">
    <label for="name">Select name</label>
    <select id="name" name="name" @class(['form-control', 'is-invalid' => $errors->has('name')])>
        <option value="">Select...</option>
        @foreach ($step->getOptions() as $option)
            <option
                value="{{ $option }}"
                @selected($option === old('name', $step->data('name')))
            >
                {{ $option }}
            </option>
        @endforeach
    </select>

    @error('name')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

getOptions 方法是自定义的，可以随意更改。

在另一个步骤中保存数据

假设现在有两个步骤 NameStep 和 EmailStep。首先，不要为所有步骤设置模型，但不要使用最后一个

app/Steps/User/NameStep.php

<?php

class NameStep extends Step
{
    public function model(Request $request)
    {
        //
    }

    public function saveData(Request $request, $data = null, $model = null)
    {
        //
    }
}

然后，在最后一个步骤中接收所有数据并保存模型

app/Steps/User/EmailStep.php

<?php

class EmailStep extends Step
{
    public function model(Request $request)
    {
        return new User();
    }

    public function saveData(Request $request, $data = null, $model = null)
    {
        $data = $this->getStepsData();
        $model->fill($data)->save();
    }
}

设置关系模型

同样，您可以在步骤的 model 方法中设置关系模型。

use Illuminate\Support\Arr;

/**
 * Set the step model instance or the relationships instance.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Database\Eloquent\Model|\Illuminate\Database\Eloquent\Relations\Relation|null
 */
public function model(Request $request)
{
    return $request->user()->posts();
}

/**
 * Save this step form data.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  array|null  $data
 * @param  \Illuminate\Database\Eloquent\Model\Illuminate\Database\Eloquent\Relations\Relation|null  $model
 * @return void
 */
public function saveData(Request $request, $data = null, $model = null)
{
    $data = Arr::only($data, ['title', 'content']);
    $model->create($data);
}

从第一个步骤强制重新开始

如果您在点击开始向导按钮时不保留缓存，可以将链接更改为 /wizard/user?_reset=1。

如果您有要清理的自定义缓存数据，您可以在 WizardController 中的 cleanUpWizard() 钩子中设置清理，然后在向导完成或访问带有 ?_reset=1 参数的路由时进行清理

app/Http/Controllers/UserWizardController.php

/**
 * Clean up the wizard event.
 *
 * @return void
 */
protected function cleanUpWizard(Request $request)
{
    // Cleanup wizard cache...
}

命令

创建向导:

make:wizard 命令和 make:wizard:controller 命令的不同之处在于 make:wizard 命令将附加路由但不确认生成步骤。

php artisan make:wizard User NameStep,EmailStep

创建控制器:

make:wizard:controller 命令仅生成 WizardController、NameStep 和 EmailStep 类。

php artisan make:wizard:controller UserController --steps=NameStep,EmailStep

创建步骤:

php artisan make:wizard:step NameStep

带有步骤标签和向导

php artisan make:wizard:step NameStep --label="Name" --slug=name --wizard=user

添加自定义视图路径

php artisan make:wizard:step NameStep --label="Name" --slug=name --view=steps.user.name --wizard=user

赞助商

如果您认为这个包对您有所帮助，请考虑成为赞助商来支持我的工作~您的头像将出现在我的主要项目中。

鸣谢

smajti1/laravel-wizard

许可证

MIT 许可证

ycs77 / laravel-wizard

维护者

详细信息

README

目录

版本兼容性

安装

使用

1. 生成控制器和向导步骤

2. 设置步骤

3. 安装向导步骤 CSS 包

缓存

数据库驱动程序

禁用缓存

控制器

设置配置

自定义视图

步骤

获取缓存数据

重定向到步骤

步骤存储库

上传文件

跳过步骤

将数据传递到视图中

在另一个步骤中保存数据

设置关系模型

从第一个步骤强制重新开始

命令

赞助商

鸣谢

许可证