視圖 · laravel 5.4

<article><h1>Laravel 的視圖功能</h1><ul><li><a href="#creating-views">創建視圖</a></li><li><a href="#passing-data-to-views">傳遞數據到視圖</a><ul><li><a href="#sharing-data-with-all-views">共享數據給所有視圖</a></li></ul></li><li><a href="#view-composers">視圖合成器</a></li></ul><a name="creating-views"></a><h2><a href="#creating-views">創建視圖</a></h2>視圖的用途是用來存放應用程序中 HTML 內容，并且能夠將你的控制器層（或應用邏輯層）與展現層分開。視圖文件目錄為 <code class=" language-php">resources/views</code> ，示例視圖如下：<pre class=" language-php"><code class=" language-php"> <html> <body> <h1>Hello, {{ $name }}</h1> </body> </html></code></pre>上述視圖文件位置為 <code class=" language-php">resources/views/greeting.blade.php</code> ，我們可以通過全局函數 <code class=" language-php">view</code> 來使用這個視圖，如下：<pre class=" language-php"><code class=" language-php">Route::get('/', function () { return view('greeting', ['name' => 'James']); });</code></pre>如你所見，<code class=" language-php">view</code> 函數中，第一個參數是 <code class=" language-php">resources/views</code> 目錄中視圖文件的文件名，第二個參數是一個數組，數組中的數據可以直接在視圖文件中使用。在上面示例中，我們將 <code class=" language-php">name</code> 變量傳遞到了視圖中，并在視圖中使用 <a href="/docs/5.4/blade">Blade 模板語言</a> 打印出來。當然，視圖文件也可能存放在 <code class=" language-php">resources/views</code> 的子目錄中，你可以使用英文句點 <code class=" language-php">.</code> 來引用深層子目錄中的視圖文件。例如，一個視圖的位置為 <code class=" language-php">resources/views/admin/profile.blade.php</code> ，使用示例如下：<pre class=" language-php"><code class=" language-php">return view('admin.profile', $data);</code></pre><h4>判斷視圖文件是否存在</h4>如果需要判斷一個視圖文件是否存在，你可以使用 <code class=" language-php">View</code> Facade 上的 <code class=" language-php">exists</code> 方法來判定，如果視圖文件存在，則返回值為 <code class=" language-php">true</code> ：<pre class=" language-php"><code class=" language-php">use Illuminate\Support\Facades\View; if (View::exists('emails.customer')) { // }</code></pre><a name="passing-data-to-views"></a><h2><a href="#passing-data-to-views">傳遞數據到視圖</a></h2>如上述例子中，你可以使用數組將數據傳遞到視圖文件：<pre class=" language-php"><code class=" language-php">return view('greetings', ['name' => 'Victoria']);</code></pre>當使用上面方式傳遞數據時，第二個參數（ <code class=" language-php">$data</code> ）必須是鍵值對數組（關聯數組）。在視圖文件中，你可以通過對應的關鍵字（ <code class=" language-php">$key</code> ）取用相應的數據值，例如 <code class=" language-php"><?php echo $key; ?></code>。如果只需要傳遞特定數據而非一個臃腫的數組到視圖文件，可以使用 <code class=" language-php">with</code> 輔助函數，示例如下：<pre class=" language-php"><code class=" language-php">return view('greeting')->with('name', 'Victoria');</code></pre><a name="sharing-data-with-all-views"></a><h4>把數據共享給所有視圖</h4>有時候可能需要共享特定的數據給應用程序中所有的視圖，那這時候你需要 <code class=" language-php">View</code> Facade 的 <code class=" language-php">share</code> 方法。通常需要將所有 <code class=" language-php">share</code> 方法的調用代碼放到 <a href="/docs/5.4/providers">服務提供者</a> 的 <code class=" language-php">boot</code> 方法中，此時你可以選擇使用 <code class=" language-php">AppServiceProvider</code> 或創建獨立的 <a href="/docs/5.4/providers">服務提供者</a> 。示例代碼如下：<pre class=" language-php"><code class=" language-php"><?php namespace App\Providers; use Illuminate\Support\Facades\View; class AppServiceProvider extends ServiceProvider { /** * Bootstrap any application services. * * @return void */ public function boot() { View::share('key', 'value'); } /** * Register the service provider. * * @return void */ public function register() { // } }</code></pre><a name="view-composers"></a><h2><a href="#view-composers">視圖合成器</a></h2>視圖合成器是在視圖渲染時調用的一些回調或者類方法。如果你需要在某些視圖渲染時綁定一些數據上去，那么視圖合成器就是你的的不二之選，另外他還可以幫你將這些綁定邏輯整理到特定的位置。下面例子中，我們會在一個 <a href="/docs/5.4/providers">服務提供者</a> 中注冊一些視圖合成器。同時使用 <code class=" language-php">View</code> Facade 來訪問 <code class=" language-php">Illuminate\Contracts\View\Factory</code> contract 的底層實現。注意：Laravel 沒有存放視圖合成器的默認目錄，但你可以根據自己的喜好來重新組織，例如：<code class=" language-php">App\Http\ViewComposers</code>。<pre class=" language-php"><code class=" language-php"><?php namespace App\Providers; use Illuminate\Support\Facades\View; use Illuminate\Support\ServiceProvider; class ComposerServiceProvider extends ServiceProvider { /** * Register bindings in the container. * * @return void */ public function boot() { // Using class based composers... View::composer( 'profile', 'App\Http\ViewComposers\ProfileComposer' ); // Using Closure based composers... View::composer('dashboard', function ($view) { // }); } /** * Register the service provider. * * @return void */ public function register() { // } }</code></pre><blockquote class="has-icon note"><div class="flag"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"><path fill="#FFFFFF" d="M45 0C20.1 0 0 20.1 0 45s20.1 45 45 45 45-20.1 45-45S69.9 0 45 0zM45 74.5c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5S48.6 74.5 45 74.5zM52.1 23.9l-2.5 29.6c0 2.5-2.1 4.6-4.6 4.6 -2.5 0-4.6-2.1-4.6-4.6l-2.5-29.6c-0.1-0.4-0.1-0.7-0.1-1.1 0-4 3.2-7.2 7.2-7.2 4 0 7.2 3.2 7.2 7.2C52.2 23.1 52.2 23.5 52.1 23.9z"></path></svg></div> 注意，如果你創建了新的一個 <a href="/docs/5.4/providers">服務提供者</a> 來存放你視圖合成器的注冊項，那么你需要將這個 <a href="/docs/5.4/providers">服務提供者</a> 添加到配置文件 <code class=" language-php">config/app.php</code> 的 <code class=" language-php">providers</code> 數組中。</blockquote>到此我們已經注冊了上面的視圖合成器，效果是每次 <code class=" language-php">profile</code> 視圖渲染時，都會執行 <code class=" language-php">ProfileComposer@compose</code> 方法。那么下面我們來定義這個合成器類吧。<pre class=" language-php"><code class=" language-php"><?php namespace App\Http\ViewComposers; use Illuminate\View\View; use App\Repositories\UserRepository; class ProfileComposer { /** * The user repository implementation. * * @var UserRepository */ protected $users; /** * Create a new profile composer. * * @param UserRepository $users * @return void */ public function __construct(UserRepository $users) { // Dependencies automatically resolved by service container... $this->users = $users; } /** * Bind data to the view. * * @param View $view * @return void */ public function compose(View $view) { $view->with('count', $this->users->count()); } }</code></pre>每當視圖渲染時，該合成器的 <code class=" language-php">compose</code> 方法都會被調用，并且傳入一個 <code class=" language-php">Illuminate\View\View</code> 實例作為參數，在這個過程中，你可以使用 <code class=" language-php">with</code> 方法綁定數據到目標視圖。<blockquote class="has-icon tip"><div class="flag"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="56.6px" height="87.5px" viewBox="0 0 56.6 87.5" enable-background="new 0 0 56.6 87.5" xml:space="preserve"><path fill="#FFFFFF" d="M28.7 64.5c-1.4 0-2.5-1.1-2.5-2.5v-5.7 -5V41c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10.1 5 5.8C31.2 63.4 30.1 64.5 28.7 64.5zM26.4 0.1C11.9 1 0.3 13.1 0 27.7c-0.1 7.9 3 15.2 8.2 20.4 0.5 0.5 0.8 1 1 1.7l3.1 13.1c0.3 1.1 1.3 1.9 2.4 1.9 0.3 0 0.7-0.1 1.1-0.2 1.1-0.5 1.6-1.8 1.4-3l-2-8.4 -0.4-1.8c-0.7-2.9-2-5.7-4-8 -1-1.2-2-2.5-2.7-3.9C5.8 35.3 4.7 30.3 5.4 25 6.7 14.5 15.2 6.3 25.6 5.1c13.9-1.5 25.8 9.4 25.8 23 0 4.1-1.1 7.9-2.9 11.2 -0.8 1.4-1.7 2.7-2.7 3.9 -2 2.3-3.3 5-4 8L41.4 53l-2 8.4c-0.3 1.2 0.3 2.5 1.4 3 0.3 0.2 0.7 0.2 1.1 0.2 1.1 0 2.2-0.8 2.4-1.9l3.1-13.1c0.2-0.6 0.5-1.2 1-1.7 5-5.1 8.2-12.1 8.2-19.8C56.4 12 42.8-1 26.4 0.1zM43.7 69.6c0 0.5-0.1 0.9-0.3 1.3 -0.4 0.8-0.7 1.6-0.9 2.5 -0.7 3-2 8.6-2 8.6 -1.3 3.2-4.4 5.5-7.9 5.5h-4.1H28h-0.5 -3.6c-3.5 0-6.7-2.4-7.9-5.7l-0.1-0.4 -1.8-7.8c-0.4-1.1-0.8-2.1-1.2-3.1 -0.1-0.3-0.2-0.5-0.2-0.9 0.1-1.3 1.3-2.1 2.6-2.1H41C42.4 67.5 43.6 68.2 43.7 69.6zM37.7 72.5H26.9c-4.2 0-7.2 3.9-6.3 7.9 0.6 1.3 1.8 2.1 3.2 2.1h4.1 0.5 0.5 3.6c1.4 0 2.7-0.8 3.2-2.1L37.7 72.5z"></path></svg></div> 所有的視圖合成器都會由 <a href="/docs/5.4/container">服務容器</a> 來解析，所以你可以在合成器的構造函數中使用類型提示來注入需要的任何依賴。</blockquote><h4>將視圖合成器附加到多個視圖</h4>通過將目標視圖文件數組作為第一個參數傳入 <code class=" language-php">composer</code> 方法，你可以把一個視圖合成器同時附加到多個視圖。<pre class=" language-php"><code class=" language-php">View::composer( ['profile', 'dashboard'], 'App\Http\ViewComposers\MyViewComposer' );</code></pre><code class=" language-php">composer</code> 方法同時也接受通配符 <code class=" language-php">*</code> ，可以讓你將一個視圖合成器一次性綁定到所有的視圖：<pre class=" language-php"><code class=" language-php">View::composer('*', function ($view) { // });</code></pre><h4>視圖構造器</h4>視圖 構造器 和視圖合成器非常相似。不同之處在于：視圖構造器在視圖實例化時執行，而視圖合成器在視圖渲染時執行。如下，可以使用 <code class=" language-php">creator</code> 方法來注冊一個視圖塑造器：<pre class=" language-php"><code class=" language-php">View::creator('profile', 'App\Http\ViewCreators\ProfileCreator');</code></pre><h2>譯者署名</h2><table><thead><tr><th>用戶名</th><th>頭像</th><th>職能</th><th>簽名</th></tr></thead><tbody><tr><td><a href="https://github.com/cmzz">@zyxcba</a></td><td><img class="avatar-66 rm-style" src="https://avatars3.githubusercontent.com/u/6111715?v=3&s=100"></td><td>翻譯</td><td><a href="http://wewx.cn">最新最好玩的微信小程序</a> - WxStore 開源微信小程序商城</td></tr></tbody></table></article>