当前位置: 首页 > 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、任务背…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

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

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