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

已于 2024-05-03 20:13:30 修改
阅读量2.6k 收藏 16
点赞数 26
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： 前端 anti-design-vue vue flask 前端框架 orm vben admin
于 2024-03-17 14:28:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/136775204
本文介绍了在Vben Admin框架中实现系统管理角色管理功能的上篇，涉及Flask-SQLAlchemy ORM的数据库模型创建与迁移，以及前端页面与接口的初步设置。目标是实现角色的增删改查，目前完成角色的添加，包括前端页面、接口定义及后端接口的编写。

系列文章目录

[
基础篇
第一节：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框架实战(Python后端)

文章目录

前言

之前的章节，主要侧重对Vben Admin的了解，后端代码主要是模拟的Json数据，从本节开始，我们要侧重后端的代码，结合数据库进行系统权限的管理。本节主要介绍角色管理模块的增删改查。

一、目标效果

本节，我们要修改适配Vben Admin的角色管理的页面，后端开发接口满足Vben Admin角色管理（增，删，改，查）的功能。

截图如下：
在这里插入图片描述

二、初始化数据库

我们这里使用了Flask的Flask-SQLAlchemyORM框架。
ORM框架屏蔽了底层数据库的操作，提供了一个python编程接口，使得开发者可以直接使用python代码操作数据库,而不是直接操作SQL语句。

1.创建模型

这里我们创建一个Role模型，对应的是role表。之前我们曾经创建过一个User模型，对应用户表。用户表的role_code字段和角色表的role_code字段对应。传送门：
第三节：Vben Admin登录对接后端login接口


                

                
                
        

         

    


  


        

                

                  

                  

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

            
            
            
        


    



                



	

		

			

				
					
第一节：Vben Admin介绍和初次运行

				
			

			

				

					cuiwin的专栏
				

				

					02-20
					
					6523
					
				

			

		

		

			
				
本文是【实战Vben Admin + Python】的第一节，本文内容主要是介绍Vben Admin框架和我们后端使用的技术，开发环境和工具的准备本节文章的目的是Vben Admin的简单介绍，通过配置可以让项目前端运行起来，由于项目默认开启了mock，展示的都是静态模拟数据，我们在此基础上，下一节将研究分析下Vben Admin的目录。为我们后端搭建准备。

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					cuiwin的专栏
				

				

					08-02
					
					817
					
				

			

		

		

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

			
		

	



              


  
              

                


	

		

			

				
					
【免费下载】 Vue-Vben-Admin 快速入门教程

				
			

			

				

					gitblog_00974的博客
				

				

					08-08
					
					2019
					
				

			

		

		

			
				
Vue-Vben-Admin 快速入门教程

    
        
            【免费下载链接】vue-vben-admin
            vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多种数据库和插件...

			
		

	





	

		

			

				
					
Vue Vben Admin 5.0：基于Vue3的现代化中后台管理框架深度解析—拥抱前沿技术，赋能高效开发

					
最新发布

				
			

			

				

					chenchuang0128的博客
				

				

					10-26
					
					947
					
				

			

		

		

			
				
在前端技术快速迭代的今天，中后台管理系统的开发需求日益增长。如何选择一款高性能、易扩展且符合现代技术标准的框架，成为开发者关注的焦点。无论是快速搭建企业级应用，还是深入学习 Vue3 生态，它都是值得尝试的优质选择。本文将从技术架构、核心特性、开发体验及贡献指南等角度，全面解析这一现代化管理框架的独特价值。：无论是提交 Issue、优化文档，还是贡献代码，你的每一份努力都将推动框架进化！：提供完整的路由、权限、国际化等中后台核心功能，降低开发门槛；：从组件到工具函数，全链路类型安全，减少低级错误；

			
		

	



		

			
		



	

		

			

				
					
vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节

				
			

			

				

					qq_33906319的博客
				

				

					01-06
					
					1323
					
				

			

		

		

			
				
1利用beforeFetch 处理查询条件2api 参数里，定义后端要的数据。如下图。将它默认的  page, pageSize，分页字段 转为我要的page:page, length:pageSize,     同时带个查询栏的查询条件  queryKeyValue:postsearch,注意 handleSearchInfoFn  在页面第一次加载没有触发，所以我使用了beforeFetch。

			
		

	





	

		

			

				
					
Vue-Vben-Admint：打造高效、美观的后台管理系统

				
			

			

				

					理论都是虚的，代码才是王道。
				

				

					10-25
					
					1001
					
				

			

		

		

			
				
在现代Web开发中，前后端分离已经成为了一种趋势。本文将详细介绍如何使用Vue-Vben-Admint这个优秀的开源项目搭建一个高效、美观的后台管理系统。我们将通过详细的操作步骤和代码示例，帮助你快速掌握Vue-Vben-Admint的使用方法。首先，我们需要在你的计算机上安装Node.js和npm。请访问Node.js官网下载并安装适合你操作系统的版本。一、安装Node.js和npm。按照提示完成安装过程。四、编写组件和页面布局。

			
		

	





	

		

			

				
					
vben-admin 手册

				
			

			

				

					Tintin_wu的博客
				

				

					04-15
					
					4076
					
				

			

		

		

			
				
姓名

			
		

	





	

		

			

				
					
Vben Admin

				
			

			

				

					guofeng54188的博客
				

				

					04-11
					
					7034
					
				

			

		

		

			
				
.
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── i.

			
		

	





	

		

			

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

				
			

			

				

					cuiwin的专栏
				

				

					03-23
					
					1616
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					cuiwin的专栏
				

				

					03-25
					
					677
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					cuiwin的专栏
				

				

					04-04
					
					921
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue-vben-admin：基于Vite2，vue3.0，ant-design-vue 2.x，打字稿的vue3样式Admin，正在努力进行更新。

				
			

			

				

					02-06
				

			

		

		

			
				
VUE VBEN ADMIN2.0
 | 英语
介绍
该项目是基于'ant设计-VUE实施vue3风格的后台管理系统,打字稿, vue3.0 ,维生素E , tsx`，
的GitHub
  main分支
瘦
预习
测试帐户：vben / 123456
文献资料
2.0的文档尚未开始，将在以后提供。
预安装
环境要求
Node.js ：-版本> 12.0.0 。
 yarn ：-卷装管理工具。
UI框架
 -2.0.0-beta.5已删除。
图标
-按需导入的图标。
 -图标可用于
 构建使用的图标。
插入
-vuex模块化
 mock-基于vite的模拟插件
国际化
 -JavaScript实

			
		

	





	

		

			

				
					
vben admin配置详解（Table, Form）

				
			

			

				

					Web面试那些事儿的博客
				

				

					12-16
					
					8246
					
				

			

		

		

			
				
vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。

			
		

	





	

		

			

				
					
Vben Admin 一 (初识框架)

					
热门推荐

				
			

			

				

					为何这么帅
				

				

					09-18
					
					1万+
					
				

			

		

		

			
				
1、什么是Vben Admin
Vue-Vben-Admin 是一个后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案， 总结就是一个后台管理模板。
项目开始前请仔细阅读 Vben Admin 官方文档
2、涉及的技术
Vue3.0、Vite、 Ant-Design-Vue、TypeScript等
3、项目结构

├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vi

			
		

	





	

		

			

				
					
【前端】Vue-Vben-Admin 项目详细教程

				
			

			

				

					保持前进，即便速度慢，也不能停下脚步...
				

				

					03-27
					
					7045
					
				

			

		

		

			
				
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。该项目集成了多种先进技术，如 Pinia 作为状态管理工具、Vue Router 作为路由管理工具，并通过 Shadcn UI 提供了一套现代化的 UI 组件。它具有强大的扩展性和模块化特性，无论是开发中小型项目，还是大型企业级应用，都能够提供一个强大、灵活、可扩展的管理后台框架。├── build/ # 打包脚本相关。

			
		

	





	

		

			

				
					
Vben admin

				
			

			

				

					qq_18594435的博客
				

				

					08-10
					
					2643
					
				

			

		

		

			
				
Vben admin 介绍

			
		

	





	

		

			

				
					
Vben-Admin（一）

				
			

			

				

					小卡拉米的博客
				

				

					04-20
					
					3979
					
				

			

		

		

			
				
Github地址：
https://github.com/anncwb/vue-vben-admin
文档地址：
https://vvbin.cn/doc-next/

1.从git上获取代码


git clone https://github.com/anncwb/vue-vben-admin.git

2.进入文件命令


cd vue-vben-admin

3.安装依赖


yarn install



4.运行项目


yarn serve



5.打开浏览器输入http://localho

			
		

	





	

		

			

				
					
【亲测免费】 Vue Vben Admin 开源项目教程

				
			

			

				

					gitblog_00019的博客
				

				

					08-08
					
					1212
					
				

			

		

		

			
				
Vue Vben Admin 开源项目教程

    
        
            【免费下载链接】vue-vben-admin
            vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多种数据库和插件...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值