Mục tiêu chính của mô hình MVC là sự tách biệt giữa logic ứng dụng và logic trình bày, Laravel cũng vậy nó không muốn ở trong các chế độ xem có các câu truy vấn hoặc các mã không liên quan đến chế độ xem và không muốn các Bộ điều khiển, Mô hình quan tâm . Tuy nhiên view cũng cần một số cú pháp đơn giản để đưa các logic vào trong nó, chính vì thế Laravel Blade ra đời. Blade rất đơn giản nhưng là một bộ máy tạo các mẫu web rất mạnh mẽ, không giống như các bộ máy tạo mẫu khác của PHP, Blade không giới hạn chế độ bạn sử dụng các mã PHP thuần túy trong chế độ xem. Trong thực tế, tất cả các chế độ xem Blade đều được biên dịch thành mã PHP thuần túy và được lưu vào bộ đệm cho đến khi chúng thay đổi. File Blade view has extension extension. lưỡi. php và thông thường được lưu trong thư mục tài nguyên/lượt xem

Kế thừa một mẫu

Các lợi ích của Laravel Blade là mẫu kế thừa và phần tính năng, để bắt đầu chúng ta xem một ví dụ đơn giản sau. Tạo một thư mục bố cục trong thư mục tài nguyên/lượt xem để chứa các mẫu, tiếp theo chúng ta tạo một chế độ xem phiến trong bố cục với tên mặc định. lưỡi. php (tài nguyên/lượt xem/bố cục/mặc định. lưỡi. php) có nội dung như sau

    
        
    
    

        @section('sidebar')
            Phần chính trong sidebar.
        @show

        

            @yield('content')
        

    

Chúng ta có thể thấy mẫu này chứa các mã HTML, có thể chèn CSS, ngoài ra nó có các lệnh khá lạ @yield, @section. @section định nghĩa phần nội dung còn @yield sử dụng để hiển thị nội dung mà phần bị thu hồi. Các chế độ xem sẽ kế thừa mẫu lưỡi cắt này bằng cách sử dụng lệnh @extends. Tạo một view có tên first-blade-example nằm trong fontend (resources/views/fontend/first-blade-example. lưỡi. php) với nội dung

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Ok, giờ chúng ta tạo route cho ví dụ đầu tiên về mẫu lưỡi kiếm

Route::get('first-blade-example', function(){
  return view('fontend.first-blade-example');
});

Time them we run http. // ấu trùng. dev/ví dụ lưỡi kiếm đầu tiên

Chúng ta sẽ đi vào chi tiết, ví dụ đầu lưỡi. lưỡi. php kế thừa lại mẫu mặc định nằm trong bố cục thư mục bằng lệnh extends('layouts. mặc định'). @yield section in Blade template default will get value in section @section of view kế thừa để hiển thị. Chúng ta thấy khá thú vị phải không? . MẠNG LƯỚI. Như vậy trong phần blade template mặc định chúng ta có thể đưa vào sẵn các vùng hiển thị mà trang nào trong website cũng có

Chúng ta tiếp tục đến ví dụ thứ 2. Chúng ta thấy các trang trong trang web đều có menu phần, vì vậy chúng ta sẽ định nghĩa phần menu trong mẫu blade mặc định (tài nguyên/lượt xem/bố cục/mặc định. lưỡi. php)

    
        
    
    
        

            

                
Trang chủ
                
Ví dụ
                
Liên hệ 
            
    
        

        @section('sidebar')
            Phần chính trong sidebar.
        @show

        

            @yield('content')
        
    

Time on back http. // ấu trùng. dev/first-blade-template

Menu phần trong Blade template default đã được kế thừa sang view first-blade-template. Giờ đây, bất kỳ trang mới nào chúng ta chỉ cần thiết kế thừa lại Blade template default is có sẵn phần menu

Component and Slot trong Laravel Blade - tính năng mới trong Laravel 5. 4

Thành phần và khe trả lại những lợi ích như phần, bố cục, tuy nhiên thành phần có thể sử dụng lại được. Ví dụ sau đây sẽ chứng minh điều đó. Tạo route trong routes/web. php

Route::get('components', function () {
    return view('fontend.component-example');
});

Chúng ta sẽ thêm thư viện css Bootstrap vào mẫu mặc định của Blade giúp giao diện phản hồi nhanh (tương thích với nhiều thiết bị) và thiết kế giao diện nhanh chóng. Thay đổi nội dung resource/views/layouts/default. lưỡi. php as after

    
    
    
    
    
    
    

    

    
    

    
    

    
    



    

    
    

        

            
Môi trường test Laravel cho website allaravel.com
        
        

            @section('sidebar')
                Phần chính trong sidebar.
            @show
            @yield('content')
        
    

    

    
    
    

    
    

Blade template default đã được style lại theo cách của Bootstrap, xem Bootstrap template cơ bản để hiểu rõ hơn. Xem lại giao diện xem thế nào http. // ấu trùng. dev/ví dụ lưỡi kiếm đầu tiên

Hehe, nhìn giao diện trong đỡ trượt hơn rồi, chúng ta tiếp tục với ví dụ về component và slot trong Laravel. Tạo cảnh báo mẫu lưỡi cắt trong tài nguyên/lượt xem/bố cục/cảnh báo. lưỡi. php with content

    
{{ $title }}
    {{ $message }}

