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

更新时间：2019年10月09日 09:30:25 作者：罗汉爷

这篇文章主要介绍了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;

前端代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
   xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局</title>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" 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'}" rel="external nofollow" >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="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ο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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>';
          $.each(result.data, function (i, r) {
            text += '<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+r.categoryName+'</a></li>'
          });
          $(".breadcrumb").empty();
          $(".breadcrumb").append(text);
        }
      }
    })
  }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的bootstrap+spring boot实现面包屑导航功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

jquery+CSS实现悬浮登录框遮罩
这篇文章主要为大家详细介绍了jquery+CSS实现悬浮登录框遮罩，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
jquery控制背景音乐开关与自动播放提示音的方法
这篇文章主要介绍了jquery控制背景音乐开关与自动播放提示音的方法,实例分析了背景音乐开关的技巧与自动播放提示音的常见用法,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jquery 实时监听输入框值变化的完美方法(必看)
下面小编就为大家带来一篇jquery 实时监听输入框值变化的完美方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
jqGrid用法汇总(全经典)
　jqGrid可以绑定XML,JSON和数组三种类型的数据。接下来通过本文给大家介绍jqGrid用法的相关知识，感兴趣的朋友一起学习吧
2016-06-06
jQuery Selectors(选择器)的使用(二、层次篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！
2009-12-12
jquery实现搜索框功能实例详解
这篇文章主要介绍了jquery实现搜索框功能,搜索框实现搜索一个ul列表中的指定关键词的li。具体实现代码大家参考下本文
2018-07-07
jQuery新窗口打开外链接
这篇文章主要介绍了jQuery新窗口打开外链接的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
jQuery代码优化方法总结
本篇文章给大家总结了关于jQuery代码优化方法，如果你这方面有需求，跟着小编一起学习下吧。
2018-01-01
jquery简单插件制作(fn.extend)完整实例
这篇文章主要介绍了jquery简单插件制作(fn.extend)方法,结合完整实例形式分析了jQuery fn.extend扩展插件的实现技巧,需要的朋友可以参考下
2016-05-05
基于Jquery实现键盘按键监听
本文介绍下，用jquery实现的滑动效果，以及对键盘按键进行监听的例子，有需要的朋友，可以参考学习下
2014-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具