bootstrap+spring boot实现面包屑导航

2019-10-7    seo达人

面包屑导航介绍

一般的内容型网站,例如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"&gt;

 

<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"&gt;&lt;/script&gt;

<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

<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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档