Làm cách nào để hiển thị HTML trong bộ điều khiển Laravel?

Blade là một công cụ tạo khuôn mẫu rất mạnh được cung cấp cùng với Laravel, không hạn chế người dùng sử dụng mã PHP đơn giản trong chế độ xem của họ

Các tệp xem dạng phiến sử dụng. lưỡi. php và thường được lưu trữ trong thư mục tài nguyên/lượt xem

Trong hướng dẫn này, bạn sẽ học cách hiển thị HTML trong Blade với Laravel 8

điều kiện tiên quyết

Nếu bạn chưa cài đặt và chạy ứng dụng Laravel, tôi khuyên bạn nên sử dụng DigitialOcean Ubuntu Droplet. Bạn có thể sử dụng mã liên kết của tôi để nhận khoản tín dụng DigitalOcean trị giá 100 đô la miễn phí để khởi động máy chủ của riêng bạn

Nếu bạn chưa có, bạn có thể làm theo các bước từ hướng dẫn này về cách thực hiện điều đó

• Cách cài đặt Laravel trên DigitalOcean với 1 cú nhấp chuột

Hoặc bạn có thể sử dụng tập lệnh tuyệt vời này để thực hiện cài đặt

• larabuồm

Hiển thị HTML trong Laravel Blade Views

Trước tiên, bạn cần đảm bảo rằng tệp của mình sử dụng phần mở rộng tệp .blade.php và nằm trong thư mục resources/views. Nó sẽ trông giống như thế này

🤩 Nhà tài trợ tuyệt vời của chúng tôi 👇

Xem trang web

DigitalOcean cung cấp giải pháp lưu trữ đám mây đơn giản và đáng tin cậy cho phép các nhà phát triển nhanh chóng thiết lập và chạy trang web hoặc ứng dụng của họ

Xem trang web

Bảng công việc chính thức của Laravel. Tìm các nhà phát triển Laravel giỏi nhất và tài năng nhất bằng cách đăng công việc của bạn trên bảng việc làm chính thức của Laravel

Xem trang web

Tìm hiểu cách viết mã chuỗi khối của riêng bạn và tạo tiền điện tử của riêng bạn với nền tảng đào tạo trực tuyến thú vị và tương tác CoinCap. Tìm hiểu thêm về chương trình tài trợ DevDojo và xem biểu trưng của bạn tại đây để đưa thương hiệu của bạn đến với hàng nghìn nhà phát triển.

Theo mặc định, bạn sẽ sử dụng cú pháp sau {{ $some_variable }} để lặp lại nội dung của một biến cụ thể trong Blade. Theo mặc định, {{ }} thoát khỏi các thẻ HTML

Vì vậy, giả sử rằng bạn có một bài đăng trên blog với bộ sưu tập $post có một số thành phần HTML trong thuộc tính body, nếu bạn sử dụng như sau

<div>{{ $post->body }}div>

Tất cả các thẻ HTML sẽ không được hiển thị dưới dạng HTML mà là văn bản thuần túy

Nếu bạn không muốn các thẻ HTML của mình bị thoát thì bạn nên sử dụng {!! !!} như thế này

<div>{!! $post->body !!}div>

đầu ra

Nếu bạn in ra cả hai và kiểm tra nguồn trang, bạn sẽ thấy đầu ra sau

<h1>Hello DevDojo</h1>
<h1>Hello DevDojoh1>

Trong trường hợp đầu tiên, bạn có thể thấy các phần tử HTML đã được thoát như thế nào và trong trường hợp thứ hai khi chúng tôi sử dụng {!! !!}, chúng tôi đã nhận được các thẻ HTML thực tế

Sẽ an toàn hơn khi sử dụng {{ }} vì nó sẽ loại bỏ bất kỳ thẻ không mong muốn nào, nhưng vẫn có những lúc bạn có thể cần sử dụng {!! !!}

Tất nhiên, việc trả lại toàn bộ chuỗi tài liệu HTML trực tiếp từ các tuyến đường và bộ điều khiển của bạn là không thực tế. Rất may, chế độ xem cung cấp một cách thuận tiện để đặt tất cả HTML của chúng tôi vào các tệp riêng biệt

Chế độ xem tách logic bộ điều khiển/ứng dụng của bạn khỏi logic trình bày của bạn và được lưu trữ trong thư mục

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

5. Khi sử dụng Laravel, các mẫu xem thường được viết bằng ngôn ngữ tạo khuôn mẫu Blade. Một cái nhìn đơn giản có thể trông giống như thế này

Vì chế độ xem này được lưu trữ tại

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

6, nên chúng tôi có thể trả lại nó bằng cách sử dụng trình trợ giúp toàn cầu

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

7 như vậy

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

Ghi chú
Tìm kiếm thêm thông tin về cách viết các mẫu Blade?

Viết lượt xem trong React / Vue

