>[danger]上节课我们了解了控制器的用法，控制器执行到最后，会跳转到一个界面，用于显示数据，这个用于显示数据的html文件，我们就称之为视图。
## 一、视图目录
iWebShop的视图存放目录位于views下，views下每个目录为一个主题，default为系统前台的默认主题，sysdefault为系统后台默认主题，syssellers为商家后台的主题，mobile为手机端的主题。下面以default为例，说明目录结构：
* javascript为该主题要使用到的js文件
* layouts存放的为视图布局文件(后面详解)
* skin为该主题要使用到的皮肤css文件
* simple，site，ucenter为控制器的名称，每个控制器对应一个目录，目录下的每个文件默认对应控制器中的Action（如在URL解析控制器Action时，如果在控制器程序中找不到Action的定义，就会直接跳转到该视图）
* config为该主题的配置文件
* preview.jpg为主题的预览图，只在后台选择主题可以见到.
## 二、conifg.php文件
default主题的config文件如下：
~~~
<?php
return array(
'name' => '锦绣前程', //主题名称
'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）指定不同的布局，比如网站的首页和网站的注册页面头部布局就可以不同：
简单来说，layouts的作用就是把公用的代码提取出来，提高代码的使用率。具体的开发方式会在主题开发的过程中说明。
### layouts设置
官方提供了以下三种方法设置layouts
（1）在控制器（controller）中增加 public $layout 公共属性，表示这个控制器下的所有视图都默认用这个布局，如下：
~~~
<?php
class Test extends IController
{
public $layout='site';
public function helloworld(){
echo "hello world";
}
}
?>
~~~
（2）我们也可以在主题目录下的 config.php 文件中配置 layout 布局。
~~~
<?php
return array(
'name' => '锦绣前程',
'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 比如：
~~~
<?php
class Test extends IController
{
public function helloworld(){
$this->layout = 'site';
echo "hello world";
}
}
?>
~~~
## 四、视图开发举例
把上节课的控制器代码改为,高亮的代码表示跳转到”helloworld”这个视图。
~~~
<?php
class Test extends IController
{
public function helloworld(){
$this->redirect('helloworld');
}
}
?>
~~~
在views/default建立文件夹test，再建立一个html文件helloworld，输入以下代码：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
三众简悦iWebShop开发教程
</body>
</html>
~~~
显示效果如下：
>[warning]如有不明白的地方，留言或是加入我们 “三众技术QQ交流群”一起讨论
## 关于我们
>[danger][三众科技](http://www.sunzoon.com)资讯平台——大道至简，悦你所阅！
>本教程由[三众简悦](http://it.sunzoon.com)原创，转载请注明出处，作者：bobball，由bobo整理成看云书籍
三众技术交流群：**543102562**
欢迎大家加入我们，共同讨论IT，互联网技术。同时可以扫描下面的二维码关注我们，谢谢！
