AntDesignPro开发手册

1、AntDesignPro开发手册修订历史记录日期版本说明作者目录1. 前言1.1目的让不熟悉Ant Design Pro 的开发人员快速掌握开发方式1.2概述Ant Design Pro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成：² ES2015+ JavaScript语言的新标准² React 用于构建用户界面的 JAVASCRIPT 库² dva 是基于(redux（状态管理） + react-router（路由库） + redux-saga（异步中间件） 等)的一层轻量封装² g2 一套基于可视化编码的图形语法²

2、 antd React组件2. 开发环境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 # 创建一个新项目2.3 目录结构 mock # 本地模拟数据

3、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 #

4、 测试工具 README.md # 项目说明 package.json # 项目配置文件2.4 项目初始化2.4.1安装依赖npm install2.4.2启动应用npm start2.4.3打包npm run build该命令会生成 *.js、*.css、index.html 等静态文件3. 开发指导3.1开发规范3.2 开发流程示意图3.3 开发实例3.3.1 新建一个菜单编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图3.3.2 新建一个路由配置路由配置文件src/common/router.

5、js，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图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'建立连接，进行页面的数据交互connect( hostMonitor,loading ) => (hostMonitor,loading: loading.effects'hostMonitor/getMonitorList')/ 创建form对象，固定写法Form.create()export default class HostMonitor extends PureComponent state = modalVisible:

8、 false,updateModalVisible: false,expandForm: false,selectedRows: ,formValues: ,stepFormValues: ,;/ 渲染页面完成后执行componentDidMount() const dispatch = ps;dispatch(type: 'hostMonitor/getMonitorList',);/表格表头定义columns = title: '触发器',dataIndex: 'description',title: '主机名称

9、9;,dataIndex: 'name',title: '主机IP',dataIndex: 'host_ip',title: '系统运行时间',dataIndex: 't',title: '操作系统',dataIndex: 'host_group.os',title: '所属系统',dataIndex: 'host_group.system',title: '网络区域',dataIndex: 'host_',;/ 表格发

10、生操作时执行函数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,);/ 操作重置按钮时执行函数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,););/显示/隐藏模态窗口 !flag：将fla

14、g强转为布尔类型handleModalVisible = (flag) => this.setState(modalVisible: !flag,);/显示/隐藏模态窗口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="主机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>);/选择默认的查询条件表单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="主机监控列表"><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 新建一个数据模型新建model文件：srcmodelshostMonitor.jsimport getMonitorList from './services/trans'export default / model命名空间，唯一的namespace: 'hostMonitor',/ 初始化状态数据state: data: list: ,pagination: ,/ 定义发送请求的功能方法effects: *getMonitor

20、List( payload , call, put ) const response = yield call(getMonitorList, payload);const resp = response?response:;yield put(type: 'queryList',payload: resp ? resp : ,);,/ 更新页面状态及数据reducers: queryList(state, action) return .state,data: action.payload.data,;,;3.3.5 新建一个模拟请求数据返回新建service文

21、件：srcservicestrans.jsimport stringify from 'qs'import request from './utils/request'/* 获取主机列表数据* param * params */这里定义的方法是由model调用的export async function getMonitorList(params) console.error('getMonitorList.');console.error(params);/ 这里的地址是一个模拟地址，在.roadhogrc.mock.js里定义，数据会返回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