自动生成导航栏和菜单的解决方案

本文介绍了一种自动生成导航栏和菜单的方法,利用后台菜单表与权限表结合,前端通过JSON数据渲染导航栏,同时介绍了如何维护面包屑导航栏的一致性和准确性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自动生成导航栏和菜单的解决方案

 

系统是常见的左右结构的系统,左边是bootstrap的菜单,右边是内容页,内容页的顶部是导航,以前的做法是直接和菜单导航栏在页面里写死,但是后期改起来很不方便,后来经过努力终于完成自动生成菜单和导航栏的功能

 

一:自动生成菜单解决方案

后台建menu表

字段为id, menuName(菜单名), pid(父级id), ico(图标样式或img), url(用于页面跳转), order(排序字段)

这样可以通过权限表关联菜单表来实现控制,返回到前端页面,返回的是json格式

如var menuList = [{

   "ico": "",

   "id": 36,

   "name": "采购任务",

   "order": 0,

   "pId": 1,

   "url": ""

}, {

   "ico": "",

   "id": 37,

   "name": "待采购列表",

   "order": 0,

   "pId": 36,

   "url": "purchase/purchaseInit.do"

}, {

   "ico": "",

   "id": 38,

   "name": "零星采购列表",

   "order": 0,

   "pId": 36,

   "url": "purchase/getLXPurchaseH.do"

},]

前端通过layer模板渲染左侧的导航

 

二:面包屑导航栏的自动生成

导航栏的数据=点击的左侧菜单+通过按钮跳转的页面

要解决的问题:

1.      浏览器随意向前向后保证生成导航栏的正确性

2.      用户的操作是随机的肯能点击左侧菜单,浏览器刷新向前向后,或者点击导航栏的其中一项,或者是点击页面的超链接或按钮进入,如何保证导航栏生成数据的正确性

解决方案

Localstorage. navlist存储访问路径列表,注意列表navlist中的元素也是一个列表,其中存储的是不重复的访问路径,就像树的顶点到叶子节点的路径一样,其中左侧的菜单导航有pid和id

如果是从按钮导航点进去的话只有name和url

[

   [{

       "name": "采购任务",

       "url": "",

       "pId": 1,

       "id": 36

   }, {

       "name": "待采购列表",

       "url":"http://127.0.0.1:8180/erp/purchase/purchaseInit.do",

       "pId": 36,

       "id": 37

   }, {

       "name": "按物料查看",

        "url":"http://127.0.0.1:8180/erp/purchase/purchaseByGoodsInit.do?state=2"

    }],

    [{

        "name": "采购任务",

        "url": "",

        "pId": 1,

        "id": 36

    }, {

        "name": "待采购列表",

        "url": "http://127.0.0.1:8180/erp/purchase/purchaseInit.do",

        "pId": 36,

        "id": 37

    }, {

        "name": "按供应商查看",

        "url":"http://127.0.0.1:8180/erp/purchase/purchaseBySupplierInit.do"

    }, {

       "name": " 查看详情",

       "url": "http://127.0.0.1:8180/erp/purchase/supplierDInit.do"

   }],

]

 

 

具体方法:

根据当前url判断是否在navlist中存在,如果存在则获取其中的数据,如果不存在则根据document.referrer(上一次的访问地址)判断是否需要新建分支或者直接追加到某个分支上,

 

 

 

三:有待优化的地方:

1.      数据可以在压缩下,比如把域名去掉,或者最终的数据对象是存储着name,url, pId,id,换成只存储id

2.      加快url的搜索速度,现在是两个for循环遍历来判断

 

 

 

 

 

 

1.第一步:导入paging.jar包。 2.第一步:调用; //通过调用不同的构造函数生成不同导航字符串 PageControl pageControl = new PageControl("PageTest", page, 30); //数字列表导航形式,首尾页时仍显示上一页,下一页(默认形式) PageControl pageControl2 = new PageControl("PageTest", page, 30, false); //数字列表导航形式,首尾页时不显示上一页,下一页 PageControl pageControl3 = new PageControl("PageTest", page, 30, false, false);//数字列导航表形式,不显示首尾页 PageControl pageControl4 = new PageControl("PageTest", page, 30, PageType.WORDTYPE);//文字导航形式 PageControl pageControl5 = new PageControl("PageTest", page, 30, false, PageType.WORDTYPE);//文字导航形式,不显示首尾页 request.setAttribute("pageControlNumberType1", pageControl.pageControl()); request.setAttribute("pageControlNumberType2", pageControl2.pageControl()); request.setAttribute("pageControlNumberType3", pageControl3.pageControl()); request.setAttribute("pageContrlWordType4", pageControl4.pageControl()); request.setAttribute("pageContrlWordType5", pageControl5.pageControl()); request.getRequestDispatcher("index.jsp").forward(request, response); 3.第三步:通过jstl显示: 数字列表导航形式,首尾页时仍显示上一页,下一页(默认形式):${pageControlNumberType1 }<br/> 数字列表导航形式,首尾页时不显示上一页,下一页:${pageControlNumberType2 }<br/> 数字列表导航形式,不显示首尾页:${pageControlNumberType3 }<br/> 文字导航形式:${pageContrlWordType4 }<br/> 文字导航形式,不显示首尾页:${pageContrlWordType5 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_令狐大侠_

觉的文章对你有用,鼓励一下吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值