1.【实例-0】antd design pro V5 [1] 入门及安装
2.antd ProTable初体验
3.实例-0antd design pro V5 [3] 个性化调整&路由相关
4.实例-0antd design pro V5 [6] 最后的构建&部署
5.antd和antd-pro有什么区别？
6.Antd Procomponent 之 proForm - 高级表单
【实例-0】antd design pro V5 [1] 入门及安装
在掌握了前端基础知识和React后，为了实践所学，决定从实例开始尝试，而antd design pro V5恰好能简化项目搭建。官网提供中文文档，建议先阅读新手须知了解其功能特性，微云源码网它基于UMI框架，一个企业级的React应用框架，以React-Router6为基础，且有丰富的插件支持。
UMI有多个版本，pro文档中提到的可能是v3，而v4版本有所变化，需要注意版本更新。UMI与@umijs/max的关系是，后者是集成所有umi插件的便捷工具，通过import all from umi可以方便地导入umi和其插件。
开始实践前，确保环境配置完备，包括npm或yarn、node.js版本升级。仿乌云源码官网推荐使用pro-cli全局安装，但我选择yarn方式。创建项目时，我最初尝试umi@3但遇到问题，最终选择umi@4并成功运行。创建项目后，初始设置需登录，登录后可以熟悉界面并调整项目样式。
antd pro的文件目录结构可能与官方文档有所不同，它强调约定优于配置，所以开发时需遵循其设计规范。umi4的目录结构可以在官方文档中找到，以帮助理解各个文件夹的作用和意图。
antd ProTable初体验
在新中后台项目中，我们运用了antd Pro+ts，项目中大量使用了表格。ProTable的使用体验确实非常便捷。下面，我们将对几个关键API进行简要介绍。
首先，网络报纸源码request是ProTable的核心API，它接收一个对象，必须包含data和success，当需要手动设置分页时，还需加入total参数。这个API负责管理加载状态，并在表单查询和参数发生变化时重新执行查询。同时，它会保留查询表单的值和参数。
接着，我们来探讨table工具栏的设置。默认情况下，工具栏会显示刷新、密度调整、列设置等功能。此外，用户还可以自定义按钮，实现高度的灵活性。设置工具栏为false即可隐藏它。
在columns中，faac 源码下载我们定义了列名称和数据。通过这个API，我们能够构建表格结构。
对于搜索功能，search参数控制是否显示搜索表单。默认情况下，搜索功能开启，每一列都会生成一个搜索表单。若无需搜索功能，只需在columns中设置search: false。如果仅希望在表单中显示搜索而不显示在表格中，则需将hideInTable设置为true。
在某些情况下，我们需要根据后端字段动态渲染列内容，而非直接展示。这时，可以使用render函数。这个函数接收两个参数：列数据和DOM元素，必须返回值。函数可以对列数据进行任何操作，创业园 源码如返回自定义元素。
在撰写代码时，我被React的简洁和强大所震撼，而Vue一直是我偏爱的框架。撰写完这段代码后，我决定与同事去打篮球，结束了这次技术探讨。欢迎看到这段内容的同学点赞，给予支持。
实例-0antd design pro V5 [3] 个性化调整&路由相关
在Antd Design Pro V5中，个性化调整和路由管理是关键环节。首先，我们可以通过修改config/defaultSettings.ts文件来实现标题的自定义。
加载页的添加虽然未提及操作步骤，但这是配置流程的一部分。创建新页面时，简单地创建内容并在config/routes.ts中添加JSON节点，即可在系统中看到新页面的显示效果。
菜单的国际化配置在src/locales/zh-CN/menu.ts中实现，只需添加对应键值对，如'menu.myPage': '我的页面'，这样菜单名称会根据配置动态加载。嵌套路由的name会在添加时自动拼接父路由名。
为了实现多级菜单和包裹功能，需参考管理页面的配置示例，为路由添加子路由数组，父节点无需组件时，它将作为二级菜单显示，而配置的组件则可以包裹子路由内容。
关于路由组件的props，Umi 4的升级导致props默认为空，需通过hooks获取所需参数，避免直接从props中获取属性值。
Layout布局方面，umi3和umi4有所变化，都采用hooks获取参数，不再直接依赖路由组件的props。路径定义在项目的jsconfig.json中，使用@符号表示src目录。
在布局调整部分，理解app.tsx的层级结构和proLayout配置有助于实现布局调整，特别是处理页面和布局组件的嵌套关系。
默认页的和状态可以通过修改config/defaultSetting.ts中layout的值来调整。混合模式下，需注意splitMenus属性和一级菜单父路由的默认节点设置。
最后，关于权限管理，umi提供了一系列插件，如@umijs/plugin-access，用于定义和控制用户的权限。在src/access.ts中定义用户权限，通过access属性在routes.ts中添加权限条件，实现路由权限控制和页面权限显示。
实例-0antd design pro V5 [6] 最后的构建&部署
实例-0antd design pro V5构建与部署详解
在开发过程中，跨域和代理是常见的问题，它们旨在保证安全，限制了脚本的来源范围。pro和umi通过node.js的代理功能，实现了在服务器端转发请求，避开浏览器的同源策略限制，简化了跨域处理。 在pro中，配置代理是在config/config.ts文件中进行的，例如将所有以'/server/api'开头的请求转发到'ponent 之 proForm - 高级表单ProForm，作为antd pro的高级表单组件，显著简化了表单开发流程。它在原有表单基础上加入了语法糖和丰富的布局设置，为快速构建表单提供了便利。默认行为确保表单功能默认可用，无需额外配置。ProForm支持多种布局，如分步表单、Modal表单、Drawer表单、查询表单和轻量筛选，覆盖了广泛的应用场景，减少复杂布局工作量，提高开发效率。
ProFormFields是表单项的核心，结合了FormItem和组件的功能，支持fieldProps的自定义。例如，ProFormText组件是FormItem与Input组件的结合，实现类似于以下代码的快速表单创建：``。ProFormList作为数据结构化工具，与Form.List API相似，内置了删除、复制和新增按钮，简化了数据管理逻辑。
ProForm组件列表提供了丰富的功能，如ProFormList，其API包括actionRef用于操作和actionGuard用于拦截器。ProFormFieldSet则用于将多个children的值组合并存储于ProForm中，便于管理。ProFormDependency简化了表单依赖配置，自动处理diff和提取值，配置的name参数需要数组形式，以支持嵌套结构。支持name配置，以便在渲染时传入特定值。
ProForm与EditableTable的结合，能实现更灵活的数据编辑操作。然而，需注意ProComponents专注于中后台的CRUD，内置的样式和行为可能难以调整，对于需要高度自定义的业务场景，建议直接使用Ant Design。
ProForm的引入极大提升了表单开发的效率与灵活性，是中后台开发中的有力工具。
