第25章节04明日导航前台页面设计(567KB).pptVIP

明日导航前台页面设计 本讲大纲： 1、页面设计概述 2、控制器的创建 3、视图中应用到的模板标签 4、在视图中创建模板文件 支持网站： 页面设计概述 明日导航前台页面功能是对本网站提供的各种信息网站进行分类输出，为浏览者查询信息提供最快捷的路径。其总体分类结构如下：生活服务、娱乐休闲、地方网站、其他、实用工具和游戏专区6个高级类别；在此基础上划分中级类别、中级类别下设初级类别，初级类别中还包含子类别。 在前台首页中，首先按照高级类别对数据进行分类；然后，展示中级类别，设置子页面展示中级类别包含的初级类别信息，最后，还直接展示了一些常用网站的链接地址，以及一些中级类别下包含的常用网站地址。其首页运行效果如图所示。 页面设计概述 在子页面中，根据超级链接传递的中级类别ID，展示出中级类别下包含的初级类别网站信息。其运行效果如图所示。 控制器的创建 本项目前台控制器位于25\Home\Lib\Action目录下面。此处创建两个控制器，一个是IndexAction，另一个是MoreAction。 在IndexAction控制器中，定义index()方法，查询数据库中的数据，并且将查询结果赋给指定的模板变量。其应用的技术如下： （1）通过M快捷方法实例化模型类，这里包括对middletype和common两个数据表的操作。 （2）在完成类的实例化操作后，通过连贯操作完成对数据的查询。其中，包括where、limit和select()方法。 （3）通过assign()方法将查询结果赋给指定模板变量。 （4）通过display()方法指定模板页。 视图中应用到的模板标签 在项目目录25\Home\Tpl\default目录下，创建Index和More模板文件夹，分别存储控制器IndexAction和MoreAction对应的模板文件。在模板文件中，应用ThinkPHP默认模板引擎中的方法完成数据的输出和判断操作。其应用的技术如下： （1）通过特殊字符串的替换技术，在模板页中载入JS脚本、images图片等内容。其默认的替换规则如表所示。 视图中应用到的模板标签 （2）通过Volist标签在模板页中循环输出模板变量传递的数据。Volist标签的语法如下： volist name=list id=vo offset=5 length=10 {$} /volist 其参数说明如表所示。 视图中应用到的模板标签 （3）比较标签，在模板页中对模板变量的值进行比较操作。其语法如下： 比较标签 name=变量 value=值内容/比较标签 系统支持的比较标签以及所表示的含义如表所示。 视图中应用到的模板标签 比较标签的使用方法基本相同，只是在判断的条件上有所区别。例如，要求name变量的值等于value就输出，可以使用： eq name=name value=valuevalue/eq 或者 equal name=name value=valuevalue/equal 它不但支持单条件的判断，而且还支持与else标签的结合应用，例如： eq name=name value=value相等else/不相等/eq 比较标签中的变量可以支持对象的属性或者数组，甚至可以是系统变量。例如：判断当vo对象的属性（或者数组，或者自动判断）等于5时输出。 eq name= value=5{$}/eq eq name=vo:name value=5{$}/eq eq name=vo[name] value=5{$}/eq 比较标签还支持对变量使用函数。例如：判断当vo对象的属性值的字符串长度等于5时输出。 eq name=vo:name|strlen value=5{$}/eq 变量名支持系统变量的方式，例如： eq name=T value=value相等else/不相等/eq 比较标签的比较值也支持使用变量。通常比较标签的值是一个字符串或者数字，如果需要使用变量，只需要在前面添加“$”符号。例如：判断当vo对象的属性等于$a时输出。 eq name=vo:name value=$a{$}/eq 另外，比较标签还可以统一使用compare标签来进行定义。例如：判断当name变量的值等于5时输出。 compare name=name value=5 type=eqvalue/compare 其中type属性的值就是上面列出的比较标签名称。上述写法等同于下面的表述方式。 eq name=name value=5 value/eq 其实所有的比较标签都是compare标签的别名。 视图中应用到的模板标签 （4）Range标签，判断某个变量是否在某个范围之内，包括in、no