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

已于 2024-05-03 20:14:38 修改
阅读量1.4k 收藏 1
点赞数 18
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： vben admin flask vue anti-design-vue python前端 前后端分离
于 2024-03-23 19:34:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/136823388
本篇博客主要介绍了Vben Admin系统管理中角色管理的实现，包括前端角色列表查询的修改，涉及src/api、model、views等文件的更新，以及后端角色列表查询和角色修改功能的实现。前端新增了RoleUpdate接口，后端完成了角色修改的逻辑。目前角色管理已具备新增和修改功能，后续章节将完成删除和状态切换等操作。

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

系列文章目录

基础篇
第一节：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实战-系统管理之角色菜单绑定
cuiwin的专栏
08-02 674
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
第十一节：Vben Admin实战-系统管理之角色管理实现(删除，状态修改)-下
cuiwin的专栏
03-25 600
本文将完成角色管理的剩余功能。前两节已实现了新增，修改和分页查询。通过三节内容，目前已经完成了角色管理的所有功能（新增，修改，查询，分页，修改状态，删除）。通过实践再开发后面的用户管理，菜单管理会轻松很多。
基于Vben+Admin+Ts+AntDesign+vite+Vue3框架遇到的问题，以及组件的使用
WhoopD的博客
08-24 3561
vben+admin框架中使用场景
vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节
qq_33906319的博客
01-06 1212
1利用beforeFetch 处理查询条件2api 参数里，定义后端要的数据。如下图。将它默认的 page, pageSize，分页字段 转为我要的page:page, length:pageSize, 同时带个查询栏的查询条件 queryKeyValue:postsearch,注意 handleSearchInfoFn 在页面第一次加载没有触发，所以我使用了beforeFetch。
Vue Vben Admin 项目快速入门指南
最新发布
gitblog_01155的博客
06-01 543
Vue Vben Admin 项目快速入门指南 前言 Vue Vben Admin 是一个基于 Vue3、Vite、TypeScript 和 Ant Design Vue 构建的企业级中后台前端解决方案。本文将详细介绍如何从零开始快速搭建和运行该项目。 环境准备 在开始之前，请确保你的开发环境满足以下基本要求： 基础环境要求 Node.js：版本需在 20.15.0 及以上 推荐使用版本管理...
Vben admin 子表分页
weixin_40089202的博客
01-12 852
【代码】Vben admin 子表分页。
vben-admin 手册
Tintin_wu的博客
04-15 3617
姓名
【前端】Vue-Vben-Admin 项目详细教程
保持前进，即便速度慢，也不能停下脚步...
03-27 4669
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。该项目集成了多种先进技术，如 Pinia 作为状态管理工具、Vue Router 作为路由管理工具，并通过 Shadcn UI 提供了一套现代化的 UI 组件。它具有强大的扩展性和模块化特性，无论是开发中小型项目，还是大型企业级应用，都能够提供一个强大、灵活、可扩展的管理后台框架。├── build/ # 打包脚本相关。
vben admin配置详解（Table, Form）
Web面试那些事儿的博客
12-16 7515
vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。
第九节：Vben Admin实战-系统管理之角色管理实现-上
cuiwin的专栏
03-17 2476
之前的章节，主要侧重对Vben Admin的了解，后端代码主要是模拟的Json数据，从本节开始，我们要侧重后端的代码，结合数据库进行系统权限的管理。本节主要介绍角色管理模块的增删改查。这节主要是摸索，Vben Admin 在实际使用过程中如何和后端接口打通，目前只简单实现了添加功能，后面还需要补充分页查询，修改，删除等功能。
第十二节：Vben Admin实战-系统管理之用户管理
cuiwin的专栏
04-04 819
前三节，我们完成了角色管理的增删改查的实现，本节我们完成用户管理的增删改查的功能。用户管理主要涉及下面的接口：用户管理的增删改查已经都实现了，下一步要实现的是权限管理（菜单管理），希望大家多多支持关注。
第一节：Vben Admin介绍和初次运行
cuiwin的专栏
02-20 5554
本文是【实战Vben Admin + Python】的第一节，本文内容主要是介绍Vben Admin框架和我们后端使用的技术，开发环境和工具的准备本节文章的目的是Vben Admin的简单介绍，通过配置可以让项目前端运行起来，由于项目默认开启了mock，展示的都是静态模拟数据，我们在此基础上，下一节将研究分析下Vben Admin的目录。为我们后端搭建准备。
Vben Admin 自学记录 —— 介绍及使用（持续更新中...）
热门推荐
qq_36842789的博客
04-29 1万+
3.在 src/locales/lang/zh-CN/routes 下添加 test.ts，设置路由title。在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。2.在 src/views/myComponents中添加三个test1~3的测试页面。1.在 src/router/routes/modules 下添加 test.ts。例：src/router/routes/modules/dashboard.ts。4.至此路由模块及子页面添加成功，修改后效果。
【免费下载】 Vue-Vben-Admin 快速入门教程
gitblog_00974的博客
08-08 1842
Vue-Vben-Admin 快速入门教程 1. 项目目录结构及介绍 Vue-Vben-Admin 的目录结构如下： ├── public # 静态资源目录 │ └── index.html # 入口HTML文件 ├── src # 项目源代码目录 │ ├── assets # 图...
Vben-Admin（一）
小卡拉米的博客
04-20 3833
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：现代化的Vue.js后台管理系统搭建教程
gitblog_00709的博客
08-09 805
Vue-Vben-Admin：现代化的Vue.js后台管理系统搭建教程 1. 项目介绍 Vue-Vben-Admin 是一款基于最新前端技术栈的现代Vue.js后台管理模板。它利用了 Vue3 的强大特性，结合 Shadcn UI 设计框架，采用 Vite 作为构建工具，并且全面拥抱 TypeScript，确保了项目的可维护性和类型安全性。这个框架特别强调速度与效率，提供了快速的模块热重载能力，旨...
Vben Admin
guofeng54188的博客
04-11 6885
. ├── build # 打包脚本相关 │ ├── config # 配置文件 │ ├── generate # 生成器 │ ├── script # 脚本 │ └── vite # vite配置 ├── mock # mock文件夹 ├── public # 公共静态资源目录 ├── src # 主目录 │ ├── api # 接口文件 │ ├── assets # 资源文件 │ │ ├── icons # icon sprite 图标文件夹 │ │ ├── i.
如何实现 vben-Admin 表格的完美分页？揭秘数据带参数的处理技巧！
快来一起学习前端知识把！加油，前端人
09-12 476
【代码】vben-Admin 表格分页处理 表格数据带参数请求，对分页的处理。
Vue Vben Admin 简化版快速入门教程
gitblog_00072的博客
04-02 1016
Vue Vben Admin 简化版快速入门教程 1. 项目目录结构及介绍 Vue Vben Admin 简化版（vben-admin-thin-next）是基于Vue3, Vite2, 和TypeScript等现代技术栈构建的中后台模板。下面是其主要的目录结构及各部分的功能简介： . ├── public # 公共静态资源文件夹 │ └── index....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值