Aire 现代 Laravel 表单构建器教程

Aire 现代 Laravel 表单构建器教程

aire Modern form builder for Laravel 项目地址: https://gitcode.com/gh_mirrors/ai/aire

1. 项目介绍

Aire 是一个现代的 Laravel 表单构建器，旨在为 Laravel 生态系统提供一个表达性强、代码美观的表单构建工具。Aire 专注于提供流畅的 API 和灵活的配置选项，使得开发者能够轻松地创建和管理复杂的表单。

主要特点

• 流畅的 API：所有方法调用都是流畅的，允许轻松配置表单组件。
• Blade 组件：支持使用 Blade 组件来构建表单，使得代码更加简洁和可读。
• 自动 CSRF 字段：自动注入 CSRF 令牌，确保表单的安全性。
• 数据绑定：自动绑定旧输入和数据，简化表单处理。
• 客户端验证：支持自动客户端验证，减少服务器负担。

2. 项目快速启动

安装

首先，通过 Composer 安装 Aire：

composer require glhd/aire

基本使用

在 Blade 模板中使用 Aire 构建表单的基本示例：

@php
$user = \App\Models\User::find(1);
@endphp

{{ Aire::open()
    ->route('users.update')
    ->bind($user) }}

{{ Aire::input('given_name', 'First/Given Name')
    ->id('given_name') }}

{{ Aire::input('family_name', 'Last/Family Name')
    ->id('family_name')
    ->autoComplete('off') }}

{{ Aire::email('email', 'Email Address')
    ->helpText('Please use your company email address') }}

{{ Aire::submit('Update User') }}

{{ Aire::close() }}

Blade 组件

Aire 2.4.0 及以上版本支持使用 Blade 组件来构建表单：

<x-aire::form route="users.update" :bind="$user">
    <x-aire::input name="given_name" label="First/Given Name" id="given_name" />
    <x-aire::input name="family_name" label="Last/Family Name" id="family_name" auto-complete="off" />
    <x-aire::email name="email" label="Email Address" help-text="Please use your company email address" />
    <x-aire::submit label="Update User" />
</x-aire::form>

3. 应用案例和最佳实践

案例1：用户注册表单

在用户注册页面中使用 Aire 构建表单：

{{ Aire::open()
    ->route('register') }}

{{ Aire::input('name', 'Full Name')
    ->id('name') }}

{{ Aire::email('email', 'Email Address')
    ->helpText('Please use a valid email address') }}

{{ Aire::password('password', 'Password') }}

{{ Aire::password('password_confirmation', 'Confirm Password') }}

{{ Aire::submit('Register') }}

{{ Aire::close() }}

最佳实践

• 使用 Blade 组件：尽量使用 Blade 组件来构建表单，以提高代码的可读性和维护性。
• 自定义样式：通过配置文件或自定义视图来调整表单元素的样式，以适应项目的整体设计。
• 客户端验证：利用 Aire 的客户端验证功能，减少服务器负担并提升用户体验。

4. 典型生态项目

Laravel 表单构建器生态

Aire 是 Laravel 表单构建器生态中的一个重要组成部分，与其他 Laravel 项目和工具配合使用，可以大大提升开发效率。

相关项目

• Laravel Livewire：结合 Livewire 可以实现动态表单和实时验证。
• Tailwind CSS：Aire 默认支持 Tailwind CSS 类名，可以轻松集成 Tailwind CSS 进行样式设计。
• Laravel Validator：利用 Laravel 的验证器进行服务器端验证，确保数据的有效性。

通过这些生态项目的配合，Aire 可以更好地满足复杂表单构建的需求，提升开发效率和用户体验。

aire Modern form builder for Laravel 项目地址: https://gitcode.com/gh_mirrors/ai/aire