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。

进入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

© 著作权归作者所有

时间: 2024-08-02 06:57:49

Yii框架学习笔记(二)将html前端模板整合到框架中的相关文章

SSH框架学习笔记(二)----Filter,Listener以及JSP的新特性

Fileter:对用户请求进行预处理,接着讲请求交给Servlet进行处理并生成响应,最后在对服务器响应进行后处理. 用处: 在HttpServletRequest到达Servlet之前,拦截客户的HttpServletRequest 根据需要检查HttpServletRequest,也可以修改HttpServletRequest头和数据 在HttpServletResponse到达客户端之前,拦截HttpServletResponse 根据需要检查HttpServletResponse,也可以

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

Android学习笔记二十九之SwipeRefreshLayout、RecyclerView和CardView

Android学习笔记二十九之SwipeRefreshLayout.RecyclerView和CardView 前面我们介绍了AlertDialog和几个常用的Dialog,ProgressDialog进度条提示框.DatePickerDialog日期选择对话框和TimePickerDialog时间选择对话框.这一节我们介绍几个新的API控件SwipeRefreshLayout.RecyclerView和CardView,这几个API控件都是google在Android5.0推出的.下面我们来学

JavaSE中Collection集合框架学习笔记(2)——拒绝重复内容的Set和支持队列操作的Queue

前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的文章,大多都是以罗列记忆点的形式书写的,没有谈论实现细节和逻辑原理.作为个人笔记无可厚非,但是并不利于他人学习.希望能通过这种比较“费劲”的讲解,帮助我自己.也帮助读者们更好地学习Java.掌握Java. 无论你跟我一样需要应聘,还是说在校学生学习Java基础,都对入门和进一步启发学习有所帮助.(关

Android学习笔记二

17. 在ContentProvider中定义的getType()方法是定义URI的内容类型. 18. SQLiteDatabase类中的insert/delete/update/query方法其实也挺好用的,我在EquipmentProvider类中做了实现 19. Android专门有个单元测试项目(Android Test Project),在这个项目中,可以新建一个继承AndroidTestCase类的具体测试类来单元测试某个功能.我新建了一个AndroidTestProject项目,在

Java集合框架学习笔记之集合与Collection API

一.CollectionAPI 集合是一系列对象的聚集(Collection).集合在程序设计中是一种重要的数据接口.Java中提供了有关集合的类库称为CollectionAPI. 集合实际上是用一个对象代表一组对象,在集合中的每个对象称为一个元素.在集合中的各个元素的具体类型可以不同,但一般说来,它们都是由相同的类派生出来的(而这一点并不难做到,因为Java中的所有类都是Object的子类).在从集合中检索出各个元素是,常常要根据其具体类型不同而进行相应的强制类型转换. Collection

JavaSE中线程与并行API框架学习笔记1——线程是什么?

前言:虽然工作了三年,但是几乎没有使用到多线程之类的内容.这其实是工作与学习的矛盾.我们在公司上班,很多时候都只是在处理业务代码,很少接触底层技术. 可是你不可能一辈子都写业务代码,而且跳槽之后新单位很可能有更高的技术要求.除了干巴巴地翻书,我们可以通过两个方式来解决这个问题:一是做业余项目,例如在github上传自己的demo,可以实际使用:二是把自己的学习心得写成博客,跟同行们互相交流. 3.1 线程的初窥门径 我们在之前的文章里提到的程序其实都是单线程程序,也就说启动的程序从main()程

MEAN框架学习笔记

MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化而且吸收,一步一步来.慢慢地记录我学习MEAN的点点滴滴. 1.MEAN是可以管理用户的 通过MEAN的mean-cli来管理用户.命令是: $ mean user <email> $ mean user <email> --addRole <role>; $ mean u

YMP框架学习笔记(三)------处理器、控制器、拦截器

一.处理器 1.事件处理器 添加类WebEventHandler.java并继承IWebEventHandler public class WebEventHandler implements IWebEventHandler { public void onInitialized() { } public void onRequestReceived(IRequestContext context) { } public void onRequestCompleted(IRequestCont