第十三节：Vben Admin实战-系统管理之菜单管理

已于 2024-08-02 17:56:03 修改
阅读量1.2k 收藏 1
点赞数 9
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： 后端 python flask vue.js anti-design-vue vben admin 前后端框架
于 2024-05-03 20:04:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/138423337
本文是Vben Admin实战系列的第十三节，详细介绍了如何实现菜单管理功能，包括前端页面和后端接口的设计。内容涵盖菜单的增删改查，接口定义如GetParentMenuList、MenuAdd等，并提供了Python后端实现和前端Vue组件的代码示例。

系列文章目录

基础篇
第一节：Vben Admin介绍和初次运行
第二节：Vben Admin 登录逻辑梳理和对接后端准备
第三节：Vben Admin登录对接后端login接口
第四节：Vben Admin登录对接后端getUserInfo接口
第五节：Vben Admin权限-前端控制方式
第六节：Vben Admin权限-后端控制方式
第七节：Vben Admin权限-后端获取路由和菜单

实战篇
第八节：Vben Admin登录页面自定义
第九节：Vben Admin实战-系统管理之角色管理实现-上
第十节：Vben Admin实战-系统管理之角色管理实现(分页查询，修改)-中
第十一节：Vben Admin实战-系统管理之角色管理实现(删除，状态修改)-下
第十二节：Vben Admin实战-系统管理之用户管理
第十三节：Vben Admin实战-系统管理之菜单管理
第十四节：Vben Admin实战-系统管理之角色菜单绑定

专栏链接
Vben Admin框架实战(Python后端)

文章目录

前言

目前我们已经实现了角色管理和用户管理，本节将实现菜单的管理（增删改查）。

实现效果

菜单分层列表展示
在这里插入图片描述
菜单的新增和编辑
在这里插入图片描述

一、接口定义

菜单管理涉及的接口如下：
GetParentMenuList = ‘/auth/menu/getParentMenuList’,
MenuAdd = ‘/auth/menu/add’,
MenuPageList = ‘/auth/menu/list’,
MenuUpdate = ‘/auth/menu/update’,
MenuDelete = ‘/auth/menu/delete’,
接口定义主要涉及的文件包括
src/api/sys/menu.ts
src/api/sys/model/menuModel.ts

src/api/sys/menu.ts

代码如下（示例）：


                

                
                
        

         

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                  
                    
                    超级会员免费看
                  
                

            
            
            
        


    



                



	

		

			

				
					
第十四节：Vben Admin实战-系统管理之角色菜单绑定

				
			

			

				

					cuiwin的专栏
				

				

					08-02
					
					819
					
				

			

		

		

			
				
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。

			
		

	



                

            
              



	

		

			

				
					
第九节：Vben Admin实战-系统管理之角色管理实现-上

				
			

			

				

					cuiwin的专栏
				

				

					03-17
					
					2641
					
				

			

		

		

			
				
之前的章节，主要侧重对Vben Admin的了解，后端代码主要是模拟的Json数据，从本节开始，我们要侧重后端的代码，结合数据库进行系统权限的管理。本节主要介绍角色管理模块的增删改查。这节主要是摸索，Vben Admin 在实际使用过程中如何和后端接口打通，目前只简单实现了添加功能，后面还需要补充分页查询，修改，删除等功能。

			
		

	



              


  
  
              

                


	

		

			

				
					
Vben Admin中跳转详情页如何固定左侧菜单栏

				
			

			

				

					CF西西的专栏
				

				

					08-09
					
					782
					
				

			

		

		

			
				
在路由module文件下打开路由配置文件，在meta中配置currentActiveMenu即可实现。

			
		

	





	

		

			

				
					
第十二节：Vben Admin实战-系统管理之用户管理

				
			

			

				

					cuiwin的专栏
				

				

					04-04
					
					921
					
				

			

		

		

			
				
前三节，我们完成了角色管理的增删改查的实现，本节我们完成用户管理的增删改查的功能。用户管理主要涉及下面的接口：用户管理的增删改查已经都实现了，下一步要实现的是权限管理（菜单管理），希望大家多多支持关注。

			
		

	



		

			
		



	

		

			

				
					
