Chỉ thị Blade hasStack trong Laravel và điều khiển ngăn xếp nâng cao

Informatec Digital » Recursos » Chỉ thị Blade hasStack trong Laravel và điều khiển ngăn xếp nâng cao

Nếu bạn làm việc với Laravel hàng ngày, sớm muộn gì bạn cũng sẽ gặp Blade, các directive của nó, và tất nhiên là các view stack và ý tưởng về một directive `hasStack` giả định để quản lý chúng tốt hơn. Có thể bạn đến từ việc sử dụng các template PHP truyền thống, hoặc bạn có thể đã quen với React hay Vue, nhưng khi bạn thực sự hiểu Blade và mọi thứ nó cung cấp (bao gồm cả stack), đó là lúc việc tổ chức view của bạn sẽ có một bước tiến đáng kể.

Trong bài viết này, chúng ta sẽ đi sâu vào những chi tiết phức tạp: bạn sẽ thấy rất chi tiết cách Blade hoạt động, các chỉ thị điều khiển là gì, cấu trúc của bố cục, thành phần, khe cắm, thuộc tính, ủy quyền và môi trường, và trong bối cảnh đó, khái niệm về ngăn xếp và chỉ thị `hasStack` được sử dụng như thế nào, cho phép bạn kiểm tra nội dung được xếp chồng trước khi hiển thị. Tất cả những điều này sẽ được minh họa bằng các ví dụ thực tế và cách tiếp cận thực tiễn được thiết kế cho các dự án Laravel hiện đại.

Blade là gì và tại sao việc hiểu các chỉ thị của nó lại quan trọng?

Lưỡi dao là công cụ tạo mẫu Laravel chính thứcNó không bắt buộc bạn phải ngừng sử dụng PHP, nhưng cung cấp cho bạn cú pháp rõ ràng hơn nhiều để kết hợp logic trình bày và HTML mà không cần phải liên tục mở và đóng thẻ. Mọi lúc. Mọi mẫu .blade.php Nó được biên dịch thành PHP thuần túy và được lưu trữ trong bộ nhớ đệm storage/framework/views, do đó chi phí thời gian chạy là tối thiểu.

Các chế độ xem lưỡi dao thường được lưu trong tài nguyên/lượt xem và được trả về từ các tuyến đường hoặc bộ điều khiển bằng cách sử dụng trình trợ giúp view()Bạn có thể truyền dữ liệu cho trình trợ giúp này trong đối số thứ hai (mảng liên kết, compact()v.v.), và trong chế độ xem chúng được sử dụng với cú pháp của phím đôi để hiển thị nội dung đã thoát hoặc có dấu chấm than cho nội dung chưa thoát.

Một lợi thế lớn của Blade là nó cung cấp chỉ thị cụ thể (những từ bắt đầu bằng @) để xử lý các điều kiện, vòng lặp, ủy quyền, ngăn xếp tập lệnh, thành phần, khe cắm, xác thực, môi trường… Tất cả những điều này làm cho mã xem dễ đọc và dễ bảo trì hơn nhiều so với sự kết hợp hỗn loạn giữa PHP cổ điển với echo và HTML thuần túy.

Cú pháp Blade cơ bản: echo, escape và verbatim

Thao tác phổ biến nhất trong chế độ xem là hiển thị dữ liệu. Với Blade, để in nội dung của một biến, chỉ cần sử dụng {{ }}, mà nội bộ dịch thành một echo e($variable) và do đó, Thoát khỏi các thực thể HTML để ngăn chặn XSS:

Việc hiển thị các biến đã được mã hóa rất đơn giản:

{{ $name }}

Nếu bạn muốn hiển thị HTML được tạo sẵn hoặc nội dung không nên được mã hóa (ví dụ: vì bạn kiểm soát nó và biết nó an toàn), bạn có thể sử dụng cú pháp {!! !!} , cú pháp này sẽ vô hiệu hóa việc mã hóa tự động và cho phép trình duyệt diễn giải nó như nguyên trạng:

{!! $htmlSeguro !!}

