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}>\r\n".
 "Reply-To: {$model->email}\r\n".
 "MIME-Version: 1.0\r\n".
 "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這個配置文件引入到入口文件中使其生效。

總結：

1.首頁模板與Yii框架整合：

1.建立IndexController控制器

2.建立視圖views/index/index.php

3.控制器調用視圖$this->render(index);

4.引入css和圖片，將樣式目錄與圖片目錄放入常量，統一調用。

2.路由

在框架裏邊咱們經過路由得到控制器和方法

咱們有了控制器的方法，就能夠進一步與視圖或模型進行交互

http://網址/index.php?r=控制器/方法

3.控制器和視圖理解好

控制器：IndexController  (名字Controller)

方法：  actionIndex  (action名字)

Views/ 下邊有許多目錄，目錄原則是：每一個控制器名字在views下都有對應名字的目錄存在，裏邊存放具體模板文件

PS：MVC設計模式原理圖：

原文地址：http://www.ldsun.com/1309.html