扫码阅读
手机扫码阅读
Spring Boot+Vue3 动态菜单实现思路梳理
47 2024-11-28
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
文章来源:
江南一点雨
扫码关注公众号
松哥正在为TienChin项目录制配套视频,该项目基于Spring Boot和Vue3技术栈,涵盖多种技术点。他之前已经发布了两篇关于Spring Boot + Vue3动态菜单的文章,但一些小伙伴仍然有疑惑。因此,本文旨在提供一个更清晰的思路。
1. 整体思路
动态菜单分为四种基本情况:
- 有父有子的菜单。
- 只有一个一级菜单,可以是普通菜单、在当前系统中打开的外部网页链接或外链。
根据这些情况,动态菜单的JSON格式有所不同,但都以Layout作为父组件,并且菜单项的path是由父级和子级path拼接而成。
2. 前端渲染
前端动态菜单渲染位于tienchin-ui项目的SidebarItem.vue文件中,依据菜单是否隐藏、是否只有一个子菜单以及是否具有子菜单来决定其渲染方式。使用递归处理多级菜单,确保即使是多级菜单也能被正确渲染。
3. 后端菜单生成
3.1 菜单表
sys_menu表定义了菜单项的结构,菜单类型分为目录(M)、菜单(C)和按钮(F)。获取动态菜单时,只需要查询类型为M和C的数据。
3.2 菜单接口
用户登录成功后,前端会请求/getRouters接口以获取菜单信息。后端首先根据用户ID查询所有相关菜单,接着递归生成树形菜单结构。最后,将菜单数据转换成前端所需的路由数据。
本文详细解释了如何在Vue3和Spring Boot项目中实现动态菜单,包括菜单项的定义、前端渲染逻辑和后端的菜单生成逻辑。
想要了解更多内容?
文章来源:
江南一点雨
扫码关注公众号
江南一点雨的其他文章
加入社区微信群
与行业大咖零距离交流学习
软件研发质量管理体系建设
白皮书上线