这篇文章主要介绍了bootstrap+spring boot实现面包屑导航,在cms建站时都会有这种面包屑导航功能,文中给出了前端实例代码,需要的朋友可以参考下
面包屑导航介绍
一般的内容型网站,例如CMS都会有这种面包屑导航。总结起来它有以下优势:
让用户了解目前所在的位置,以及当前页面在整个网站中所在的位置;
体现了网站的架构层级;提高了用户体验;
减少返回到上一级页面的操作;
实现效果
那我们应该如何实现?我看网上多数都是只提供静态实现,
这里我结合bootstrap 和 spring boot以及mysql来做一个完整的例子。
表结构设计
图里面的菜单其实是分级维护上下级关系的。我这里用到了2级,表里有level字段标记。
点击第1级加载第2级分类,点击第2级分类名称则展示面包屑导航。
CREATE TABLE `tb_category` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `category_name` varchar(100) NOT NULL, `parent_id` bigint(20) DEFAULT NULL, `level` tinyint(1) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8; insert into tb_category values(1,'Java文档',0,1); insert into tb_category values(2,'Java多线程',1,2); insert into tb_category values(3,'Spring Boot',1,2); insert into tb_category values(4,'微服务实战',1,2); insert into tb_category values(5,'Java视频',0,1); insert into tb_category values(6,'Java基础',5,2); insert into tb_category values(7,'Java基础',1,2); commit;
前端代码
响应式布局
总结
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
以上就是bootstrap+spring boot实现面包屑导航功能(前端代码)的详细内容,更多请关注0133技术站其它相关文章!