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


Posted in Javascript onOctober 09, 2019

面包屑导航介绍

一般的内容型网站,例如CMS都会有这种面包屑导航。总结起来它有以下优势:

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

让用户了解目前所在的位置,以及当前页面在整个网站中所在的位置;

体现了网站的架构层级;提高了用户体验;

减少返回到上一级页面的操作;

实现效果

那我们应该如何实现?我看网上多数都是只提供静态实现,

这里我结合bootstrap 和 spring boot以及mysql来做一个完整的例子。

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

表结构设计

图里面的菜单其实是分级维护上下级关系的。我这里用到了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实现面包屑导航功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript函数重载解决方案分享
Feb 19 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
javascript连续赋值问题
Jul 08 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 #Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 #Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 #Javascript
js基础之事件捕获与冒泡原理
Oct 09 #Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 #Javascript
vue封装swiper代码实例解析
Oct 08 #Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python中自定义函数的教程
2015/04/27 Python
Python 异常处理的实例详解
2017/09/11 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
工厂厂长的职责
2013/12/12 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
考研复习计划
2015/01/19 职场文书
组织委员竞选稿
2015/11/21 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript