当前位置: 首页 > news >正文

ant design pro v6 如何做好角色管理

先上图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
整个角色管理是如何做的吗?

首先你要处理后端,要先把角色存到用户那。

在这里插入图片描述
这是用户管理部分的内容:

可以看到一个用户是有多个角色的。

在这里插入图片描述
看到没有,存的是数组

数组的是一个 role 对象

role 对象是这样:

在这里插入图片描述
主要是存一个 name 就好。permissions 是权限列表。

import { Request, Response } from 'express';
import Role from '../models/role';
import handleAsync from '../utils/handleAsync';// Build query based on query parameters
const buildQuery = (queryParams: any): any => {const query: any = {};if (queryParams.name) {query.name = { $regex: queryParams.name, $options: 'i' };}return query;
};// 获取所有角色
const getRoles = handleAsync(async (req: Request, res: Response) => {const { current = '1', pageSize = '10' } = req.query;const query = buildQuery(req.query);const roles = await Role.find(query).populate('permissions').sort('-createdAt') // Sort by creation time in descending order.skip((+current - 1) * +pageSize).limit(+pageSize).exec();res.json({success: true,data: roles,});
});// 根据 ID 获取角色
const getRoleById = handleAsync(async (req: Request, res: Response) => {const role = await Role.findById(req.params.id).exec();if (!role) {res.status(404);throw new Error('Role not found');}res.json({success: true,data: role,});
});// 添加新角色
const addRole = handleAsync(async (req: Request, res: Response) => {const newRole = new Role({...req.body,});const savedRole = await newRole.save();res.json({success: true,data: savedRole,});
});// 更新角色
const updateRole = handleAsync(async (req: Request, res: Response) => {const { id } = req.params;const updatedRole = await Role.findByIdAndUpdate(id,{ ...req.body },{ new: true },).exec();if (!updatedRole) {res.status(404);throw new Error('Role not found');}res.json({success: true,data: updatedRole,});
});// 删除角色
const deleteRole = handleAsync(async (req: Request, res: Response) => {const { id } = req.params;const role = await Role.findByIdAndDelete(id).exec();if (!role) {res.status(404);throw new Error('Role not found');}res.json({success: true,data: { message: 'Role deleted successfully' },});
});// 批量删除角色
const deleteMultipleRoles = handleAsync(async (req: Request, res: Response) => {const { ids } = req.body;await Role.deleteMany({_id: { $in: ids },}).exec();res.json({success: true,message: `${ids.length} roles deleted successfully`,});
});export {getRoles,getRoleById,addRole,updateRole,deleteRole,deleteMultipleRoles,
};

这是后端代码,就是增删改查。比较容易理解。

前端:

import { useIntl } from '@umijs/max';
import React, { Key, useState } from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Form, Input, Spin, Tree } from 'antd';
import useQueryList from '@/hooks/useQueryList';
import { FormInstance } from 'antd/es/form';
import { Permission } from '@/apiDataStructures/ApiDataStructure';interface Props {form?: FormInstance<any>;newRecord?: boolean;onFinish: (formData: any) => Promise<void>;values?: any;
}const BasicForm: React.FC<Props> = ({ newRecord, onFinish, values }) => {const intl = useIntl();const { items: permissionGroups, loading } = useQueryList('/permission-groups/list');const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);const [checkedKeys, setCheckedKeys] = useState<Key[] | { checked: Key[]; halfChecked: Key[] }>(values.permissions?.map((permission: Permission) => `${permission._id}`) ?? [],);const [selectedKeys, setSelectedKeys] = useState<Key[]>([]);const onExpand = (expandedKeysValue: Key[]) => {setExpandedKeys(expandedKeysValue);setAutoExpandParent(false);};const onCheck = (checkedKeysValue: Key[] | { checked: Key[]; halfChecked: Key[] }) => {setCheckedKeys(checkedKeysValue);console.log('checkedKeysValue', checkedKeysValue);};const onSelect = (selectedKeysValue: Key[]) => {setSelectedKeys(selectedKeysValue);};return (<ProForminitialValues={{...values,permissions: values?.permissions?.map((permission: Permission) => permission._id),}}onFinish={async (values) => {await onFinish({...values,permissions: checkedKeys,});}}><ProForm.Group><ProFormTextrules={[{ required: true, message: intl.formatMessage({ id: 'enter_name' }) }]}width="md"label={intl.formatMessage({ id: 'name' })}name="name"/><ProForm.Item name="permissions" label={intl.formatMessage({ id: 'permission_choose' })}><Spin spinning={loading}><TreecheckableonExpand={onExpand}expandedKeys={expandedKeys}autoExpandParent={autoExpandParent}onCheck={onCheck}checkedKeys={checkedKeys}onSelect={onSelect}selectedKeys={selectedKeys}treeData={permissionGroups} // Use filtered top-level groupsfieldNames={{ title: 'name', key: '_id', children: 'children' }}/></Spin></ProForm.Item></ProForm.Group>{!newRecord && (<Form.Item name="_id" label={false}><Input type="hidden" /></Form.Item>)}</ProForm>);
};export default BasicForm;

https://www.qiuzhi99.com/playlists/antdpromakemoney.html

相关文章:

ant design pro v6 如何做好角色管理

先上图&#xff1a; 整个角色管理是如何做的吗&#xff1f; 首先你要处理后端&#xff0c;要先把角色存到用户那。 这是用户管理部分的内容&#xff1a; 可以看到一个用户是有多个角色的。 看到没有&#xff0c;存的是数组 数组的是一个 role 对象 role 对象是这样&#xf…...

C++ 设计模式(3. 抽象工厂模式)

抽象工厂模式也是一种创建型设计模式&#xff0c;提供了一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类【引用自大话设计模式第15章】基本结构 抽象工厂模式包含多个抽象产品接口&#xff0c;多个具体产品类&#xff0c;一个抽象工厂接口和多个具体…...

【PHP入门教程】PHPStudy环境搭建+HelloWorld运行

文章目录 PHP 的历史PHP 的用途PHP 的特点和优势PHP 环境搭建环境准备安装window 安装CentOS / Ubuntu / Debian 安装 第一个Hello World使用Apache服务运行命令行运行代码 PHP 的历史 PHP&#xff08;Hypertext Preprocessor&#xff09;超文本预处理器是一种开源的通用脚本语…...

补 0 输出。

题目描述 输入一个整数&#xff0c;请在整数前面补 00 补足 88 位后输出。 输入描述 输入一行包含一个整数 nn。 输出描述 输出补00后的整数。 输入输出样例 示例1 输入 2021输出 00002021示例2 输入 202110输出 00202110 import os import sys# 请在此输入您的代码 si…...

因为嫌吵,在自己家也用上了远程控制电脑

加班嘛&#xff0c;赶稿嘛&#xff0c;参加工作的人都懂那种无形的压力和烦躁。 因为家里空间有限&#xff0c;我平常都是直接在客厅用台式电脑加急改写方案&#xff0c;但今天晚上家里来了几位叔&#xff0c;他们边吃饭边聊着秦始皇的话题&#xff0c;都70多分钟了&#xff0c…...

vue---echarts环形图

1、完整代码直接可以cv <template><div id"main1"></div> </template><script> import * as echarts from echarts; // import { mapState } from vuex; // import { Alarm_Device } from ../utils/api.js; export default {name: P…...

克服编程挫折:从Bug的迷宫中寻找出口与面对算法保持冷静的策略

在编程学习的道路上&#xff0c;挫折感无疑是每个学习者都必须面对的挑战之一。它们仿佛是一座座高墙&#xff0c;阻挡我们前进的步伐。然而&#xff0c;正如许多有经验的编程高手所证明的那样&#xff0c;挫折并不是终点&#xff0c;而是成长和进步的催化剂。本文将分享一些有…...

Flink之SQL client使用案例

Flink的执行模式有以下三种: 前提是我们已经开启了yarnsession的进程&#xff0c;在下图中可以看到启动的id也就是后续任务需要通过此id进行认证&#xff0c;以及任务分配的master主机。 这里启动时候会报错一个ERROR&#xff1a;org.apache.flink.shaded.curator.org.apache…...

实际开发中的模块化开发 - 应用到直播间

实际开发中的模块化开发 - 模块管理&#xff08;以直播间为例&#xff09;-CSDN博客 引言 在前面的两篇博客中&#xff0c;我们已经介绍了直播模块的简单结构&#xff0c;创建了模块管理器和模块抽象基类&#xff0c;并且通过模块化实现了两个小业务功能模块。接下来&#xf…...

EmguCV学习笔记 VB.Net 第5章 图像变换

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访…...

【初阶数据结构】顺序表与链表的比较(附题)

目录 一、顺序表和链表的区别&#xff08;其他链表存在缺陷&#xff0c;比较意义不大&#xff0c;这里用带头双向循环链表与顺序表进行比较&#xff09; 1.1插入、扩容与随机访问 二、缓存利用率的比较 2.1前置知识 详解及补充知识&#xff08;本文仅为比较顺序表及链表&am…...

git-20240822

目录 初始化仓库 Git init Git init project --bare 查看提交的记录 git log --prettyoneline 查看当前git远程库地址 git remote -v 查看详细提交记录 git log 撤出暂存区的文件 git reset HEAD file(.代表全部文件&#xff09; 提交数据到远程仓库 git config --global push.…...

【时时三省】c语言例题----华为机试题< 数字颠倒>

目录 1,题目 描述 输入描述: 输出描述: 示例1 2,代码...

【前缀和算法】--- 一维和二维前缀和模板

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Journey 本文开始,博主开始讲解有关前缀和的算法&#xff0c;本篇博客我们先来了解一下有关前缀和的两个模板。 &#x1f3e0; 一维前缀和模板 &…...

有些信息注定会丢失

智能在分析问题、做出决策时&#xff0c;总是希望获取尽可能多的信息&#xff0c;以此更加准确地决策。然而&#xff0c;很遗憾的是&#xff0c;有一些信息注定会丢失&#xff0c;不可能获取完全的信息&#xff0c;而且即使能够获取&#xff0c;智能也不能完全利用。 这一点与…...

c#中Task.Run 和使用 Task 构造函数创建任务的区别

Task.Run 和使用 Task 构造函数创建任务是两种不同的方法&#xff0c;它们在某些方面有显著的区别&#xff1a; 启动方式: Task.Run 是一个静态方法&#xff0c;它立即启动一个任务并在后台执行指定的工作。它通常用于快速启动一个简单的后台任务。使用 Task 构造函数创建任务&…...

使用nginx做代理转发

需求1&#xff1a;通过监听服务器的80端口&#xff0c;将请求转发到另一台服务器的8070端口 打开nginx/nginx.conf文件 server {listen 80;server_name localhost;location /analys {proxy_pass http://10.xx.xx.xx:8070/;} }需求2&#xff1a;通过监听服务器的80端口&am…...

Java前端与后端交互:JSON与XML数据交换 - 掌握现代Web开发的核心技能

引言 随着互联网技术的不断进步&#xff0c;Web应用变得越来越复杂&#xff0c;从前端到后端的每一个环节都需要精心设计以保证良好的用户体验。在这个过程中&#xff0c;数据的传递扮演着至关重要的角色。无论是简单的表单提交还是复杂的API调用&#xff0c;都需要一种可靠的…...

网络攻击原理及过程

网络攻击原理表 攻击者 内容 攻击访问 攻击效果 攻击意图 黑客 挑战 间谍 用户命令 破坏信息 好奇 恐怖主义者 脚本或程序 本地访问 信息泄密 获取情报 公司职员 自治主体 远程访问 窃取服务 经济利益 职业犯罪分子 电磁泄露 拒绝服务 恐怖事…...

day30(8/16)——ansible

目录 一、回顾 1、mysql和python 1. mysql5.7 2. 可以使用pymysql非交互的管理mysql 2、mycat中间件 1. 独属于mysql主从的负载均衡策略 2.配置写主读从 3. 步骤 3.1 安装jdk 3.2 mycat 3.3 配置 3.4 启动和调试 二、运维自动化&#xff08;ansible&#xff09; 1、任务背…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...