向Laravel Jetstream / Livewire配置文件表单添加卡

在 Laravel Jetstream 或 Livewire 中配置文件表单添加卡片通常涉及以下几个步骤：

基础概念

Laravel Jetstream 是 Laravel 的一个官方扩展包，用于快速构建具有身份验证和授权功能的单页应用程序（SPA）。它提供了用户管理、团队管理、OAuth 认证等功能。

Livewire 是一个用于构建动态、响应式的前端组件的框架，它可以无缝地与 Laravel 后端集成。

卡片（Card） 是一种常见的 UI 组件，用于组织和展示信息。在 Jetstream 和 Livewire 中，卡片可以用来封装表单、列表或其他 UI 元素。

类型与应用场景

表单卡片：用于封装表单元素，如用户注册、登录等。
列表卡片：用于显示数据列表，如用户列表、任务列表等。
信息卡片：用于显示静态信息或提示。

示例代码

假设我们要在 Jetstream 的配置文件表单中添加一个简单的卡片，用于用户注册。

1. 创建 Livewire 组件

首先，创建一个 Livewire 组件来表示卡片：

php artisan make:livewire RegisterCard

2. 编写 Livewire 组件代码

编辑 app/Http/Livewire/RegisterCard.php：

namespace App\Http\Livewire;

use Livewire\Component;

class RegisterCard extends Component
{
    public $name;
    public $email;
    public $password;

    protected $rules = [
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8|confirmed',
    ];

    public function submit()
    {
        $this->validate();

        // 创建用户逻辑
        // ...

        // 重定向或其他操作
    }

    public function render()
    {
        return view('livewire.register-card');
    }
}

3. 编写视图文件

创建 resources/views/livewire/register-card.blade.php：

<div class="card">
    <div class="card-header">Register</div>
    <div class="card-body">
        <form wire:submit.prevent="submit">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" id="name" wire:model="name" class="form-control">
                @error('name') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" id="email" wire:model="email" class="form-control">
                @error('email') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" id="password" wire:model="password" class="form-control">
                @error('password') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <button type="submit" class="btn btn-primary">Register</button>
        </form>
    </div>
</div>

4. 在 Jetstream 配置文件中使用卡片

编辑 resources/views/vendor/jetstream/profile.blade.php 或其他相关视图文件，添加 Livewire 组件：

<x-jet-authentication-card>
    <x-slot name="logo">
        <!-- 你的 Logo -->
    </x-slot>

    <livewire:register-card />

    <div class="mt-4 text-center">
        Already have an account?
        <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
            Login
        </a>
    </div>
</x-jet-authentication-card>