Laravel Blade - công cụ tạo framework PHP nhanh chóng

20/04/2023 01:24

Blade là công cụ tạo khuôn mẫu đơn giản nhưng mạnh mẽ đi kèm với Laravel. Không giống như một số công cụ tạo khuôn mẫu PHP, Blade không hạn chế bạn sử dụng mã PHP đơn giản trong các mẫu của mình. Trên thực tế, tất cả các mẫu Blade được biên dịch thành mã PHP đơn giản và được lưu vào bộ nhớ cache cho đến khi chúng được sửa đổi, nghĩa là Blade về cơ bản không thêm chi phí vào ứng dụng của bạn. Các tệp mẫu phiến sử dụng phần .blade.phpmở rộng tệp và thường được lưu trữ trong resources/viewsthư mục.

Chế độ xem phiến có thể được trả về từ các tuyến hoặc bộ điều khiển bằng trình viewtrợ giúp chung. Tất nhiên, như đã đề cập trong tài liệu về lượt xem , dữ liệu có thể được chuyển đến dạng xem Blade bằng cách sử dụng viewđối số thứ hai của trình trợ giúp:

Route::get('/', function () {
return view('greeting', ['name' => 'Finn']);
});

Livewire

Bạn muốn đưa các mẫu Blade của mình lên một tầm cao mới và dễ dàng xây dựng các giao diện động? Kiểm tra Laravel Livewire . Livewire cho phép bạn viết các thành phần Blade được tăng cường chức năng động thường chỉ có thể thực hiện được thông qua các khung giao diện người dùng như React hoặc Vue, cung cấp một cách tiếp cận tuyệt vời để xây dựng các giao diện người dùng phản ứng, hiện đại mà không có sự phức tạp, kết xuất phía máy khách hoặc các bước xây dựng của nhiều khung JavaScript.

Hiển thị dữ liệu

Bạn có thể hiển thị dữ liệu được chuyển đến chế độ xem Blade của mình bằng cách gói biến trong dấu ngoặc nhọn. Ví dụ: đưa ra tuyến đường sau:

Route::get('/', function () {
return view('welcome', ['name' => 'Samantha']);
});

Bạn có thể hiển thị nội dung của namebiến như sau:

Hello, {{ $name }}.

Bạn không bị giới hạn trong việc hiển thị nội dung của các biến được truyền cho dạng xem. Bạn cũng có thể lặp lại kết quả của bất kỳ hàm PHP nào. Trên thực tế, bạn có thể đặt bất kỳ mã PHP nào bạn muốn bên trong câu lệnh Blade echo:

The current UNIX timestamp is {{ time() }}.

Mã hóa thực thể HTML

Theo mặc định, Blade (và Laravel ehelper) sẽ mã hóa kép các thực thể HTML. Nếu bạn muốn tắt mã hóa kép, hãy gọi Blade::withoutDoubleEncodingphương thức từ bootphương thức của bạn AppServiceProvider:

<?php


namespace App\Providers;


use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;


class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::withoutDoubleEncoding();
}
}

Hiển thị dữ liệu chưa thoát

Theo mặc định, {{ }}các câu lệnh Blade được tự động gửi qua htmlspecialcharschức năng của PHP để ngăn chặn các cuộc tấn công XSS. Nếu bạn không muốn thoát dữ liệu của mình, bạn có thể sử dụng cú pháp sau:

Hello, {!! $name !!}.

Khung Blade & JavaScript

Vì nhiều khung JavaScript cũng sử dụng dấu ngoặc nhọn "xoăn" để biểu thị một biểu thức nhất định sẽ được hiển thị trong trình duyệt, nên bạn có thể sử dụng ký @hiệu để thông báo cho công cụ kết xuất Blade rằng một biểu thức sẽ không bị ảnh hưởng. Ví dụ:

<h1>Laravel</h1>


Hello, @{{ name }}.

