第六课 视图
最后更新于:2022-04-01 20:42:07
>[danger]上节课我们了解了控制器的用法,控制器执行到最后,会跳转到一个界面,用于显示数据,这个用于显示数据的html文件,我们就称之为视图。
## 一、视图目录
iWebShop的视图存放目录位于views下,views下每个目录为一个主题,default为系统前台的默认主题,sysdefault为系统后台默认主题,syssellers为商家后台的主题,mobile为手机端的主题。下面以default为例,说明目录结构:
![](http://it.sunzoon.com/wp-content/uploads/2016/07/20160721171951.png)
* javascript为该主题要使用到的js文件
* layouts存放的为视图布局文件(后面详解)
* skin为该主题要使用到的皮肤css文件
* simple,site,ucenter为控制器的名称,每个控制器对应一个目录,目录下的每个文件默认对应控制器中的Action(如在URL解析控制器Action时,如果在控制器程序中找不到Action的定义,就会直接跳转到该视图)
* config为该主题的配置文件
* preview.jpg为主题的预览图,只在后台选择主题可以见到.
## 二、conifg.php文件
default主题的config文件如下:
~~~
'锦绣前程', //主题名称
'author' => 'aircheng', //主题作者
'time' => '2014/12/29 10:03:05', //制作时间
'version' => '3.0', //主题版本
'thumb' => 'preview.jpg', //主题预览图
'info' => '默认主题方案,此主题适用于3.0.0 系列产品', //主题描述信息
'type' => '商城前台-PC', //主题类型
);
?>
~~~
主要是定义主题的一些基本信息。
## 三、视图布局 layout
官方解释
>[info] 简单说下 iWebShop 的 layout(布局),对于一般网页视图来说,基本的结构形式都是固定好的,比如网页的头部,页脚底部,公共样式,公共 js 类库等等,所有这些公共的部分我们把它抽象出来,做成一个 layout 模板(html形式的),layout 存在于每个主题模板的 layouts目录中,可以为不同的控制器(controller) ,动作(action)指定不同的布局,比如网站的首页和网站的注册页面头部布局就可以不同:
![](http://it.sunzoon.com/wp-content/uploads/2016/07/20160721181553.png)
![](http://it.sunzoon.com/wp-content/uploads/2016/07/20160721181634.png)
简单来说,layouts的作用就是把公用的代码提取出来,提高代码的使用率。具体的开发方式会在主题开发的过程中说明。
### layouts设置
官方提供了以下三种方法设置layouts
(1)在控制器(controller)中增加 public $layout 公共属性,表示这个控制器下的所有视图都默认用这个布局,如下:
~~~
~~~
(2)我们也可以在主题目录下的 config.php 文件中配置 layout 布局。
~~~
'锦绣前程',
'author' => 'aircheng',
'time' => '2014/12/29 10:03:05',
'version' => '3.0',
'thumb' => 'preview.jpg',
'info' => '默认主题方案,此主题适用于3.0.0 系列产品',
'type' => '商城前台-PC',
'layout' => array('simple' => 'site') //增加这一句
);
?>
~~~
如果我们希望 simple 下面有个视图reg使用 site_mini 的 layout 布局就应该这么写:
`layout => array(‘simple’ => ‘site’,‘simple@reg’ => ‘site_mini’)`
注意:iWebShop 用@符号表示包括子关系,比如 site@index 表示的就是 site 控制器下的 index 方法。
(3) 也可以在每个动作(action)方法里面临时设置 layout 比如:
~~~
layout = 'site';
echo "hello world";
}
}
?>
~~~
## 四、视图开发举例
把上节课的控制器代码改为,高亮的代码表示跳转到”helloworld”这个视图。
~~~
redirect('helloworld');
}
}
?>
~~~
在views/default建立文件夹test,再建立一个html文件helloworld,输入以下代码:
~~~
hello
三众简悦iWebShop开发教程
~~~
显示效果如下:
![](http://it.sunzoon.com/wp-content/uploads/2016/07/20160721184601.png)
>[warning]如有不明白的地方,留言或是加入我们 “三众技术QQ交流群”一起讨论
## 关于我们
>[danger][三众科技](http://www.sunzoon.com)资讯平台——大道至简,悦你所阅!
>本教程由[三众简悦](http://it.sunzoon.com)原创,转载请注明出处,作者:bobball,由bobo整理成看云书籍
三众技术交流群:**543102562**
欢迎大家加入我们,共同讨论IT,互联网技术。同时可以扫描下面的二维码关注我们,谢谢!
![三众科技服务号](http://it.sunzoon.com/wp-content/uploads/2016/06/qrcode_for_gh_401d25b05314_344.jpg)
';