首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialValue: data.name.value, rules: [{ required: true, message: '请输入项目名称' }], })(<Input />)} 这是由于redux本就是支持全局缓存值,因此直接用即可 另外,分步表单用componentWillUnmount,会导致返回上

一.概述 参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进行简单的配置. 二.开发步骤 2.1.新增js.less文件 在 src/routes 下新建页面的NewPage.js 及 NewPage.less 文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件. 样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 ant

Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAuthority(str) { // return localStorage.getItem('antd-pro-authority') || ['admin', 'user']; const authorityString = typeof str === 'undefined' ? localSto

一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作.下面将简单介绍和服务端交互的基本写法. 二.详细介绍 2.1.前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的

一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性. 2.2.css modules 在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面

一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs.com/freely/p/10874297.html   Ant Design Pro 是一套开箱即用的中台前端/设计解决方案,是一个开发 中后台 系统的 脚手架.类似 vue-cli 一样,创建项目后,各种webpack配置.路由配置等,都已经弄好,直接开发就可以了. 2.Ant Design

本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意,同时也能通过小Demo提升学习信心. 一.Ant Design Pro简介 Ant Design Pro是一个开箱即用的中台前端/设计解决方案. Ant Design Pro官网地址:https://pro.ant.design/index-cn GitHub源码下载地址为:

一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何页面,可以由路由引导到预设的 404 页面. 代码控制跳转到报错页面,比如根据请求返回的数据,将没有权限的用户引导到 403 页面. 2.1.2.实现 针对页面级的报错,我们提供了两个业务组件供你选择,可以很方便地实现一个报错页面: Exception 异常页 <Exception type="

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run build 由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js.***.css.index.

一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框架结构,往往会包含导航.页脚.侧边栏.通知栏以及内容等.在页面之中,也有很多区块的布局结构.Ant Design 目前提供了两套布局方案:Layout 和 Grid . 二.布局 2.1.根据不同场景区分抽离布局组件 在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通

一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含components目录等等.每次在新建项目时,手动创建这些固定的文件目录.脚手架的作用就是帮助你完成这些重复性的工作,包括一键生成主要的目录结构.安装依赖等等. 1.2.参考地址 ant design参看地址:https://ant.design/docs/react/intr

发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount() { this.fetchListCallback(); } fetchListCallback = () => { const { limit, offset } = this.state; const { dispatch } = this.props; dispatch({ type: 'b

在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功能. 目录结构浅谈 首先,我们来简单了解一下整个项目的目录结构及其中每个文件的功能. 一个完整的目录结构如下:  其中,关于业务功能的代码都在src文件夹下. 而src中本身又包含着很多的子文件夹. 其中,我们最常用的应该了routes,services,models以及components. 下面

1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单配置icon,ant design pro有一些通用的icon图标,可以在上面配置路由的时候在每个路由处都加上 icon:'iconname' 即可,这是最简单的方法. 配置了路由以后再给它配置相关的语言预设即可,在这里我只配置了中文和英文. 这样页面上的菜单就会有相应的配置了. 2.使用mock模拟后台数

脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-project 项目的目录结构: config umi配置,包含路由,构建等配置 mock 本地模拟数据 public favicon Favicon src assets 本地静态资源 components 业务通用组件 e2e 集成测试用例 layouts 通用布局 models 全局 dva model

一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是纯粹的数据流,用作状态管理 使用React技术栈管理大型复杂的应用往往要使用Redux来管理应用的状态,然而随着深度使用,Redux也暴露出了一些问题.dva 是一种改良Redux的架构方案,是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装

1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架.而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架  . ant design pro官方文档:https://pro.ant.design/docs/getting-started-cn 2.安装 默认你本地已安装好node和git环境 $ gi

Ant Design Pro 路由传值 了解Ant Design Pro组件间通讯原理的小伙伴肯定都知道,两个页面之间可以通过Models进行传值,在以往的传值过程中,我都是直接将需要的值直接一股脑的传给两一个界面: // 修改影像 handelUpdate = obj => { const { dispatch } = this.props; dispatch({ type: 'video/editDetail', payload: { id: obj.id, title: obj.title

Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant Design官方文档 先来看需求是怎样的,以及实现的效果 需求:管理某个场馆中的活动,可以对这个场馆进行加入活动和移出活动. 如图,初始进入到这个页面后,韵苑体育馆中有两个活动:活动1.活动5,其余活动在右边的框中(不属于该场馆).选中右边框中的活动,可以进行移入操作.选中左边的活动,可以进行移出活

ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant-design/ant-design-pro Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』