返回

Livewire 表单如何绕过中间件向控制器发送数据？

php

使用路由向控制器发送 Livewire 表单

问题：Livewire 表单无法发送数据到 POST 路由

在开发同时使用 Web 应用程序和 RESTful API 的应用程序时，我们希望使用相同的控制器来处理相同的任务。然而，Livewire 表单无法将数据发送到 POST 路由，这给我们带来了挑战。

解决方案：使用传统表单数据并绕过中间件

为了解决这个问题，我们将使用 CSRF 令牌将传统表单数据发送到路由。以下步骤介绍了如何实现：

1. 创建表单请求类

为购买和出售询盘创建表单请求类，用于验证输入数据。

2. 在 Livewire 组件中使用表单请求类

在 Livewire 组件中，使用表单请求类来验证输入数据。

3. 重写 assign() 方法

在 Livewire 组件中，重写 assign() 方法，在其中使用路由发送数据。

4. 定义路由

在路由文件中定义 POST 路由以处理表单提交。

5. 在控制器中处理请求

在控制器中，定义处理请求的方法，并使用表单请求类进行验证。

示例代码

以下代码示例展示了如何实现上述步骤：

Livewire 组件：

use App\Http\Requests\AgencyInquiryBuyingRequest;
use App\Http\Requests\AgencyInquirySellingRequest;
use App\Http\Controllers\AgencyInquiryController;

public function assign()
{
    $controllerAgencyInquiry = new AgencyInquiryController();

    switch ($this->inquiry_type) {
        case 'buying':
            $request = new AgencyInquiryBuyingRequest($this->input);
            $res = $controllerAgencyInquiry->storeBuying(request: $request, agency: $agency);
            break;

        case 'selling':
            $request = new AgencyInquirySellingRequest($this->input);
            $res = $controllerAgencyInquiry->storeSelling(request: $request, agency: $agency);
            break;
    }
}

表单代码：

<!-- 表单展示 -->
<form wire:submit="assign">
    <div class="mb-3">
        <x-input-label for="agency_agent_id" :value="__('选择 :name',['name' => __('经纪人')])" :required="true" />
        <x-select-input-post wire:model="agency_agent_id" :result="$agents" :show="__('选择 :name',['name' => __('经纪人')])"/>
        <x-input-error :messages="$errors->get('agency_agent_id')" class="mt-2" />
    </div>
    <div class="flex justify-end">
        <x-primary-button>{{ __('分配') }} <i class="ps-2 fa-solid fa-circle-right"></i></x-primary-button>
    </div>
</form>

路由文件：

Route::post('/manage/agency/inquiry/store-buying', [AgencyInquiryController::class, 'storeBuying']);
Route::post('/manage/agency/inquiry/store-selling', [AgencyInquiryController::class, 'storeSelling']);
Route::post('/manage/agency/inquiry/assign', [AgencyInquiryController::class, 'assign']);

结论

通过遵循这些步骤，你可以使用路由将 Livewire 表单数据发送到控制器，从而实现 Web 应用程序和 RESTful API 使用相同控制器的目标。

常见问题解答

1. 为什么 Livewire 表单不能发送数据到 POST 路由？

Livewire 表单无法发送数据到 POST 路由，因为它们使用 AJAX 调用，这会绕过传统表单提交流程和路由中间件。

2. 如何使用传统表单数据绕过中间件？

使用表单请求类可以将传统表单数据发送到路由并绕过中间件。

3. 在 Livewire 组件中重写 assign() 方法有什么作用？

在 Livewire 组件中重写 assign() 方法使我们能够使用路由发送数据，而不是使用 Livewire 的 AJAX 调用。

4. 定义 POST 路由时需要注意什么？

定义 POST 路由时，确保指定正确的控制器和方法。

5. 为什么使用表单请求类进行数据验证很重要？

使用表单请求类进行数据验证可以确保提交的数据有效，并防止恶意输入。