Chúng ta bổ sung thêm phần thiết kế thông báo cho blade template default (resources/views/layouts/default. lưỡi. php)

    

        
Môi trường test Laravel cho website allaravel.com
    
    

        
        @component('layouts.alert') 

            @slot('class')
                alert-danger
            @endslot

            @slot('title')
                Something is wrong
            @endslot

            @slot('message')
                Test thử message lỗi
            @endslot
            Phần message phụ
        @endcomponent

        
        @component('layouts.alert') 

            @slot('class')
                alert-success
            @endslot

            @slot('title')
                Success
            @endslot

            @slot('message')
                Test thử message thành công
            @endslot

            Phần message phụ
        @endcomponent
    
    

        @section('sidebar')
            Phần chính trong sidebar.
        @show
        @yield('content')
    

@component sẽ gọi đến các thành phần và @slot sẽ truyền giá trị cho các thành phần đó

Hiển thị giá trị một biến trong mẫu Blade

Trong các ví dụ từ đầu đến giờ, rất nhiều lần chúng ta sử dụng {{ $value }} và đây chính là cách biến giá trị $value ra trong một mẫu lưỡi dao

Nếu biến $name chưa được khởi tạo ứng dụng sẽ báo lỗi, chúng ta có thể kiểm tra trước biến $name và mặc định cho nó một giá trị nếu biến này chưa được khởi tạo.

Hello, my name is {{ isset($name) ? $name : 'All Laravel' }}.

Nếu biến $name chưa khởi tạo, chúng ta sẽ nhận được kết quả là "Xin chào, tên tôi là Tất cả Laravel". Thay vì viết lệnh kiểu PHP thuần túy, Laravel cho phép viết mã nhanh hơn như sau

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Mặc định, câu lệnh {{ }} của Blade sẽ được tự động gửi vào lệnh htmlspecialchars của PHP, để ngăn chặn các cuộc tấn công kiểu XSS. Muốn nội dung ra không bị chuyển đổi chúng ta sử dụng cú pháp

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Ví dụ. trong các phần được sử dụng để bình luận, để trong nội dung bình luận, chúng ta nên sử dụng {{ $comment }} vì trong nội dung bình luận có thể chứa các đoạn mã mà khi ở kiểu {. $bình luận. } sẽ ảnh hưởng đến nội dung trang web. Chúng ta cùng thực hiện. Để dành nội dung cho phần thực thi, blade template default sẽ được sửa đổi một chút, loại bỏ những phần không quan trọng

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Tạo route trong routes/web. php

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Create new view name second-blade-example. lưỡi. php trong thư mục tài nguyên/lượt xem/phông chữ với nội dung

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Ok, time try access to http. // ấu trùng. dev/second-blade-example

Giờ chúng ta đã biết sự khác biệt giữa {{ $comment }} và {. $bình luận. }, do đó khi các nội dung do người dùng đưa vào chúng ta nên sử dụng {{ $comment }} còn những nội dung chúng ta kiểm soát được thì sử dụng {. $bình luận. }. Nếu kẻ xấu cố tình chèn vào nội dung nhận xét một đường dẫn đến tệp javascript và trong tệp đó có mã điều hướng trang, trang web của bạn sẽ được điều hướng sang các trang với mục đích xấu

Sử dụng cú pháp Blade khi tích hợp các framework Javascript

Rất nhiều khung Javascript cũng sử dụng {{ }} để đánh giá các biến, do đó khi tích hợp một khung Javascript vào dự án mà trong mã có các đoạn {{ value }} của Javascript thì nó sẽ không hoạt động . Để giải quyết vấn đề này, bạn sử dụng @, nó sẽ thông báo với Laravel rằng bỏ qua mà không xử lý {{ value }}

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Nếu bạn có rất nhiều đoạn trong biến trong Javascript mà sử dụng @ thì mất thời gian do phải điền toàn bộ @ cho các đoạn {{ value }}, một giải pháp mà Laravel đưa ra là đưa cả đoạn có các lệnh vào trong Javascript

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Nếu không có lệnh @verbatim và @endverbatim thì bạn phải viết như sau

@extends('layouts.default')

@section('title', 'Ví dụ đầu tiên về Blade template')

@section('sidebar')
    @parent

    
Phần phụ của sidebar.
@endsection

@section('content')
    
Phần nội dung chính của trang ở đây.
@endsection

Nếu mà có hàng trăm đoạn {{ value }} thì cũng mệt tay đấy nhỉ, Laravel cho thấy là framework PHP tuyệt vời, nó gần như nắm bắt được hết các khó khăn của lập trình viên

Lời kết

Laravel Blade giúp chúng ta mô-đun hóa trong thiết kế giao diện một cách rất khoa học, quản lý và tạo giao diện mới rất đơn giản và hiệu quả. Cách đây vài năm khi tìm hiểu về Laravel Blade, tôi cũng phải ngạc nhiên hết cỡ vì Laravel đã đến để lập trình những khái niệm cực kỳ đơn giản nhưng lại tạo ra những sản phẩm cực phức tạp. Laravel Blade còn rất nhiều vấn đề và chúng tôi hẹn gặp lại bạn ở phần 2