1、8A版AntDesignPro开发手册AntDesignPro开发手册修订历史记录日期版本说明作者目录1. 前言1.1目的让不熟悉AntDesignPro的开发人员快速掌握开发方式1.2概述AntDesignPro是一个前端设计解决方案,由蚂蚁金服体验技术部出品/维护。核心技术组成: ES2015+JavaScript语言的新标准 React用于构建用户界面的JAVASCRIPT库 dva是基于(reduG(状态管理)+react-router(路由库)+reduG-saga(异步中间件)等)的一层轻量封装 g2一套基于可视化编码的图形语法 antdReact组件2. 开发环境2.1Node.
2、js安装配置Node.js安装包及源码下载地址为:https:/nodejs.org/en/download/2.2安装方式2.2.1直接clonegit仓库git clone -depth=1 my-projectcdmy-project2.2.2使用集成化的命令行工具ant-design-pro-cli。npminstallant-design-pro-cli-g#安装脚手架mkdirmy-projectcdmy-projectpronew#创建一个新项目2.3目录结构mock#本地模拟数据public #公共资源favicon.ico#网站图标srcassets#本地静态资源common
3、#应用公用配置,如导航信息components#业务通用组件e2e#集成测试用例layouts#通用布局models#数据交互routes#业务页面入口和常用模板services#后台接口服务utils#工具库g2.js#可视化图形配置theme.js#主题配置indeG.ejs#HTML入口模板indeG.js#应用入口indeG.less#全局样式router.js#路由入口tests#测试工具README.md #项目说明package.json#项目配置文件2.4项目初始化2.4.1安装依赖npminstall2.4.2启动应用npmstart2.4.3打包npmrunbuild该命令
4、会生成G.js、G.css、indeG.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.jsimp
5、ortReact,PureComponent,Fragmentfromreact;importconnectfromdva;importRow,Col,Card,Form,Input,Select,Icon,Button,Dropdown,Menu,InputNumber,DatePicker,Modal,message,Badge,Divider,Steps,Radiofromantd;importStandardTablefrom././components/StandardTable;importPageHeaderLayoutfrom././layouts/PageHeaderLayo
6、ut;importstylesfrom./HostMonitor.less;constFormItem=Form.Item;constgetValue=obj=Object.keys(obj).map(key=objkey).join(,);/和hostMonitor建立连接,进行页面的数据交互connect(hostMonitor,loading)=(hostMonitor,loading:loading.effectshostMonitor/getMonitorList)/创建form对象,固定写法Form.create()eGportdefaultclassHostMonitoreGte
7、ndsPureComponentstate=modalVisible:false,updateModalVisible:false,eGpandForm:false,selectedRows:,formValues:,stepFormValues:,;/渲染页面完成后执行componentDidMount()constdispatch=this.props;dispatch(type:hostMonitor/getMonitorList,);/表格表头定义columns=title:触发器,dataIndeG:description,title:主机名称,dataIndeG:name,titl
8、e:主机IP,dataIndeG:host_ip,title:系统运行时间,dataIndeG:t,title:操作系统,dataIndeG:host_group.os,title:所属系统,dataIndeG:host_group.system,title:网络区域,dataIndeG:host_,;/表格发生操作时执行函数handleStandardTableChange=(pagination,filtersArg,sorter)=constdispatch=this.props;constformValues=this.state;constfilters=Object.keys(fi
9、ltersArg).reduce(obj,key)=constnewObj=.obj;newObjkey=getValue(filtersArgkey);returnnewObj;,);varparams=currentPage:pagination.current,pageSize:pagination.pageSize,;if(sorter.field)params.sorter=$sorter.field_$sorter.order;dispatch(type:hostMonitor/getMonitorList,payload:params,);/操作重置按钮时执行函数handleFo
10、rmReset=()=constform,dispatch=this.props;form.resetFields();this.setState(formValues:,);dispatch(type:hostMonitor/getMonitorList,payload:,);/查询条件展开/收起toggleForm=()=this.setState(eGpandForm:!this.state.eGpandForm,);/选择行handleSelectRows=(rows)=this.setState(selectedRows:rows,);/操作查询按钮handleSearch=(e)=
11、e.preventDefault();constdispatch,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:
12、将flag强转为布尔类型handleModalVisible=(flag)=this.setState(modalVisible:!flag,);/显示/隐藏模态窗口handleUpdateModalVisible=(flag,record)=this.setState(updateModalVisible:!flag,stepFormValues:record|,);/查询条件表单renderSimpleForm()constgetFieldDecorator=this.props.form;return(getFieldDecorator(hostIp)()查询重置);/选择默认的查询条件
13、表单renderForm()returnthis.renderSimpleForm();/渲染页面render()consthostMonitor:data,loading=this.props;constnewdata=data?data:list:,pagination:,;constselectedRows,modalVisible,updateModalVisible,stepFormValues=this.state;return(this.renderForm();3.3.3.2页面样式文件src/routes/HostOperation/HostMonitor.less3.3.4
14、新建一个数据模型3.3.4.1新建model文件:srcmodelshostMonitor.jsimportgetMonitorListfrom./services/trans;eGportdefault/model命名空间,唯一的namespace:hostMonitor,/初始化状态数据state:data:list:,pagination:,/定义发送请求的功能方法effects:GgetMonitorList(payload,call,put)constresponse=yieldcall(getMonitorList,payload);constresp=response?respo
15、nse:;yieldput(type:queryList,payload:resp?resp:,);,/更新页面状态及数据reducers:queryList(state,action)return.state,data:action.payload.data,;,;3.3.5新建一个模拟请求数据返回3.3.5.1新建service文件:srcservicestrans.jsimportstringifyfromqs;importrequestfrom./utils/request;/GGG获取主机列表数据GparamGparamsG/这里定义的方法是由model调用的eGportasyncf
16、unctiongetMonitorList(params)console.error(getMonitorList.);console.error(params);/这里的地址是一个模拟地址,在.roadhogrc.mock.js里定义,数据会返回modelreturnrequest(/trans/operation/monitor?$stringify(params),method:POST,body:params,);POST/trans/operation/monitor:(req,res)=res.send(status:ok,data:getMonitorList);,eGportc
17、onstgetMonitorList=list:dataSource,pagination:total:dataSource.length,pageSize:10,current:1eGportdefaultgetMonitorList;3.3.6新建一个真实请求数据返回3.3.6.1新建service文件:srcservicestrans.jsimportstringifyfromqs;importrequestfrom./utils/request;/GGG获取主机列表数据GparamGparamsG/这里定义的方法是由model调用的eGportasyncfunctiongetMonit
18、orList(params)console.error(getMonitorList.);console.error(params);/这里的地址是一个真实地址,数据会返回modelreturnrequest(http:/127.0.0.1:3000/get_monitor_list,method:POST,body:params,);3.4编码规范5.在线资源5.1官方文档:5.1.1AngDesignPro代码地址5.1.2AngDesignPro文档https:/pro.ant.design/docs/getting-started-cn5.1.3AngDesignPro在线问题讨论5.1.4AngDesign在线文档https:/ant.design/5.1.5国内镜像站点http:/ant-design-pro.gitee.io/indeG-cnhttp:/ant-design.gitee.io/docs/react/introduce-cn5.2在线预览:https:/preview.pro.ant.design/#/dashboard/analysis6.需要完善的功能6.1用户登录信息6.2动态菜单和路由.
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1