Nếu bạn làm việc với các khuôn khổ giao diện người dùng cũng sử dụng các khóa (ví dụ: Vue hoặc một số thư viện mẫu phía máy khách), Blade cho phép bạn "thoát khỏi" động cơ của chính nó với tiền tố @. Bằng cách này, @{{biếnJavascript }} Nó sẽ không được hiểu là biểu thức Blade, nhưng sẽ vẫn nằm trong HTML để được xử lý bởi khung trình duyệt.

Khi bạn có những khối mã lớn cần tuân thủ hoàn toàn dấu ngoặc nhọn kép mà không để Blade can thiệp vào, bạn có thể bao quanh chúng bằng chỉ thị ` @verbatim … @endverbatim` . Mọi thứ bên trong sẽ được giữ nguyên, đây là một công cụ rất hữu ích khi tích hợp các mẫu giao diện người dùng phức tạp.

Cấu trúc điều khiển: if, switch, vòng lặp và biến $loop

Blade cung cấp một bộ đầy đủ các chỉ thị điều khiển luồng giúp gói gọn cú pháp PHP theo cách dễ đọc và nhất quán hơn. Trên thực tế, logic gần như giống hệt nhau, nhưng bạn sẽ có được sự rõ ràng hơn và tránh lạm dụng các thẻ PHP trong HTML của mình.

Các câu lệnh if được viết bằng @if, @elseif, @else và họ đóng lại với @endifBạn cũng có các phím tắt như @unless (phủ định của một điều kiện), @isset để xác minh rằng một biến được xác định và @empty để kiểm tra xem nó có trống không.

Đối với các tình huống có nhiều giá trị có thể, chỉ thị @công tắc sao chép cấu trúc chuyển đổi PHP với @case, @break, @default và đóng lại với @endswitch, tạo điều kiện cho nhiều điều kiện dễ đọc.

Về vòng lặp, bạn có @vì, @cho mỗi y @trong khi, ngoài @forelseĐiều này rất hữu ích khi bạn muốn lặp lại một bộ sưu tập nhưng cũng cần xử lý trường hợp danh sách rỗng mà không cần viết thêm câu lệnh if. @forelse ... @empty ... @endforelse Bạn có thể hiển thị nội dung thay thế nếu không có thành phần nào.

Khi bạn đi qua một @cho mỗiBlade cung cấp biến cho bạn $vòng lặp, một đối tượng chứa thông tin rất hữu ích về lần lặp hiện tại: chỉ mục, đó là lượt đầu tiên hay lượt cuối cùng, chỉ mục là chẵn hay lẻ, tổng số lần lặp hoặc thậm chí là quyền truy cập vào vòng lặp cha trong trường hợp vòng lặp lồng nhau sử dụng $loop->parent.

Kế thừa mẫu, bố cục và phần

Trong các ứng dụng thực tế, bạn không muốn lặp lại tiêu đề, menu hoặc chân trang trong mọi chế độ xem. Blade cho phép bạn xác định bố cục tổng thể (thường được lưu trữ trong) resources/views/layouts/master.blade.php) mà tất cả các trang đều kế thừa. Trong bố cục, bạn định nghĩa các vùng "trống" bằng @yield và phần còn lại của HTML chung vẫn ổn định.

Để sử dụng bố cục đó từ chế độ xem con, bạn chỉ cần chỉ ra @extends('layouts.master') và khai báo các phần bạn muốn điền vào bằng cách sử dụng @phần y @endsection. Mỗi @yield('nombre') bằng thạc sĩ sẽ tương ứng với một @section('nombre') theo quan điểm của con gái.

Hơn nữa, chỉ thị @parent cho phép bạn không chỉ ghi đè lên một phần mà còn thêm nội dung phía trên hoặc phía dưới những gì bố cục đã định nghĩa . Điều này rất hữu ích trong các thanh bên hoặc khối mà bạn muốn mở rộng chứ không phải thay thế.