Thay vì viết các mẫu giao diện người dùng của họ bằng PHP thông qua Blade, nhiều nhà phát triển đã bắt đầu thích viết các mẫu của họ bằng React hoặc Vue. Laravel làm cho điều này trở nên dễ dàng nhờ vào Inertia, một thư viện giúp bạn dễ dàng kết nối giao diện người dùng React / Vue của bạn với phần phụ trợ Laravel của bạn mà không gặp phải sự phức tạp điển hình của việc xây dựng một SPA

Bộ khởi động Breeze và Jetstream của chúng tôi cung cấp cho bạn một điểm khởi đầu tuyệt vời cho ứng dụng Laravel tiếp theo của bạn được hỗ trợ bởi Inertia. Ngoài ra, Laravel Bootcamp cung cấp một minh họa đầy đủ về việc xây dựng một ứng dụng Laravel được hỗ trợ bởi Inertia, bao gồm các ví dụ trong Vue và React

Tạo và hiển thị chế độ xem

Bạn có thể tạo chế độ xem bằng cách đặt một tệp có phần mở rộng

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

8 trong thư mục

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

5 của ứng dụng của bạn. Tiện ích mở rộng

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

8 thông báo cho khung rằng tệp chứa mẫu Blade. Các mẫu Blade chứa HTML cũng như các chỉ thị Blade cho phép bạn dễ dàng lặp lại các giá trị, tạo các câu lệnh "nếu", lặp lại dữ liệu, v.v.

Khi bạn đã tạo chế độ xem, bạn có thể trả lại chế độ xem đó từ một trong các tuyến hoặc bộ điều khiển của ứng dụng bằng cách sử dụng trình trợ giúp

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

7 toàn cầu

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

Lượt xem cũng có thể được trả lại bằng cách sử dụng mặt tiền

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

2

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

Như bạn có thể thấy, đối số đầu tiên được chuyển đến trình trợ giúp

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

7 tương ứng với tên của tệp xem trong thư mục

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

5. Đối số thứ hai là một mảng dữ liệu sẽ được cung cấp cho chế độ xem. Trong trường hợp này, chúng tôi đang chuyển biến

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

5, được hiển thị trong chế độ xem bằng cú pháp Blade

Thư mục xem lồng nhau

Lượt xem cũng có thể được lồng trong các thư mục con của thư mục

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

5. Ký hiệu "Dấu chấm" có thể được sử dụng để tham chiếu các chế độ xem lồng nhau. Ví dụ: nếu chế độ xem của bạn được lưu trữ tại

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

7, bạn có thể trả lại chế độ xem đó từ một trong các tuyến/bộ điều khiển của ứng dụng của mình như vậy

return view('admin.profile', $data);

Cảnh báo
Xem tên thư mục không được chứa ký tự

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

8

Tạo Chế độ xem có sẵn đầu tiên

Sử dụng phương pháp

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

0 của mặt tiền

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

2, bạn có thể tạo chế độ xem đầu tiên tồn tại trong một mảng chế độ xem nhất định. Điều này có thể hữu ích nếu ứng dụng hoặc gói của bạn cho phép chế độ xem được tùy chỉnh hoặc ghi đè

use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);

Xác định xem có tồn tại chế độ xem không

Nếu bạn cần xác định xem có tồn tại chế độ xem hay không, bạn có thể sử dụng mặt tiền

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

2. Phương thức

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

2 sẽ trả về

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

3 nếu chế độ xem tồn tại

use Illuminate\Support\Facades\View;
if (View::exists('emails.customer')) {

Truyền dữ liệu cho lượt xem

Như bạn đã thấy trong các ví dụ trước, bạn có thể chuyển một mảng dữ liệu tới dạng xem để cung cấp dữ liệu đó cho dạng xem

return view('greetings', ['name' => 'Victoria']);

Khi truyền thông tin theo cách này, dữ liệu phải là một mảng với các cặp khóa/giá trị. Sau khi cung cấp dữ liệu cho một chế độ xem, bạn có thể truy cập từng giá trị trong chế độ xem của mình bằng cách sử dụng các khóa của dữ liệu, chẳng hạn như

Để thay thế cho việc chuyển một mảng dữ liệu hoàn chỉnh đến hàm trợ giúp

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

7, bạn có thể sử dụng phương thức

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

5 để thêm các phần dữ liệu riêng lẻ vào dạng xem. Phương thức

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

5 trả về một thể hiện của đối tượng dạng xem để bạn có thể tiếp tục xâu chuỗi các phương thức trước khi trả lại dạng xem

            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

Chia sẻ dữ liệu với tất cả các chế độ xem

Đôi khi, bạn có thể cần chia sẻ dữ liệu với tất cả các chế độ xem được hiển thị bởi ứng dụng của bạn. Bạn có thể làm như vậy bằng cách sử dụng phương thức

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

8 của mặt tiền

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

2. Thông thường, bạn nên thực hiện cuộc gọi đến phương thức

use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);

8 trong phương thức

return view('admin.profile', $data);

0 của nhà cung cấp dịch vụ. Bạn có thể tự do thêm chúng vào lớp

