React Admin 前端脚手架之ant-design-pro

文章目录

    • 一、React Admin 前端脚手架选型
    • 二、React Admin 前端脚手架之ant-design-pro
    • 三、ant-design-pro使用步骤
    • 四、常用总结(持续更新)
      • EditableProTable组件 常用组件
        • EditableProTable组件 编辑某行后,保存时候触发发送请求
        • EditableProTable组件,添加记录提醒:只能同时编辑一行
        • EditableProTable组件 后台请求数据
        • ProForm组件
      • 在ProTable表格 Columns中自定义Copy的内容
      • ProForm 高级表单 去掉重置和提交按钮
    • 五、过程中问题总结
      • 报错:opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]
    • 参考

一、React Admin 前端脚手架选型

https://www.bilibili.com/video/BV1nD4y1t7qH/?spm_id_from=333.337.search-card.all.click&vd_source=e66b048d577502789e7de9b732345c73

UI组件库对比和介绍:Ant.Design,Material UI,Semantic UI
参考URL: https://www.bilibili.com/video/BV1484y197CZ/

二、React Admin 前端脚手架之ant-design-pro

官方github:https://github.com/ant-design/ant-design-pro
预览:http://preview.pro.ant.design
首页:http://pro.ant.design/index-cn
使用文档:http://pro.ant.design/docs/getting-started-cn
更新日志: http://pro.ant.design/docs/changelog-cn
常见问题:http://pro.ant.design/docs/faq-cn
国内镜像:http://ant-design-pro.gitee.io

开箱即用的中台前端/设计React企业开发解决方案。

ant-design-pro蚂蚁官方出品(2023 蚂蚁集团体验技术部出品),介绍:
ant-design-pro https://www.osrc.com/tomsun28/projects/project_848612420101120000

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

Ant Design Pro 作为一个前端脚手架,默认读者已经懂了一些前端的基础知识,并且了解 umi 和 Ant Design, 如果你是纯粹的新手,第一次来跑项目建议读一下 新手需知。

三、ant-design-pro使用步骤

官方文档:https://pro.ant.design/zh-CN/docs/getting-started
https://www.bilibili.com/video/BV1Ke4y177mf/
https://www.bilibili.com/video/BV1mr4y1r7GV/

包管理器
推荐使用 tyarn 来进行包管理,可以极大地减少 install 的时间和失败的概率,并且完全兼容 npm。

如果喜欢使用 npm 而不是 yarn,可以使用 cnpm, 安装速度比 tyarn 更快,但是与 npm 不是完全兼容。

选择 umi 的版本, 这里我们选择 umi@3
? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
complete

这里我们选择 simple

启动项目
Ant Design Pro 以 umi 作为脚手架,启动和开发与 umi 基本相同。

启动项目
在项目根目录下执行 npm run start, 即可启动项目。

构建
由于 Ant Design Pro 使用的工具 Umi 已经将复杂的流程封装完毕,构建打包文件只需要一个命令 umi build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 .js、.css、index.html 等静态文件。

四、常用总结(持续更新)

EditableProTable组件 常用组件

建议在充分理解了ProTable之后,再使用EditableProTable会比较顺畅

EditableProTable组件 编辑某行后,保存时候触发发送请求

在这里插入图片描述
按ctrl 进入onSave源码定义:

onSave?: (
/** 行 id,一般是唯一id */
key: RecordKey, 
/** 当前修改的行的值,只有 form 在内的会被设置 */
record: DataType & {index?: number;
}, 
/** 原始值,可以用于判断是否修改 */
originRow: DataType & {index?: number;
}, 
/** 新建一行的配置,一般无用 */
newLineConfig?: NewLineConfig<DataType>) => Promise<any | void>;

