17joys的后台页面-视图

时间：2010-04-14 来源：17joys

http://www.17joys.com/php/cms/cms-8-89.html17joys的后台页面-视图

现在模块控制器有了，接下来当我们访问模块的操作时，就该给用户呈现页面了，这就是视图。终于轮到前台的XHTML+CSS+JavaScript大显身手了。

ThinkPHP的视图主要由View视图类和模板文件构成。视图类负责Action控制器类和模板文件之间沟通，Action类把数据通过View类传递到模板文件，而模板文件把接收到的数据转换成相应的数据格式显示。
【注】：视图仅仅是进行数据的输出显示，通常在视图渲染过程是不会改变数据本身的，而只是进行格式化输出和显示。

ThinkPHP内置了一个基于XML的性能卓越的模板引擎 ThinkTemplate，这是一个专门为ThinkPHP服务的内置模板引擎，无论在功能或是性能还有易用性方面都比Smarty优秀。这是ThinkPHP手册的原话，在我使用了一段时间后，发现还是有些小bug存在的，不过倒是无伤大雅，还是很不错的模板引擎，17joys决定就采用ThinkPHP提供的这款模板引擎进行开发，如果习惯Smarty模板引擎的同学，也可以很容易的更换，稍后我会把配置使用Smarty的方法发布出来。

下面开始创建模板，模板目录默认是项目下面的Tpl，模板主题默认是default，模板主题功能是为了多模板切换而设计的，如果有多个模板主题的话，可以用TMPL_DEFAULT_THEME参数设置默认的模板主题名。以后我们可以很方便的定义前台模板主题了。

为了对模板文件更加有效的管理，ThinkPHP对模板文件进行目录划分，默认的模板文件定义规则是：
模板目录/模板主题/[分组名/]模块名/操作名+模板后缀

那针对Index模块的index操作，我们的模板存放路径：Tpl/default/Index/index.html
换做User模块的add操作，模板存放路径：Tpl/default/User/add.html

当然后台代码就不需要向前台那么复杂了，一般我们都会考虑使用分帧的框架搭建，不过17joys采用的是纯AJAX后台，为了AJAX的调用和更新页面的考虑，所以页面使用的是DIV+CSS布局。

<body scroll="no">
<div id="layout">
                <div id="header">
                        <div class="headerNav">
                                <a class="logo" href="#">17joyslogo</a>
                                <ul class="nav">
                                        <li><a href="#">切换角色</a></li>
                                        <li><a href="#">设置</a></li>
                                        <li><a href="#">反馈</a></li>
                                        <li><a href="#">帮助</a></li>
                                        <li><a href="#">退出</a></li>
                                </ul>
                                <ul class="themeList" id="themeList">
                                        <li class="t1" theme="default"><div class="selected">蓝色</div></li>
                                        <li class="t2" theme="green"><div>绿色</div></li>
                                        <li class="t3" theme="red"><div>红色</div></li>
                                        <li class="t4" theme="purple"><div>紫色</div></li>
                                        <li class="t5" theme="silver"><div>银色</div></li>
                                </ul>
                        </div>
                </div>
                <div id="leftside">
                <div id="sidebar_s" style="display:none;">
                        <div class="collapse">
                                <div class="toggleCollapse"><div>d</div></div>
                        </div>
                </div>
                <div id="sidebar">
                        <div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>
                        <div class="accordion">
                                <div class="accordionHeader">
                                        <h2><span>Folder</span>网站管理</h2>
                                </div>
                                <div class="accordionContent" style="display:block;">
                                        <ul class="tree treeFolder">
                                                <li><a href="tabsPage.html" target="navTab">控制面板</a>
                                                        <ul>
                                                                <li><a href="main.html">我的主页</a></li>
                                                        </ul>
                                                </li>
                                                <li><a href="w_form.html" target="navTab" rel="joys_menu">菜单</a>
                                                        <ul>
                                                                <li><a href="w_button.html">菜单管理</a></li>
                                                        </ul>
                                                </li>
                                        </ul>
                                </div>
                                <div class="accordionHeader">
                                        <h2><span>Folder</span>会员管理</h2>
                                </div>
                                <div class="accordionContent" style="display:block;">
                                        <ul class="tree treeFolder">
                                                <li><a href="tabsPage.html" target="navTab">会员管理</a>
                                                        <ul>
                                                                <li><a href="">会员资料管理</a></li>
                                                                <li><a href="">添加会员</a></li>
                                                        </ul>
                                                </li>
                                        </ul>
                                </div>
                        </div>
                </div>
                </div>
                <div id="container">
                        <div id="navTab" class="tabsPage">
                                <div class="tabsPageHeader">
                                        <div class="tabsPageHeaderContent">
                                                <ul class="navTab-tab">
                                                        <li tabid="main" class="main"><a href="#"><span><span class="home_icon">我的主页</span></span></a></li>
                                                </ul>
                                        </div>
                                        <div class="tabsLeft">left</div>
                                        <div class="tabsRight">right</div>
                                        <div class="tabsMore">more</div>
                                </div>
                                <ul class="tabsMoreList">
                                        <li><a href="#">我的主页</a></li>
                                </ul>
                                <div class="navTab-panel tabsPageContent">
                                        <div></div>
                                </div>
                        </div>
                </div> 
                <div id="taskbar" style="left:0px; display:none;">
                        <div class="taskbarContent">
                                <ul style="width:50000px"></ul>
                        </div>
                        <div class="taskbarLeft taskbarLeftDisabled" style="display:none;">taskbarLeft</div>
                        <div class="taskbarRight" style="display:none;">taskbarRight</div>
                </div>
                <div id="splitBar"></div>
                <div id="splitBarProxy"></div>
        </div>
 
        <div class="resizable" style=" display:;"></div>
        <div class="shadow" style=" display:; width:508px; top:148px; left:296px;">
                <div class="shadow_h">
                        <div class="shadow_h_l"></div>
                        <div class="shadow_h_r"></div>
                        <div class="shadow_h_c"></div>
                </div>
                <div class="shadow_c">
                        <div class="shadow_c_l" style=""></div>
                        <div class="shadow_c_r" style=""></div>
                        <div class="shadow_c_c" style=""></div>
                </div>
                <div class="shadow_f">
                        <div class="shadow_f_l"></div>
                        <div class="shadow_f_r"></div>
                        <div class="shadow_f_c"></div>
                </div>
        </div>
        <div id="alertBackground" class="alertBackground"></div>
</body>

这就是HTML代码部分，CSS部分暂时还没有整理完，有兴趣的同学可以自己尝试用CSS修饰一下，当然如果做出动态菜单效果的话，还需要JavaScript的帮助。当然大家也可以自己找一个写好了的后台HTML模板，在之前的一篇文章《17joys后台代码-初步搭建》中，我提供了一些后台模板，大家可以去下载使用。

作者：马明@PHP培训修订1.0 2010-03

乐学PHP学院是国内专业的PHP培训机构，天津最好的PHP培训机构，拥有完整全面的PHP培训课程体系，使用自行开发的PHP内容管理系统作为授课案例，真实项目教学，还提供PHP教程、PHP视频、PHP人才、PHP开发等服务!