AntDesignPro开发手册

AntDesignPro开发手册修订历史记录日期版本说明作者目录1.前言1.1目的让不熟悉AntDesignPro的开发人员快速掌握开发方式1.2概述AntDesignPro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成：ES2015+JavaScript语言的新标准React用于构建用户界面的JAVASCRIPT库dva是基于(redux（状态管理）+react-router（路由库）+redux-saga（异步中间件）等)的一层轻量封装g2一套基于可视化编码的图形语法antdReact组件2.开发环境2.1Node.js安装配置Node.js安装包及源码下载地址为：安装方式2.2.1直接clonegit仓库gitclone--depth=1使用集成化的命令行工具ant-design-pro-cli。npminstallant-design-pro-cli-g#安装脚手架mkdirmy-projectcdmy-projectpronew#创建一个新项目2.3目录结构├──mock#本地模拟数据├──public#公共资源│└──favicon.ico#网站图标├──src│├──assets#本地静态资源│├──common#应用公用配置，如导航信息│├──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安装依赖npminstall2.4.2启动应用npmstart2.4.3打包npmrunbuild该命令会生成*.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/HostOperation/HostMonitor.jsimportReact,{PureComponent,Fragment}from'react';import{connect}from'dva';import{Row,Col,Card,Form,Input,Select,Icon,Button,Dropdown,Menu,InputNumber,DatePicker,Modal,message,Badge,Divider,Steps,Radio}from'antd';importStandardTablefrom'../../components/StandardTable';importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';importstylesfrom'./HostMonitor.less';constFormItem=Form.Item;constgetValue=obj=Object.keys(obj).map(key=obj[key]).join(',');//和'hostMonitor'建立连接，进行页面的数据交互@connect(({hostMonitor,loading})=({hostMonitor,loading:loading.effects['hostMonitor/getMonitorList']}))//创建form对象，固定写法@Form.create()exportdefaultclassHostMonitorextendsPureComponent{state={modalVisible:false,updateModalVisible:false,expandForm:false,selectedRows:[],formValues:{},stepFormValues:{},};//渲染页面完成后执行componentDidMount(){const{dispatch}=this.props;dispatch({type:'hostMonitor/getMonitorList',});}//表格表头定义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_group.net',}];//表格发生操作时执行函数handleStandardTableChange=(pagination,filtersArg,sorter)={const{dispatch}=this.props;const{formValues}=this.state;constfilters=Object.keys(filtersArg).reduce((obj,key)={constnewObj={...obj};newObj[key]=getValue(filtersArg[key]);returnnewObj;},{});varparams={currentPage:pagination.current,pageSize:pagination.pageSize,};if(sorter.field){params.sorter=`${sorter.field}_${sorter.order}`;}dispatch({type:'hostMonitor/getMonitorList',payload:params,});}//操作重置按钮时执行函数handleFormReset=()={const{form,dispatch}=this.props;form.resetFields();this.setState({formValues:{},});dispatch({type:'hostMonitor/getMonitorList',payload:{},});}//查询条件展开/收起toggleForm=()={this.setState({expandForm:!this.state.expandForm,});}//选择行handleSelectRows=(rows)={this.setState({selectedRows:rows,});}//操作查询按钮handleSearch=(e)={e.preventDefault();const{dispatch,form}=this.props;form.validateFields((err,fieldsValue)={if(err)return;constvalues={...fieldsValue,updatedAt:fieldsValue.updatedAt&&fieldsValue.updatedAt.valueOf(),};this.setState({formValues:values,});dispatch({type:'hostMonitor/getMonitorList',payload:values,});});}//显示/隐藏模态窗口!!flag：将flag强转为布尔类型handleModalVisible=(flag)={this.setState({modalVisible:!!flag,});}//显示/隐藏模态窗口handleUpdateModalVisible=(flag,record)={this.setState({updateModalVisible:!!flag,stepFormValues:record||{},});}//查询条件表单renderSimpleForm(){const{getFieldDecorator}=this.props.form;return(FormonSubmit={this.handleSearch}layout=inlineRowgutter={{md:8,lg:24,xl:48}}Colmd={8}sm={24}FormItemlabel=主机IP{getFieldDecorator('hostIp')(Inputplaceholder=请输入IP地址/)}/FormItem/ColColmd={8}sm={24}spanclassName={styles.submitButtons}Buttontype=primaryhtmlType=submit查询/ButtonButtonstyle={{marginLeft:8}}onClick={this.handleFormReset}重置/Button/span/Col/Row/Form);}//选择默认的查询条件表单renderForm(){returnthis.renderSimpleForm();}//渲染页面render(){const{hostMonitor:{data},loading}=this.props;constnewdata=data?data:{list:[],pagination:{},};const{selectedRows,modalVisible,updateModalVisible,stepFormValues}=this.state;return(PageHeaderLayouttitle=主机监控列表Cardbordered={false}divclassName={styles.tableList}divclassName={styles.tableListForm}{this.renderForm()}/divStandardTableselectedRows={selectedRows}loading={loading}data={newdata}columns={this.columns}onSelectRow={this.handleSelectRows}onChange={this.handleStandardTableChange}//div/Card/PageHeaderLayout);}}3.3.3.2页面样式文件src/routes/HostOperation/HostMonitor.less3.3.4新建一个数据模型3.3.4.1新建model文件：src\models\hostMonitor.js