追求卓越一诺千金

蓝蓝设计,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.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务
标签: bootstrap+spring boot实现面包屑导航 « 视觉设计师应该掌握的五类交互逻辑 | 【一分钟阅读】关于组件化,我有一些小建议»


订阅Rss