js面包屑，如何制作面包屑，什么是面包屑，又如何去理解面包屑是什么呢，对于不会应该怎么办呢？这篇文章告诉你。
博主：锅盖哒
文章核心：带你了解原生js面包屑框架
目录大纲
1.面包屑的概念与框架地址
2.功能框架预览于介绍
框架效果预览：
页面架构代码预览：
HTML页面预览：
权限验证介绍
3.面包屑的逻辑
下面就是面包屑逻辑
1.首先从login页面进入拿到渲染左侧列表的值
2.进入首页
3.代码执行逻辑
1.面包屑的概念与框架地址
链接：原生js框架: 在此声明仅供学习使用
首先我们要了解面包屑的一个简单的概念，耐心的看下去
- 面包屑功能的概念最初来自于面包制作过程中使用的 "breadcrumb"（面包屑屑）术语。在烘焙时，为了追踪和控制面团、酵母或其它成分的份量，一般会在面团表面割上刻线，以便于参考。这些刻线被称为 "breadcrumbs"，意为面包屑屑。
- 在Web设计中，面包屑导航也借用了面包制作的概念，用于指示当前页面所处的导航路径，帮助用户理解他们在网站中的位置并提供页面之间的导航链接。通过显示页面的层级结构和路径信息，用户可以更容易地返回上一级页面或导航到其他相关页面。
- 面包屑功能在用户体验和网站导航中起着重要的作用。它有助于提高网站的可用性、降低用户的迷失感，并提供清晰而直观的导航选项。特别是在大型网站或电子商务平台中，面包屑能让用户方便地跟踪和管理他们的浏览路径，提供了一种快速导航方式。
- 如今，面包屑功能已成为许多网站和应用程序常用的导航元素，具有广泛的应用。它在网页设计和用户体验中扮演着重要的角色，为用户提供更好的导航和浏览体验。
2.功能框架预览于介绍
框架效果预览：
页面架构代码预览：
let roles = [
{
"id": 1,
"pid": 0,
"name": "index",
"path": "/",
"meta": {
"icon": "icon-home",
"title": "首页"
},
"redirect": "/root",
"children": []
},
{
"id": 4,
"pid": 0,
"name": "power",
"path": "/power",
"meta": {
"icon": "icon-lock",
"title": "权限管理"
},
"redirect": "/power",
"children": [
{
"id": 15,
"pid": 4,
"name": "account",
"path": "/account",
"meta": {
"icon": "icon-rectangular-vertebra",
"title": "账号管理"
},
"redirect": "/account",
"children": []
},
{
"id": 32,
"pid": 4,
"name": "agree",
"path": "/agree",
"meta": {
"icon": "icon-newspaper-folding",
"title": "用户协议管理"
},
"redirect": "/agree",
"children": []
}
]
},
{
"id": 5,
"pid": 0,
"name": "industry",
"path": "/industry",
"meta": {
"icon": "icon-association",
"title": "行业分类管理"
},
"redirect": "/industry",
"children": []
},
{
"id": 6,
"pid": 0,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": [
{
"id": 40,
"pid": 6,
"name": "goodschild",
"path": "/goodschild",
"meta": {
"icon": "icon-home",
"title": "商品详情"
},
"redirect": "/goodschild",
"children": []
},
{
"id": 41,
"pid": 6,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": []
}
]
},
{
"id": 8,
"pid": 0,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-bar-code",
"title": "供需管理"
},
"redirect": "/supply",
"children": [
{
"id": 17,
"pid": 8,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-api-app",
"title": "供应列表"
},
"redirect": "/supply",
"children": []
},
{
"id": 18,
"pid": 8,
"name": "need",
"path": "/need",
"meta": {
"icon": "icon-api-app",
"title": "需求管理"
},
"redirect": "/need",
"children": []
}
]
},
{
"id": 9,
"pid": 0,
"name": "office",
"path": "/office",
"meta": {
"icon": "icon-home",
"title": "中介服务"
},
"redirect": "/middle",
"children": [
{
"id": 20,
"pid": 9,
"name": "office",
"path": "/office",
"meta": {
"icon": "icon-api-app",
"title": "事务所分类管理"
},
"redirect": "/office",
"children": []
},
{
"id": 21,
"pid": 9,
"name": "offices",
"path": "/offices",
"meta": {
"icon": "icon-home",
"title": "事务所管理"
},
"redirect": "/offices",
"children": []
},
{
"id": 29,
"pid": 9,
"name": "text",
"path": "/text",
"meta": {
"icon": "icon-like",
"title": "事务所文章"
},
"redirect": "/text",
"children": []
},
{
"id": 35,
"pid": 9,
"name": "operator",
"path": "/operator",
"meta": {
"icon": "icon-newspaper-folding",
"title": "运营商新闻管理"
},
"redirect": "/operator",
"children": []
}
]
},
{
"id": 10,
"pid": 0,
"name": "bank",
"path": "/bank",
"meta": {
"icon": "icon-bank",
"title": "金融服务"
},
"redirect": "/bank",
"children": [
{
"id": 23,
"pid": 10,
"name": "bank",
"path": "/bank",
"meta": {
"icon": "icon-connection-point",
"title": "建行分类"
},
"redirect": "/bank",
"children": []
},
{
"id": 24,
"pid": 10,
"name": "bankbanner",
"path": "/bankbanner",
"meta": {
"icon": "icon-picture",
"title": "建行轮播"
},
"redirect": "/bankbanner",
"children": []
},
{
"id": 31,
"pid": 10,
"name": "bankmap",
"path": "/bankmap",
"meta": {
"icon": "icon-home",
"title": "网点管理"
},
"redirect": "/bankmap",
"children": []
},
{
"id": 39,
"pid": 10,
"name": "policy",
"path": "/policy",
"meta": {
"icon": "icon-newspaper-folding",
"title": "金融政策"
},
"redirect": "/policy",
"children": []
}
]
},
{
"id": 16,
"pid": 0,
"name": "notice",
"path": "/notice",
"meta": {
"icon": "icon-announcement",
"title": "公告管理"
},
"redirect": "/notice",
"children": []
},
{
"id": 22,
"pid": 0,
"name": "feedback",
"path": "/feedback",
"meta": {
"icon": "icon-folder",
"title": "意见反馈"
},
"redirect": "/feedback",
"children": []
},
{
"id": 43,
"pid": 0,
"name": "state",
"path": "/state",
"meta": {
"icon": "icon-menu-fold-one",
"title": "平台管理"
},
"redirect": "/platform",
"children": [
{
"id": 44,
"pid": 43,
"name": "state",
"path": "/state",
"meta": {
"icon": "icon-api-app",
"title": "企联动态"
},
"redirect": "/state",
"children": []
},
{
"id": 45,
"pid": 43,
"name": "active",
"path": "/active",
"meta": {
"icon": "icon-association",
"title": "企联活动"
},
"redirect": "/active",
"children": []
},
{
"id": 46,
"pid": 43,
"name": "rule",
"path": "/rule",
"meta": {
"icon": "icon-newspaper-folding",
"title": "政策法规"
},
"redirect": "/rule",
"children": []
},
{
"id": 47,
"pid": 43,
"name": "ad",
"path": "/ad",
"meta": {
"icon": "icon-ad",
"title": "广告管理"
},
"redirect": "/ad",
"children": []
},
{
"id": 48,
"pid": 43,
"name": "poster",
"path": "/poster",
"meta": {
"icon": "icon-picture",
"title": "入会申请"
},
"redirect": "/poster",
"children": []
}
]
}
]假设删除其中的一个那吗推荐下面 HTML页面预览：中相应的也删除掉不会报错就是占地方，因为整体的页面就是通过这段假数据拿到的。
HTML页面预览：
可以在原本的HTML上面进行页面的制作与更改
权限验证介绍
如果我们直接从其他页面进入那么在没有存储中没有数据1的话，那么他就会跳入login页面，如果有那么将是你点击的那个页面
let qxian = 1;3.面包屑的逻辑
进一步的刨析整个框架中点击左侧列表，顶部生成一个
下面就是面包屑逻辑
1.首先从login页面进入拿到渲染左侧列表的值
获取账号和密码框的值---是否等于admin---123456
成功将执行-----获取存储变量qxian权限验证和左侧导航的数据
失败将执行-----弹窗失败函数
function islogin() {
let account = document.getElementById("user").value;
let password = document.getElementById("pass").value;
if (account == 'admin' && password == '123456') {
sessionStorage.setItem("id",qxian);
sessionStorage.setItem("roles",JSON.stringify(roles));
// 跳转页面
setTimeout(() => {
location.href = "./index.html"
}, 1500);
success()
}else{
fail()
}
}
假设下面是接口中的数据
let qxian = 1;
let roles = [
{
"id": 1,
"pid": 0,
"name": "index",
"path": "/",
"meta": {
"icon": "icon-home",
"title": "首页"
},
"redirect": "/root",
"children": []
},
{
"id": 4,
"pid": 0,
"name": "power",
"path": "/power",
"meta": {
"icon": "icon-lock",
"title": "权限管理"
},
"redirect": "/power",
"children": [
{
"id": 15,
"pid": 4,
"name": "account",
"path": "/account",
"meta": {
"icon": "icon-rectangular-vertebra",
"title": "账号管理"
},
"redirect": "/account",
"children": []
},
{
"id": 32,
"pid": 4,
"name": "agree",
"path": "/agree",
"meta": {
"icon": "icon-newspaper-folding",
"title": "用户协议管理"
},
"redirect": "/agree",
"children": []
}
]
},
{
"id": 5,
"pid": 0,
"name": "industry",
"path": "/industry",
"meta": {
"icon": "icon-association",
"title": "行业分类管理"
},
"redirect": "/industry",
"children": []
},
{
"id": 6,
"pid": 0,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": [
{
"id": 40,
"pid": 6,
"name": "goodschild",
"path": "/goodschild",
"meta": {
"icon": "icon-home",
"title": "商品详情"
},
"redirect": "/goodschild",
"children": []
},
{
"id": 41,
"pid": 6,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": []
}
]
},
{
"id": 8,
"pid": 0,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-bar-code",
"title": "供需管理"
},
"redirect": "/supply",
"children": [
{
"id": 17,
"pid": 8,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-api-app",
"title": "供应列表"
},
"redirect": "/supply",
"children": []
},
{
"id": 18,
"pid": 8,
"name": "need",
"path": "/need",
"meta": {
"icon": "icon-api-app",
"title": "需求管理"
},
"redirect": "/need",
"children": []
}
]
},
{
"id": 9,
"pid": 0,
"name": "office",
"path": "/office",
"meta": {
"icon": "icon-home",
"title": "中介服务"
},
"redirect": "/middle",
"children": [
{
"id": 20,
"pid": 9,
"name": "office",
"path": "/office",
"meta": {
"icon": "icon-api-app",
"title": "事务所分类管理"
},
"redirect": "/office",
"children": []
},
{
"id": 21,
"pid": 9,
"name": "offices",
"path": "/offices",
"meta": {
"icon": "icon-home",
"title": "事务所管理"
},
"redirect": "/offices",
"children": []
},
{
"id": 29,
"pid": 9,
"name": "text",
"path": "/text",
"meta": {
"icon": "icon-like",
"title": "事务所文章"
},
"redirect": "/text",
"children": []
},
{
"id": 35,
"pid": 9,
"name": "operator",
"path": "/operator",
"meta": {
"icon": "icon-newspaper-folding",
"title": "运营商新闻管理"
},
"redirect": "/operator",
"children": []
}
]
},
{
"id": 10,
"pid": 0,
"name": "bank",
"path": "/bank",
"meta": {
"icon": "icon-bank",
"title": "金融服务"
},
"redirect": "/bank",
"children": [
{
"id": 23,
"pid": 10,
"name": "bank",
"path": "/bank",
"meta": {
"icon": "icon-connection-point",
"title": "建行分类"
},
"redirect": "/bank",
"children": []
},
{
"id": 24,
"pid": 10,
"name": "bankbanner",
"path": "/bankbanner",
"meta": {
"icon": "icon-picture",
"title": "建行轮播"
},
"redirect": "/bankbanner",
"children": []
},
{
"id": 31,
"pid": 10,
"name": "bankmap",
"path": "/bankmap",
"meta": {
"icon": "icon-home",
"title": "网点管理"
},
"redirect": "/bankmap",
"children": []
},
{
"id": 39,
"pid": 10,
"name": "policy",
"path": "/policy",
"meta": {
"icon": "icon-newspaper-folding",
"title": "金融政策"
},
"redirect": "/policy",
"children": []
}
]
},
{
"id": 16,
"pid": 0,
"name": "notice",
"path": "/notice",
"meta": {
"icon": "icon-announcement",
"title": "公告管理"
},
"redirect": "/notice",
"children": []
},
{
"id": 22,
"pid": 0,
"name": "feedback",
"path": "/feedback",
"meta": {
"icon": "icon-folder",
"title": "意见反馈"
},
"redirect": "/feedback",
"children": []
},
{
"id": 43,
"pid": 0,
"name": "state",
"path": "/state",
"meta": {
"icon": "icon-menu-fold-one",
"title": "平台管理"
},
"redirect": "/platform",
"children": [
{
"id": 44,
"pid": 43,
"name": "state",
"path": "/state",
"meta": {
"icon": "icon-api-app",
"title": "企联动态"
},
"redirect": "/state",
"children": []
},
{
"id": 45,
"pid": 43,
"name": "active",
"path": "/active",
"meta": {
"icon": "icon-association",
"title": "企联活动"
},
"redirect": "/active",
"children": []
},
{
"id": 46,
"pid": 43,
"name": "rule",
"path": "/rule",
"meta": {
"icon": "icon-newspaper-folding",
"title": "政策法规"
},
"redirect": "/rule",
"children": []
},
{
"id": 47,
"pid": 43,
"name": "ad",
"path": "/ad",
"meta": {
"icon": "icon-ad",
"title": "广告管理"
},
"redirect": "/ad",
"children": []
},
{
"id": 48,
"pid": 43,
"name": "poster",
"path": "/poster",
"meta": {
"icon": "icon-picture",
"title": "入会申请"
},
"redirect": "/poster",
"children": []
}
]
}
]
2.进入首页
大概结构的一个预览
3.代码执行逻辑
这一块是渲染列表的并且判断是否有二级数据如果有二级数据，那么渲染一个箭头代表拥有二级列表。
function renList(arr){
console.log(arr);
let str = "";
for(let i = 0; i < arr.length; i++){
if(arr[i].children.length > 0){
str += `
${arr[i].meta.title}
`;
for(let k = 0; k < arr[i].children.length; k++){
str += `
${arr[i].children[k].meta.title}
`;
}
str += ``;
}else{
str += `
${arr[i].meta.title}
`;
}
}
document.getElementsByClassName("frames-left-nav")[0].innerHTML = str;
}通过点击渲染相应页面，也就是根据接口返回数据对比
// 菜单点击
function ishref(name,path){
let arr = sessionStorage.getItem("list");
if(arr == null){
arr = [];
}else{
arr = JSON.parse(arr);
}
if(path == "index"){
location.href = `./index.html`;
return;
}
for(let i = 0; i < arr.length; i++){
if(arr[i].path == path){
location.href = `./${path}.html`;
return;
}
}
arr.push({
name,
path
});
let str = JSON.stringify(arr);
sessionStorage.setItem("list",str);
location.href = `./${path}.html`;
}删除面包屑
通过点击叉号关闭相应页面，也就是根据自己点击的进行关闭，关闭一个自动调一下页面，如果所有都已关闭那么将返回index。
function isdel(path){
let arr = sessionStorage.getItem("list");
if(arr == null){
arr = [];
}else{
arr = JSON.parse(arr);
}
for(let i = 0; i < arr.length; i++){
if(arr[i].path == path){
arr.splice(i,1);
break;
}
}
sessionStorage.setItem("list",JSON.stringify(arr));
if(path != isname && arr.length != 0){
tagList();
return;
}
console.log(123);
if(arr.length != 0){
location.href = `./${arr[arr.length-1].path}.html`;
}else{
location.href = "./index.html";
}
}欢迎观看本篇博客，如果有更好的提议，请与评论区发出，框架仅供学习使用
