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入门教程(11) js事件处理
Jan 31 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
jquery实现弹出层效果实例
May 19 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
jquery延迟对象解析
Oct 26 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
使用数据库保存session的方法
2006/10/09 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
详解python中asyncio模块
2018/03/03 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
C面试题
2015/10/08 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
教师见习报告范文
2014/11/03 职场文书
体育个人工作总结
2015/02/09 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS