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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 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数据饼图效果实现代码
2011/11/23 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP图片加水印实现方法
2016/05/06 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python插入排序算法实例分析
2015/07/03 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python 调用有道api接口的方法
2019/01/03 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
军训感想500字
2014/02/20 职场文书
文体活动总结范文
2014/05/05 职场文书
五年级学生评语大全
2014/12/26 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python