一般的内容型网站,例如CMS都会有这种面包屑导航。总结起来它有以下优势:
让用户了解目前所在的位置,以及当前页面在整个网站中所在的位置;
体现了网站的架构层级,提高了用户体验;
减少返回到上一级页面的操作,
那我们应该如何实现?我看网上多数都是只提供静态实现,
这里我结合引导和弹簧引导以及mysql来做一个完整的例子。
图里面的菜单其实是分级维护上下级关系的。我这里用到了2级,表里有字水平段标记。
点击第1级加载第2级分的类,点击第2级分类名称则展示面包屑导航。
创建表“tb_category”(
“id”bigint (20) NOT NULL AUTO_INCREMENT,
category_name varchar(100)非空,
parent_id的bigint(20)默认为空,
“水平”非常小的整数(1)默认为空,
主键(“id”)
)引擎=InnoDB AUTO_INCREMENT=8默认字符集=utf8;
插入tb_category值(1,“Java文档”,0,1);
插入tb_category值(2,' Java多线程”,1,2);
插入tb_category值(3“弹簧引导”1、2);
插入tb_category值(4,微服务实战”,1,2);
插入tb_category值(5‘Java视频”,0,1);
插入tb_category值(6,“Java基础”,5,2);
插入tb_category值(7,“Java基础”,1,2);
提交;
前端代码
& lt; !DOCTYPE html>
& lt; html xmlns=" http://www.w3.org/1999/xhtml " xmlns: th=" http://www.thymeleaf.org "
xmlns:秒=" http://www.thymeleaf.org/extras/spring-security "比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; title>响应式布局& lt;/title>
& lt;链接的href=" https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css " rel=把奖怼北?
& lt;/head>
& lt; body>
& lt;输入类型="文本" id=癱tx”=耙亍币豻h: value=" https://www.yisu.com/zixun/$ {# request.getContextPath()}”在
& lt; div类=癱ontainer-fluid”比;
& lt; !——页头——比;
& lt;导航类=皀avbar navbar-inverse”比;
& lt; div类=癱ontainer-fluid”比;
& lt; !——品牌和获得更好的移动分组切换显示——比;
& lt; div类=皀avbar-header”比;
& lt;按钮类型=鞍磁ァ崩?皀avbar-toggle倒塌”data-toggle=氨览！?
数据目标=" # bs-example-navbar-collapse-1 " aria-expanded=癴alse”比;
& lt;跨类=" sr-only "祝辞切换navigation
& lt;跨类=" icon-bar "祝辞& lt;/span>
& lt;跨类=" icon-bar "祝辞& lt;/span>
& lt;跨类=" icon-bar "祝辞& lt;/span>
& lt;/button>
& lt;一个类=" navbar-brand " th: href=" https://www.yisu.com/zixun/@{/面包屑的}”rel=巴獠縩ofollow”在Java分享& lt;/a>
& lt;/div>
& lt; !——收集导航链接、表单和其他内容的切换——比;
& lt; div类="崩溃navbar-collapse " id=癰s-example-navbar-collapse-1”比;
& lt; ul类=" nav navbar-nav " id=暗己健北?
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/nav>
& lt; !——面包屑——比;
& lt; ol类=懊姘肌北?
& lt;/ol>
& lt; div类="列表组" id=皊ubmenu-list”比;
& lt;/div>
& lt;/div>
& lt;脚本src=" https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js "祝辞& lt;/script>
& lt; script>
var ctx=$ (" # ctx”) .val ();
$(函数(){//获取一级菜单
getMenu (null, 1);
});
函数getMenu (id、级别){
var json={parentId: id、级别:级别};
. ajax({美元
url: ctx +“myCategory/列表”,
类型:“文章”,
application/json contentType:“”,
数据类型:“json”,
数据:JSON.stringify (json),
成功:函数(结果){
var="文本;
如果(result.success) {
如果结果。数据!=null) {//一级菜单
如果(水平!=null) {
每美元(的结果。数据,函数(ir) {
文本+=& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”οnclick=癵etMenu (' + r.id + ')”在“+ r.categoryName +“& lt;/a> & lt;/li>”
});
$(" #导航”)空虚();
$(" #导航”).append(文本);
}//子菜单
如果(id !=null) {
每美元(的结果。数据,函数(ir) {
console.log(我);
文本+=& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”类=發ist-group-itemοnclick”=癵etBreadCrumb (' + r.id + ')”在“+ r.categoryName + & lt;/a>”
});
$ (" # submenu-list ")空虚();
$ (" # submenu-list ") .append(文本);
}
}
其他}{
警报(result.message);
}
}
});
}//生成面包屑导航
函数getBreadCrumb (id) {
var参数={id: id};
. ajax({美元
url: ctx +“/myCategory/getParentList”,
类型:“获得”,
数据:{" id ": id},
成功:函数(结果){
var="文本;
如果(result.data !=null) {
文本=' & lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在首页& lt;/a> & lt;/li>”;
每美元(的结果。数据,函数(ir) {
文本+=& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在“+ r.categoryName +“& lt;/a> & lt;/li>”
});
$ (" .breadcrumb ")空虚();
$ (" .breadcrumb ") .append(文本);
}
}
})
}
& lt;/script>
& lt;/body>
& lt;/html>
