Yii框架學習筆記(二)將html前端模板整合到框架中


選擇Yii 2.0版本框架的7個理由 http://blog.chedushi.com/archives/8988

剛接觸Yii談一下對Yii框架的看法和感受 http://bbs.csdn.net/topics/390807796

更多內容 百度:yii 前端

http://my.oschina.net/u/1472492/blog/221085

摘要

Yii框架學習筆記(二)將html前端模板整合到框架中 原文地址:http://www.ldsun.com/1309.html

上一節成功將Yii框架引入,並生成了要進行的項目文件夾shop。

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

進入protected文件夾,開始html模板的整合之旅;

Yii框架學習筆記(二)將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這個視圖。

這樣就理解了打開首頁事出現的內容的來由:

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

網站從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方法,訪問結果就是我們達到的效果:

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

當然可以創建別的控制器,比如登陸頁面可以創建UserController控制器。對於同一個控制器,如IndexCotroller,可以在IndexCotroller.php中創建多個方法,對應views/index/中不同的頁面。訪問的時候遵從路由的原則即可:

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

大同小異,這樣就可以吧各種html前端模板整合到Yii框架中,這里還需要注意樣式文件CSS,JS以及圖片的存放位置。前面已經說過shop文件夾下的assets文件夾中用來存放靜態資源,如CSS,JS,IMG等,所以就把這些資源存到assets文件夾中,這里整合的是前台頁面,js一般前后台公用,css和img一般前后台分離,所以可以采取以下目錄:

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

這樣將前端html 模板和Yii整合就全部完成了。

【注】:在模板中引入CSS,JS,IMG等由於路徑問題及易出錯,小技巧是在/protected/config/constants.php中把路徑設置成常量,只需調用即可:

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

設置完靜態資源目錄后還需要把constants.php這個配置文件引入到入口文件中使其生效。

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

總結:

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設計模式原理圖:

Yii框架學習筆記(二)將html前端模板整合到框架中-行者無疆的圖片

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM