1.面包屑的概念与框架地址
首先我们要了解面包屑的一个简单的概念，耐心的看下去
- 面包屑功能的概念最初来自于面包制作过程中使用的 "breadcrumb"（面包屑屑）术语。在烘焙时，为了追踪和控制面团、酵母或其它成分的份量，一般会在面团表面割上刻线，以便于参考。这些刻线被称为 "breadcrumbs"，意为面包屑屑。
- 在Web设计中，面包屑导航也借用了面包制作的概念，用于指示当前页面所处的导航路径，帮助用户理解他们在网站中的位置并提供页面之间的导航链接。通过显示页面的层级结构和路径信息，用户可以更容易地返回上一级页面或导航到其他相关页面。
- 面包屑功能在用户体验和网站导航中起着重要的作用。它有助于提高网站的可用性、降低用户的迷失感，并提供清晰而直观的导航选项。特别是在大型网站或电子商务平台中，面包屑能让用户方便地跟踪和管理他们的浏览路径，提供了一种快速导航方式。
- 如今，面包屑功能已成为许多网站和应用程序常用的导航元素，具有广泛的应用。它在网页设计和用户体验中扮演着重要的角色，为用户提供更好的导航和浏览体验。
2.功能框架预览于介绍
框架效果预览：
页面架构代码预览：
1. let roles = [ 2. { 3. "id": 1, 4. "pid": 0, 5. "name": "index", 6. "path": "/", 7. "meta": { 8. "icon": "icon-home", 9. "title": "首页" 10. }, 11. "redirect": "/root", 12. "children": [] 13. }, 14. { 15. "id": 4, 16. "pid": 0, 17. "name": "power", 18. "path": "/power", 19. "meta": { 20. "icon": "icon-lock", 21. "title": "权限管理" 22. }, 23. "redirect": "/power", 24. "children": [ 25. { 26. "id": 15, 27. "pid": 4, 28. "name": "account", 29. "path": "/account", 30. "meta": { 31. "icon": "icon-rectangular-vertebra", 32. "title": "账号管理" 33. }, 34. "redirect": "/account", 35. "children": [] 36. }, 37. { 38. "id": 32, 39. "pid": 4, 40. "name": "agree", 41. "path": "/agree", 42. "meta": { 43. "icon": "icon-newspaper-folding", 44. "title": "用户协议管理" 45. }, 46. "redirect": "/agree", 47. "children": [] 48. } 49. ] 50. }, 51. { 52. "id": 5, 53. "pid": 0, 54. "name": "industry", 55. "path": "/industry", 56. "meta": { 57. "icon": "icon-association", 58. "title": "行业分类管理" 59. }, 60. "redirect": "/industry", 61. "children": [] 62. }, 63. { 64. "id": 6, 65. "pid": 0, 66. "name": "goods", 67. "path": "/goods", 68. "meta": { 69. "icon": "icon-commodity", 70. "title": "商品管理" 71. }, 72. "redirect": "/goods", 73. "children": [ 74. { 75. "id": 40, 76. "pid": 6, 77. "name": "goodschild", 78. "path": "/goodschild", 79. "meta": { 80. "icon": "icon-home", 81. "title": "商品详情" 82. }, 83. "redirect": "/goodschild", 84. "children": [] 85. }, 86. { 87. "id": 41, 88. "pid": 6, 89. "name": "goods", 90. "path": "/goods", 91. "meta": { 92. "icon": "icon-commodity", 93. "title": "商品管理" 94. }, 95. "redirect": "/goods", 96. "children": [] 97. } 98. ] 99. }, 100. { 101. "id": 8, 102. "pid": 0, 103. "name": "supply", 104. "path": "/supply", 105. "meta": { 106. "icon": "icon-bar-code", 107. "title": "供需管理" 108. }, 109. "redirect": "/supply", 110. "children": [ 111. { 112. "id": 17, 113. "pid": 8, 114. "name": "supply", 115. "path": "/supply", 116. "meta": { 117. "icon": "icon-api-app", 118. "title": "供应列表" 119. }, 120. "redirect": "/supply", 121. "children": [] 122. }, 123. { 124. "id": 18, 125. "pid": 8, 126. "name": "need", 127. "path": "/need", 128. "meta": { 129. "icon": "icon-api-app", 130. "title": "需求管理" 131. }, 132. "redirect": "/need", 133. "children": [] 134. } 135. ] 136. }, 137. { 138. "id": 9, 139. "pid": 0, 140. "name": "office", 141. "path": "/office", 142. "meta": { 143. "icon": "icon-home", 144. "title": "中介服务" 145. }, 146. "redirect": "/middle", 147. "children": [ 148. { 149. "id": 20, 150. "pid": 9, 151. "name": "office", 152. "path": "/office", 153. "meta": { 154. "icon": "icon-api-app", 155. "title": "事务所分类管理" 156. }, 157. "redirect": "/office", 158. "children": [] 159. }, 160. { 161. "id": 21, 162. "pid": 9, 163. "name": "offices", 164. "path": "/offices", 165. "meta": { 166. "icon": "icon-home", 167. "title": "事务所管理" 168. }, 169. "redirect": "/offices", 170. "children": [] 171. }, 172. { 173. "id": 29, 174. "pid": 9, 175. "name": "text", 176. "path": "/text", 177. "meta": { 178. "icon": "icon-like", 179. "title": "事务所文章" 180. }, 181. "redirect": "/text", 182. "children": [] 183. }, 184. { 185. "id": 35, 186. "pid": 9, 187. "name": "operator", 188. "path": "/operator", 189. "meta": { 190. "icon": "icon-newspaper-folding", 191. "title": "运营商新闻管理" 192. }, 193. "redirect": "/operator", 194. "children": [] 195. } 196. ] 197. }, 198. { 199. "id": 10, 200. "pid": 0, 201. "name": "bank", 202. "path": "/bank", 203. "meta": { 204. "icon": "icon-bank", 205. "title": "金融服务" 206. }, 207. "redirect": "/bank", 208. "children": [ 209. { 210. "id": 23, 211. "pid": 10, 212. "name": "bank", 213. "path": "/bank", 214. "meta": { 215. "icon": "icon-connection-point", 216. "title": "建行分类" 217. }, 218. "redirect": "/bank", 219. "children": [] 220. }, 221. { 222. "id": 24, 223. "pid": 10, 224. "name": "bankbanner", 225. "path": "/bankbanner", 226. "meta": { 227. "icon": "icon-picture", 228. "title": "建行轮播" 229. }, 230. "redirect": "/bankbanner", 231. "children": [] 232. }, 233. { 234. "id": 31, 235. "pid": 10, 236. "name": "bankmap", 237. "path": "/bankmap", 238. "meta": { 239. "icon": "icon-home", 240. "title": "网点管理" 241. }, 242. "redirect": "/bankmap", 243. "children": [] 244. }, 245. { 246. "id": 39, 247. "pid": 10, 248. "name": "policy", 249. "path": "/policy", 250. "meta": { 251. "icon": "icon-newspaper-folding", 252. "title": "金融政策" 253. }, 254. "redirect": "/policy", 255. "children": [] 256. } 257. ] 258. }, 259. { 260. "id": 16, 261. "pid": 0, 262. "name": "notice", 263. "path": "/notice", 264. "meta": { 265. "icon": "icon-announcement", 266. "title": "公告管理" 267. }, 268. "redirect": "/notice", 269. "children": [] 270. }, 271. { 272. "id": 22, 273. "pid": 0, 274. "name": "feedback", 275. "path": "/feedback", 276. "meta": { 277. "icon": "icon-folder", 278. "title": "意见反馈" 279. }, 280. "redirect": "/feedback", 281. "children": [] 282. }, 283. { 284. "id": 43, 285. "pid": 0, 286. "name": "state", 287. "path": "/state", 288. "meta": { 289. "icon": "icon-menu-fold-one", 290. "title": "平台管理" 291. }, 292. "redirect": "/platform", 293. "children": [ 294. { 295. "id": 44, 296. "pid": 43, 297. "name": "state", 298. "path": "/state", 299. "meta": { 300. "icon": "icon-api-app", 301. "title": "企联动态" 302. }, 303. "redirect": "/state", 304. "children": [] 305. }, 306. { 307. "id": 45, 308. "pid": 43, 309. "name": "active", 310. "path": "/active", 311. "meta": { 312. "icon": "icon-association", 313. "title": "企联活动" 314. }, 315. "redirect": "/active", 316. "children": [] 317. }, 318. { 319. "id": 46, 320. "pid": 43, 321. "name": "rule", 322. "path": "/rule", 323. "meta": { 324. "icon": "icon-newspaper-folding", 325. "title": "政策法规" 326. }, 327. "redirect": "/rule", 328. "children": [] 329. }, 330. { 331. "id": 47, 332. "pid": 43, 333. "name": "ad", 334. "path": "/ad", 335. "meta": { 336. "icon": "icon-ad", 337. "title": "广告管理" 338. }, 339. "redirect": "/ad", 340. "children": [] 341. }, 342. { 343. "id": 48, 344. "pid": 43, 345. "name": "poster", 346. "path": "/poster", 347. "meta": { 348. "icon": "icon-picture", 349. "title": "入会申请" 350. }, 351. "redirect": "/poster", 352. "children": [] 353. } 354. ] 355. } 356. ]
假设删除其中的一个那吗推荐下面 HTML页面预览：中相应的也删除掉不会报错就是占地方，因为整体的页面就是通过这段假数据拿到的。
HTML页面预览：
可以在原本的HTML上面进行页面的制作与更改
权限验证介绍
如果我们直接从其他页面进入那么在没有存储中没有数据1的话，那么他就会跳入login页面，如果有那么将是你点击的那个页面
let qxian = 1;
3.面包屑的逻辑
进一步的刨析整个框架中点击左侧列表，顶部生成一个
下面就是面包屑逻辑
1.首先从login页面进入拿到渲染左侧列表的值
获取账号和密码框的值---是否等于admin---123456
成功将执行-----获取存储变量qxian权限验证和左侧导航的数据
失败将执行-----弹窗失败函数
1. function islogin() { 2. let account = document.getElementById("user").value; 3. let password = document.getElementById("pass").value; 4. if (account == 'admin' && password == '123456') { 5. sessionStorage.setItem("id",qxian); 6. sessionStorage.setItem("roles",JSON.stringify(roles)); 7. // 跳转页面 8. setTimeout(() => { 9. location.href = "./index.html" 10. }, 1500); 11. success() 12. }else{ 13. fail() 14. } 15. }
假设下面是接口中的数据
1. let qxian = 1; 2. let roles = [ 3. { 4. "id": 1, 5. "pid": 0, 6. "name": "index", 7. "path": "/", 8. "meta": { 9. "icon": "icon-home", 10. "title": "首页" 11. }, 12. "redirect": "/root", 13. "children": [] 14. }, 15. { 16. "id": 4, 17. "pid": 0, 18. "name": "power", 19. "path": "/power", 20. "meta": { 21. "icon": "icon-lock", 22. "title": "权限管理" 23. }, 24. "redirect": "/power", 25. "children": [ 26. { 27. "id": 15, 28. "pid": 4, 29. "name": "account", 30. "path": "/account", 31. "meta": { 32. "icon": "icon-rectangular-vertebra", 33. "title": "账号管理" 34. }, 35. "redirect": "/account", 36. "children": [] 37. }, 38. { 39. "id": 32, 40. "pid": 4, 41. "name": "agree", 42. "path": "/agree", 43. "meta": { 44. "icon": "icon-newspaper-folding", 45. "title": "用户协议管理" 46. }, 47. "redirect": "/agree", 48. "children": [] 49. } 50. ] 51. }, 52. { 53. "id": 5, 54. "pid": 0, 55. "name": "industry", 56. "path": "/industry", 57. "meta": { 58. "icon": "icon-association", 59. "title": "行业分类管理" 60. }, 61. "redirect": "/industry", 62. "children": [] 63. }, 64. { 65. "id": 6, 66. "pid": 0, 67. "name": "goods", 68. "path": "/goods", 69. "meta": { 70. "icon": "icon-commodity", 71. "title": "商品管理" 72. }, 73. "redirect": "/goods", 74. "children": [ 75. { 76. "id": 40, 77. "pid": 6, 78. "name": "goodschild", 79. "path": "/goodschild", 80. "meta": { 81. "icon": "icon-home", 82. "title": "商品详情" 83. }, 84. "redirect": "/goodschild", 85. "children": [] 86. }, 87. { 88. "id": 41, 89. "pid": 6, 90. "name": "goods", 91. "path": "/goods", 92. "meta": { 93. "icon": "icon-commodity", 94. "title": "商品管理" 95. }, 96. "redirect": "/goods", 97. "children": [] 98. } 99. ] 100. }, 101. { 102. "id": 8, 103. "pid": 0, 104. "name": "supply", 105. "path": "/supply", 106. "meta": { 107. "icon": "icon-bar-code", 108. "title": "供需管理" 109. }, 110. "redirect": "/supply", 111. "children": [ 112. { 113. "id": 17, 114. "pid": 8, 115. "name": "supply", 116. "path": "/supply", 117. "meta": { 118. "icon": "icon-api-app", 119. "title": "供应列表" 120. }, 121. "redirect": "/supply", 122. "children": [] 123. }, 124. { 125. "id": 18, 126. "pid": 8, 127. "name": "need", 128. "path": "/need", 129. "meta": { 130. "icon": "icon-api-app", 131. "title": "需求管理" 132. }, 133. "redirect": "/need", 134. "children": [] 135. } 136. ] 137. }, 138. { 139. "id": 9, 140. "pid": 0, 141. "name": "office", 142. "path": "/office", 143. "meta": { 144. "icon": "icon-home", 145. "title": "中介服务" 146. }, 147. "redirect": "/middle", 148. "children": [ 149. { 150. "id": 20, 151. "pid": 9, 152. "name": "office", 153. "path": "/office", 154. "meta": { 155. "icon": "icon-api-app", 156. "title": "事务所分类管理" 157. }, 158. "redirect": "/office", 159. "children": [] 160. }, 161. { 162. "id": 21, 163. "pid": 9, 164. "name": "offices", 165. "path": "/offices", 166. "meta": { 167. "icon": "icon-home", 168. "title": "事务所管理" 169. }, 170. "redirect": "/offices", 171. "children": [] 172. }, 173. { 174. "id": 29, 175. "pid": 9, 176. "name": "text", 177. "path": "/text", 178. "meta": { 179. "icon": "icon-like", 180. "title": "事务所文章" 181. }, 182. "redirect": "/text", 183. "children": [] 184. }, 185. { 186. "id": 35, 187. "pid": 9, 188. "name": "operator", 189. "path": "/operator", 190. "meta": { 191. "icon": "icon-newspaper-folding", 192. "title": "运营商新闻管理" 193. }, 194. "redirect": "/operator", 195. "children": [] 196. } 197. ] 198. }, 199. { 200. "id": 10, 201. "pid": 0, 202. "name": "bank", 203. "path": "/bank", 204. "meta": { 205. "icon": "icon-bank", 206. "title": "金融服务" 207. }, 208. "redirect": "/bank", 209. "children": [ 210. { 211. "id": 23, 212. "pid": 10, 213. "name": "bank", 214. "path": "/bank", 215. "meta": { 216. "icon": "icon-connection-point", 217. "title": "建行分类" 218. }, 219. "redirect": "/bank", 220. "children": [] 221. }, 222. { 223. "id": 24, 224. "pid": 10, 225. "name": "bankbanner", 226. "path": "/bankbanner", 227. "meta": { 228. "icon": "icon-picture", 229. "title": "建行轮播" 230. }, 231. "redirect": "/bankbanner", 232. "children": [] 233. }, 234. { 235. "id": 31, 236. "pid": 10, 237. "name": "bankmap", 238. "path": "/bankmap", 239. "meta": { 240. "icon": "icon-home", 241. "title": "网点管理" 242. }, 243. "redirect": "/bankmap", 244. "children": [] 245. }, 246. { 247. "id": 39, 248. "pid": 10, 249. "name": "policy", 250. "path": "/policy", 251. "meta": { 252. "icon": "icon-newspaper-folding", 253. "title": "金融政策" 254. }, 255. "redirect": "/policy", 256. "children": [] 257. } 258. ] 259. }, 260. { 261. "id": 16, 262. "pid": 0, 263. "name": "notice", 264. "path": "/notice", 265. "meta": { 266. "icon": "icon-announcement", 267. "title": "公告管理" 268. }, 269. "redirect": "/notice", 270. "children": [] 271. }, 272. { 273. "id": 22, 274. "pid": 0, 275. "name": "feedback", 276. "path": "/feedback", 277. "meta": { 278. "icon": "icon-folder", 279. "title": "意见反馈" 280. }, 281. "redirect": "/feedback", 282. "children": [] 283. }, 284. { 285. "id": 43, 286. "pid": 0, 287. "name": "state", 288. "path": "/state", 289. "meta": { 290. "icon": "icon-menu-fold-one", 291. "title": "平台管理" 292. }, 293. "redirect": "/platform", 294. "children": [ 295. { 296. "id": 44, 297. "pid": 43, 298. "name": "state", 299. "path": "/state", 300. "meta": { 301. "icon": "icon-api-app", 302. "title": "企联动态" 303. }, 304. "redirect": "/state", 305. "children": [] 306. }, 307. { 308. "id": 45, 309. "pid": 43, 310. "name": "active", 311. "path": "/active", 312. "meta": { 313. "icon": "icon-association", 314. "title": "企联活动" 315. }, 316. "redirect": "/active", 317. "children": [] 318. }, 319. { 320. "id": 46, 321. "pid": 43, 322. "name": "rule", 323. "path": "/rule", 324. "meta": { 325. "icon": "icon-newspaper-folding", 326. "title": "政策法规" 327. }, 328. "redirect": "/rule", 329. "children": [] 330. }, 331. { 332. "id": 47, 333. "pid": 43, 334. "name": "ad", 335. "path": "/ad", 336. "meta": { 337. "icon": "icon-ad", 338. "title": "广告管理" 339. }, 340. "redirect": "/ad", 341. "children": [] 342. }, 343. { 344. "id": 48, 345. "pid": 43, 346. "name": "poster", 347. "path": "/poster", 348. "meta": { 349. "icon": "icon-picture", 350. "title": "入会申请" 351. }, 352. "redirect": "/poster", 353. "children": [] 354. } 355. ] 356. } 357. ]
2.进入首页
大概结构的一个预览
3.代码执行逻辑
这一块是渲染列表的并且判断是否有二级数据如果有二级数据，那么渲染一个箭头代表拥有二级列表。
1. function renList(arr){ 2. console.log(arr); 3. let str = ""; 4. for(let i = 0; i < arr.length; i++){ 5. if(arr[i].children.length > 0){ 6. str += ` 7. <div class="frames-left-parent"> 8. <div class="frames-left-list"> 9. <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> 10. </div> 11. <div class="frames-left-child"> 12. `; 13. 14. for(let k = 0; k < arr[i].children.length; k++){ 15. str += ` 16. <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}')"> 17. 18. <p> ${arr[i].children[k].meta.title}</p> 19. </div> 20. `; 21. } 22. 23. str += `</div></div>`; 24. }else{ 25. str += ` 26. <div class="frames-left-list" style="background-color:${ arr[i].name == isname ? '#409EFF' : '' };" onclick="ishref('${arr[i].meta.title}','${arr[i].name}')"> 27. <p> ${arr[i].meta.title}</p> 28. </div> 29. `; 30. } 31. } 32. 33. document.getElementsByClassName("frames-left-nav")[0].innerHTML = str; 34. }
通过点击渲染相应页面，也就是根据接口返回数据对比
1. 2. // 菜单点击 3. function ishref(name,path){ 4. let arr = sessionStorage.getItem("list"); 5. if(arr == null){ 6. arr = []; 7. }else{ 8. arr = JSON.parse(arr); 9. } 10. 11. if(path == "index"){ 12. location.href = `./index.html`; 13. return; 14. } 15. 16. for(let i = 0; i < arr.length; i++){ 17. if(arr[i].path == path){ 18. location.href = `./${path}.html`; 19. return; 20. } 21. } 22. 23. arr.push({ 24. name, 25. path 26. }); 27. 28. let str = JSON.stringify(arr); 29. sessionStorage.setItem("list",str); 30. location.href = `./${path}.html`; 31. }
删除面包屑
通过点击叉号关闭相应页面，也就是根据自己点击的进行关闭，关闭一个自动调一下页面，如果所有都已关闭那么将返回index。
1. function isdel(path){ 2. let arr = sessionStorage.getItem("list"); 3. if(arr == null){ 4. arr = []; 5. }else{ 6. arr = JSON.parse(arr); 7. } 8. 9. for(let i = 0; i < arr.length; i++){ 10. if(arr[i].path == path){ 11. arr.splice(i,1); 12. break; 13. } 14. } 15. 16. sessionStorage.setItem("list",JSON.stringify(arr)); 17. 18. if(path != isname && arr.length != 0){ 19. tagList(); 20. return; 21. } 22. console.log(123); 23. if(arr.length != 0){ 24. location.href = `./${arr[arr.length-1].path}.html`; 25. }else{ 26. location.href = "./index.html"; 27. } 28. }
欢迎观看本篇博客，如果有更好的提议，请与评论区发出，框架仅供学习使用
