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 汉字字节判断
Aug 01 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
python操作CouchDB的方法
2014/10/08 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
检讨书怎么写
2015/05/07 职场文书
python文件目录操作之os模块
2021/05/08 Python