第十节：Vben Admin实战-系统管理之角色管理实现(分页查询，修改)-中

				
			

			

				

					cuiwin的专栏
				

				

					03-23
					
					1616
					
				

			

		

		

			
				
这里是Vben Admin角色管理的下半部分。第九节，我们实现了角色的添加功能。本节完成剩下的修改角色信息，删除角色等功能。提示：以下是本篇文章正文内容，下面案例可供参考目前，角色管理，已经实现了新增，修改，分页查询，还剩余的功能是：删除，切换角色状态按钮，还有参数查询，下一节来完成这部分功能。

			
		

	





	

		

			

				
					
第十一节：Vben Admin实战-系统管理之角色管理实现(删除，状态修改)-下

				
			

			

				

					cuiwin的专栏
				

				

					03-25
					
					677
					
				

			

		

		

			
				
本文将完成角色管理的剩余功能。前两节已实现了新增，修改和分页查询。通过三节内容，目前已经完成了角色管理的所有功能（新增，修改，查询，分页，修改状态，删除）。通过实践再开发后面的用户管理，菜单管理会轻松很多。

			
		

	





	

		

			

				
					
第七节：Vben Admin权限-后端获取路由和菜单

				
			

			

				

					cuiwin的专栏
				

				

					03-13
					
					2660
					
				

			

		

		

			
				
这段时间比较忙，更新暂停了一些天，今天我们继续。上一节，我们切换了权限方式为BACK模式，分析了getPermCode接口。最后我们遇到了/api/getMenuList接口404。这节我们就编写后端对应的/api/getMenuList接口到这里，我们已经实现了后端权限控制模式下的前后端对接。后面的优化方向主要就是如何存储权限和用户数据，用数据库将权限数据保存和查询。

			
		

	





	

		

			

				
					
第五节：Vben Admin权限-前端控制方式

				
			

			

				

					cuiwin的专栏
				

				

					02-27
					
					3027
					
				

			

		

		

			
				
上一节，我们完成了登录功能，已经顺利登录到工作台页面。在工作台页面可以看到左侧已经存在了一些路由菜单。本节我们首先要分析下路由的来龙去脉。本节我们分析了Vben Admin路由生成的原理，手动生成了一段路由并自动转菜单。结合登录用户的角色，控制了菜单的显示和隐藏。

			
		

	





	

		

			

				
					
第六节：Vben Admin权限-后端控制方式

				
			

			

				

					cuiwin的专栏
				

				

					03-01
					
					2190
					
				

			

		

		

			
				
上一节，我们了解了Vben Admin前端控制方式权限的实现方式。并手动创建了一个路由和菜单，最后，通过结合用户角色，可以控制菜单的显示和隐藏。本节，我们开始实践Vben Admin后端控制方式生成权限。这节，我们把权限模式改成了BACK了，通过实现getPermCode接口，再次打开的工作台。经过前几节内容，我们已经快摸清楚Vben Admin的权限了。

			
		

	





	

		

			

				
					
推荐 | JoyAgent-JDGenie：开箱即用的端到端多智能体产品

				
			

			

				

					lpfasd123的博客
				

				

					12-05
					
					334
					
				

			

		

		

			
				
如果你在寻找一款真正可落地的多智能体产品，用来“搜索-分析-生成报告”、“数据问答与诊断”、“代码解释与图表生成”，同时希望易部署、易扩展、易二次开发——JoyAgent-JDGenie 是非常值得试用与推荐的选择。只需填好少量配置，即可获得端到端的流式体验与交付能力。

			
		

	





	

		

			

				
					
vue实现页面不断插入内容并且自动滚动功能

				
			

			

				

					weixin_50606255的博客
				

				

					12-04
					
					282
					
				

			

		

		

			
				
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：

			
		

	





	

		

			

				
					
如何实现UniApp登录拦截？

				
			

			

				

					不会写DN的博客
				

				

					12-02
					
					1048
					
				

			

		

		

			
				
通过状态校验和行为拦截控制权限，核心分为三部分： 路由拦截 - 使用uni.addInterceptor拦截未登录的页面跳转，强制跳转登录页 Token存储 - 登录成功后通过setStorageSync持久化存储token，退出时清除 请求拦截 - 自动为接口添加token请求头，并拦截401/403等未授权响应 关键点： 需排除登录页避免死循环 双重保障（路由+接口拦截） 同步存储API确保及时获取token状态 实现效果：未登录用户无法访问受限页面和接口，形成完整权

			
		

	





	

		

			

				
					
