bootstrap spring boot实现面包屑导航功能(前端代码)

面包屑导航简介

一般基于内容的网站，比如CMS，都会有这种面包屑导航。综上所述，它有以下优点：

让用户知道自己在哪里，当前页面在整个网站的什么位置；

体现了网站的架构水平；提升用户体验；

减少返回上一页的操作；

达到效果

那我们应该如何实现呢？我认为大多数互联网只提供静态实现，

我将结合bootstrap、spring boot和mysql给出一个完整的例子。

桌子结构设计

其实图中的菜单维护的是上下级的层级关系。我这里用的是level 2，表格用level字段标注。

点击一级加载二级分类，点击二级分类名称显示面包屑导航。

CREATE TABLE ` TB _ category `(` id ` big int(20)NOT NULL AUTO _ INCREMENT，` category _ name ` varchar(100)NOT NULL，` parent _ id ` big int(20)DEFAULT NULL，` level` tinyint(1) DEFAULT NULL，PRIMARY KEY(` id `))ENGINE=InnoDB AUTO _ INCREMENT=8 DEFAULT CHARSET=utf8；插入TB _ Category值(1，‘Java Document’，0，1)；插入到TB _ Category值中(2，Java多线程’，1，2)；插入tb_category值(3，‘Spring Boot’，1，2)；插入tb_category值(4，‘微服务实战’，1，2)；插入TB _ Category值(5，‘Java Video’，0，1)；插入TB _ Category值(6，‘Java Foundation’，5，2)；插入TB _ Category值(7，‘Java Foundation’，1，2)；提交；前端代码

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' xmlns : th=' http://www .百里叶。org' xmlns:sec='http://www。百里叶。org/extras/spring-security ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0' title响应式布局/title link。bootscs。com/Twitter-bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' rel='样式表'/流头动态输入类型=' text ' id=' CTX ' hidden=' hidden ' th : value=' $ { # request。getcontextpath()} ' div class=' container-fluid '！-页头-nav class=' nav bar nav bar-reverse ' div class=' container-fluid '！-品牌和切换获取分组以获得更好的移动显示- div class='navbar-header '按钮类型=' button ' class='导航条-切换折叠'数据-toggle=' collapse ' data-target=' # bs-example-nav bar-collapse-1 ' aria-expanded=' false ' span class=' Sr-only '切换导航/span class=' icon-bar '/span class=' icon-bar '/span span class=' icon-bar '/span/button a class=' nav bar-品牌th:href分享/a/-收集用于切换的导航链接、表单和其他内容-div class='折叠导航条-折叠' id=' bs-example-导航条-折叠-1 ' ul class='导航条-导航' id='导航条'/ul/div/div/nav！-面包屑表示“酒精”类='面包屑/ol div类='列表-组id='子菜单-列表/div/div脚本src=' http :https://cdn。启动脚本。com/jquery/3。4 .0/jquery。量滴js '/script script src=' http :https://cdn。启动脚本。com/Twitter-bootscript/3。3 .7/js/bootscript。量滴js '/script脚本var CTX=$ val()；$(function () { //获取一级菜单getMenu(null，1)；});函数getMenu(id，level){ var JSON={ parent id : id，level : level }；$.Ajax({ URL : CTX '/我的类别/列表'，type: 'POST '，内容类型： ' application/JSON '，dataType: 'json '，data: JSON.stringify(json)，success:函数(结果){ var text=if(结果。成功){如果(结果。数据！=null){ //一级菜单如果（水平！=null){ $ .每个(result.data，function (i，r){ text=' lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow 'n click=' GetMenu(' r . id ')' r . categoryname '/a/Li ' })；$('#navbar ').empty()；$('#navbar ').追加（文本);} //子菜单if(id！=null){ $ .每个(result.data，function (i，r){ console。日志(一)；text=' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' list-group-item 'n click=' GetBread(' r . id ')' r . categoryname '/a ' })；$(' #子菜单-列表')。empty()；$(' #子菜单-列表')。追加（文本);} } } else { alert(结果。消息)；} } });} //生成面包屑导航函数得到面包屑(id){ var param={ id : id }；$.Ajax({ URL : CTX/我的类别/getParentList '，类型： 'GET '，数据： {'id':id}，成功：函数（结果){ var text=if(result.data！=null){ text=' lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '首页/a/李；$.每个(result.data，function (i，r){ text=' lia href=' # ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' ' r . category name '/a/Li ' })；$('.面包屑')。empty()；$('.面包屑')。追加（文本);} } })}/脚本/正文/html总结

以上是边肖为实现面包屑导航而推出的bootstrap spring boot。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！