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.hqwc.cn/news/321551.html

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

相关文章

图片上传下载

图片上传下载

数据模型: imageUrl: , <el-form-item label"楼盘图片:" prop"pic" class"uploadImg" v-model"emp.pic"> <el-upload class"avatar-uploader" …
阅读更多...
Nginx 的SSL证书配置

Nginx 的SSL证书配置

目录 1.申请域名&#xff0c;证书下载 2.准备站点源代码 3.修改nginx 对应网站的配置文件 4.修改 host 文件 http协议访问的网站默认会显示不安全&#xff0c;因为数据默认是明文传输的 https是httpssl&#xff0c;ssl是加密协议&#xff0c;通过证书来进行加密的&#xff…
阅读更多...
柯桥小语种学习，留学韩语 生活日常口语 语法

柯桥小语种学习，留学韩语 生活日常口语 语法

① N이다/A/V/았ㄹ/을지도 모르다 说不定 이미 도착했을 지도 모르니까 전화해 봐요 说不定已经到了&#xff0c;打电话试试 주말에 세일이 있을지도 모르니까 주말에 가 보자 周末说不定会搞活动&#xff0c;我们周末去吧 ② ㄴ/은/는/았었는/ㄹ/을지 모르다 不知道 처음이…
阅读更多...
轻量检测模型PP-PicoDet解析

轻量检测模型PP-PicoDet解析

Paper&#xff1a;PP-PicoDet: A Better Real-Time Object Detector on Mobile Devices official implementation&#xff1a;https://github.com/PaddlePaddle/PaddleDetection/tree/release/2.7/configs/picodet Backbone 作者通过实验发现&#xff0c;ShuffleNetV2在移动…
阅读更多...
显示所有中国城市需要多少个汉字？

显示所有中国城市需要多少个汉字？

显示所有中国城市需要多少个汉字呢&#xff1f; 需要3678个汉字&#xff0c;看看我怎么知道的。 第一步&#xff1a;先找到中国的所有城市的名称 去哪里找到中国的所有城市的名称呢&#xff1f; 进入中国天气网&#xff1a;http://www.weather.com.cn/ 使用 F12 打开浏览器的调…
阅读更多...
RK3399平台入门到精通系列讲解（实验篇）信号驱动 IO 实验

RK3399平台入门到精通系列讲解（实验篇）信号驱动 IO 实验

🚀返回总目录 文章目录 一、什么是信号驱动IO1.1、信号驱动IO1.2、fcntl 函数介绍二、信号驱动 IO 实验源码2.1、Makefile2.2、驱动部分代码2.3、测试应用代码一、什么是信号驱动IO 1.1、信号驱动IO 信号驱动 IO 不需要应用程序查询设备的状态，一旦设备准备就绪，会触发 SI…
阅读更多...
spring 之 事务

spring 之 事务

1、JdbcTemplate Spring 框架对 JDBC 进行封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 1.1 准备工作 ①搭建子模块 搭建子模块&#xff1a;spring-jdbc-tx ②加入依赖 <dependencies><!--spring jdbc Spring 持久化层支持jar包--><dependency&…
阅读更多...
Jetson Orin Nano_初识，关于板载资源

Jetson Orin Nano_初识，关于板载资源

1、开发板上有什么 英伟达Jetson Orin Nano&#xff0c;内存8GB&#xff0c;算力40TOPS&#xff08;CPU&#xff09;固态硬盘128GB&#xff08;系统镜像以及文件存储&#xff09;千兆以太网口、无线网卡&#xff08;用来上网&#xff09;4个USB&#xff08;用来接鼠标键盘&…
阅读更多...
机器学习（四） -- 模型评估（2）

机器学习（四） -- 模型评估（2）

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 机器学习&#xff08;四&#xff09; -- 模型评估…
阅读更多...
点餐群里的政财会人员薪资补贴 - 恶意钓鱼软件分析

点餐群里的政财会人员薪资补贴 - 恶意钓鱼软件分析

一、薪资补贴EXE - ICO&#xff1a; 摸鱼日记&#xff1a;今天下午发现一位男士在点餐群里发了一个文件&#xff0c;并提醒称刚刚被远程控制&#xff0c;所以比较好奇的对文件弄了一弄&#xff1a; 下载解压后发现名为密码123_政财会人员薪资补贴调整.exe大小才203KB&#xff…
阅读更多...
Apache Doris (六十）： Doris - 物化视图

Apache Doris (六十）： Doris - 物化视图

🏡 个人主页：IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主：加入大数据技术讨论群聊，获取更多大数据资料。 🔔 博主个人B栈地址：豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录
阅读更多...
正定矩阵在格密码中的应用（知识铺垫）

正定矩阵在格密码中的应用（知识铺垫）

目录 一. 写在前面 二. 最小值点 三. 二次型结构 四. 正定与非正定讨论 4.1 对参数a的要求 4.2 对参数c的要求 4.3 对参数b的要求 五. 最小值&#xff0c;最大值与奇异值 5.1 正定型&#xff08;positive definite&#xff09; 5.2 负定型&#xff08;negative defin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023