Trong ví dụ này, @biểu tượng sẽ bị xóa bởi Blade; tuy nhiên, {{ name }}biểu thức sẽ không bị ảnh hưởng bởi công cụ Blade, cho phép nó được hiển thị bởi khung JavaScript của bạn.

Biểu @tượng cũng có thể được sử dụng để thoát khỏi các chỉ thị của Blade:

{{-- Blade template --}}
@@if()


<!-- HTML output -->
@if()

Kết xuất JSON

Đôi khi, bạn có thể chuyển một mảng vào chế độ xem của mình với ý định hiển thị mảng đó dưới dạng JSON để khởi tạo một biến JavaScript. Ví dụ:

<script>
var app = <?php echo json_encode($array); ?>;
</script>

Tuy nhiên, thay vì gọi thủ công json_encode, bạn có thể sử dụng Illuminate\Support\Js::fromchỉ thị phương thức. Phương fromthức chấp nhận các đối số giống như json_encodechức năng của PHP; tuy nhiên, nó sẽ đảm bảo rằng JSON kết quả được thoát đúng cách để đưa vào trong các trích dẫn HTML. Phương thức này fromsẽ trả về một JSON.parsecâu lệnh JavaScript chuỗi sẽ chuyển đổi đối tượng hoặc mảng đã cho thành một đối tượng JavaScript hợp lệ:

<script>
var app = {{ Illuminate\Support\Js::from($array) }};
</script>

Các phiên bản mới nhất của khung ứng dụng Laravel bao gồm một Jsmặt tiền, cung cấp khả năng truy cập thuận tiện vào chức năng này trong các mẫu Blade của bạn:

var app = {{ Js::from($array) }};

</script>

Chỉ `@verbatim`thị

Nếu bạn đang hiển thị các biến JavaScript trong một phần lớn mẫu của mình, bạn có thể bọc HTML trong lệnh @verbatimđể bạn không phải thêm ký @hiệu vào trước mỗi câu lệnh Blade echo:

@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim

Chỉ thị lưỡi dao

Ngoài kế thừa mẫu và hiển thị dữ liệu, Blade còn cung cấp các phím tắt thuận tiện cho các cấu trúc điều khiển PHP phổ biến, chẳng hạn như câu lệnh điều kiện và vòng lặp. Các phím tắt này cung cấp một cách làm việc rất rõ ràng, ngắn gọn với các cấu trúc điều khiển PHP trong khi vẫn quen thuộc với các đối tác PHP của chúng.

câu lệnh if

Bạn có thể xây dựng ifcác câu lệnh bằng cách sử dụng các lệnh @if, @elseif, @elsevà @endif. Các lệnh này hoạt động giống hệt với các đối tác PHP của chúng:

@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif

Để thuận tiện, Blade cũng cung cấp một @unlesschỉ thị:

@unless (Auth::check())
You are not signed in.
@endunless

Ngoài các lệnh có điều kiện đã được thảo luận, các lệnh @issetvà @emptycó thể được sử dụng làm lối tắt thuận tiện cho các hàm PHP tương ứng của chúng:

@isset($records)
// $records is defined and is not null...
@endisset


@empty($records)
// $records is "empty"...
@endempty

Chỉ thị xác thực

Lệnh @authand @guestcó thể được sử dụng để nhanh chóng xác định xem người dùng hiện tại có được xác thực hay là khách:

@auth
// The user is authenticated...
@endauth


@guest
// The user is not authenticated...
@endguest

Nếu cần, bạn có thể chỉ định trình bảo vệ xác thực cần được kiểm tra khi sử dụng lệnh @authvà @guest:

Chỉ thị môi trường

Bạn có thể kiểm tra xem ứng dụng có đang chạy trong môi trường sản xuất hay không bằng @productionlệnh:

@production

@auth('admin')
// The user is authenticated...
@endauth


@guest('admin')
// The user is not authenticated...
@endguest

// Production specific content...

@endproduction

