8A版AntDesignPro开发手册Word文件下载.docx

1、public #公共资源favicon.ico#网站图标srcassets#本地静态资源common#应用公用配置，如导航信息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安装

2、依赖npminstall2.4.2启动应用npmstart2.4.3打包npmrunbuild该命令会生成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

3、.1页面元素文件src/routes/HostOperation/HostMonitor.jsimportReact,PureComponent,Fragmentfromreact;importconnectfromdvaimportRow,Col,Card,Form,Input,Select,Icon,Button,Dropdown,Menu,InputNumber,DatePicker,Modal,message,Badge,Divider,Steps,RadiofromantdimportStandardTablefrom././components/StandardTableimpor

4、tPageHeaderLayoutfrom././layouts/PageHeaderLayoutimportstylesfrom./HostMonitor.lessconstFormItem=Form.Item;constgetValue=obj=Object.keys（obj）.map（key=objkey）.join（,）;/和hostMonitor建立连接，进行页面的数据交互connect（hostMonitor,loading）=（hostMonitor,loading:loading.effectshostMonitor/getMonitorList）/创建form对象，固定写法F

5、orm.create（）eGportdefaultclassHostMonitoreGtendsPureComponentstate=modalVisible:false,updateModalVisible:eGpandForm:selectedRows:,formValues:,stepFormValues:;/渲染页面完成后执行componentDidMount（）constdispatch=this.props;dispatch（type:,）;/表格表头定义columns=title:触发器dataIndeG:description,主机名称name主机IPhost_ip系统运行时间

6、t操作系统host_group.os所属系统host_group.system网络区域host_;/表格发生操作时执行函数handleStandardTableChange=（pagination,filtersArg,sorter）=constformValues=this.state;constfilters=Object.keys（filtersArg）.reduce（obj,key）=constnewObj=.obj;newObjkey=getValue（filtersArgkey）;returnnewObj;,）;varparams=currentPage:pagination.cu

7、rrent,pageSize:pagination.pageSize,if（sorter.field）params.sorter=$sorter.field_$sorter.order;payload:params,/操作重置按钮时执行函数handleFormReset=（）=constform,dispatch=this.props;form.resetFields（）;this.setState（/查询条件展开/收起toggleForm=（）=!this.state.eGpandForm,/选择行handleSelectRows=（rows）=rows,/操作查询按钮handleSearc

8、h=（e）=e.preventDefault（）;constdispatch,form=this.props;form.validateFields（err,fieldsValue）=if（err）return;constvalues=.fieldsValue,updatedAt:fieldsValue.updatedAt&fieldsValue.updatedAt.valueOf（）,values,/显示/隐藏模态窗口!flag：将flag强转为布尔类型handleModalVisible=（flag）=flag,/显示/隐藏模态窗口handleUpdateModalVisible=（fla

9、g,record）=record|,/查询条件表单renderSimpleForm（）constgetFieldDecorator=this.props.form;return（Rowgutter=md:8,lg:24,Gl:48Colmd=8sm=24FormItemlabel=主机IPgetFieldDecorator（hostIp）（Inputplaceholder=请输入IP地址/）/FormItem/ColspanclassName=styles.submitButtonsButtontype=primaryhtmlType=submit查询Buttonstyle=marginLef

10、t:8onClick=this.handleFormReset重置/Row/Form/选择默认的查询条件表单renderForm（）returnthis.renderSimpleForm（）;/渲染页面render（）consthostMonitor:data,loading=this.props;constnewdata=data?data:list:pagination:constselectedRows,modalVisible,updateModalVisible,stepFormValues=this.state;PageHeaderLayouttitle=主机监控列表Cardbor

11、dered=falsedivclassName=styles.tableListdivclassName=styles.tableListFormthis.renderForm（）/divStandardTableselectedRows=selectedRowsloading=loadingdata=newdatacolumns=this.columnsonSelectRow=this.handleSelectRowsonChange=this.handleStandardTableChange/Card/PageHeaderLayout3.3.3.2页面样式文件src/routes/Hos

12、tOperation/HostMonitor.less3.3.4新建一个数据模型3.3.4.1新建model文件：srcmodelshostMonitor.jsimportgetMonitorListfrom./services/transeGportdefault/model命名空间，唯一的namespace:/初始化状态数据state:/定义发送请求的功能方法effects:GgetMonitorList（payload,call,put）constresponse=yieldcall（getMonitorList,payload）;constresp=response?response:

13、;yieldput（queryListresp?resp:/更新页面状态及数据reducers:queryList（state,action）return.state,action.payload.data,3.3.5新建一个模拟请求数据返回3.3.5.1新建service文件：srcservicestrans.jsimportstringifyfromqsimportrequestfrom./utils/request/GGG获取主机列表数据GparamGparamsG/这里定义的方法是由model调用的eGportasyncfunctiongetMonitorList（params）con

14、sole.error（getMonitorList.console.error（params）;/这里的地址是一个模拟地址，在.roadhogrc.mock.js里定义，数据会返回modelreturnrequest（/trans/operation/monitor?$stringify（params）,method:POSTbody:POST/trans/operation/monitor:（req,res）=res.send（status:okgetMonitorListeGportconstgetMonitorList=dataSource,total:dataSource.length

15、,10,current:13.3.6新建一个真实请求数据返回3.3.6.1新建service文件：/这里的地址是一个真实地址，数据会返回modelhttp:/127.0.0.1:3000/get_monitor_list3.4编码规范5.在线资源5.1官方文档：5.1.1AngDesignPro代码地址5.1.2AngDesignPro文档/pro.ant.design/docs/getting-started-cn5.1.3AngDesignPro在线问题讨论5.1.4AngDesign在线文档/ant.design/5.1.5国内镜像站点/ant-design-pro.gitee.io/indeG-cn/ant-design.gitee.io/docs/react/introduce-cn5.2在线预览：/preview.pro.ant.design/#/dashboard/analysis6.需要完善的功能6.1用户登录信息6.2动态菜单和路由.