溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
面包屑導航介紹
一般的內容型網站，例如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'}" 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實現面包屑導航功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
