>[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，互聯網技術。同時可以掃描下面的二維碼關注我們，謝謝！
