AntDesignPro开发手册精编版

1、最新资料推荐1AntDesignPro开发手册修订历史记录最新资料推荐2日期版本说明作者最新资料推荐3目录最新资料推荐1.4、八最新资料推荐1.5前言最新资料推荐61.1目的让不熟悉 Ant Design Pro的开发人员快速掌握开发方式1.2概述An t Desig n Pro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护核心技术组成：ES2015+ JavaScript 语言的新标准React 用于构建用户界面的 JAVASCRIPT 库dva 是基于（redux （状态管理） + react-router （路由库） + redux-saga步中间件）等）的一层轻量封装g2 一

2、套基于可视化编码的图形语法antd React 组件2.开发环境2.1 Node.js安装配置Node.js 安装包及源码下载地址为：/en/download/（异最新资料推荐72.2安装方式2.2.1 直接 clone git 仓库最新资料推荐8git clone -depth=1https:/github.eom/a nt-desig n/an t-desig n-pro.gitmy-projectcd my-project2.2.2 使用集成化的命令行工具ant-design-pro-cli。npm in stall an t-desig n-pro-c

3、li -g # 安装脚手架mkdir my-projectcd my-projectpro new #创建一个新项目2.3目录结构#本地模拟数据#公共资源#网站图标#本地静态资源#应用公用配置，如导航信息#业务通用组件#集成测试用例#通用布局#数据交互#业务页面入口和常用模板#后台接口服务#工具库#可视化图形配置#主题配置# HTML 入口模板#应用入口#全局样式#路由入口I-ockI-ublic1-avicon.icoI-rcI-ssetsI-ommonI-omponentsI-2eI-ayoutsI-odelsI-outesI-ervicesI-tilsI2.jsI-heme.jsI-nd

4、ex.ejsI-ndex.jsI-ndex .l ess1-outer.jsI-estsIEADME.md1ackage.json最新资料推荐9#测试工具#项目说明#项目配置文件2.4项目初始化2.4.1 安装依赖npm install2.4.2 启动应用npm start2.4.3 打包npm run build该命令会生成 *.js、 *.css、 index.html 等静态文件3.开发指导3.1开发规范3.2开发流程示意图最新资料推荐10Ant Design Po开发帝程示意图开始菜单(menu.js)3.3开发实例3.3.1 新建一个菜单 编辑菜单配置文件 src/co

5、mmon/menu.js，在 menuData 里添加菜单配置，数据格式为 json格式，详细配置请参照下图J5 menu jsXconst inenuData - name;菜单中文容称如：主机运维 Jis”：、字悴團拆害称从圏标列表中迭择）jiD：table path:菜单路径 注意这块命名使用英文或者字母，不要饱用中文尽量拿菜单功能命害JO：hostOperationchildren: 匸级来单中文名称如监控 Sicon:字体图标名琢C飒團标列表中选援path;二级菜单脸径（注意这块命名使用英文或者宇母，不亜使用中文，尽量莹菜单功能命名 如；rnonitor） children：三绑三单

6、rtawie:三级菜单中文容称如：主机监控 Jicon： 字体團标名称（从團标列表中选择）P*h:三级菜单路径（注彦这块弗窖使用英文或者字母，不慕便用中文丄尽虽釜菜单功能命名如；hostMcnitai） *，2018.03路由(router.js)贡面(routes)flg(models)4 ,数据请(service)备注：*功能开发时推荐便用模拟数1剧馍式*功能联调时推荐使用真实数阔模式真实数据（server）最新资料推荐11；12.最新资料推荐.IconFont国际部分国毓截園红色区域为ignli性的取值范围”藍色区域也可以做取值范围”注育要去掉.isn-stepforwardstepba

7、ckwardforwardbandcwardcaretrightcaretieftcaretdown.icon-.icon-.icon-forward.icon-.icon-cairetright.icon-caretieft.icon-cairetdownstepforwardstepbackwardbanckward3.3.2 新建一个路由配置 路由配置文件 src/common/router.js，在 routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图JSrauterjs xt :pL const getfiouterOata = (opp)