return view('admin.profile', $data);

1 hoặc tạo một nhà cung cấp dịch vụ riêng để chứa chúng

use Illuminate\Support\Facades\View;
class AppServiceProvider extends ServiceProvider
     * Register any application services.
     * Bootstrap any application services.
        View::share('key', 'value');

Xem nhà soạn nhạc

Trình tổng hợp chế độ xem là các cuộc gọi lại hoặc phương thức lớp được gọi khi chế độ xem được hiển thị. Nếu bạn có dữ liệu mà bạn muốn liên kết với một chế độ xem mỗi khi chế độ xem đó được hiển thị, trình tổng hợp chế độ xem có thể giúp bạn sắp xếp logic đó vào một vị trí duy nhất. Chế độ xem có thể đặc biệt hữu ích nếu cùng một chế độ xem được trả về bởi nhiều tuyến hoặc bộ điều khiển trong ứng dụng của bạn và luôn cần một phần dữ liệu cụ thể

Thông thường, trình soạn thảo chế độ xem sẽ được đăng ký trong một trong các nhà cung cấp dịch vụ của ứng dụng của bạn. Trong ví dụ này, chúng tôi sẽ giả sử rằng chúng tôi đã tạo một

return view('admin.profile', $data);

2 mới để chứa logic này

Chúng tôi sẽ sử dụng phương pháp

return view('admin.profile', $data);

4 của mặt tiền

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

2 để đăng ký trình soạn thảo chế độ xem. Laravel không bao gồm một thư mục mặc định cho các trình soạn thảo chế độ xem dựa trên lớp, vì vậy bạn có thể tự do sắp xếp chúng theo cách bạn muốn. Ví dụ: bạn có thể tạo một thư mục

return view('admin.profile', $data);

5 để chứa tất cả các trình soạn thảo chế độ xem ứng dụng của bạn

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

0

Cảnh báo
Hãy nhớ rằng, nếu bạn tạo một nhà cung cấp dịch vụ mới để chứa đăng ký trình soạn thảo chế độ xem của mình, bạn sẽ cần thêm nhà cung cấp dịch vụ vào mảng

return view('admin.profile', $data);

6 trong tệp cấu hình

return view('admin.profile', $data);

7

Bây giờ chúng ta đã đăng ký nhà soạn nhạc, phương thức

return view('admin.profile', $data);

8 của lớp

return view('admin.profile', $data);

9 sẽ được thực thi mỗi khi chế độ xem

use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);

0 được hiển thị. Hãy xem một ví dụ về lớp nhà soạn nhạc

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

1

Như bạn có thể thấy, tất cả các trình soạn thảo chế độ xem được giải quyết thông qua bộ chứa dịch vụ, vì vậy bạn có thể nhập gợi ý bất kỳ phụ thuộc nào bạn cần trong hàm tạo của trình soạn thảo

Đính kèm một nhà soạn nhạc vào nhiều chế độ xem

Bạn có thể đính kèm một trình tổng hợp chế độ xem vào nhiều chế độ xem cùng một lúc bằng cách chuyển một mảng chế độ xem làm đối số đầu tiên cho phương thức

return view('admin.profile', $data);

4

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

2

Phương thức

return view('admin.profile', $data);

4 cũng chấp nhận ký tự

use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);

3 làm ký tự đại diện, cho phép bạn đính kèm một nhà soạn nhạc vào tất cả các chế độ xem

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

3

Xem người sáng tạo

Chế độ xem "người sáng tạo" rất giống với chế độ xem nhà soạn nhạc; . Để đăng ký người tạo chế độ xem, hãy sử dụng phương thức

use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);

4

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

4

Tối ưu hóa Chế độ xem

Theo mặc định, các chế độ xem mẫu Blade được biên dịch theo yêu cầu. Khi một yêu cầu được thực hiện để hiển thị một chế độ xem, Laravel sẽ xác định xem có tồn tại phiên bản đã biên dịch của chế độ xem hay không. Nếu tệp tồn tại, thì Laravel sẽ xác định xem chế độ xem chưa biên dịch có được sửa đổi gần đây hơn chế độ xem đã biên dịch hay không. Nếu chế độ xem đã biên dịch không tồn tại hoặc chế độ xem chưa biên dịch đã bị sửa đổi, Laravel sẽ biên dịch lại chế độ xem

Việc biên dịch các khung nhìn trong khi yêu cầu có thể có tác động tiêu cực nhỏ đến hiệu suất, vì vậy Laravel cung cấp lệnh Artisan

use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);

5 để biên dịch trước tất cả các khung nhìn được sử dụng bởi ứng dụng của bạn. Để tăng hiệu suất, bạn có thể muốn chạy lệnh này như một phần của quy trình triển khai của mình

Làm cách nào để hiển thị HTML trong bộ điều khiển laravel?

Làm cách nào để hiển thị tệp HTML trong laravel?

Làm cách nào để hiển thị HTML trong laravel?

Làm cách nào để thêm mã HTML vào laravel?