programming

Làm cách nào để giả mạo một biểu mẫu với trường phương thức ẩn trong Laravel?

Aire là một trình tạo biểu mẫu Laravel hiện đại [bản demo] tập trung vào cùng một mã biểu cảm và đẹp mắt mà bạn mong đợi từ hệ sinh thái Laravel

Sử dụng cơ bản

Cách sử dụng phổ biến nhất là thông qua mặt tiền

composer require glhd/aire

0 trong các mẫu lưỡi cắt của bạn. Tất cả các cuộc gọi phương thức đều trôi chảy, cho phép dễ dàng cấu hình các thành phần biểu mẫu của bạn

{{ Aire::open[]
  ->route['users.update']
  ->bind[$user] }}



  {{ Aire::input['given_name', 'First/Given Name']
    ->id['given_name']
    ->autoComplete['off']
    ->groupClass['flex-1 mr-2'] }}
    
  {{ Aire::input['family_name', 'Last/Family Name']
    ->id['family_name']
    ->autoComplete['off']
    ->groupClass['flex-1'] }}
  

  
{{ Aire::email['email', 'Email Address'] }}
  
{{ Aire::submit['Update User'] }}
  
{{ Aire::close[] }}

Cài đặt

Cài đặt qua nhà soạn nhạc với

composer require glhd/aire

tùy biến

Aire đi kèm với các lớp sẽ hoạt động với tên lớp Tailwind mặc định [

composer require glhd/aire

1, v.v.]. Nếu bạn cần thay đổi tên lớp mặc định cho bất kỳ phần tử cụ thể nào, có hai cách khác nhau để thực hiện

Đầu tiên là xuất bản tệp cấu hình

composer require glhd/aire

2 qua

composer require glhd/aire

0 và cập nhật cấu hình

composer require glhd/aire

1 cho thành phần bạn muốn thay đổi

return [
  'default_classes' => [
    'input' => 'text-gray-900 bg-white border rounded-sm',
  ],
];

Tùy chọn thứ hai là xuất bản chế độ xem tùy chỉnh qua

composer require glhd/aire

2, cho phép bạn kiểm soát toàn bộ kết xuất thành phần. Có một tệp xem cho từng loại thành phần [

composer require glhd/aire

3, v.v.] cũng như cho nhóm thành phần. Điều này mang lại cho bạn sự linh hoạt nhất, nhưng có nghĩa là bạn có thể duy trì chế độ xem của mình khi Aire phát hành thêm các tính năng mới hoặc thay đổi kết xuất thành phần

Cấu hình

Khi bạn xuất bản tệp cấu hình

composer require glhd/aire

2 qua

composer require glhd/aire

0, sẽ có một số tùy chọn cấu hình khác. Tệp cấu hình được ghi lại đầy đủ, vì vậy hãy kiểm tra nó

Ràng buộc dữ liệu

Aire tự động liên kết đầu vào cũ với biểu mẫu của bạn để các giá trị được giữ nguyên nếu xảy ra lỗi xác thực. Bạn cũng có thể liên kết dữ liệu bằng phương pháp

composer require glhd/aire

// Bind Eloquent models
Aire::bind[User::find[1]];

// Bind an array
Aire::bind[['given_name' => 'Chris']];

// Bind any object
Aire::bind[[object] ['given_name' => 'Chris']];

Ưu tiên ràng buộc

Ràng buộc được áp dụng theo thứ tự sau

Các giá trị được đặt bằng
```
composer require glhd/aire
```
7 được áp dụng bất kể điều gì
Đầu vào cũ được áp dụng nếu có
Dữ liệu ràng buộc được áp dụng cuối cùng

Phương pháp Giả mạo & Suy luận

Aire sẽ tự động thêm trường Laravel

composer require glhd/aire

8 cho các biểu mẫu không phải là

composer require glhd/aire

9 hoặc

return [
  'default_classes' => [
    'input' => 'text-gray-900 bg-white border rounded-sm',
  ],
];

0. Nó cũng sẽ tự động suy ra phương thức dự định từ tuyến đường nếu có thể

composer require glhd/aire

Sẽ tạo HTML kết quả

composer require glhd/aire

Trường CSRF tự động

Aire sẽ tự động thêm mã thông báo CSRF nếu có và biểu mẫu không phải là biểu mẫu

composer require glhd/aire

9. Chỉ cần kích hoạt phiên và một trường

return [
  'default_classes' => [
    'input' => 'text-gray-900 bg-white border rounded-sm',
  ],
];

2 ẩn sẽ được đưa vào cho bạn

Xác thực phía máy chủ

Nếu bạn chạy xác thực trên máy chủ, Aire sẽ nhận bất kỳ lỗi nào và tự động áp dụng các loại lỗi và hiển thị thông báo lỗi trong nhóm đầu vào được liên kết

Bạn cũng có thể bao gồm một bản tóm tắt lỗi, cung cấp một cách dễ dàng để hiển thị lỗi cho người dùng của bạn ở đầu trang nếu xác thực không thành công

composer require glhd/aire

Xác thực phía máy khách

Xác thực Javascript trong Aire đang ở giai đoạn đầu. Thử nghiệm trình duyệt bị hạn chế và mã Javascript chưa áp dụng tối ưu hóa hiệu suất. Điều đó nói rằng, Aire hỗ trợ xác thực phía máy khách tự động—chỉ cần chuyển một mảng quy tắc hoặc đối tượng

return [
  'default_classes' => [
    'input' => 'text-gray-900 bg-white border rounded-sm',
  ],
];

3 và Aire sẽ tự động áp dụng hầu hết các quy tắc ở phía máy khách [nhờ trình xác thựcjs. ]

Đang xem xét / Ý tưởng tính năng

Có một số thứ vẫn đang trong quá trình thực hiện hoặc đang được xem xét để phát hành sau. Bao gồm các