Hoặc, bạn có thể xác định xem ứng dụng có đang chạy trong một môi trường cụ thể hay không bằng @envlệnh:

@env('staging')

// The application is running in "staging"...

@endenv

@env(['staging', 'production'])

// The application is running in "staging" or "production"...

@endenv

Phần Chỉ thị

Bạn có thể xác định xem phần kế thừa mẫu có nội dung hay không bằng cách sử dụng @hasSectionlệnh:

@hasSection('navigation')

@yield('navigation')

</div>

@endif

Bạn có thể sử dụng sectionMissinglệnh để xác định xem một phần không có nội dung:

@sectionMissing('navigation')

@include('default-navigation')

</div>

@endif

Báo cáo chuyển đổi

Các câu lệnh chuyển đổi có thể được xây dựng bằng cách sử dụng các lệnh @switch, @case, @breakvà :@default@endswitch

@switch($i)

@case(1)

First case...

@break

@case(2)

Second case...

@break

@default

Default case...

@endswitch

vòng lặp

Ngoài các câu lệnh có điều kiện, Blade cung cấp các lệnh đơn giản để làm việc với các cấu trúc vòng lặp của PHP. Một lần nữa, mỗi chỉ thị này hoạt động giống hệt với các đối tác PHP của chúng:

@for ($i = 0; $i < 10; $i++)

The current value is {{ $i }}

@endfor

@foreach ($users as $user)

@endforeach

@forelse ($users as $user)

@empty

<p>No users</p>

@endforelse

@while (true)

<p>I'm looping forever.</p>

@endwhile

Khi sử dụng các vòng lặp, bạn cũng có thể bỏ qua bước lặp hiện tại hoặc kết thúc vòng lặp bằng lệnh @continuevà @break:

@foreach ($users as $user)

@if ($user->type == 1)

@continue

@endif

@if ($user->number == 5)

@break

@endif

@endforeach

Bạn cũng có thể bao gồm điều kiện tiếp tục hoặc ngắt trong phần khai báo chỉ thị:

@foreach ($users as $user)

@continue($user->type == 1)

@break($user->number == 5)

@endforeach

Biến vòng lặp

Trong khi lặp qua một foreachvòng lặp, một $loopbiến sẽ có sẵn bên trong vòng lặp của bạn. Biến này cung cấp quyền truy cập vào một số bit thông tin hữu ích, chẳng hạn như chỉ mục vòng lặp hiện tại và đây là lần lặp đầu tiên hay cuối cùng của vòng lặp:

@foreach ($users as $user)

@if ($loop->first)

This is the first iteration.

@endif

@if ($loop->last)

This is the last iteration.

@endif

@endforeach

$loopNếu bạn đang ở trong vòng lặp lồng nhau, bạn có thể truy cập biến của vòng lặp cha thông qua parentthuộc tính:

@foreach ($users as $user)

@foreach ($user->posts as $post)

@if ($loop->parent->first)

This is the first iteration of the parent loop.

@endif

@endforeach

Biến này $loopcũng chứa nhiều thuộc tính hữu ích khác:

Tài sản	Sự miêu tả
`$loop->index`	Chỉ số của vòng lặp hiện tại (bắt đầu từ 0).
`$loop->iteration`	Vòng lặp hiện tại (bắt đầu từ 1).
`$loop->remaining`	Các lần lặp còn lại trong vòng lặp.
`$loop->count`	Tổng số mục trong mảng được lặp lại.
`$loop->first`	Cho dù đây là lần lặp đầu tiên thông qua vòng lặp.
`$loop->last`	Cho dù đây là lần lặp cuối cùng thông qua vòng lặp.
`$loop->even`	Liệu đây có phải là một lần lặp chẵn thông qua vòng lặp hay không.
`$loop->odd`	Cho dù đây là một lần lặp lẻ thông qua vòng lặp.
`$loop->depth`	Mức lồng nhau của vòng lặp hiện tại.
`$loop->parent`	Khi ở trong vòng lặp lồng nhau, biến vòng lặp cha.

