Yii框架最终的目的就是把页面与程序分离了，但我们怎么分享也需要适合于yii模板了，下面我来介绍一个将html前端模板整合到框架的例子，希望对各位有帮助。

上一节成功将Yii框架引入，并生成了要进行的项目文件夹shop。

进入protected文件夹，开始html模板的整合之旅;

protected文件夹中需要注意controller，models以及views三个文件夹，这正是MVC模式所在，将html模板与Yii 框架整合的关键也在于此。其中controller是控制器，控制器中的文件可以设置class方法，然后class方法访问对应的views中的视图。

比如controller中有SiteController.php这个控制器：

<?php
class SiteController extends Controller {
    /**  * Declares class-based actions.  */
    public function actions() {
        return array( // captcha action renders the CAPTCHA image displayed on the contact page  'captcha'=-->array(
            'class' => 'CCaptchaAction',
            'backColor' => 0xFFFFFF,
        ) ,
        // page action renders "static" pages stored under 'protected/views/site/pages'
        // They can be accessed via: index.php?r=site/page&view=FileName
        'page' => array(
            'class' => 'CViewAction',
        ) ,);
    }
    /**
     * This is the default 'index' action that is invoked
     * when an action is not explicitly requested by users.
     */
    public function actionIndex() {
        // renders the view file 'protected/views/site/index.php'
        // using the default layout 'protected/views/layouts/main.php'
        $this->render('index');
    }
    /**
     * This is the action to handle external exceptions.
     */
    public function actionError() {
        if ($error = Yii::app()->errorHandler->error) {
            if (Yii::app()->request->isAjaxRequest) echo $error['message'];
            else $this->render('error', $error);
        }
    }
    /**
     * Displays the contact page
     */
    public function actionContact() {
        $model = new ContactForm;
        if (isset($_POST['ContactForm'])) {
            $model->attributes = $_POST['ContactForm'];
            if ($model->validate()) {
                $name = '=?UTF-8?B?' . base64_encode($model->name) . '?=';
                $subject = '=?UTF-8?B?' . base64_encode($model->subject) . '?=';
                $headers = "From: $name <{$model->email}> " . "Reply-To: {$model->email} " . "MIME-Version: 1.0 " . "Content-Type: text/plain; charset=UTF-8";
                mail(Yii::app()->params['adminEmail'], $subject, $model->body, $headers);
                Yii::app()->user->setFlash('contact', 'Thank you for contacting us. We will respond to you as soon as possible.');
                $this->refresh();
            }
        }
        $this->render('contact', array(
            'model' => $model
        ));
    }
    /**
     * Displays the login page
     */
    public function actionLogin() {
        $model = new LoginForm;
        // if it is ajax validation request
        if (isset($_POST['ajax']) && $_POST['ajax'] === 'login-form') {
            echo CActiveForm::validate($model);
            Yii::app()->end();
        }
        // collect user input data
        if (isset($_POST['LoginForm'])) {
            $model->attributes = $_POST['LoginForm'];
            // validate user input and redirect to the previous page if valid
            if ($model->validate() && $model->login()) $this->redirect(Yii::app()->user->returnUrl);
        }
        // display the login form
        $this->render('login', array(
            'model' => $model
        ));
    }
    /**
     * Logs out the current user and redirect to homepage.
     */
    public function actionLogout() {
        Yii::app()->user->logout();
        $this->redirect(Yii::app()->homeUrl);
    }
}
?>

可以看到这个控制器中有很多class方法，默认走的方法是public function actionIndex()，这个方法中$this->render('index');意为渲染views/site文件夹中index.php这个视图。

这样就理解了打开首页事出现的内容的来由:

网站从shop/index.php入口文件进入，然后访问默认控制器SiteController.php，该控制器访问默认的方法actionIndex()，然后访问views视图中的index.php，呈现出首页内容。

搞清楚了这个，将html模板整合到框架中就比较简单了，首先创建所需的控制器，然后再控制器中定义方法，让这个方法跳转到views视图中对应的模板文件即可。比如像把一个首页模板整合到框架中，先在controller中新建一个控制器IndexCotroller.php（也可以使用默认的 SiteController控制器），并定义方法actionIndex()，让它访问视图VIEWS中的index.php文件，这个 index.php文件正是我们的首页模板。

IndexCotroller.php：

<?php
class IndexController extends Controller {
    public function actionIndex() {
        // 渲染以下视图 'protected/views/index/index.php'
        $this->render('index');
    }
}
?>

如果是新建的控制器，比如IndexCotroller，就需要在views中创建相应的文件夹，如index（SiteController控制器对应的视图文件夹为site），然后再相应的视图文件夹中建立你的class方法访问的文件即可，如本例的方法actionIndex()对应的$this->render('index');就是访问views/index/index.php，这样就通过controller控制器和 views视图——MV模式将html模板和Yii整合到了一起。

views/index/index.php：

<h1>html 模板成功和Yii框架整合</h1>

整合到一起之后怎么访问整合的这个首页呢？如果直接访问，那会跳转到默认控制器SiteController，而不是我们自己定义的IndexCotroller控制器，这时就需要用路由来访问：

http://localhost/shop/shop/index.php?r=index/index

这个路由中，http://localhost/shop/shop/是网站根目录，index.php就是shop文件夹中的入口文件，r=index表示控制器为IndexCotroller，/index表示IndexCotroller控制器中的index方法，访问结果就是我们达到的效果：

当然可以创建别的控制器，比如登陆页面可以创建UserController控制器。对于同一个控制器，如IndexCotroller，可以在IndexCotroller.php中创建多个方法，对应views/index/中不同的页面。访问的时候遵从路由的原则即可：

http://网站域名/index.php?r=控制器/方法

大同小异，这样就可以吧各种html前端模板整合到Yii框架中，这里还需要注意样式文件CSS，JS以及图片的存放位置。前面已经说过shop文件夹下的assets文件夹中用来存放静态资源，如CSS,JS,IMG等，所以就把这些资源存到assets文件夹中，这里整合的是前台页面，js一般前后台公用，css和img一般前后台分离，所以可以采取以下目录：

这样将前端html 模板和Yii整合就全部完成了。

【注】：在模板中引入CSS,JS,IMG等由于路径问题及易出错，小技巧是在/protected/config/constants.php中把路径设置成常量，只需调用即可：

设置完静态资源目录后还需要把constants.php这个配置文件引入到入口文件中使其生效。

总结：

PS：MVC设计模式原理图：

文章地址:http://www.phprm.com/frame/60144.html

转载随意^^请带上本文地址!