04 明日导航前台页面设计

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