1、AntDesignPro 开发手册修订历史记录日期 版本 说明 作者目录1. 前言1.1 目的让不熟悉 Ant Design Pro 的开发人员快速掌握开发方式1.2 概述Ant Design Pro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成： ES2015+ JavaScript 语言的新标准 React 用于构建用户界面的 JAVASCRIPT 库 dva 是基于(redux（状态管理） + react-router（路由库） + redux-saga（异步中间件） 等)的一层轻量封装 g2 一套基于可视化编码的图形语法 antd React 组件2. 开发环境
2、2.1 Node.js 安装配置Node.js 安装包及源码下载地址为：https:/nodejs.org/en/download/2.2 安装方式2.2.1 直接 clone git 仓库git clone -depth=1 https:/ 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 # 本地模拟数据 public #
3、 公共资源 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 # 测试工具 RE
4、ADME.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 新建一个菜单3.3.1.1 编辑菜单配置文件 src/common/menu.js，在 menuData 里添加菜单配置，数据格式为json 格式，详细配置请参照下图3.3.2 新建一个路由配置3.3.2.1 路由配置文件 src/comm
5、on/router.js，在 routerConfig 里添加路由配置，数据格式为json 格式，详细配置请参照下图3.3.3 新建一个路由页面3.3.3.1 页面元素文件 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, Mod
6、al, 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.keys(obj).map(key = objkey).join(,);/ 和h
7、ostMonitor 建立连接，进行页面的数据交互connect( hostMonitor,loading ) = (hostMonitor,loading: loading.effectshostMonitor/getMonitorList)/ 创建 form对象，固定写法Form.create()export default class HostMonitor extends PureComponent state = modalVisible: false,updateModalVisible: false,expandForm: false,selectedRows: ,formVal
8、ues: ,stepFormValues: ,;/ 渲染 页面完成后 执行componentDidMount() const dispatch = this.props;dispatch(type: hostMonitor/getMonitorList,);/表格表 头定 义columns = title: 触发器,dataIndex: description,title: 主机名称,dataIndex: name,title: 主机 IP,dataIndex: host_ip,title: 系统运行时间,dataIndex: t,title: 操作系统,dataIndex: host_gro
9、up.os,title: 所属系统,dataIndex: host_group.system,title: 网络区域,dataIndex: host_,;/ 表格 发生操作 时执行函数handleStandardTableChange = (pagination, filtersArg, sorter) = const dispatch = this.props;const formValues = this.state;const filters = Object.keys(filtersArg).reduce(obj, key) = const newObj = .obj ;newObjk
10、ey = 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: params,);/ 操作重置按钮时执行函数handleFormReset = () = const form, dispatc
11、h = this.props;form.resetFields();this.setState(formValues: ,);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.props;form.validateFields(err, fieldsValue) = if (err) return;const values = .fieldsValue,updatedAt: fieldsValue.updatedAt this.setState(formValues: values,);dispatch(type: hostMonitor/getMonitorList,payload: values,);
