《AntDesignPro开发手册》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册（20页珍藏版）》请在金锄头文库上搜索。
1、AntDesignPro开发手册修订历史记录日期版本说明作者目录1. 前言1.1 目的让不熟悉 Ant Design Pro的开发人员快速掌握开发方式1.2 概述Ant Design Pro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/ 维护。核心技术组成：ES2015+ JavaScript语言的新标准React 用于构建用户界面的JAVASCRIPT 库dva 是基于 (redux （状态管理）+ react-router（路由库） + redux-saga（异步中间件）等)的一层轻量封装g2 一套基于可视化编码的图形语法antd React组件2. 开发环境2.1 Node.js安装
2、配置Node.js安装包及源码下载地址为：https:/nodejs.org/en/download/2.2 安装方式2.2.1 直接 clone git仓库gitclone-depth=1https:/ my-project2.2.2 使用集成化的命令行工具ant-design-pro-cli。npm install ant-design-pro-cli -g #安装脚手架mkdir my-projectcd my-projectpro new# 创建一个新项目2.3 目录结构mock#本地模拟数据public#公共资源favicon.ico#网站图标srcassets#本地静态资源comm
3、on#应用公用配置，如导航信息components#业务通用组件e2e# 集成测试用例layouts#通用布局models#数据交互routes#业务页面入口和常用模板services#后台接口服务utils#工具库g2.js#可视化图形配置theme.js# 主题配置index.ejs# HTML 入口模板index.js# 应用入口index.less# 全局样式router.js#路由入口tests# 测试工具README.md# 项目说明package.json# 项目配置文件2.4 项目初始化2.4.1安装依赖npm install2.4.2启动应用npm start2.4.3打包n
4、pm run build该命令会生成*.js 、 *.css、 index.html等静态文件3. 开发指导3.1 开发规范3.2 开发流程示意图3.3 开发实例3.3.1新建一个菜单3.3.1.1 编辑菜单配置文件src/common/menu.js，在 menuData里添加菜单配置， 数据格式为 json格式，详细配置请参照下图3.3.2新建一个路由配置3.3.2.1 路由配置文件 src/common/router.js，在 routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图3.3.3新建一个路由页面3.3.3.1 页面元素文件src/routes/Ho
5、stOperation/HostMonitor.jsimportReact, PureComponent, Fragment from react;import connect fromdva;import Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu,InputNumber, DatePicker, Modal, message, Badge, Divider, Steps, Radio from antd ;importStandardTablefrom ././components/StandardTa
6、ble;importPageHeaderLayoutfrom././layouts/PageHeaderLayout;importstylesfrom ./HostMonitor.less;constFormItem= Form.Item;constgetValue= obj=Object. keys (obj).map( key = objkey).join ( , );/ 和 hostMonitor建立连接，进行页面的数据交互connect(hostMonitor, loading)= (hostMonitor,loading: loading.effects hostMonitor/ge
7、tMonitorList )/ 创建 form 对象，固定写法Form.create()exportdefaultclassHostMonitorextends PureComponent state= modalVisible:false,updateModalVisible:false ,expandForm:false ,selectedRows: ,formValues: ,stepFormValues: ,;/ 渲染页面完成后执行componentDidMount() const dispatch = this.props;dispatch(type:hostMonitor/getM
8、onitorList);,/ 表格表头定义columns= title:触发器,dataIndex:description,title:主机名称 ,dataIndex:name,title:主机 IP ,dataIndex:host_ip,title:系统运行时间 ,dataIndex:t ,title:操作系统 ,dataIndex:host_group.os,title:所属系统 ,dataIndex:host_group.system,title:网络区域 ,dataIndex:host_,;/ 表格发生操作时执行函数handleStandardTableChange= (pagination, filtersArg,sorter) =const dispatch =this .props;const formValues =this .state;constfilters=Object. keys (filtersArg).reduce( obj,key )= constnewObj= .obj ;
