第六课 视图

最后更新于: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)
';