基于bootstrap+spring boot实现面包屑导航

数字化转型方案 09-06 1200

前言：

眼前各位老铁们对“jquery面包屑导航代码”可能比较注意，我们都想要剖析一些“jquery面包屑导航代码”的相关知识。那么小编同时在网摘上汇集了一些关于“jquery面包屑导航代码””的相关内容，希望我们能喜欢，看官们一起来学习一下吧！

面包屑导航介绍

一般的内容型网站，例如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;

前端代码

 <!DOCTYPE html> <html xmlns="" xmlns:th="" xmlns:sec=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <link href="" rel="stylesheet"> </head> <body> <input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}"> <div class="container-fluid"> <!--页头--> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" th:href="@{'/breadCrumb'}">Java分享</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" id="navbar"> </ul> </div> </div> </nav> <!--面包屑--> <ol class="breadcrumb"> </ol> <div class="list-group" id="submenu-list"> </div> </div> <script src=""></script> <script src=""></script> <script> var ctx=$("#ctx").val(); $(function () { // 获取一级菜单 getMenu(null,1); }); function getMenu(id, level){ var json = {parentId:id,level:level}; $.ajax({ url: ctx+"/myCategory/list", type: "POST", contentType: "application/json", dataType: "json", data: JSON.stringify(json), success: function (result) { var text=''; if (result.success) { if(result.data != null){ // 一级菜单 if(level!=null){ $.each(result.data, function (i, r) { text += '<li><a href="#" οnclick="getMenu('+r.id+')">'+r.categoryName+'</a></li>' }); $("#navbar").empty(); $("#navbar").append(text); } // 子菜单 if(id!=null){ $.each(result.data, function (i, r) { console.log(i); text += '<a href="#" class="list-group-item" οnclick="getBreadCrumb('+r.id+')">'+r.categoryName+'</a>' }); $("#submenu-list").empty(); $("#submenu-list").append(text); } } } else { alert(result.message); } } }); } // 生成面包屑导航 function getBreadCrumb(id) { var param = {id:id}; $.ajax({ url: ctx+"/myCategory/getParentList", type: "GET", data: {"id":id}, success: function (result) { var text=''; if(result.data!=null){ text = '<li><a href="#">首页</a></li>'; $.each(result.data, function (i, r) { text += '<li><a href="#">'+r.categoryName+'</a></li>' }); $(".breadcrumb").empty(); $(".breadcrumb").append(text); } } }) } </script> </body> </html>

后端代码：

略。

————————————————

原文链接：

本文地址：http://www.longkongtuishu.com/ca7f2DGsCA1YDC1I.html

标签： #jquery面包屑导航代码 #jquery中的面包屑