8、=卫const routerC口n*ig-/hostOperatlon/flnitar/hostMoniton: component: dynairiicWraippr(appJ|lphostMonitor f() ITr (/routes/HostOperatian/HostMonitar * js ) )Jh/红鱼区域菲呦格式的参数为一条菜单项对应的路由”关系为一对一H VliostOperatiort/monitor/hostHonitop这个梦数和menu .js里的pm 5属性要对应上/ hoitMonitor当前菜单imhostMonifr model使用权限H import(./

9、routes/HostOperation/HostUcnitor.js H弋表当前柔里项对应的页面地址89813.3.3 新建一个路由页面页面元素文件 src/routes/HostOperatio n/HostMo ni tor.js13最新资料推荐14/和hostMo nitor建立连接，进行页面的数据交互onnect (hostMonitor, loading)= (hostM on itor,loadi ng: loadi ng.effectshostM on itor/getM on itorList) /创建 form 对象，固定写法Form.create ()export def

10、ault classHostMonitorextends PureComponent state = modalVisible:false ,updateModalVisible:false ,expa ndForm: false , selectedRows:, formValues: , stepFormValues: ,;/渲染页面完成后执行comp onen tDidM ount () const dispatch = this .props;dispatch (type:hostMo nitor/getMo nitorList);/表格表头定义colu mns =title:触发器，

11、data Index:descripti on,title:主机名称，data Index:name,title: 主机 IP,data Index:host_ip,title:系统运行时间，data Index:t,title:操作系统，data Index:host_group.os,title:所属系统，最新资料推荐15data Index:host_group.system,title:网络区域，data Index:host_group .n et, ;/表格发生操作时执行函数handleStandardTableChange= ( pagination, filtersArg ,

12、sorter ) = const dispatch = this .props;const formValues = this .state;const filters = Object . keys (filtersArg). reduce ( obj , key) = const n ewObj = . obj ;newObjkey = getValue (filtersArgkey);return n ewObj;, );var params = curre ntPage: pagi natio n. curre nt,pageSize: pagi natio n.pageSize,;i

13、f (sorter.field) params.sorter = $ sorter.field _$ sorter.order ;dispatch (type:hostMo nitor/getMo nitorList,payload: params,); /操作重置按钮时执行函数han dleFormReset= ()= const form, dispatch = this .props;form. resetFields ();this . setState (formValues: ,);dispatch (type:hostMo nitor/getMo nitorList,payloa

14、d: , );最新资料推荐16/查询条件展开/收起toggleForm = ()= this . setState (expandForm:! this .state.expandForm,)； /选择行handleSelectRows = ( rows ) = this . setState (selectedRows: rows,); /操作查询按钮handleSearch = ( e) = e. preventDefault ();form. validateFields ( err , fieldsValue ) = if (err) return ;const values = .

15、fieldsValue,updatedAt: fieldsValue.updatedAt& fieldsValue.updatedAt.valueOf (),;this . setState ( formValues: values, );dispatch (type:hostMo nitor/getMo nitorListpayload: values,););/显示/隐藏模态窗口 !flag :将 flag强转为布尔类型handleModalVisible= ( flag ) = this . setState ( modalVisible:! flag,);/显示/隐藏模态窗口h

16、an dleUpdateModalVisible=(flagrecord ) = this . setState (updateModalVisible:! flag,stepFormValues: recordII ,); /查询条件表单ren derSimpleForm () const getFieldDecorator = this .props.form;const dispatch, form =this .props;最新资料推荐17return (getFieldDecorator (hostIp)() 查询 重置 ); /选择默认的查询条件表单ren derForm () r

17、eturn this . renderSimpleForm ();/渲染页面render () const hostMonitor:data ,loading constnewdata = data ?data : list:,pagi nati on: ,=this .props;const selectedRows, modalVisible, updateModalVisible, stepFormValues =this .state;最新资料推荐183.332 页面样式文件 src/routes/HostOperation/HostMonitor.less3.3.4 新建一个数据模型

18、99149aab%509-Numbered_58807d02-9617-4b56-b557-63662afd2e7新建 model 文件：srcmodelshostMonitor.js最新资料推荐19最新资料推荐203.3.5 新建一个模拟请求数据返回 新建 service 文件：srcservicestrans.js最新资料推荐213.3.6 新建一个真实请求数据返回 新建 service 文件：srcservicestrans.js最新资料推荐223.4编码规范 挀挀 攀 愀愀 戀攀昀 一甀洀戀攀爀攀搀开戀愀 挀 戀昀 搀挀攀愀昀昀在线资源5.1官方文档：An gDesig nPro 代码地址https:/github.eom/a nt-desig n/an t-desig n-proAn gDesig nPro 文档https:/pro.a nt.desig n/docs/gett in g-started-e nAn gDesig nPro 在线问题讨论https:/github.eom/a nt-desig n/an t-d