通过导航显示列表

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">这部分主要是解决在网站首页点击主导航,进入这个主导航所述的页面,页面中有个栏目中显示子导航,点击子导航则会进入子导航的页面。</span>

故主要为两点。

1.是如何在主导航中显示子导航,这个比较好解决,只要把主导航的id用get方式传到listAction.class.php,再取出该id下面的子导航即可,再把其注入到模板中,解析,遍历,即可得。当然点击子导航也会进入其页面,原来显示子导航的栏目可能就是为空了,因为没做无限制分级,只有两层分级,所以也要在模板中有个判断,如果取出的子导航为空,则显示"没有子导航”字,以防报错

2.是如何在当前位置中正确显示其位置,包括进入主导航和子导航,都会正确显示。

比如  军事动态    军事动态》国内军事   

这里的方法是利用联合查询,代码如下

数据库中的导航表

-- phpMyAdmin SQL Dump
-- version 3.4.10.1
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2014 年 12 月 19 日 12:51
-- 服务器版本: 5.5.20
-- PHP 版本: 5.3.10

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- 数据库: `cms`
--

-- --------------------------------------------------------

--
-- 表的结构 `cms_nav`
--

CREATE TABLE IF NOT EXISTS `cms_nav` (
  `id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT COMMENT '编号',
  `nav_name` varchar(20) NOT NULL COMMENT '导航名',
  `nav_info` varchar(200) NOT NULL COMMENT '导航介绍',
  `pid` mediumint(8) unsigned NOT NULL COMMENT '子分类',
  `sort` mediumint(8) unsigned NOT NULL COMMENT '排序',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COMMENT='导航表' AUTO_INCREMENT=20 ;

--
-- 转存表中的数据 `cms_nav`
--

INSERT INTO `cms_nav` (`id`, `nav_name`, `nav_info`, `pid`, `sort`) VALUES
(1, '军事动态', '主要是军事方面的新闻。', 0, 2),
(3, '时尚女人', '关于时尚和女人方面的信息。', 0, 3),
(4, '科技频道', '关于科技方面的资讯。', 0, 4),
(5, '智能手机', '关于智能手机方面的推荐。', 0, 5),
(6, '美容护肤', '一个关于美容护肤的网站', 0, 6),
(7, '热门汽车', '一个关于汽车的网站', 0, 74),
(8, '房产家居', '一个关于房产家居的网站', 0, 13),
(9, '读书教育', '一个关于读书教育的网站', 0, 90),
(11, '股票基金', '一个关于股票基金的网页', 0, 11),
(12, '国内军事', '关于国内的一些军', 1, 18),
(16, '邢台军事', '邢台军事', 1, 16),
(17, '奔驰汽车', '奔驰汽车是个好汽车', 7, 17),
(18, 'aa', '啊啊qq', 0, 18);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
联合查询


public function  getOneNav(){
                $sql="SELECT m.id,
                                   m.nav_name,
                                   m.nav_info,
                                   n.id iid,
                                   n.nav_name nnav_name
                                   FROM cms_nav m 
                                   LEFT JOIN cms_nav n  
                                   ON m.pid=n.id
                                   WHERE m.id='$this->id'
                                   or m.nav_name='$this->nav_name'
                                   limit 1";
                return  $this->getOne($sql);
            }
代码

public function getNav(){
            if(isset($_GET['id'])){
                $nav = new NavModel();
                $nav->id=$_GET['id'];
                if($nav->getOneNav()){
                    if($nav->getOneNav()->nnav_name) $nav1='<a href="list.php?id='.$nav->getOneNav()->iid.' "/>'.$nav->getOneNav()->nnav_name.'</a>>';
                    $nav2='<a href="list.php?id='.$nav->getOneNav()->id.' "/>'.$nav->getOneNav()->nav_name.'</a>';

                    $this->tpl->assign("nav",$nav1.$nav2);    
                    
                    $this->tpl->assign("childNav",$nav->getFrontChildNav());
                }else{
                    Tool::alertBack("导航不存在!");
                }
            }else{
                Tool::alertBack("非法操作");
            }
        }

先分析一下联合查询SQL

即这个表就是一个表,分成两个表去查询,分别设为m,n .。这个语句呢,如果一个字段的pid为0,那么就是取出这个字段,如果一个字段的pid为1,就是指它有父导航,那么也会把它的父导航取出来。

单表,有父类和子类,分成两表联合查询----这个例子要记住,应该用处比较多。

另外在此中也能看出,数据库中没必要所有。。。比如说所有的id都要加个前缀,分别设个别名就行。就如此中,设置别名的位置是FROM  表名  别名   INNER JOIN  表名 别名 ,用法切记。

另外再说个SQL语句

select m.admin_user,n.level_name from cms_manage m,cms_level n where m.admin_user='$this->admin_user' and m.admin_pass='$this->admin_pass' and m.level=n.level_id
这个也是联合查询,和上一个INNER JOIN 好像也没什么区别啊,就是从两个表中取出数据,不过上面那个LEFT JOIN 可以把一个表分成两个表去查询,LEFT应该也是侧重左边的表,这样才可以使确定即使一个导航没有父导航也能准确取出,应该是这样,有必要做个专题,专门研究一下联合查询,暂时这两种形式先记住吧

至于代码,$nav2肯定能取出,$nav1能取出的话就是该分类存在父导航,没有的话也没事,就是相当于父导航这个表没取出数据,即LEFT  JOIN没用,也不是整张表没取出数据,所以不会报错

然后将

$nav1.$nav2   
注入到模板中。。很聪明的做法,恩,记住了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 `<ul>` 和 `<li>` 标签来实现无序列表显示导航条,具体代码如下: ```html <ul> <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> ``` 其中每个 `<li>` 标签表示一个导航项,使用 `<a>` 标签来设置导航链接。你可以根据需要添加 CSS 样式来美化导航条的样式。 ### 回答2: Vue利用无序列表显示导航条非常简单。首先,在Vue的模板中使用`<ul>`标签包裹`<li>`标签,这样就形成了一个无序列表。然后,通过Vue的数据绑定,将导航条的内容动态地渲染到`<li>`标签中。 在Vue的模板中,可以使用`v-for`指令来遍历导航条的数据。假设我们有一个名为`navItems`的数组,里面存储了导航条的每个选项的内容。那么,我们可以使用以下代码来显示导航条: ```html <ul> <li v-for="item in navItems" :key="item.id">{{ item.name }}</li> </ul> ``` 在上述代码中,`v-for`指令用来遍历`navItems`数组,并将每个数组元素赋值给名为`item`的变量。`:key`属性用于提供唯一的标识符,以便Vue能够正确渲染列表。在每个`<li>`标签内部,我们可以使用双花括号语法`{{ item.name }}`来显示导航条选项的内容。 通过以上步骤,我们就可以在Vue应用中使用无序列表显示导航条了。当数据发生变化时,Vue会自动更新DOM,保持导航条的内容同步。这样,我们就可以方便地管理和显示导航条的选项了。 ### 回答3: Vue.js是一个流行的JavaScript框架,用于构建用户界面。它可以通过使用无序列表(unordered list)来显示导航条。 首先,我们需要在Vue实例中定义一个数组来存储导航项的信息。每个导航项可以是一个对象,包含名称和链接字段。例如: ``` data() { return { navItems: [ { name: '首页', link: '/home' }, { name: '关于我们', link: '/about' }, { name: '产品', link: '/products' }, { name: '联系我们', link: '/contact' } ] } } ``` 接下来,在模板中使用`v-for`指令来遍历导航项数组,并将每个导航项渲染为无序列表中的一个列表项。代码如下: ``` <ul> <li v-for="navItem in navItems" :key="navItem.name"> <a :href="navItem.link">{{ navItem.name }}</a> </li> </ul> ``` 在上面的代码中,我们使用`v-for`指令来遍历`navItems`数组,并使用`:key`绑定每个导航项的名称作为唯一标识符。然后,我们使用`<a>`标签来显示导航项的名称,并通过`:href`绑定导航项的链接。 最后,我们可以在Vue实例的模板中使用这个无序列表组件来显示导航条。例如: ``` <template> <div> <h1>网站导航</h1> <navigation></navigation> </div> </template> <script> import Navigation from './Navigation.vue' export default { components: { Navigation } } </script> ``` 在上面的代码中,我们通过`<navigation>`标签使用导航条组件,其中`Navigation`是我们导航条组件的名称。 这样,我们就可以利用Vue和无序列表显示导航条了。导航条将根据定义的导航项数组动态生成,并且可以通过绑定的链接进行导航
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值