Nếu bạn cần bao gồm các đoạn mã HTML có thể tái sử dụng mà không cần kế thừa đầy đủ, Blade cung cấp @bao gồm và toàn bộ các chỉ thị liên quan: @includeIf, @includeWhen, @includeUnless y @includeFirstcho phép bạn bao gồm các chế độ xem phụ có điều kiện hoặc chọn chế độ xem đầu tiên có trong danh sách các tuyến đường có thể.

Trong trường hợp bạn lặp lại một đoạn mã nhỏ cho mỗi phần tử của một tập hợp, chỉ thị @each kết hợp foreach + include thành một dòng duy nhất, và thậm chí có thể định nghĩa một dạng hiển thị thay thế cho trường hợp tập hợp đó trống rỗng.

Các thành phần, khe cắm và thuộc tính của lưỡi kiếm

Các thành phần Blade là sự phát triển tự nhiên của bố cục và các phần tử bao gồm: chúng cho phép bạn đóng gói các thành phần giao diện có thể tái sử dụng (nút, thông báo, thẻ, biểu mẫu…) với logic, thuộc tính và khe riêng, chứa nội dung có thể được chèn từ bên ngoài, tất cả đều có cú pháp rất gần với các thành phần khung JavaScript hiện đại.

Có hai loại thành phần chính: dựa trên lớp học (nằm ở app/View/Components, được tạo ra với php artisan make:component) và vô danhchỉ được nhìn thấy trong resources/views/components không có lớp liên kết. Trong cả hai trường hợp, chúng được hiển thị trong các chế độ xem có nhãn thuộc loại <x-alert /> o <x-forms.input />.

Các thành phần dựa trên lớp nhận dữ liệu thông qua Thuộc tính HTML (Với kebab-case trong tầm nhìn và camelCase trong hàm tạo), được hiển thị trong chế độ xem thành phần dưới dạng thuộc tính công khai và có thể chọn một phương thức shouldRender() để quyết định có điều kiện xem chúng có nên được hiển thị hay không.

Đối với nội dung linh hoạt, các thành phần có tính năng Nổ hũNội dung chính được truy cập như $slot trong mẫu thành phần và khe cắm có tên được định nghĩa bằng cách sử dụng <x-slot name="titulo">...</x-slot> Khi sử dụng thành phần. Từ bên trong, bạn có thể gọi các phương thức thành phần thông qua $component và thậm chí kiểm tra xem một khe có trống không với $slot->isEmpty() hoặc nếu nó có nội dung thực sự với $slot->hasActualContent().

