視圖 · MixPHP V2.1 開發指南

## 視圖簡單來說，一個視圖其實就是一個 Web 頁面，或者頁面的一部分，像頁頭、頁腳、側邊欄等，MixPHP的視圖支持布局。 ## 組件使用 [composer]([https://www.phpcomposer.com/](https://www.phpcomposer.com/)) 安裝： ~~~ composer require mix/view ~~~ ## 創建一個視圖功能詳解： - MixPHP 的視圖直接使用 PHP 做為引擎。 - 視圖文件名全部使用小寫，多個單詞時，使用下劃線分隔，例如：`setting_profile.php`。 - 通過 `$this->name` 可以傳遞數據到布局文件中使用。下面演示為控制器 `ProfileController` 創建一個視圖，控制器代碼如下： ~~~ <?php namespace App\Web\Controllers; use App\Common\Helpers\ResponseHelper; use Mix\Http\Message\Response; use Mix\Http\Message\ServerRequest; /** * Class ProfileController * @package App\Web\Controllers * @author liu,jian <coder.keda@gmail.com> */ class ProfileController { /** * FileController constructor. * @param ServerRequest $request * @param Response $response */ public function __construct(ServerRequest $request, Response $response) { } /** * Index * @param ServerRequest $request * @param Response $response * @return Response */ public function index(ServerRequest $request, Response $response) { $data = [ 'id' => $request->getAttribute('id'), 'name' => '小明', 'age' => 18, 'friends' => ['小紅', '小花', '小飛'], ]; return ResponseHelper::view($response, 'profile.index', $data); } } ~~~ >[success] views 文件夾存放全部視圖文件先在 `/views/layouts` 目錄建立一個布局文件 `main.php`，代碼如下： ~~~ <html> <head> <title><?= $this->title ?></title> </head> <body> <?= $content ?> </body> </html> ~~~ 然后在 `/views` 目錄創建一個 `profile` 目錄，在目錄中創建一個 `index.php` 文件，代碼如下: ~~~ <?php $this->title = 'Profile'; ?> <p>id: <?= $id ?>, name: <?= $name ?>, age: <?= $age ?></p> <p>friends:</p> <ul> <?php foreach($friends as $name): ?> <li><?= $name ?></li> <?php endforeach; ?> </ul> ~~~ ## 渲染視圖從上面的例子中可看出，視圖的渲染是在 `App\Common\Helpers\ResponseHelper::view` 方法中，代碼如下： ~~~ <?php namespace App\Common\Helpers; use Mix\Helper\JsonHelper; use Mix\Helper\XmlHelper; use Mix\Http\Message\Response; use Mix\Http\Message\Factory\StreamFactory; use Mix\View\View; /** * Class ResponseHelper * @package App\Common\Helpers * @author liu,jian <coder.keda@gmail.com> */ class ResponseHelper { /** * view * @param Response $response * @param string $name * @param array $data * @param string $layout * @return Response */ public static function view(Response $response, string $name, array $data = [], string $layout = 'main') { $dir = app()->basePath . DIRECTORY_SEPARATOR . 'views'; $view = new View($dir, $layout); $content = $view->render($name, $data); return static::html($response, $content); } } ~~~ ## 渲染視圖從上面的例子中可看出，視圖的渲染代碼如下： >[info] $view->render(視圖名, 數組); - 視圖名：為視圖文件相對路徑名，以 `.` 號分隔 - 數組：會傳遞到對應的視圖文件，key為變量名，value為值 ## 不使用布局當有需求不需要使用到布局時： ``` // 不傳入 $layout 參數 $view = new View($dir); // 傳入 $layout 的默認參數空字符 $view = new View($dir, ''); ``` ## 視圖嵌套當你在布局中使用公共的側邊欄等類似的需求時，需要在視圖中加載另一個視圖，如下： >[info] 因為視圖代碼執行在 `Renderer` 對象內部，因此使用 $this 調用自己 - `$__viewdir__`：為當前視圖傳入視圖目錄 - `$__data__`：為當前視圖傳入所有變量的數組，可以讓子視圖使用父視圖的全部變量 ~~~ <?= $this->render($__viewdir__, '子視圖名', $__data__); ?> ~~~