1.ant design pro v4踩坑记
2.zdpreact_antdesginpro 研究一下react里面比较流行的源码一个UI框架，开发后台管理系统
3.创建Ant Design Pro的源码React项目
4.Antd Procomponent 之 proForm - 高级表单
5.Ant design pro入坑指南
6.Ant Design Pro 使用总结

ant design pro v4踩坑记

       最近在使用ant design pro的过程中，遇到了诸多问题，源码耗费了不少精力。源码为避免日后遗忘，源码特此记录下来，源码编程笔记源码希望对大家有所帮助。源码

       版本选择

       目前最新版本为ant design pro v4，源码但网上大部分教程仍以v3甚至更早的源码版本为主。v4与v3相比，源码改动较大，源码大部分实例已转变为react hook的源码形式，即函数组件。源码在v3中，源码大多数组件采用的源码是class形式。

       因此，对于新手学习起步，建议直接使用v4版本，学习最新的内容。若需修改老项目，则优先选用当前版本的代码，因为修改起来相对麻烦，本人亲身体验过。

       子组件修改父组件的state

       目前主要有两种情况：

       1. 使用class的有状态组件进行传值（class形式）

       2. 使用react hook的函数组件进行传值（function形式）

       以下分别展开说明。

       首先是class形式函数组件，

       该例子是在父组件中引入一个包含Input的子组件，当子组件的Input值发生变化时，父组件的值也会受到影响。

       由于setState是异步的，在使用时，尤其是涉及count计算等场景，最好采用以下形式：

       同样的功能使用函数组件的形式实现

       坑人的Form

       从v3升级到v4，最令人头疼的就是Form。由于我的项目使用的是class形式，因此没有采用React Hook的形式进行编写。然而，官网上v4的示例基本上都是函数组件的形式。在v3中使用Form时，需要使用Form.Create来包裹组件才能使用一些值，但在V4中不能使用Form.Create。因此，网站源码分享合集在这期间我调查了好久，最后成功解决了问题。我使用的例子是官网的可编辑表格，参考v3和官网的迁移指南，最终修改完成。

       大概就是这样，关键点都加上注释，我写的ts也不太好，这里主要是参考实现方式吧。

       大概就这样吧，じゃあ。

zdpreact_antdesginpro 研究一下react里面比较流行的一个UI框架，开发后台管理系统

       深入研究 React 中流行的 UI 框架：Ant Design Pro，探索后台管理系统开发的关键实践。

       首先，我们从最基础的代码出发，删去不必要的文件如 README，保留中文文档，确保快速上手。

       在 README.md 中，仔细阅读介绍的特性，包括响应式布局、组件化开发、预设样式库等，为后续操作打下基础。

       打开模板页面，先安装项目依赖，配置 WebStorm 并添加 npm 脚本，启动命令随之而来。

       在等待依赖安装的过程中，系统会自动执行相关配置，确保所有必需的库和工具成功部署。

       一旦安装完成，通过启动命令运行项目，控制台输出访问地址，访问浏览器完成初次启动。

       编译过程完成后，系统自动跳转至登录页面，尝试登录时，遇到失败提示。太极链源码这时，仔细检查登录逻辑。

       首先，审视模拟数据（mock）代码，通过修改登录条件，确保能成功登录系统。重启动服务，验证问题解决。

       深入分析 package.json 中的启动命令，发现默认启动了模拟服务，而加入参数 MOCK=none 后能关闭此功能。

       对比两个启动命令，明确默认启动包含模拟服务，导致无法正常登录，通过修改启动参数解决登录问题。

       成功登录后，对页面进行初步观察，包括首页、二级管理页面、查询表格等基本功能，整体设计简约，符合快速开发原则。

       未来，将根据实际需求，逐步扩展页面功能，利用 Ant Design Pro 的强大支持，实现高效、稳定的后台管理系统。

创建Ant Design Pro的React项目

       在React和TypeScript的世界中，Ant Design Pro以其丰富的经验和最佳实践成为了开发后台项目的首选。尤其是Ant Design，经历了saga-redux、dva、umi的迭代，改进了redux的不足，为React开发带来了显著提升。接下来，我们将一步步构建基于Ant Design Pro的React项目。

       首先，为了利用Ant Design Pro，无源码可拖拽你需要安装umi作为基础工具。在项目结构中，创建一个名为"test"的文件夹以组织代码。

       例如，在使用dva时，TypeScript的强大功能体现在其类型注解上，它能减少不必要的错误，提升开发效率。你将创建src/services/home.ts，对接后台接口，以便获取数据。接着，创建src/models/home.ts，调用接口，并将这个模型与src/pages/home/index.tsx中的组件连接起来。

       务必注意，dva对Redux做了调整，如actions与reducers的处理方式有所区别。在编写effects和reducers时，确保函数名不重复，遵循Dva的规范。

       最后，如果你打算在商业项目中使用本文内容，请提前联系作者获取授权，非商业用途请务必注明引用来源。

