js面包屑,弄一个面包屑,什么是面包屑,又去理解面包屑是什么意思呢,对于不会应该怎么办呢这篇文章告诉你。
🙂博主:锅盖哒
🙂文章核心:带你了解原生js面包屑框架
目录大纲
1.面包屑的概念与框架地址
首先我们要了解面包屑的一个简单的概念,耐心的看下去
- 面包屑功能的概念最初来自于面包制作过程中使用的 "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 = `
-
<div class="frames-left-parent">
-
<div class="frames-left-list">
-
<p onclick="woqu(${i})">${arr[i].meta.title}<img src="./img/xjt.png" class="class_img" alt="" style="width:10px;height:10px;margin-left:10%"></p>
-
</div>
-
<div class="frames-left-child">
-
`;
-
-
for(let k = 0; k < arr[i].children.length; k ){
-
str = `
-
<div class="frames-left-item" style="background-color:${ arr[i].children[k].name == isname ? '#409EFF' : '' };" onclick="ishref('${arr[i].children[k].meta.title}','${arr[i].children[k].name}')">
-
-
<p> ${arr[i].children[k].meta.title}</p>
-
</div>
-
`;
-
}
-
-
str = `</div></div>`;
-
}else{
-
str = `
-
<div class="frames-left-list" style="background-color:${ arr[i].name == isname ? '#409EFF' : '' };" onclick="ishref('${arr[i].meta.title}','${arr[i].name}')">
-
<p> ${arr[i].meta.title}</p>
-
</div>
-
`;
-
}
-
}
-
-
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";
-
}
-
}
欢迎观看本篇博客,如果有更好的提议,请与评论区发出,框架仅供学习使用
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabcef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24