在實際開發中,除了 API 路由返回指定格式數據對象外,大部分 Web 路由返回的都是視圖,以便實現更加復雜的頁面交互,我們在前面已經看到過了視圖的定義方式:
return view('以.分隔的視圖模板路徑');
我們將在這篇教程中具體討論視圖實現技術。
視圖是 MVC 模式中的 View 部分,大部分視圖都應該是 HTML 格式文本,在 Laravel 中,支持三種格式的視圖文件解析:CSS 文件,原生 PHP 和 Blade 模板。從文件名擴展就可以區分它們,CSS 文件后綴是 .css
,通過文件引擎解析,原生 PHP 文件后綴是 .php
,通過 PHP 引擎解析,Blade 模板文件后綴是 .blade.php
,通過 Blade 引擎解析(底層實現邏輯可參考 vendor/laravel/framework/src/Illuminate/View/ViewServiceProvider.php
中的 registerEngineResolver
方法)。
Laravel 在解析視圖時是通過實時解析文件后綴名再調用相應的引擎進行處理的,視圖文件位於 resources/views
目錄下,對於多級子目錄以「.」號分隔,並且引用時不帶文件后綴名。我們可以定義三個路由進行簡單的測試:
// php Route::get('user/{id?}', function ($id = 1) { return view('user.profile', ['id' => $id]); })->name('user.profile'); // blade Route::get('page/{id}', function ($id) { return view('page.show', ['id' => $id]); })->where('id', '[0-9]+'); // css Route::get('page/css', function () { return view('page.style'); });
然后在 resources/views
目錄下創建 user/profile.php
文件:
用戶ID: <?php echo $id;?>
在 resources/views
目錄下創建 page/show.blade.php
文件:
頁面ID: {{ $id }}
最后在 resources/views
目錄下創建 page/style.css
文件:
body { background: gray; }
當我們按照路由在瀏覽器中查看返回視圖時,都可以正常解析。在實際開發過程中,我們大多會使用 Blade 模板,因為其提供了豐富的語法從而簡化了視圖文件的編寫。
視圖返回與參數傳遞
Laravel 提供了多個語法糖在路由中返回視圖,如輔助函數 view
或 View::make
方法,還可以注入 Illuminate\View\View Factory
類(最底層實現),通常我們使用輔助函數 view
,因為最簡潔:
// 使用 view 輔助函數 Route::get('/', function () { // 該函數會在 resources/views 目錄下查找 home.blade.php 或 home.php 視圖文件, // 加載文件內容並解析 PHP 變量或語句,然后傳遞給響應,最終呈現給用戶 return view('home'); });
如果要傳遞數據給視圖,可以這么做(多個數據以數組方式傳遞),這樣就可以將 tasks
數據變量傳遞到視圖以便在視圖中進行引用:
return view('home')->with('tasks', Task::all());
還可以這么做:
return view('home', ['tasks' => Task:all()]);
推薦使用后者,因為簡單。
在視圖間共享變量
有時候在不同視圖間傳遞同一個數據變量很麻煩,是否可以做到一次定義,多處使用呢?答案是可以,通過視圖對象提供的 share
方法即可實現,我們可以在某個服務提供者如 AppServiceProvider
的 boot
方法中定義共享的視圖變量:
view()->share('siteName', 'Laravel學院'); view()->share('siteUrl', 'https://laravelacademy.org');
然后就可以在各個視圖中使用 $siteName
和 $siteUrl
這兩個變量了(其它變量定義方式類似),而無需每次傳遞這個數據變量,比如我們在不修改路由定義的前提下修改上述 resources/views/page/show.blade.php
文件:
頁面ID: {{ $id }} <hr> By <a href="{{ $siteUrl }}">{{ $siteName }}</a>
這樣,在瀏覽器中訪問 http://blog.test/page/111
,就能看到如下輸出了:
對於那些位於頁頭、頁尾、面包屑或導航條中的數據變量,使用共享變量的方式定義將會很方便。
注:更多關於視圖的使用可以參考官方文檔