Antd Procomponent 之 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的引入极大提升了表单开发的效率与灵活性，是中后台开发中的有力工具。

Ant design pro入坑指南

       在进行后台开发项目时，面对仅需对接业务系统提取数据的简单需求，加之项目时间紧迫及非专职设计团队的限制，选择前端框架时需要兼顾效率与美观。在多方打听及自我考量后，决定采用ANT Design Pro与SpringMVC作为此项目的技术栈。选择ANT Design Pro的原因主要有以下几点：

       首先，ANT Design Pro建立在成熟且文档全面的ANT Design基础上，作为封装，其使用门槛相对较低。在实现高效开发的同时，能保证界面设计的合理性与一致性。

       其次，考虑到项目时间紧迫与设计团队有限，ANT Design Pro封装的界面风格与功能页面能够极大地节省设计与实现工作量。其设计遵循主流审美，符合现今后台系统的标准，有助于提升用户体验。

       此外，考虑到项目中后台系统需要在手机浏览器上运行的情况，ANT Design Pro对界面布局与兼容性的优化，使得在手机上也能实现基本功能的正常展示。

       在确定技术选型后，开始着手安装环境。基于Windows 的开发环境，需先完成一系列的安装准备步骤，包括安装Yarn、Node.js、Git等必要的工具。以下为详细的安装流程：

       首先，确保环境安装准备充分。对于Yarn，建议通过Chocolatey进行安装，具体步骤包括安装Chocolatey和Node.js，并验证安装是否成功。同样，确保Git已正确安装，并进行验证。

       接下来，进行UMI的安装。先安装cnpm，然后使用create-umi进行项目创建，选择ANT Design Pro、TypeScript和Complete等选项。创建项目后，安装所需的模块，并进行运行测试。

Ant Design Pro 使用总结

       在使用 Ant Pro 框架开发项目的过程中，我遇到了不少问题，通过不断探索，我对这个框架有了更深的理解。在此，我将自己的使用经验总结如下，以便在将来遇到相似问题时能快速找到解决方案，同时也希望能帮助到有同样困惑的朋友们。

       在配置 router.config.js 文件时，我给每个需要设置权限的菜单项添加了 Routes: ['src/pages/Authorized']，这是为了使用 ant-pro 的权限组件包裹目标组件，并设置了 authority: ['admin'] 属性，以便根据不同角色进行配置。

       在切换用户后，我发现权限组件没有重新渲染触发，解决方法是登录成功后调用 reloadAuthorized 方法，即 import { reloadAuthorized } from '../utils/Authorized'。

       关于 dvajs 的 models 使用，ant-pro 中 src/models 用于存放全局的 models，src/pages/models 用于存放页面的 models，引入时需要使用。以下是一个使用示例：

       /src/pages/element/models/compay.js

       /src/services/api.js

       在 src/element/Company.js 页面中，会涉及到绑定 models 数据、获取绑定的 models 数据以及向 models 传参。

       在后台管理开发过程中，经常需要处理请求数据时触发的 loading 状态。ant-pro 提供了一个基于 dva-loading 封装的全球 model，这个 loading 常常在组件的 connect 方法中看到。以下是一些常用方法：

       在页面中的使用方法如下：

       ---(主要和 `SecurityLayout.jsx` 里面的东西有关系)--- 在 SecurityLayout.jsx 中有如下代码：

       根据实际业务需求，一般不需要在这里进行 user 的相关请求，关于 user 的信息一般会随着 login 接口一并返回，因此代码中需要将这一块删除，并在 model/login.js 中发起登录请求成功之后获取到 user 信息，存储在 sessionStorage 中。

       然后在 render 函数里进行判断，将验证方式改为 session 验证：

       注意：这里取消了 model/user 中的使用，会导致页面展示以及权限的 bug，因此处理与 user 相关的界面时，需要将 connect 中的 user 替换成 session 中的 user，涉及的页面主要有：GlobalHeader 中的 AvatarDropdown.jsx（头部个人信息）、pages 中的 Authorized.jsx（权限配置）等等需要注意。

       之后将 BasicLayOut 中 useEffect 中的 dispatch({ type: 'user/fetchCurrent' }); 方法删除，防止多余的请求发生。最后，注意退出登录时将 session 清空即可。

       公共部分的国际化在 ant-pro 的 src/locales 文件夹中进行相应配置。各个区块部分的国际化在每个组件文件夹的一级菜单中创建 locales 文件夹进行相应配置，例如：src/pages/Form/BasicForm/locales，树状结构如下：

       (这里提供一个比较low的方法，更高级的等之后再研究。)

       首先添加 urlToList 方法

       在 BaseLayOut.jsx 里面添加以下代码

       将 ProLayout 里的 breadcrumbName 的 routers 替换为 newRouters，把 pageTitleRender 自定义为 newRouters 的最后一个元素的 breadcrumbName。

       在实际业务中，response 和 request 数据结构都是和后端定义好的，不会完全按照 ant-pro 中的来，这时进行请求前后的数据处理就很有必要了。处理方法是在 request 中加入中间件或者拦截器进行处理，二者根据需求选用一个即可，使用方法见：中间件。

       暂时就想到这么多，先总结出来，以后有机会用到的话再继续补充吧。

       附录：Ant-Design-Pro 项目大致结构和依赖：

       （完）

ant design vue pro admin菜单如果是外链，点击新标签页打开

       在Ant Design Vue Pro中，实现菜单项点击后在新标签页打开外部链接，需要在配置菜单时指定链接（href）并设置特定属性来控制打开方式。假设您是在使用ProLayout组件进行菜单配置，并且某个菜单项是一个外部链接。

       以下是菜单数据示例：const menuData = [{ name: '外部链接', icon: 'external-link', // 图标（可选） href: '', // 外部链接地址 target: '_blank', // 添加这个属性表示在新标签页打开 }];

       在HTML标准中，target="_blank"属性会让链接在新的浏览器窗口或标签页中打开。当您将此属性应用到菜单项的href属性上时，点击该菜单就会在新标签页中打开指定的外部链接。

       在JSX中，您可以根据上述逻辑编写一个返回元素的函数或直接在组件渲染方法中处理。以下是一个示例：

       import { Link } from 'vue-router'; // 或者是您项目中实际使用的路由Link组件 function renderItem(item) { const meta = Object.assign({ }, item.meta); const target = meta.target || null; const hasRemoteUrl = /^http(s)?:\/\//.test(item.path); // 假设httpReg是匹配http/https的正则表达式 let CustomTag; let attrs; if (hasRemoteUrl || target) { CustomTag = 'a'; attrs = { href: item.path, target: target || '_blank', // 如果target为null，则默认新标签页打开 }; } else { CustomTag = Link; props = { to: { name: item.name } }; } return ( { /* 这里放置菜单项的内容 */} { item.name} ); } // 在需要渲染菜单的地方使用 return (

{ menuData.map(item => ( { renderItem(item)} ))} );

       请注意，在Vue Router的组件并不会接受href属性，而是通过to属性来指定目标路由。当判断条件为内部链接时，我们使用a标签并设置to属性；否则，我们使用原生a标签并设置href属性。同时，为了确保外部链接能在新标签页打开，我们在目标（target）属性上做了相应处理。

Ant Design of Vue pro 安装与配置

       欢迎来到Ant Design of Vue pro的安装与配置教程！今天，我们将一起探索如何快速设置并使用这套专为Vue框架打造的中后台管理系统前端集成组件库。

       让我们从基础开始，Ant Design of Vue pro为开发者提供了一套美观且规范化的UI组件库，助力快速构建专业级的后台界面。但要注意，初期Ant Design仅提供React版本，对Vue开发者来说，这可能是一个挑战。然而，随着Vue的日益流行，Ant Design也适时推出了Vue版本，即Ant Design of Vue，为Vue开发者提供了便捷的解决方案。

       1. 下载与安装

       首先，我们需要从Git或Gitee获取Ant Design of Vue pro的源代码。如果网络不佳，使用Gitee是一个不错的选择。解压下载的文件后，我们会在目录中找到项目结构。

       接下步，使用yarn或npm安装项目依赖。yarn是一个强大的包管理工具，具备离线下载和性能优化功能，而npm是Node.js的标准包管理器。你可以通过全局安装yarn并运行相关命令来完成依赖安装。

       如果在从Git仓库克隆项目时遇到问题，只需确保创建本地仓库并重新提交代码，以解决可能的冲突。

       项目安装完成后，访问运行地址（例如：http://localhost:），登录页面将自动展示。首次登录时，账号信息通常已配置好，具体信息请参考项目文档或代码。

       2. 配置线上访问的域名

       在实现初步项目搭建后，我们需要对内置的mock进行调整，以适应线上开发环境。具体操作如下：

       在`main.js`文件中，注释掉mock相关代码，然后在`vue.config.js`文件中配置代理域名，以实现前端与后端服务器的交互。例如，将本地端口代理到服务器的端口，确保前后端接口能正常调用。

       此外，Ant Design Vue pro已经封装了前端token管理，从登录接口自动获取token并存储，用于后续请求中携带，实现对用户身份的验证。

       3. 前端自定义配置

       为了满足个性化需求，Ant Design Vue pro提供了多种布局选项与自定义功能。

       通过修改`src/layouts/BasicLayout.js`文件，我们可以调整左侧菜单与顶部导航栏的固定状态，利用pro-layout组件实现布局自定义。

       关闭严格模式，同样在`vue.config.js`文件中进行配置，确保项目在重启后生效。

       为了实现自定义主题颜色，我们需要在`vue.config.js`文件中进行相应的配置。这样，项目启动时便能自动应用所选主题色，为界面增添个性化的视觉风格。

       至此，Ant Design of Vue pro的安装与配置教程告一段落。通过上述步骤，你将能够快速搭建并定制一套符合专业标准的后台管理系统，为项目开发提速增效。