Các lớp & kiểu có điều kiện

Lệnh @classbiên dịch có điều kiện một chuỗi lớp CSS. Lệnh chấp nhận một mảng các lớp trong đó khóa mảng chứa lớp hoặc các lớp bạn muốn thêm vào, trong khi giá trị là một biểu thức boolean. Nếu phần tử mảng có một khóa số, nó sẽ luôn được đưa vào danh sách lớp được hiển thị:

@php

$isActive = false;

$hasError = true;

@endphp

<span @class([

'p-4',

'font-bold' => $isActive,

'text-gray-500' => ! $isActive,

'bg-red' => $hasError,

])></span>

Tương tự như vậy, @stylelệnh này có thể được sử dụng để thêm các kiểu CSS nội tuyến vào một phần tử HTML một cách có điều kiện:

@php

$isActive = true;

@endphp

<span @style([

'background-color: red',

'font-weight: bold' => $isActive,

])></span>

Thuộc tính bổ sung

Để thuận tiện, bạn có thể sử dụng @checkedlệnh này để dễ dàng cho biết liệu đầu vào hộp kiểm HTML đã cho có được "đánh dấu" hay không. Lệnh này sẽ lặp lại checkednếu điều kiện được cung cấp ước tính thành true:

<input type="checkbox"

name="active"

value="active"

@checked(old('active', $user->active)) />

Tương tự như vậy, @selectedlệnh có thể được sử dụng để cho biết liệu một tùy chọn đã chọn có nên được "chọn" hay không:

@foreach ($product->versions as $version)

</option>

@endforeach

</select>

Ngoài ra, @disabledlệnh này có thể được sử dụng để cho biết liệu một phần tử đã cho có nên bị "tắt" hay không:

<button type="submit" @disabled($errors->isNotEmpty())>Submit</button>

Ngoài ra, @readonlylệnh này có thể được sử dụng để cho biết liệu một phần tử đã cho có phải là "chỉ đọc" hay không:

<input type="email"

name="email"

value="email@laravel.com"

@readonly($user->isNotAdmin()) />

Ngoài ra, @requiredlệnh này có thể được sử dụng để cho biết liệu một phần tử nhất định có phải là "bắt buộc" hay không:

<input type="text"

name="title"

value="title"

@required($user->isAdmin()) />

Chỉ thị của Blade @includecho phép bạn bao gồm chế độ xem Blade từ bên trong chế độ xem khác. Tất cả các biến có sẵn cho chế độ xem chính sẽ được cung cấp cho chế độ xem được bao gồm:

<div>

@include('shared.errors')

<form>

</form>

</div>

Mặc dù chế độ xem được bao gồm sẽ kế thừa tất cả dữ liệu có sẵn trong chế độ xem chính, nhưng bạn cũng có thể chuyển một mảng dữ liệu bổ sung sẽ được cung cấp cho chế độ xem được bao gồm:

@include('view.name', ['status' => 'complete'])

Nếu bạn cố gắng xem @includemột chế độ xem không tồn tại, Laravel sẽ báo lỗi. Nếu bạn muốn bao gồm một chế độ xem có thể có hoặc không, bạn nên sử dụng lệnh @includeIf:

@includeIf('view.name', ['status' => 'complete'])

Nếu bạn muốn @includexem liệu một biểu thức boolean đã cho có giá trị là truehoặc hay không false, bạn có thể sử dụng lệnh @includeWhenvà @includeUnless:

@includeWhen($boolean, 'view.name', ['status' => 'complete'])

@includeUnless($boolean, 'view.name', ['status' => 'complete'])

Để bao gồm chế độ xem đầu tiên tồn tại từ một mảng chế độ xem nhất định, bạn có thể sử dụng lệnh includeFirst:

@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])

Tin tức cùng chủ đề