bootstrap+spring boot实现面包屑导航 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

帝皇彩票官网蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


bootstrap+spring boot实现面包屑导航

2019-10-7 释然 前端及开发文章及欣赏


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



让用户了解目前所在的位置,以及当前页面在整个网站中所在的位置;
体现了网站的架构层级;提高了用户体验;
减少返回到上一级页面的操作;
 

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

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



表结构设计
图里面的菜单其实是分级维护上下级关系的。我这里用到了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'}">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="#" ο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="#" 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="#">帝皇彩票</a></li>';
                    $.each(result.data, function (i, r) {
                        text += '<li><a href="#">'+r.categoryName+'</a></li>'
                    });
 
                    $(".breadcrumb").empty();
                    $(".breadcrumb").append(text);
                }
            }
        })
    }
</script>
</body>
 
</html>
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务
标签: bootstrap+spring boot实现面包屑导航 « 视觉设计师应该掌握的五类交互逻辑 | 【一分钟阅读】关于组件化,我有一些小建议»


蓝蓝 http://www.bjhbys.com

  1. 2019年11月(8)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 2018年10月(29)
  15. 2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 帝皇彩票官网2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 帝皇彩票官网2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 帝皇彩票官网2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 帝皇彩票官网2013年1月(31)
  75. 帝皇彩票官网2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 帝皇彩票官网2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
状元彩票计划 吉利彩票登陆 桔子彩票官网 帝皇彩票登陆 桔子彩票开奖 吉利彩票登陆 桔子彩票官网 桔子彩票登陆 内蒙古快3计划 帝皇彩票