1、AntDesignPro 開發(fā)手修訂歷史記錄日期版本說(shuō)明作者目錄1 .刖日1.1 日的讓不熟悉Ant Design Pro的開發(fā)人員快速掌握開發(fā)方式1.2 概述Ant Design Pro 是一個(gè)前端設(shè)計(jì)解決方案,由螞蟻金服體驗(yàn)技術(shù)部出品/維護(hù).核心技術(shù)組成：ES2022+ JavaScript 語(yǔ)言的新標(biāo)準(zhǔn)React用于構(gòu)建用戶界面的 JAVASCRIPT庫(kù)dva 是基于redux 狀態(tài)治理+ react-router 路由庫(kù) + redux-saga 異步中間件等的一層輕量封裝g2 一套基于可視化編碼的圖形語(yǔ)法antd React 組件2 .開發(fā)環(huán)境2.1 Node.js安裝配置Node.

2、js安裝包及源碼下載地址為:2.2 安裝方式安裝腳手架cd my-project npm install ant-design-pro-cli -g # mkdir my-project cd my-project pro new #創(chuàng)立一個(gè)新工程2.3 目錄結(jié)構(gòu)mock#本地模擬數(shù)據(jù)public#公共資源favicon.ico#網(wǎng)站圖標(biāo)1-srcassets#本地靜態(tài)資源common#應(yīng)用公用配置,如導(dǎo)航信息components#業(yè)務(wù)通用組件e2e#集成測(cè)試用例layouts#通用布局models#數(shù)據(jù)交互routes#業(yè)務(wù)頁(yè)面入口和常用模板services#后臺(tái)接口效勞utils#工具庫(kù)g

3、2.js#可視化圖形配置theme.js#主題配置index.ejs# HTML 入口模板index.js#應(yīng)用入口index.less#全局樣式router.js#路由入口tests#測(cè)試工具README.md#工程說(shuō)明package.json#工程配置文件2.4 工程初始化npm installnpm startnpm run build等靜態(tài)文件該命令會(huì)生成 *.js 、*.css、index.html3 .開發(fā)指導(dǎo)3.1 開發(fā)標(biāo)準(zhǔn)3.2 開發(fā)流程示意圖3.3 開發(fā)實(shí)例3.3.1 新建一個(gè)菜單菜單配置文件src/common/menu.js ,在menuData 里添加菜單配置,數(shù)據(jù)格式

4、為 json 格式,詳細(xì)配置請(qǐng)參照下列圖3.3.2 新建一個(gè)路由配置路由配置文件src/common/router.js ,在routerCon巾g 里添加路由配置,數(shù)據(jù)格式為json 格式,詳細(xì)配置請(qǐng)參照下列圖3.3.3 新建一個(gè)路由頁(yè)面頁(yè)面元素文件 src/routes/HostOperation/HostMonitor.jsselectedRows:, formValues: , stepFormValues: , ； /渲染頁(yè)面完成后執(zhí)行 componentDidMount () const dispatch = this .props;dispatch ( type: 'ho

5、stMonitor/getMonitorList',); /表格表頭定義 columns =title:'觸發(fā)器',dataIndex:'description' ,title:'主機(jī)名稱',dataIndex:'name',title:'主機(jī) IP',dataIndex:'host_ip' ,title:'系統(tǒng)運(yùn)行時(shí)間,dataIndex:'t',title:'操作系統(tǒng)',dataIndex:'host_group.os' , tit

6、le:'所屬系統(tǒng)',dataIndex:'host_group.system' , title:網(wǎng)絡(luò)區(qū)域,dataIndex:'host_' , ; /表格發(fā)生操作時(shí)執(zhí)行函數(shù) handleStandardTableChange = ( pagination , filtersArg , sorter ) => const dispatch HBUHHHHconst formValues = this .state;const filters = Object . keys (filtersArg). reduce ( obj , key)

7、=> const newObj = . obj ;newObjkey = getValue (filtersArgkey);return newObj;, );var params = currentPage: pagination.current, pageSize: pagination.pageSize, ;if (sorter.field) params.sorter = ' $ sorter.field _$ sorter.order ' dispatch (type: 'hostMonitor/getMonitorList',payload:

8、params, );/操作重置按鈕時(shí)執(zhí)行函數(shù) handleFormReset = ()=> const form, dispatch = this .props;form. resetFields ();this . setState ( formValues: , );dispatch (type: 'hostMonitor/getMonitorList',payload: , );/查詢條件展開/收起 toggleForm = ()=> this . setState ( expandForm: ! this .state.expandForm,);/選擇行ha

9、ndleSelectRows = ( rows ) => this . setState ( selectedRows: rows, );/操作查詢按鈕handleSearch = ( e) => e. preventDefault ();const dispatch, form = this .props;form. validateFields ( err , fieldsValue ) => if (err) return ; const values = . fieldsValue, updatedAt: fieldsValue.updatedAt&&

10、 fieldsValue.updatedAt.; this . setState ( formValues: values,valueOf (),);dispatch (type: 'hostMonitor/getMonitorList' payload: values, );); /顯示/隱藏模態(tài)窗口 !flag handleModalVisible =(:將flag強(qiáng)轉(zhuǎn)為布爾類型 flag ) => this . setState ( modalVisible:! flag,);/顯示/隱藏模態(tài)窗口 handleUpdateModalVisible this . se

11、tState ( updateModalVisible:!stepFormValues: record );/查詢條件表單 renderSimpleForm () const getFieldDecorator =(flag , record ) => flag,| ,=this .props.form;return (<Form onSubmit = this .handleSearch layout ="inline" ><Row gutter = md: 8, lg: 24, xl: 48 ><Col md= 8 sm= 24 &g

12、t;<FormItem label ="主機(jī) IP" >getFieldDecorator ('hostIp')(<Input placeholder="請(qǐng)輸入 IP 地址"/>)</ FormItem ></ Col ><Col md= 8 sm= 24 ><span className = styles.submitButtons ><Button="submit" >查詢 </ Button >3.3.4新建一個(gè)數(shù)據(jù)模型srcmodelshostMonitor.js3.3.5新建一個(gè)模擬請(qǐng)求數(shù)據(jù)返回srcservicestran