扫码阅读
手机扫码阅读

TienChin 项目动态菜单接口分析

43 2024-11-28

我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。

查看原文:TienChin 项目动态菜单接口分析
文章来源:
江南一点雨
扫码关注公众号

松哥正在制作TienChin项目视频,涉及Spring Boot和Vue3技术栈。该视频适用于完成度超过90%的项目开发。本文介绍了在Vue中设计多级菜单的专业方法,结合前文有助于理解动态菜单的实现。

TienChin项目是基于RuoYi-Vue脚手架,动态菜单的实现在这个框架之上进行。

动态菜单的实现涉及菜单表定义的详细字段,关键字段包括menu_type,它标识了菜单的类型(目录、菜单、按钮)。查询菜单时,只需关注M和C类型的数据,即一级和二级菜单。

在前端,菜单展示的方式不在本文赘述,可以参考相关专业设计文章。用户登录成功后,前端会请求/getRouters接口获取菜单信息。这个过程包括两个步骤:根据用户ID查询菜单信息并进行递归操作以构建菜单层级,以及转换菜单数据以满足前端路由数据的需求。

构建前端所需菜单的核心在于格式转换。涉及的关键方法包括selectMenuTreeByUserId(根据用户ID查询菜单),getChildPerms(获取所有子节点),recursionFn(递归列表),getChildList(得到子节点列表),以及hasChild(判断是否有子节点)。具体实现细节在代码中有详细注释。

最后,buildMenus方法负责将SysMenu转换为前端路由格式。这一过程遵循Vue中设计的四种菜单展示情况,包括一级菜单包含二级菜单,只有一级菜单,一级外链菜单和内部链接菜单。方法中详细处理了每种情况下菜单的hidden, name, path, component, query和meta等属性的设置。

总结来说,构建动态菜单涉及数据库的菜单表查询及其格式转换以适配前后端分离的前端路由需求。具体实现方法在TienChin项目视频中有更详细的讲解。有兴趣的可以查看相关视频资源。

想要了解更多内容?

查看原文:TienChin 项目动态菜单接口分析
文章来源:
江南一点雨
扫码关注公众号