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 动态将数字金额转化为中文大写金额
May 14 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
纯javascript制作日历控件
Jul 17 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
Vue.js对象转换实例
Jun 07 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP新手入门学习方法
2011/05/08 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
python中的五种异常处理机制介绍
2014/09/02 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Django框架表单操作实例分析
2019/11/04 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python函数参数分类原理详解
2020/05/28 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android