因此,我们定义一个onSave处理函数,handleSave 如下,实现思路就是按照官方函数签名实现即可:

  const handleSave =async ( key: RecordKey,record: API.UploadTokenItem,originRow: API.UploadTokenItem, ) => {try {// 在这里编写保存数据的逻辑,可以发送请求将数据保存到后台console.log('要保存的行数据:', record);console.log('原始行数据:', originRow);console.log('要更新的行的 key:', key);// 这里发送请求将数据保存到后台// await saveUploadHistoryLog(record);// 这里返回保存成功后的提示信息,可以根据需要进行修改return '保存成功';} catch (error) {// 这里处理保存失败的情况console.error('保存失败:', error);throw new Error('保存失败');}}

然后配置,onSave使用 handleSave 处理即可。

在这里插入图片描述

EditableProTable组件,添加记录提醒:只能同时编辑一行

虽然我设置的

editable={{type: 'single',

同时,只能编辑一行,但是我现在已经没有了编辑(已经编辑过了),还是提醒只能同时编辑一行。

解决思路:
针对以上出现的情况我们只需要把 EditableProTable 组件中的 setEditableRowKeys(可编辑的key)给清空就可以了. setEditableRowKeys([]);

EditableProTable组件 后台请求数据

同ProTable组件,使用 request 配置项:

在这里插入图片描述

ProForm组件

在这里插入图片描述

  const formRef = useRef<ProFormInstance<any>>();   <ProForm<{table: API.UploadTokenItem[];
}>formRef={formRef}initialValues={{table: defaultData,}}validateTrigger="onBlur"
>

ProForm 是 Ant Design Pro 中的一个表单组件,它提供了一种简化和增强表单开发的方式。ProForm 可以帮助你快速构建复杂的表单页面,并提供了许多内置功能和组件,如字段校验、表单布局、数据初始化等。

在你提供的代码片段中, 组件被用来创建一个表单,并通过 formRef 引用来获取表单实例。该表单有一个名为 ‘table’ 的字段,其值的类型是 API.UploadTokenItem[]。

属性解释:

  • formRef={formRef}:通过 formRef 属性将表单实例保存到 formRef 变量中,以便后续对表单的操作。
  • initialValues:通过 initialValues 属性设置表单的初始值。在这里,‘table’ 字段的初始值被设置为 defaultData,可以根据需求进行设置。
  • validateTrigger=“onBlur”:通过 validateTrigger 属性设置表单校验的触发时机。在这里,校验会在字段失去焦点时触发,可以根据需求进行设置。
    通过使用 组件,你可以更便捷地定义表单结构、处理表单校验和提交等操作。它提供了丰富的可配置项和扩展点,可以满足不同场景下的表单需求。

如果你需要对多行数据进行批量编辑并统一提交,使用 组件可以更方便地管理和校验整个表单的数据。
当你在表单中每次编辑一行数据时,表单实例会自动保存该行数据的状态。这意味着你可以在任何时候通过表单实例获取整个表单的数据,包括每一行的数据。

我的思路:如果只是单独操作每行数据,而不需要整个表单的统一提交和校验,那么使用表单实例来获取数据可能就没有太大的用处了。可以直接操作每行数据的状态,而无需通过表单实例。

在ProTable表格 Columns中自定义Copy的内容

在ProTable Columns中copyable的属性设置为true时,会生成一个复制的图标,点击即可复制。

在这里插入图片描述

ProForm 高级表单 去掉重置和提交按钮

查看源码,是由 ProForm组件的 submitter 属性决定:

在这里插入图片描述

五、过程中问题总结

报错:opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

在执行 npm run dev 命令时,如果 OpenSSL 配置不正确,就会出现 opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ] 的错误。

问题分析:
因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。故此以前的项目在升级 nodejs 版本后会报错。

这个错误通常是由于在 NODE_OPTIONS 环境变量中设置了 --openssl-legacy-provider 选项引起的。

SET NODE_OPTIONS=–openssl-legacy-provider,来告诉nodejs,别使用最新的SSL3.0,还是使用以前旧版本的。
–openssl-legacy-provider 选项是用来启用 OpenSSL 1.0.x 的兼容模式的。然而,在 Node.js 14.x 及以上版本中,这个选项已被禁止使用。因此,如果你在 NODE_OPTIONS 环境变量中设置了 --openssl-legacy-provider 选项,就会出现 opensslErrorStack 错误。

问题解决:
【推荐】方法1
修改package.json,在相关构建命令之前加入SET NODE_OPTIONS=–openssl-legacy-provider,如:

"start": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_ENV=dev umi dev",

这种可以一劳永逸,以后直接通过npm执行scripts里面的命令即可。不管是项目迭代,还是团队开发,这种都比较有效。

方法2:
尝试卸载Node.js 17+版本并重新安装Node.js 16+版本,然后再重新启动

参考

脚手架搭建 - Ant Design Pro 快速入门
参考URL: https://www.bilibili.com/video/BV1fC4y1277B/
React企业开发解决方案AntDesignPro速学教程
参考URL: https://www.bilibili.com/video/BV1Af4y1j72g/
【强烈推荐】【B端设计精读】Ant Design 5.0 设计改版的分析
参考URL: https://www.bilibili.com/video/BV1rv4y1278v/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596556.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 系统 kill 指令笔记

kill 名称 kill - send a signal to a process 向指定的线程或进程发送信号 描述 The default signal for kill is TERM. Use -l or -L to list availablesignals. Particularly useful signals include HUP, INT, KILL, STOP,CONT, and 0. Alternate signals …

k8s笔记1- 初步认识k8s

k8s简介&#xff1a; kubernetes&#xff0c;俗称k8是&#xff0c;用于自动部署&#xff0c;扩缩和管理容器化应用程序的开源系统&#xff0c;它将组成应用程序的容器&#xff0c;组合成逻辑单元&#xff0c;便于管理和服务发现。 k8s的作用 自动化上线和回滚、存储编排…

Spring中的工厂类、bean的作用范围和生命周期

1.Spring中的工厂类 1.1ApplicationContext ClassPathXmlApplicationContext&#xff1a;加载类路径下 Spring 的配置文件 FileSystemXmlApplicationContext&#xff1a;加载本地磁盘下 Spring 的配置文件 1.1.1service ApplicationContext&#xff1a;只要一读取配置文件…

PyTorch|PyTorch张量解释

神经网络中的输入、输出和转换都使用张量表示&#xff0c;因此&#xff0c;神经网络编程大量使用张量&#xff0c;张量是我们在 PyTorch 中编程神经网络时将使用的数据结构。 关于张量及其维数的简要说明&#xff0c;以及术语&#xff1a; 你有时会看到一个称为向量的一维张量…

[论文分享]TimesURL:通用时间序列表示学习的自监督对比学习

论文题目&#xff1a;TimesURL: Self-supervised Contrastive Learning for Universal Time Series Representation Learning 论文地址&#xff1a;https://arxiv.org/abs/2312.15709 代码地址&#xff1a;暂无 摘要 学习适用于各种下游任务的通用时间序列表示具有挑战性&…

Springboot整合RocketMQ 基本消息处理

目录 1. 同步消息 2. 异步消息 3. 单向消息 4. 延迟消息 5. 批量消息 6. 顺序消息 7. Tag过滤 导入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId></dependency> …

14:00面试,14:08就出来了,问的问题过于变态了。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到10月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40…

机器学习原理到Python代码实现之LinearRegression

Linear Regression 线性回归模型 该文章作为机器学习的第一篇文章&#xff0c;主要介绍线性回归模型的原理和实现方法。 更多相关工作请参考&#xff1a;Github 算法介绍 线性回归模型是一种常见的机器学习模型&#xff0c;用于预测一个连续的目标变量&#xff08;也称为响应变…

Spring的bean的生命周期!!!

一.单例模式 单例&#xff1a;[启动容器]--->通过构造方法&#xff08;创建对象&#xff09;---->调用set方法&#xff08;注入&#xff09;--->调用init方法&#xff08;初始化&#xff09;----[容器关闭]----->调用destroy方法&#xff08;销毁&#xff09; app…

死锁的处理策略“检测和解除”-第三十九天

目录 前言 死锁的检测 数据结构资源分配图 基于“图”检测死锁 可以消除所有边 不能消除所有边 结论 死锁定理 死锁的解除 本节思维导图 前言 如果系统中既不采取预防死锁的措施&#xff0c;也不采取避免死锁的措施&#xff0c;系统就很可能发生死锁&#xff0c;在这种…

西电期末1019.校验和计算

一.题目 二.分析与思路 难点在于逐个取出数据的每一位&#xff0c;我们编写f函数&#xff0c;使用了一个while函数&#xff0c;每次循环中用取余的运算符找到数据的个位累加&#xff0c;再将n/10&#xff0c;如此n便被去除了个位&#xff0c;十位就成了新的个位&#xff0c;最…

案例精选|淄博绿能燃气工程有限公司日志审计系统建设方案

淄博绿能燃气工程有限公司&#xff0c;成立于1994年&#xff0c;前身为淄博市煤气公司管道液化气分公司。公司业务主要涉及天然气、液化气等市政工程施工及城镇燃气供应等领域&#xff0c;具有市政公用工程施工总承包二级资质&#xff0c;《压力管道安装许可证》压力管道安装GB…

利用Embedding优化搜索功能

我们继续用Gemini学习LLM编程之旅。 Embedding是一种自然语言处理 (NLP) 技术&#xff0c;可将文本转换为数值向量。Embedding捕获语义含义和上下文&#xff0c;从而导致具有相似含义的文本具有更接近的Embedding。例如&#xff0c;句子“我带我的狗去看兽医”和“我带我的猫去…

LeetCode---378周赛

题目列表 2980. 检查按位或是否存在尾随零 2981. 找出出现至少三次的最长特殊子字符串 I 2982. 找出出现至少三次的最长特殊子字符串 II 2983. 回文串重新排列查询 一、检查按位或是否存在尾随零 这题和位运算有关&#xff0c;不是很难&#xff0c;题目要求至少有两个数的…

案例073:基于微信小程序的智慧旅游平台开发

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

用贪心算法编程求解任务安排问题

题目&#xff1a;用贪心算法编程求解以下任务安排问题 一个单位时间任务是恰好需要一个单位时间完成的任务。给定一个单位时间任务的有限集S。关于S的一个时间表用于描述S中单位时间任务的执行次序。时间表中第1个任务从时间0 开始执行直至时间1 结束&#xff0c;第2 个任务从时…

20240104确认AIO-3399J的开发板适配ov13850摄像头不支持4K分辨率录像

20240104确认AIO-3399J的开发板适配ov13850摄像头不支持4K分辨率录像 2024/1/4 13:23 开发板&#xff1a;Firefly的AIO-3399J【RK3399】 SDK&#xff1a;rk3399-android-11-r20211216.tar.xz【Android11】 Android11.0.tar.bz2.aa【ToyBrick】 Android11.0.tar.bz2.ab Android1…

人工智能如何重塑金融服务业

在体验优先的世界中识别金融服务业中的AI使用场景 人工智能&#xff08;AI&#xff09;作为主要行业的大型组织的重要业务驱动力&#xff0c;持续受到关注。众所周知&#xff0c;传统金融服务业在采用新技术方面相对滞后&#xff0c;一些组织使用的还是上世纪50年代和60年代发…

Android Jetpack学习系列——Navigation

写在前面 Google在2018年就推出了Jetpack组件库&#xff0c;但是直到今天我才给重视起来&#xff0c;这真的不得不说是一件让人遗憾的事。过去几年的空闲时间里&#xff0c;我一直在尝试做一套自己的组件库&#xff0c;帮助自己快速开发&#xff0c;虽然也听说过Jetpack&#…

Android如何正确使用 Canvas 的 save() 和 restore() 方法

如何正确使用 Canvas 的 save() 和 restore() 方法 在Android的绘图API中&#xff0c;Canvas类提供了一系列强大的功能来绘制自定义视图。为了更高效地管理绘图状态和变换&#xff0c;Canvas类提供了save()和restore()方法。正确使用这些方法是高效绘图和避免常见错误的关键。 …