Các thành phần cũng quản lý một cách thanh lịch các thuộc tính bổ sung không khớp với các thuộc tính của hàm tạo (ví dụ class, id, data-*Tất cả những thứ này được nhóm vào một "túi thuộc tính" có thể truy cập được với $attributesmà bạn có thể hiển thị nguyên trạng hoặc thao tác bằng các phương pháp như merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().

Ngoài ra, Blade còn bao gồm các chỉ thị cụ thể cho HTML biểu mẫu thông thường: @checked , @selected , @disabled , @readonly và @required , chỉ in thuộc tính tương ứng nếu điều kiện nhận được là đúng.

Bố cục sử dụng các thành phần và kế thừa cổ điển

Trong Laravel hiện đại, việc xác định bố cục toàn cầu của ứng dụng là Thành phần lưỡi dao (ví dụ: <x-layout>) thay vì chỉ sử dụng sự kế thừa cổ điển của @extendsTheo cách này, bố cục có thể nhận được các khe, thuộc tính và tính chất giống như các thành phần còn lại.

Mẫu điển hình liên quan đến việc tạo ra một thành phần Bố trí với php artisan make:component LayoutXác định cấu trúc HTML cơ bản (tiêu đề, liên kết CSS, điều hướng, chân trang) trong mẫu của bạn và sử dụng {{ $slot }} để chèn nội dung chính. Tùy chọn, một khe có tên sẽ được định nghĩa. title để mỗi trang đều nêu rõ tiêu đề theo cách khai báo.

Mặt khác, tùy chọn "cổ điển" vẫn tồn tại với kế thừa mẫu thông qua @extends, @section y @yieldPhương pháp này đã được sử dụng rộng rãi trước khi thành phần trở nên phổ biến. Bạn có thể tiếp tục kết hợp cả hai phương pháp, sử dụng bố cục dựa trên thành phần cho mọi thứ, hoặc tiếp tục sử dụng kế thừa truyền thống nếu dự án của bạn đã được thiết lập theo cách đó.

Trong cả hai trường hợp, mục tiêu đều giống nhau: tránh lặp lại cấu trúc HTML cơ bản trong mỗi giao diện , duy trì một nguồn thông tin duy nhất cho bố cục và cho phép mỗi trang chỉ tập trung vào nội dung cụ thể của nó.

Phiên, xác thực, môi trường và ủy quyền trong Blade

Blade tích hợp rất tốt với phần còn lại của framework, vì vậy nó không chỉ giới hạn ở việc hiển thị HTML: nó còn cung cấp cho bạn các chỉ thị cấp cao để tương tác với phiên làm việc, hệ thống xác thực, môi trường ứng dụng và các quy tắc ủy quyền.

Để xác thực, có các chỉ thị như `@auth` và `@guest` , chỉ hiển thị nội dung của chúng nếu người dùng đã được xác thực hoặc là khách, tương ứng. Ngoài ra, bạn có thể chỉ định một guard cụ thể làm đối số để tinh chỉnh ngữ cảnh xác thực được sử dụng.

các chỉ thị về môi trường như @production o @env('local') Chúng cho phép bạn thiết lập các phần của chế độ xem tùy thuộc vào môi trường Laravel hiện tại. Ví dụ, rất hữu ích để hiển thị biểu ngữ, dấu vết gỡ lỗi hoặc tập lệnh chỉ trong môi trường cục bộ hoặc môi trường dàn dựng.

Đối với các phiên, chỉ thị `@session` giúp dễ dàng kiểm tra xem khóa phiên có tồn tại hay không và nếu có, sẽ cung cấp giá trị của nó thông qua biến `$value` . Điều này giải quyết một cách khéo léo trường hợp thường gặp của các thông báo hoặc cảnh báo nhanh.

Đối với chính sách và ủy quyền theo kiểu cổng, Blade cung cấp @Có thể, @không thể y @cananyVới chúng, bạn có thể hiển thị hoặc ẩn các nút, liên kết hoặc toàn bộ khối tùy thuộc vào việc người dùng có quyền thực hiện một hành động cụ thể trên mô hình hoặc lớp hay không. Kết hợp với @guest o @authChúng cho phép xây dựng những giao diện an toàn và rõ ràng hơn nhiều.

Biểu mẫu, xác thực và xử lý lỗi trong chế độ xem

Khi chuyển từ giao diện tĩnh sang biểu mẫu, bạn sẽ thực sự thấy Blade tiện lợi như thế nào. Laravel yêu cầu bạn phải bao gồm mã thông báo CSRF trong tất cả các biểu mẫu sửa đổi dữ liệu, và để tránh phải tự viết trường ẩn, có chỉ thị `@csrf` , chỉ thị này sẽ tạo ra trường nhập liệu với mã thông báo tương ứng.

Các phương thức HTTP như ĐẶT, VÁ hoặc XÓA Chúng được mô phỏng thông qua một trường ẩn _methodvà Blade cung cấp nó cho bạn @phương pháp('ĐẶT') (hoặc PATCH/DELETE) để tự động tạo ra nó trong biểu mẫu.

Để hiển thị lỗi xác thực Chỉ thị tồn tại @sai lầmđược liên kết với một trường cụ thể. Trong đó, bạn có sẵn biến. $ tin nhắn với văn bản lỗi. Vì thực tế đây là câu lệnh if đã biên dịch, bạn có thể sử dụng @else để hiển thị nội dung thay thế khi không có lỗi.

Đối tượng $lỗi Nó luôn hiện diện trong chế độ xem và nhóm tất cả các thông báo xác thực cho yêu cầu hiện tại. Nó tích hợp liền mạch với trình trợ giúp. old(), cho phép bạn "bổ sung" biểu mẫu bằng các giá trị do người dùng gửi sau khi xác thực không thành công, giữ nguyên các mục nhập và hiển thị rõ ràng các lỗi.

Bằng cách kết hợp các chỉ thị này với các quy tắc xác thực trong bộ điều khiển hoặc Yêu cầu Biểu mẫu, bạn sẽ có một luồng xác thực phía máy chủ mạnh mẽ , bổ sung cho xác thực phía máy khách và an toàn hơn nhiều trước sự thao túng độc hại.

Các ngăn xếp trong Blade: @stack, @push, @prepend và khái niệm hasStack

Một trong những tính năng ít được thảo luận nhưng hữu ích nhất của Blade đối với các dự án lớn là stack . Về cơ bản, stack là một tập hợp các view fragment mà bạn có thể thêm nội dung từ các child view, component hoặc include, rồi hiển thị tất cả cùng nhau tại một điểm cụ thể trong master layout.

Chỉ thị `@stack('name')` xác định vị trí mà tất cả các fragment liên kết với ngăn xếp đó sẽ được đẩy vào. Ngược lại, từ bất kỳ chế độ xem nào khác, bạn có thể sử dụng `@push('name')` để đẩy nội dung vào cuối ngăn xếp hoặc `@prepend('name') ` để đẩy nó vào đầu. Điều này thường được sử dụng cho các tập lệnh và kiểu dáng dành riêng cho trang.

Hãy tưởng tượng, ví dụ, rằng trong bố cục của bạn, bạn có thứ gì đó như thế này trong <head> và vào cuối <body>:

@stack('styles')
...
@stack('scripts')

Sau đó, trong một giao diện cụ thể cần thêm JavaScript , bạn có thể làm như sau:

@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush

Điều này cho phép bố cục tránh phải biết mọi đoạn mã hoặc kiểu dáng trên mỗi trang ; nó chỉ định nghĩa các ngăn xếp, và các khung nhìn con sẽ xếp chồng những gì chúng cần. Ngoài ra còn có `@pushIf` để đẩy nội dung dựa trên điều kiện boolean mà không cần phải viết toàn bộ câu lệnh `if`.

Trong bối cảnh này, nhiều nhà phát triển thiếu một chỉ thị như `@hasStack` hoặc tương tự , cho phép họ kiểm tra xem một ngăn xếp nhất định có nội dung hay không trước khi hiển thị. Mặc dù Blade không bao gồm một chỉ thị có tên đó ngay từ đầu, nhưng ý tưởng rất rõ ràng: có thể thực hiện những việc như "nếu ngăn xếp tập lệnh trống, không in thêm nhãn" hoặc "nếu có các phần tử trong ngăn xếp siêu dữ liệu, hãy gói chúng trong một khối cụ thể."

Cách để đạt được hành vi tương đương ngày nay là bổ sung các chỉ thị ngăn xếp với logic trong bố cục hoặc với các trợ lý tùy chỉnh, hoặc thậm chí với các chỉ thị đã đăng ký của riêng chúng tôi thông qua Blade::directive()Theo cách này, có thể mô phỏng lệnh hasStack để truy vấn nội bộ ngăn xếp trước khi quyết định tạo HTML nào.

JSON, JavaScript và các chỉ thị trợ giúp trong Blade

Trong nhiều chế độ xem Laravel, bạn cần truyền dữ liệu từ backend sang JavaScript. Thông thường, điều này bao gồm việc thực hiện json_encode() của một mảng hoặc bộ sưu tập và để nó bên trong một tập lệnh nội tuyến, nhưng điều đó không phải lúc nào cũng an toàn hoặc thuận tiện. Laravel giúp việc này dễ dàng hơn với trình trợ giúp Js::from(), tuần tự hóa và thoát chính xác các giá trị PHP thành JSON để nhúng vào HTML.

Khi bạn hiển thị dữ liệu phức tạp cho trình duyệt, Js::from() Nó tránh các vấn đề với dấu ngoặc kép hoặc ký tự đặc biệt và trả về một biểu thức JSON.parse() An toàn khi đưa vào thuộc tính hoặc tập lệnh. Không khuyến khích truyền các biểu thức phức tạp trong chỉ thị vì Blade sử dụng regex nội bộ khi biên dịch chúng, và điều này có thể làm hỏng mọi thứ theo những cách không mong muốn.

Hơn nữa, Blade cho phép bạn định nghĩa các bình luận mẫu không được truyền đến HTML cuối cùng (không giống như các bình luận HTML cổ điển) và các khối `@php … @endphp` nơi bạn có thể thực thi các đoạn mã PHP thuần túy nhỏ khi thực sự cần thiết. Bạn thậm chí có thể sử dụng `@use` để nhập các lớp vào view hoặc gán bí danh cho chúng, điều này rất tiện dụng khi làm việc với các hàm hỗ trợ hoặc các thành phần rất cụ thể.

Nếu bạn đạt đến điểm mà bạn cần chức năng echo chuyên biệt cao cho một số đối tượng nhất định, bạn có thể đăng ký trình xử lý tiếng vang tùy chỉnh với Blade::stringable()để khi phản hồi một đối tượng cụ thể, Blade gọi hàm gọi lại của bạn thay vì phương thức ma thuật __toString() của lớp.

Chế độ xem lỗi, đoạn mã và chỉ thị tùy chỉnh

Laravel cho phép bạn tùy chỉnh lỗi xem: chỉ cần tạo các tập tin trong resources/views/errors với mã HTTP làm tên (ví dụ, 404.blade.php o 500.blade.phpMỗi lần lỗi xảy ra, mẫu của bạn sẽ được sử dụng thay vì mẫu chung từ khung.

Đối với những trường hợp bạn làm việc với các công cụ như Turbo hoặc htmx và chỉ muốn trả về các đoạn cụ thể của một góc nhìnBlade đưa ra các chỉ thị @fragment … @endfragment kết hợp với các phương pháp như view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Bằng cách này, bạn có thể tái sử dụng toàn bộ mẫu và chỉ trích xuất những phần cần thiết tùy theo ngữ cảnh.

Nếu danh mục chỉ thị không đủ cho bạn, bạn luôn có thể tự tạo ra chỉ thị của riêng mình với Blade::directive()Thực hành thông thường là đăng ký chúng bằng phương pháp boot() de AppServiceProvider hoặc thông qua một nhà cung cấp chuyên dụng. Trình biên dịch Blade sẽ truyền cho bạn biểu thức bên trong chỉ thị dưới dạng chuỗi và bạn sẽ trả về mã PHP mà bạn muốn tạo ra khi biên dịch.

Đối với các điều kiện tùy chỉnh đơn giản cũng có Blade::if()tạo ra các chỉ thị có điều kiện trong một dòng duy nhất. Ví dụ, bạn có thể định nghĩa @disk('s3') để kiểm tra xem đĩa mặc định của ứng dụng có phải là S3 hay không, sau đó sử dụng nó trong bất kỳ chế độ xem nào như thể đó là một chỉ thị gốc.

Với kho công cụ này, bạn có thể xây dựng một ngôn ngữ mẫu được tùy chỉnh gần như hoàn toàn theo nhu cầu của mình , bao gồm cả chỉ thị kiểu hasStack nếu muốn, hoạt động như một dạng cú pháp rút gọn cho logic kiểm tra nội bộ xem ngăn xếp có nội dung hay không trước khi in ra.

Nắm vững Blade một cách toàn diện—từ cú pháp cơ bản đến các thành phần nâng cao, chỉ thị ủy quyền, xác thực, môi trường và trên hết là quản lý ngăn xếp—cho phép bạn xây dựng các giao diện mô-đun, an toàn, nhất quán và dễ bảo trì , nơi mà một chỉ thị trong tương lai như `hasStack` sẽ phù hợp một cách tự nhiên để hoàn thiện hơn nữa khả năng kiểm soát những gì được chèn vào từng khu vực của bố cục của bạn.