AntDesignPro開發(fā)手冊

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

2、 antd React組件2. 開發(fā)環(huán)境2.1 Node.js 安裝配置Node.js安裝包及源碼下載地址為：/en/download/2.2安裝方式2.2.1直接 clone git 倉庫git clone -depth=1 my-projectcd my-project2.2.2使用集成化的命令行工具 ant-design-pro-cli。npm install ant-design-pro-cli -g #安裝腳手架mkdir my-project cd my-projectpro new # 創(chuàng)建一個新項(xiàng)目2.3 目錄結(jié)構(gòu) mock # 本地模擬數(shù)據(jù)

3、public # 公共資源 favicon.ico # 網(wǎng)站圖標(biāo) src assets # 本地靜態(tài)資源 common # 應(yīng)用公用配置，如導(dǎo)航信息 components # 業(yè)務(wù)通用組件 e2e # 集成測試用例 layouts # 通用布局 models # 數(shù)據(jù)交互 routes # 業(yè)務(wù)頁面入口和常用模板 services # 后臺接口服務(wù) utils # 工具庫 g2.js # 可視化圖形配置 theme.js # 主題配置 index.ejs # HTML 入口模板 index.js # 應(yīng)用入口 index.less # 全局樣式 router.js # 路由入口 tests #

4、 測試工具 README.md # 項(xiàng)目說明 package.json # 項(xiàng)目配置文件2.4 項(xiàng)目初始化2.4.1安裝依賴npm install2.4.2啟動應(yīng)用npm start2.4.3打包npm run build該命令會生成 *.js、*.css、index.html 等靜態(tài)文件3. 開發(fā)指導(dǎo)3.1開發(fā)規(guī)范3.2 開發(fā)流程示意圖3.3 開發(fā)實(shí)例3.3.1 新建一個菜單編輯菜單配置文件src/common/menu.js，在menuData里添加菜單配置，數(shù)據(jù)格式為json格式，詳細(xì)配置請參照下圖3.3.2 新建一個路由配置路由配置文件src/common/router.

5、js，在routerConfig里添加路由配置，數(shù)據(jù)格式為json格式，詳細(xì)配置請參照下圖3.3.3 新建一個路由頁面頁面元素文件 src/routes/HostOperation/HostMonitor.jsimport React, PureComponent, Fragment from 'react'import connect from 'dva'import Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu,InputNumber, DatePicker, Modal,

6、 message, Badge, Divider, Steps, Radio from 'antd'import StandardTable from '././components/StandardTable'import PageHeaderLayout from '././layouts/PageHeaderLayout'import styles from './HostMonitor.less'const FormItem = Form.Item;const getValue = obj => Object.key

7、s(obj).map(key => objkey).join(',');/ 和'hostMonitor'建立連接，進(jìn)行頁面的數(shù)據(jù)交互connect( hostMonitor,loading ) => (hostMonitor,loading: loading.effects'hostMonitor/getMonitorList')/ 創(chuàng)建form對象，固定寫法Form.create()export default class HostMonitor extends PureComponent state = modalVisible:

8、 false,updateModalVisible: false,expandForm: false,selectedRows: ,formValues: ,stepFormValues: ,;/ 渲染頁面完成后執(zhí)行componentDidMount() const dispatch = ps;dispatch(type: 'hostMonitor/getMonitorList',);/表格表頭定義columns = title: '觸發(fā)器',dataIndex: 'description',title: '主機(jī)名稱

9、9;,dataIndex: 'name',title: '主機(jī)IP',dataIndex: 'host_ip',title: '系統(tǒng)運(yùn)行時間',dataIndex: 't',title: '操作系統(tǒng)',dataIndex: 'host_group.os',title: '所屬系統(tǒng)',dataIndex: 'host_group.system',title: '網(wǎng)絡(luò)區(qū)域',dataIndex: 'host_',;/ 表格發(fā)

