您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

Yii 框架視圖建立與渲染完整指南：從基礎到進階應用

編輯：PHP 綜合知識

前言

視圖是 MVC 架構中負責資料呈現的核心元件。Yii 框架透過 yii\web\View 應用元件提供完整的視圖管理與渲染機制。本文系統性介紹視圖建立、安全性、組織結構、各情境渲染方式，幫助開發者全面掌握 Yii 視圖系統。

建立視圖

視圖檔案結構

視圖本質為 PHP 腳本檔案，包含 HTML 與表現層 PHP 程式碼：

title = 'Login';
?>
title) ?>
Please fill out the following fields to login:


    field($model, 'username') ?>
    field($model, 'password')->passwordInput() ?>

預定義變數

$this：yii\web\View 實例，管理視圖渲染
$model、$form 等：從控制器或其他物件傳入的資料

IDE 支援技巧

在視圖檔案頂部以註解標註預定義變數型別，可獲得 IDE 智慧提示並自動生成文件：

/* @var $this yii\web\View */
/* @var $model app\models\Post */
/* @var $comments app\models\Comment[] */

視圖安全性：防止 XSS 攻擊

純文字輸出 - 使用 Html::encode()


name) ?>

HTML 內容輸出 - 使用 HtmlPurifier


text) ?>

效能提醒

HtmlPurifier 安全性佳但效能較差，高流量應用建議快取過濾結果：

// 快取範例
$key = 'purified_' . md5($post->text);
$content = Yii::$app->cache->get($key);
if ($content === false) {
    $content = HtmlPurifier::process($post->text);
    Yii::$app->cache->set($key, $content, 3600);
}
echo $content;

視圖組織結構

慣例路徑對照

渲染者	預設視圖目錄	範例
控制器	`@app/views/ControllerID`	PostController → `@app/views/post`
模組控制器	`ModulePath/views/ControllerID`	admin/UserController → `@app/modules/admin/views/user`
Widget	`WidgetPath/views`	app\widgets\Menu → `@app/widgets/views`

自訂視圖路徑

覆寫 yii\base\ViewContextInterface::getViewPath() 方法：

class PostController extends Controller {
    public function getViewPath() {
        return '@app/views/custom-post';
    }
}

渲染視圖

控制器渲染方法

方法	使用版面配置	適用場景
`render()`	是	一般頁面渲染
`renderPartial()`	否	局部渲染、AJAX 回應（不含 JS/CSS）
`renderAjax()`	否	AJAX 回應（含註冊的 JS/CSS）
`renderFile()`	否	指定完整路徑或別名渲染

控制器渲染範例

namespace app\controllers;
use Yii;
use app\models\Post;
use yii\web\Controller;
use yii\web\NotFoundHttpException;

class PostController extends Controller {
    public function actionView($id) {
        $model = Post::findOne($id);
        if ($model === null) {
            throw new NotFoundHttpException;
        }
        // 渲染 view 視圖並套用版面配置
        return $this->render('view', [
            'model' => $model,
        ]);
    }
}

Widget 視圖渲染

Widget 視圖無版面配置支援，$this 指向 Widget 實例：

// 視圖檔案位於 WidgetPath/views/
// 使用 CWidget::render() 渲染

// 使用 Widget 兩種方式
beginWidget('path.to.WidgetClass'); ?>
...body content...
endWidget(); ?>

// 或無 body 內容
widget('path.to.WidgetClass'); ?>

// 帶參數配置
widget('CMaskedTextField', ['mask' => '99/99/9999']); ?>

自訂 Widget 開發

class MyWidget extends CWidget {
    public function init() {
        // beginWidget() 時呼叫
    }
    
    public function run() {
        // endWidget() 時呼叫，輸出內容
        $this->render('myview', ['data' => $this->data]);
    }
}

視圖中渲染其他視圖

方法	說明
`$this->render('_overview')`	渲染同目錄下視圖，相對路徑
`$this->renderAjax('_form')`	AJAX 渲染，包含 JS/CSS
`$this->renderFile('@app/views/shared/_menu.php')`	指定絕對路徑/別名渲染

其他位置渲染視圖

// 透過應用元件存取視圖
echo \Yii::$app->view->renderFile('@app/views/site/license.php');

進階主題與最佳實踐

視圖檔案命名慣例

控制器動作視圖：action-name.php（kebab-case）
部分視圖：_partial-name.php（底線開頭）
版面配置：layout-name.php（存放於 layouts 目錄）

資料傳遞最佳化

// 控制器中
return $this->render('view', [
    'model' => $model,
    'comments' => $model->comments,  // 關聯資料
    'tags' => $model->tags,          // 避免視圖中查詢
]);

條件式版面配置

public function actionView($id) {
    $model = $this->findModel($id);
    if (Yii::$app->request->isAjax) {
        $this->layout = false;  // AJAX 請求不使用版面配置
    }
    return $this->render('view', ['model' => $model]);
}

視圖快取策略

// 片段快取
if ($this->beginCache('post-' . $model->id, ['duration' => 3600])) {
    // 快取內容
    echo $this->render('_post_content', ['model' => $model]);
    $this->endCache();
}