【免费云平台部署指南】按场景选型+全维度对比（附直达地址）

				
			

			

				

					分享技术干货，聚焦AI前沿科技
				

				

					12-03
					
					983
					
				

			

		

		

			
				
免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。

			
		

	





	

		

			

				
					
【前端知识】从前端请求到后端返回：Gzip压缩全链路配置指南

				
			

			

				

					wendao76的专栏
				

				

					12-03
					
					1628
					
				

			

		

		

			
				
本文详细介绍了Gzip压缩的全链路配置流程，从前端请求到后端返回的完整实现方案。前端需通过Accept-Encoding: gzip声明支持压缩，后端根据请求头、响应类型和大小判断是否压缩，并返回Content-Encoding: gzip响应头。文章提供了浏览器、JavaScript、命令行工具等多种前端场景的配置示例，以及Nginx、Apache、Node.js和Spring Boot等主流后端技术的Gzip配置方法。通过合理配置Gzip压缩，可显著减少网络传输数据量，提升Web应用性能。

			
		

	





	

		

			

				
					
java后端工程师+AI大模型进修ing（研一版‖day59）

				
			

			

				

					qq3094554285的博客
				

				

					12-02
					
					593
					
				

			

		

		

			
				
java随笔录——网关认证，为什么使用Spring Security来获取用户身份，而不是用Threadlocal来直接获取呢
AI随探录——
代码随想录——组合问题2（回溯去重）

			
		

	





	

		

			

				
					
PyTorch 转 ONNX 实用教程

				
			

			

				

					weixin_40264313的博客
				

				

					12-03
					
					393
					
				

			

		

		

			
				
ONNX 是一个用于机器学习模型的开放格式，旨在解决不同框架之间的模型互操作性和跨平台部署问题。它是一个中间表示格式，当你使用一个框架训练模型，但需要在另一个不同的框架中运行它时，可以使用 ONNX 进行转换。或者当你需要将模型部署到不同的硬件设备上时，例如从云端的 GPU 迁移到边缘设备的 CPU 时，ONNX 可以提供一个通用的部署桥梁。

			
		

	





	

		

			

				
					
Python后端开发之旅（二）

					
最新发布

				
			

			

				

					少年何妨梦摘星，敢挽桑弓射玉衡。 他时若遂凌云志，敢笑黄巢不丈夫。
				

				

					12-07
					
					535
					
				

			

		

		

			
				
Python后端开发之旅，涉及到现代开发框架——fastapi，以及大模型开发时候的技术——langchain，同时对比java进行快速学习

			
		

	





	

		

			

				
					
SSE 流式输出 Markdown 实时渲染问题解决方案

				
			

			

				

					weixin_74224250的博客
				

				

					12-05
					
					775
					
				

			

		

		

			
				
使用 fetch + ReadableStream 实现 SSE 流式输出时 Markdown 格式丢失的问题。原方案因错误地过滤空行和使用 trim() 导致换行符丢失，使 Markdown 内容挤成一团。通过分析 SSE 规范，发现空 data: 行代表换行符，需保留空白字符并拼接多行数据。最终解决方案改进了解析逻辑：避免过滤空行、用 buffer 处理跨块数据，并通过 \n 连接同一事件的多个 data: 行，成功恢复了 Markdown 的实时渲染效果。

			
		

	





	

		

			

				
					
Nginx 反向代理

				
			

			

				

					2501_94265850的博客
				

				

					12-04
					
					1058
					
				

			

		

		

			
				
简单说就是：客户端（浏览器 / APP）不直接访问目标服务器（后端服务、数据库、静态资源服务器等），而是先请求 Nginx ，由 Nginx 转发请求到目标服务器，再将服务器的响应结果返回给客户端。前端的 JS、CSS、图片等静态资源，可由 Nginx 直接返回（缓存到 Nginx 服务器），无需转发到后端，减少后端压力，提升页面加载速度。（Nginx 代理地址），Nginx 转发到后端接口，因请求目标是 Nginx（同源），跨域自动解决。（Nginx 地址），实际请求被转发到内网的。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值