10、生操作時執(zhí)行函數(shù)handleStandardTableChange = (pagination, filtersArg, sorter) => const dispatch = ps;const formValues = this.state;const filters = Object.keys(filtersArg).reduce(obj, key) => const newObj = .obj ;newObjkey = getValue(filtersArgkey);return newObj;, );var params = currentPage: pag

11、ination.current,pageSize: pagination.pageSize,;if (sorter.field) params.sorter = $sorter.field_$sorter.order;dispatch(type: 'hostMonitor/getMonitorList',payload: params,);/ 操作重置按鈕時執(zhí)行函數(shù)handleFormReset = () => const form, dispatch = ps;form.resetFields();this.setState(formValues: ,)

12、;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

13、.props;form.validateFields(err, fieldsValue) => if (err) return;const values = .fieldsValue,updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),;this.setState(formValues: values,);dispatch(type: 'hostMonitor/getMonitorList',payload: values,););/顯示/隱藏模態(tài)窗口 !flag：將fla

14、g強(qiáng)轉(zhuǎn)為布爾類型handleModalVisible = (flag) => this.setState(modalVisible: !flag,);/顯示/隱藏模態(tài)窗口handleUpdateModalVisible = (flag, record) => this.setState(updateModalVisible: !flag,stepFormValues: record | ,);/ 查詢條件表單renderSimpleForm() const getFieldDecorator = ps.form;return (<Form onSubmit=t

15、his.handleSearch layout="inline"><Row gutter= md: 8, lg: 24, xl: 48 ><Col md=8 sm=24><FormItem label="主機(jī)IP">getFieldDecorator('hostIp')(<Input placeholder="請輸入IP地址" />)</FormItem></Col><Col md=8 sm=24><span classNa

16、me=styles.submitButtons><Button type="primary" htmlType="submit">查詢</Button><Button style= marginLeft: 8 onClick=this.handleFormReset>重置</Button></span></Col></Row></Form>);/選擇默認(rèn)的查詢條件表單renderForm() return this.renderSimpleForm();

17、/渲染頁面render() const hostMonitor:data ,loading = ps;const newdata = data?data:list: ,pagination: ,;const selectedRows, modalVisible, updateModalVisible, stepFormValues = this.state;return (<PageHeaderLayout title="主機(jī)監(jiān)控列表"><Card bordered=false><div className=styles.tab

18、leList><div className=styles.tableListForm>this.renderForm()</div><StandardTableselectedRows=selectedRowsloading=loadingdata=newdatacolumns=this.columnsonSelectRow=this.handleSelectRowsonChange=this.handleStandardTableChange/></div></Card></PageHeaderLayout>);3

19、.3.3.2 頁面樣式文件 src/routes/HostOperation/HostMonitor.less3.3.4 新建一個數(shù)據(jù)模型新建model文件：srcmodelshostMonitor.jsimport getMonitorList from './services/trans'export default / model命名空間，唯一的namespace: 'hostMonitor',/ 初始化狀態(tài)數(shù)據(jù)state: data: list: ,pagination: ,/ 定義發(fā)送請求的功能方法effects: *getMonitor

20、List( payload , call, put ) const response = yield call(getMonitorList, payload);const resp = response?response:;yield put(type: 'queryList',payload: resp ? resp : ,);,/ 更新頁面狀態(tài)及數(shù)據(jù)reducers: queryList(state, action) return .state,data: action.payload.data,;,;3.3.5 新建一個模擬請求數(shù)據(jù)返回新建service文

21、件：srcservicestrans.jsimport stringify from 'qs'import request from './utils/request'/* 獲取主機(jī)列表數(shù)據(jù)* param * params */這里定義的方法是由model調(diào)用的export async function getMonitorList(params) console.error('getMonitorList.');console.error(params);/ 這里的地址是一個模擬地址，在.roadhogrc.mock.js里定義，數(shù)據(jù)會返回modelreturn request('/trans/operation/monitor?$stringify(params)', method: 'POST',body: params,);'POST /trans/operation/monitor': (req, res) => res.send(status: 'ok',data: getMonitorList);,export const getMonitorList = list: dataSourc